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

最新推荐文章于 2019-03-10 22:23:25 发布

gdjlc

最新推荐文章于 2019-03-10 22:23:25 发布

阅读量2.3k

点赞数

分类专栏： ASP.NET jQuery 文章标签： jquery .net function class scroll

本文链接：https://blog.csdn.net/gdjlc/article/details/6595048

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

gdjlc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jQuery+.net实现浏览更多内容

改编自php版本，原文：jQuery+PHP实现浏览更多内容http://www.helloweba.com/view-blog-130.html这里记录.net 下的实现一、首先创建数据库表test，并插入一些测试数据：goif exists (select * from sysobjects where name='test')drop table [test]go
复制链接

扫一扫

专栏目录