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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
判断ie的两种简单方法
Aug 12 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 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
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
javascript实现导航栏分页效果
2019/06/27 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python实现淘宝秒杀脚本
2020/06/23 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android