jQuery+.net实现浏览更多内容(改编php版本)
改编自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
<!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>
<%@ 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;
}
}
}
(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)
相关推荐
-
解决jquery版本冲突的有效方法
用过jQuery的朋友都知道jQuery不同版本会引发冲突,本文就此问题提出有效的解决方案如下: 案例:解决jQuery1.3.2和1.4.2的冲突.(本例已测试通过!) 第一步:在1.4.2的源代码的最后加上一句 : var $j4 = jQuery.noConflict(true); 之所以在源码这里加,而不是像大多数文章提的在要用到的时候加,这是因为很多基于1.4.2的插件都要加,在这里加可以避免过多插件加这句代码导致重复.这一句是将1.4.2的jQuery和$的引用权限全部放弃.也就是基
-
原生javascript和jquery判断浏览器版本等信息
复制代码 代码如下: <script type="text/javascript"> //jquery判断浏览器信息 $(function(){ var bro=$.browser;//获取浏览器用户代理信息; var bro_msie=bro.msie;//判断是否为ie浏览器,假如为ie浏览器就返回:true,否则返回:undefined; var bro_firefox=bro.mozilla;//判断是否为火狐浏览器:假如为火狐浏览器就返回:true,否则返回:un
-
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
尤其是在当今各种浏览器满天飞(据说仅以IE为内核的浏览器就有200种之多). 小弟今天写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery.browsertype-1.0.js) 复制代码 代码如下: /** * jQuery插件开发方法二:第一步:插件定义 */ jQuery.myPlugin = { //获得浏览器的内核与外壳的类型和版本 Clie
-
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
例如:1.0 => 1.0.0:1.1 => 1.1.0 1.增加jQuery版本提示: 2.增加event事件智能提示: 3.增加delegate和undelegate 智能提示 delegate('', 或undelegate('', 4.增加延迟对象智能提示Deferred()/deferred 5.增加了两个Beta版本 API link和unlink 6.xml文件中使用多个menugroup分组便于后期维护 -------------------------------------
-
jQuery多个版本和其他js库冲突的解决方法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery测试页</title> </head>
-
jQuery1.4.2与老版本json格式兼容的解决方法
原json文件内容为: { label: 'Europe (EU27)', data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] } 解决方法一: 改成标准的json格式,要求对字符串都使用""限定,修改后的内容为: { "label": "
-
jQuery+.net实现浏览更多内容(改编php版本)
改编自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)
-
php+ajax+jquery实现点击加载更多内容
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录
-
jQuery+PHP+ajax实现微博加载更多内容列表功能
在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作
-
jquery实现加载更多"转圈圈"效果(示例代码)
功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈 代码: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css画动态等待转圈效果</title> <link rel="stylesheet" href="public/ind
-
ThinkPHP+jquery实现“加载更多”功能代码
ThinkPHP+jQuery实现"加载更多" 在很多web端界面中都会用到点击按钮加载最新几条数据的demo,下例为使用thinkphp+jquery实现实例: 要实现的结果大致如下 第一步 模板文件 <!--软件--> <div class="lists switcher-panel switcher-panel-cur"> <ul class="xinhao"> {volist name="ap
-
jQuery操作动态生成的内容的方法
本文实例讲述了jQuery操作动态生成的内容的方法.分享给大家供大家参考,具体如下: 由于jQuery是页面一加载获取页面元素的,后期动态生成的元素,通过$("#xxxx")获取不到,需要用原始的js语句来获取: document.getElementById("xxx").value 对于动态生成的元素,bind绑定的事件 也无法触发,需要通过jQuery提供的另外一个方法 .live() 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()
-
jquery+json实现动态商品内容展示的方法
本文实例讲述了jquery+json实现动态商品内容展示的方法.分享给大家供大家参考,具体如下: <!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" xm
-
jquery form表单获取内容以及绑定数据
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(json); jquery.formHelp.js插件 /** * 将form里面的内容序列化成json * 相同的c
-
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: <body> <div class="clickme">Click here</div> &
-
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支