基本原理:
頁面載入時,向後台請求資料,php通過查詢資料庫將最新的幾條記錄顯示在列表頁,在列表頁的底部有個「更多」鏈結,通過觸發該鏈結,向服務端傳送ajax請求,後台php程式得到請求引數,並作出相應,獲取資料庫相應的記錄並以json的形式返回給前台頁面,前台頁面jquery解析json資料,並將資料追加到列表頁。其實就是ajax分頁效果。
1.引入jquery庫和jquery.more.js外掛程式,jquery.more.js已經將許多功能都封裝好了,並提供了引數配置的功能。
2 html結構
頁面裡面的 title digest updatatime對應資料裡面的屬性名,loadmore是
和jquery.more.js外掛程式關聯的,你也可以取另外的class名字,但是在配置的時候一定要將對應的class寫上。
js
$(function())php});
接收require_once('connect.php');
$last = $_post['last'];
$amount = $_post['amount'];
$user = array('demo1','demo2','demo3','demo3','demo4');
$query=mysql_query("select * from say order by id desc limit $last,$amount");
while ($row=mysql_fetch_array($query))
echo json_encode($saylist);
前台頁面提交過來的兩個引數,$_post['last']即開始記錄數,$_post['amount']即單次顯示記錄數,看sql語句就明白,其實就是分頁中用到的語句。
然後將查詢的結果以json格式輸出,php的任務就完成了。
最後來看下jquery.more.js的引數配置。
'amount' : '10', //每次顯示記錄數'address' : 'comments.php', //請求後台的位址
'format' : 'json', //資料傳輸格式
'template' : '.show-box', //html記錄div的class屬性
'trigger' : '.loadmore
', //觸發載入更多記錄的class屬性
'scroll' : 'false', //是否支援滾動觸發載入
'offset' : '100', //滾動觸發載入時的偏移量
jquery.more.js檔案
(function( $ )
var settings =
var methods =
template = $(this).children(settings.template).wrap('').parent();
template.css('display','none')
$(this).children(settings.template).remove()
target = $(this);
if(settings.scroll == 'false')
else
$(this).bind('scroll.more',methods.check_scroll);}})
},check_scroll : function()
},debug : function())
alert(debug_string);
},
remove : function(),
add_elements : function(data)else if (key == 'thumburl') else
})
'id', 'more_element_'+ (variables.last++))
if(settings.scroll == 'true')else
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()
$.post(settings.address, , function(data), settings.format)}};
$.fn.more = function(method)
})(jquery)
js點選更多顯示更多內容效果
我寫了乙個簡單的分段顯示外掛程式,用法很簡單 1,把你要分面顯示的內容的容器元素增加乙個class showmorenchildren,並增加乙個自定義屬性pagesize 8 這種 這個pagesizie有乙個預設值10。可以不寫 如 ul class showmorenchildren page...
下拉載入更多內容(滾動載入)
最近寫專案,要求實現滾動條滾動到底部的時候請求載入更多的資料。要實現此功能首先想到的就是scroll事件,經過查閱資料終於實現此功能,具體原理如下 首先需要給div加scroll事件,監聽滾動條滾動動作。滾動載入的原理 當滾動條的高度加上 滾動條到div頂部的高度 等於div的可滾動高度時,說明滾動...
jq頁面重新整理 點選載入更多資料
1 頁面載入重新整理一次 function fresh settimeout fresh 50 2 重新整理當前頁面 window.location.reload 3 重新整理父親物件 用於框架 parent.location.reload 4 重新整理父視窗物件 用於單開視窗 opener.loc...