jQuery+.net实现浏览更多内容(改编php版本)_Javascript教程-查字典教程网
jQuery+.net实现浏览更多内容(改编php版本)
jQuery+.net实现浏览更多内容(改编php版本)
发布时间:2017-01-14 来源:查字典编辑
摘要:改编自php版本,原文:jQuery+PHP实现浏览更多内容http://www.helloweba.com/view-blog-130.h...

改编自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>

<div>

<div>

</div>

<div>

</div>

</div>

<div>

</div>

</div>

<a href="javascript:;">::点击加载更多内容::</a>

</div>

</body>

</html>

三、建立一个一般处理程序data.ashx

复制代码 代码如下:

<%@ WebHandler Language="C#" %>

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.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>'+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教程学习
    编程开发子分类