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 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 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 APP微信提现接口代码
2018/09/30 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
初婚未育证明样本
2015/06/18 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
原生JS中应该禁止出现的写法
2021/05/05 Javascript
MySQL 时间类型的选择
2021/06/05 MySQL