jQuery+.net实现浏览更多内容

这篇博客介绍了如何在.NET环境下使用jQuery实现浏览更多内容的功能。首先,文章提到了数据库表test的创建和填充测试数据。接着,重点讲述了通过jQuery的.more.js插件进行内容加载的步骤,提供了一个简单的初始化示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


----------------------------------------------

2016.08.23 备注:

----------------------------------------------
上面只能显示普通的文本字段,假设json数据源为:[{"ImgPath":"images/1.jpg"}]用<span class="ImgPath"></span>显示的结果为<span class="ImgPath">images/1.jpg</span>,怎么自动转化为<img src="images/1.jpg" />呢?经过一翻测试,终于找到解决方法,在jquery.more.js中增加一个参数imgFields数组,如果json数组源的列在这个数组出现,则自动加上img标签等。
1、修改jquery.more.js代码为:
<pre name="code" class="javascript">(function ($) {
            var target = null;
            var template = null;
            var lock = false;
            var variables = {
                'last': 0
            }
            var settings = {
                'amount': '10',
                'address': 'comments.php',
                'format': 'json',
                'template': '.single_item',
                'trigger': '.get_more',
                'scroll': 'false',
                'offset': '100',
                'spinner_code': '',
                'imgFields': []//图片路径字段设为<img src='路径'/>
            }

            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;
                    var containImgFields = false;//是否包含图片字段
                    if (data) {
                        $(data).each(function () {
                            counter++
                            var t = template
                            $.each(this, function (key, value) {
                                if (t.find('.' + key)) {
                                    for (var i = 0; i < settings.imgFields.length; i++) {
                                        if (key == settings.imgFields[i]) {
                                            containImgFields = true;
                                            continue;
                                        }
                                    }
                                    if (containImgFields){
                                        t.find('.' + key).html("<img src='" + value + "'/>");
                                        containImgFields = false;
                                    }else{
                                        t.find('.' + key).html(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)


2、使用

$(function () {        $('#more').more({ 'address': 'GetDataList', 'imgFields': ['ImgPath'] });  });

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值