php監(jiān)測數(shù)據(jù)是否成功插入到Mysql數(shù)據(jù)庫的方法
586
2024-01-10
本文實例講述了jQuery實現(xiàn)的自動加載頁面功能。分享給大家供大家參考,具體如下:
demo.html:
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>閱誰問君誦,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>+++++++++++++++</p></li>
scrollpagination.js:
(function( $ ){ $.fn.scrollPagination = function(options) { var opts = $.extend($.fn.scrollPagination.defaults, options); var target = opts.scrollTarget; if (target == null){ target = obj; } opts.scrollTarget = target; return this.each(function() { $.fn.scrollPagination.init($(this), opts); }); }; $.fn.stopScrollPagination = function(){ return this.each(function() { $(this).attr('scrollPagination', 'disabled'); }); }; $.fn.scrollPagination.loadContent = function(obj, opts){ var target = opts.scrollTarget; var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height(); if (mayLoadContent){ if (opts.beforeLoad != null){ opts.beforeLoad(); } $(obj).children().attr('rel', 'loaded'); $.ajax({ type: 'POST', url: opts.contentPage, data: opts.contentData, success: function(data){ $(obj).append(data); var objectsRendered = $(obj).children('[rel!=loaded]'); if (opts.afterLoad != null){ opts.afterLoad(objectsRendered); } }, dataType: 'html' }); } }; $.fn.scrollPagination.init = function(obj, opts){ var target = opts.scrollTarget; $(obj).attr('scrollPagination', 'enabled'); $(target).scroll(function(event){ if ($(obj).attr('scrollPagination') == 'enabled'){ $.fn.scrollPagination.loadContent(obj, opts); } else { event.stopPropagation(); } }); $.fn.scrollPagination.loadContent(obj, opts); }; $.fn.scrollPagination.defaults = { 'contentPage' : null, 'contentData' : {}, 'beforeLoad': null, 'afterLoad': null , 'scrollTarget': null, 'heightOffset': 0 }; })( jQuery );
index.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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://www.gimoo.net/t/1812/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1812/js/scrollpagination.js"></script> <script type="text/javascript"> $(function(){ $('#content').scrollPagination({ 'contentPage': 'demo.html', //你要搜索結果的頁面 'contentData': {},//你可以通過 children().size() 知道哪里是分頁 //誰該怎么滾動?在這個例子中,完整的窗口 'scrollTarget': $(window), //在頁面到達結束之前,從多少像素開始加載? 'heightOffset': 10, //前負荷,一些功能,可能顯示一個加載DIV 'beforeLoad': function(){ $('#loading').fadeIn(); }, 'afterLoad': function(elementsLoaded){ //加載后,一些功能的動畫結果和隱藏預載的div $('#loading').fadeOut(); var i = 0; $(elementsLoaded).fadeInWithDelay(); //如果超過100結果加載停止分頁(僅用于測試) if ($('#content').children().size() > 100){ $('#nomoreresults').fadeIn(); $('#content').stopScrollPagination(); } } }); //元件中的延遲元件的褪色代碼 $.fn.fadeInWithDelay = function(){ var delay = 0; return this.each(function(){ $(this).delay(delay).animate({opacity:1}, 200); delay += 100; }); }; }); </script> </head> <body> <div id="demo"> <div style="height:2000px;"></div> <ul id="content" style=" margin:0 auto; width:800px; color:#f60; background-color:eee;"> <li><p>內容開始</p></li> </ul> <div class="loading" id="loading">加載中</div> <div class="loading" id="nomoreresults">結束了</div> </div> </body> </html>
效果圖如下:
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業(yè)或者非法用途,否則,一切后果請用戶自負。本站信息來自網(wǎng)絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯(lián)系進行刪除處理。敬請諒解!