jQuery+.net实现浏览更多内容(改编php版本)


Posted in Javascript onMarch 28, 2013

改编自php版本,原文:
jQuery+PHP实现浏览更多内容http://www.helloweba.com/view-blog-130.html
这里记录.net 下的实现
一、首先创建数据库表test,并插入一些测试数据

go 
if exists (select * from sysobjects where name='test') 
drop table [test] 
go 
CREATE TABLE [test]( 
[id] [int] IDENTITY(1,1), 
[author] [varchar](50), 
[content] [varchar](2000), 
[createOn] [datetime] 
) 
declare @index int; 
set @index = 1; 
while(@index < 1000) 
begin 
insert into test([author],[content],[createOn]) 
values 
('author' + cast(@index as varchar(4)),'content' + cast(@index as varchar(4)),DATEADD(DAY,@index,getdate())) 
set @index = @index + 1 
end 
go

二、建立一个html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="js/jquery.more.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#more').more({ 'address': 'ajax/data.ashx' }) //这里为向后台请求地址 
}); 
</script> 
<style type="text/css"> 
more 
{ 
margin: 10px auto; 
width: 560px; 
border: 1px solid #999; 
} 
.single_item 
{ 
padding: 20px; 
border-bottom: 1px dotted #d3d3d3; 
} 
.author 
{ 
position: absolute; 
left: 0px; 
font-weight: bold; 
color: #39f; 
} 
.createOn 
{ 
position: absolute; 
right: 0px; 
color: #999; 
} 
.content 
{ 
line-height: 20px; 
word-break: break-all; 
} 
.element_head 
{ 
width: 100%; 
position: relative; 
height: 20px; 
} 
.get_more 
{ 
margin: 10px; 
text-align: center; 
} 
.more_loader_spinner 
{ 
width: 20px; 
height: 20px; 
margin: 10px auto; 
background: url(loader.gif) no-repeat; 
} 
</style> 
</head> 
<body> 
<div id="more"> 
<div class="single_item"> 
<div class="element_head"> 
<div class="createOn"> 
</div> 
<div class="author"> 
</div> 
</div> 
<div class="content"> 
</div> 
</div> 
<a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
</div> 
</body> 
</html>

三、建立一个一般处理程序data.ashx
<%@ WebHandler Language="C#" Class="data" %> using System; 
using System.Web; 
using Microsoft.Practices.EnterpriseLibrary.Data; 
public class data : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
int last = Convert.ToInt32(context.Request.Params["last"]); //开始记录数 
int amount = Convert.ToInt32(context.Request.Params["amount"]); //单次显示记录数 
Database db = DatabaseFactory.CreateDatabase(); 
////这里日期字段createOn先格式一下,否则会生成类似这种格式/Date(1310292162507)/ 
string sql = string.Format("select id,author,content,convert(varchar(100), createOn, 120) createOn from ( select row_number() over (order by id) as rowNum,* from test) as t " 
+ " where rowNum>{0} and rowNum<={1}", last, last + amount); 
System.Data.DataTable dt = db.ExecuteDataSet(System.Data.CommandType.Text,sql).Tables[0]; 
context.Response.Write(JSONHelper.DataTableToJSON(dt)); //输出json格式 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

jQuery+.net实现浏览更多内容(改编php版本) 
附:jquery.more.js插件内容
(function( $ ){ 
var target = null; 
var template = null; 
var lock = false; 
var variables = { 
'last' : 0 
} 
var settings = { 
'amount' : '10', 
'address' : '', 
'format' : 'json', 
'template' : '.single_item', 
'trigger' : '.get_more', 
'scroll' : 'false', 
'offset' : '100', 
'spinner_code': '' 
} var methods = { 
init : function(options){ 
return this.each(function(){ 
if(options){ 
$.extend(settings, options); 
} 
template = $(this).children(settings.template).wrap('<div/>').parent(); 
template.css('display','none') 
$(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>') 
$(this).children(settings.template).remove() 
target = $(this); 
if(settings.scroll == 'false'){ 
$(this).find(settings.trigger).bind('click.more',methods.get_data); 
$(this).more('get_data'); 
} 
else{ 
if($(this).height() <= $(this).attr('scrollHeight')){ 
target.more('get_data',settings.amount*2); 
} 
$(this).bind('scroll.more',methods.check_scroll); 
} 
}) 
}, 
check_scroll : function(){ 
if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){ 
target.more('get_data'); 
} 
}, 
debug : function(){ 
var debug_string = ''; 
$.each(variables, function(k,v){ 
debug_string += k+' : '+v+'\n'; 
}) 
alert(debug_string); 
}, 
remove : function(){ 
target.children(settings.trigger).unbind('.more'); 
target.unbind('.more') 
target.children(settings.trigger).remove(); 
}, 
add_elements : function(data){ 
//alert('adding elements') 
var root = target 
// alert(root.attr('id')) 
var counter = 0; 
if(data){ 
$(data).each(function(){ 
counter++ 
var t = template 
$.each(this, function(key, value){ 
if(t.find('.'+key)) t.find('.'+key).text(value); 
}) 
//t.attr('id', 'more_element_'+ (variables.last++)) 
if(settings.scroll == 'true'){ 
// root.append(t.html()) 
root.children('.more_loader_spinner').before(t.html()) 
}else{ 
// alert('...') 
root.children(settings.trigger).before(t.html()) 
} 
root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1)) 
}) 

} 
else methods.remove() 
target.children('.more_loader_spinner').css('display','none'); 
if(counter < settings.amount) methods.remove() 
}, 
get_data : function(){ 
// alert('getting data') 
var ile; 
lock = true; 
target.children(".more_loader_spinner").css('display','block'); 
$(settings.trigger).css('display','none'); 
if(typeof(arguments[0]) == 'number') ile=arguments[0]; 
else { 
ile = settings.amount; 
} 
$.post(settings.address, { 
last : variables.last, 
amount : ile 
}, function(data){ 
$(settings.trigger).css('display','block') 
methods.add_elements(data) 
lock = false; 
}, settings.format) 
} 
}; 
$.fn.more = function(method){ 
if(methods[method]) 
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); 
else if(typeof method == 'object' || !method) 
return methods.init.apply(this, arguments); 
else $.error('Method ' + method +' does not exist!'); 
} 
})(jQuery)
Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
express express-session的使用小结
Dec 12 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 #Javascript
自定义jQuery选项卡插件实例
Mar 27 #Javascript
js数组的操作详解
Mar 27 #Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 #Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 #Javascript
JS删除数组元素的函数介绍
Mar 27 #Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 #Javascript
You might like
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python求导数的方法
2015/05/09 Python
Python编程入门的一些基本知识
2015/05/13 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python ellipsis 的用法详解
2020/11/20 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Python中生成ndarray实例讲解
2021/02/22 Python
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
室内设计自我鉴定
2013/10/15 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
美元符号 $
2022/02/17 杂记