點選載入更多內容

基本原理：

頁面載入時，向後台請求資料，php通過查詢資料庫將最新的幾條記錄顯示在列表頁，在列表頁的底部有個「更多」鏈結，通過觸發該鏈結，向服務端傳送ajax請求，後台php程式得到請求引數，並作出相應，獲取資料庫相應的記錄並以json的形式返回給前台頁面，前台頁面jquery解析json資料，並將資料追加到列表頁。其實就是ajax分頁效果。

1.引入jquery庫和jquery.more.js外掛程式，jquery.more.js已經將許多功能都封裝好了，並提供了引數配置的功能。

和jquery.more.js外掛程式關聯的，你也可以取另外的class名字，但是在配置的時候一定要將對應的class寫上。

js

$(function())

});

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