91在线免费看-91在线免费观看网站-91在线免费观看-91在线免费公开视频-91在线免费播放-91在线麻豆

一個(gè)基于jquery庫(kù)的點(diǎn)擊加載更多實(shí)現(xiàn)（可在一個(gè)頁(yè)面實(shí)現(xiàn)多個(gè)）
1.引入jquery庫(kù)，文件包中有
2.頁(yè)面中的js函數(shù)
<script type="text/javascript">
var page = [1,1,1,1,1,1,1];//定義每個(gè)點(diǎn)擊加載按鈕的初始頁(yè)碼
function showImr(v_clmid,v_id,v_begin,v_number,v_iwords,v_iitwords){
//參數(shù)依次表示：要獲取后臺(tái)文章的id；在頁(yè)面中點(diǎn)擊按鈕的id（與前面的page數(shù)組的下標(biāo)對(duì)應(yīng)）；獲取文章開始的條數(shù)；每次獲取的條數(shù)；標(biāo)題字符寬度；摘要字符寬度。
var url = '/getImr.action';
var params = {
clmid:v_clmid,
begin:v_begin,
page:page[v_id],
number:v_number,
iwords:v_iwords,
iitwords:v_iitwords
};
$('#loaddiv'+v_id).show();
$('#loader'+v_id).hide();
jQuery.post(url, params,function(data){
$('#cntnr'+v_id).append(data);
$('#loaddiv'+v_id).hide();
$('#loader'+v_id).show();
page[v_id]+=1;
});
}
</script>

3.按鈕的點(diǎn)擊實(shí)現(xiàn)：
css：
.clickaction {
background-color: #EFEFEF;
color: #BBB;
display: block;
height: 34px;
line-height: 34px;
text-decoration: none;
font-size: 12px;
border-radius: 3px;
text-align: center;
clear: both;
cursor:pointer;
}
.loaddiv{
width:40px;
height:40px;
background: url(/images/load.gif) center no-repeat;
display:none;
}
第一個(gè)點(diǎn)擊加載更多按鈕：

<ul id="cntnr0">  //這個(gè)地方的id后面的數(shù)字表示第幾個(gè)按鈕，第一個(gè)從0開始
<li>……</li>
<li>……</li>
</ul>
<div id="loaddiv0" class="loaddiv"></div>
<div id="loader0" class="clickaction"  onclick="showImr('28',0,6,5,51,80);">點(diǎn)擊加載更多</div>
第二個(gè)點(diǎn)擊加載更多按鈕：
<ul id="cntnr1">  //這個(gè)地方的id后面的數(shù)字表示第幾個(gè)按鈕，第一個(gè)從0開始
<li>……</li>
<li>……</li>
</ul>
<div id="loaddiv1" class="loaddiv"></div>
<div id="loader1" class="clickaction"  onclick="showImr('28',1,6,5,51,80);">點(diǎn)擊加載更多</div>
第三個(gè)，第四個(gè)依次類推，修改id="cntnr1"，id="loaddiv1"，id="loader1"，onclick="showImr('28',1  中的1為2即可。

4.java端的實(shí)現(xiàn)：
/getImr.action端實(shí)現(xiàn)輸出li對(duì)即可。
pageBegin的計(jì)算方式：begin+(page-1)*number
pageEnd的計(jì)算方式：begin+page*number-1
sql中按照大于等于pageBegin，小于等于pageEnd的方式計(jì)算。

5.實(shí)現(xiàn)之后的效果圖
 

如圖，點(diǎn)擊后會(huì)出現(xiàn)load的圖片，內(nèi)容加載完畢后load圖片自動(dòng)取消。