相思资源网 Design By www.200059.com
改编自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="/UploadFiles/2021-04-02/jquery-1.4.4.min.js"><script src="js/jquery.more.js"><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)
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="/UploadFiles/2021-04-02/jquery-1.4.4.min.js"><script src="js/jquery.more.js"><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)
标签：
jQuery,浏览更多
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无jQuery+.net实现浏览更多内容(改编php版本)的评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？