附:jquery.more.js插件内容

jQuery .net により、より多くのコンテンツの閲覧が可能になります (php バージョンを適応)_jquery

WBOY
リリース: 2016-05-16 17:39:01
オリジナル
1429 人が閲覧しました

PHP バージョンからの改作、原文:
jQuery PHP 実装 他のコンテンツを参照 http://www.helloweba.com/view-blog-130.html
.net での実装はここに記録されています
1. まずデータベース テーブル test を作成し、テスト データを挿入します :

コードをコピーします コードは次のとおりです

go
if names (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;
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


2. HTML ファイルを作成します
コードをコピー コードは次のとおりです:


< ;head>


="text/javascript">
$ (function () {
$('#more').more({ 'address': 'ajax/data.ashx' }) //ここがアドレスですバックグラウンドからリクエストされました
});
< ;/script>
詳細
{
margin: 10px auto; 🎜>width: 560px;
border: 1px 実線
}
.single_item
{
border-bottom: 1px 点線 }
.author
{
位置: 絶対;
フォントの太さ: 太字;
; createOn
{
位置: 絶対;
色: #999;
}
{
行の高さ: 20px; 🎜>単語区切り:
}
.element_head
{
幅: 100%;
高さ: 20px; 🎜>.get_more
{
マージン: 10px ;
text-align: center;
.more_loader_spinner
{
幅: 20px; ;
マージン: 10px 自動;
背景: url(loader.gif) 繰り返しなし;
;

">







::クリックしてさらにコンテンツを読み込みます::< /a>



3. 一般的な処理プログラム data.ashx を作成します。 🎜>




コードをコピー


コードは次のとおりです:


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

using System.Web;
using Microsoft.Practices.EnterpriseLibrary.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 } および rowNum<={1}", last, last amount); System.Data.DataTable dt = db.ExecuteDataSet(System.Data.CommandType.Text,sql).Tables[0];


附:jquery.more.js插件内容
复制代代コード如下:

(function( $ ){
var target = null;
var template = null;
var lock = false;
var 変数 = {
'last' : 0
}
var settings = {
'amount' : '10',
'address' : '',
'format' : 'json',
'テンプレート' : '.single_item'、
'トリガー' : '.get_more'、
'スクロール' : 'false'、
'オフセット' : '100'、
' Spinner_code': ''
}

varmessages = {
init : function(options){
return this.each(function(){

if(options) ){
$.extend(設定, オプション);
}
テンプレート = $(this).children(settings.template).wrap('
').parent() ;
template.css('display','none')
$(this).append('
' settings.spinner_code '
')
$(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');
}
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)) >= ターゲット.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);
},
削除 : function(){
target.children(settings.trigger).unbind('.more');
target.unbind('.more')
target.children(settings.trigger).remove();
},
add_elements : function(data){
//alert('要素の追加')

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))

} )


}
elsemessages.remove()
target.children('.more_loader_spinner').css('display','none');
if(counter < settings.amount)methods.remove()

},
get_data : function(){
//alert('データの取得')
varイル。
ロック = 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 メソッド[メソッド ].apply(this, Array.prototype.slice.call( argument, 1 )) ;
else if(typeof method == 'object' || !method)
returnmethods.init.apply(this, argument);
else $.error('メソッド ' メソッド ' は存在しません!');

}
})(jQuery)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート