jQuery 显示加载更多

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function () {
var showMoreNChildren = function ($children, n) {
//显示某jquery元素下的前n个隐藏的子元素
var $hiddenChildren = $children.filter(":hidden");
var cnt = $hiddenChildren.length;
for (var i = 0; i < n && i < cnt ; i++) {
$hiddenChildren.eq(i).show();
}
return cnt - n;//返回还剩余的隐藏子元素的数量
}
jQuery.showMore = function (selector) {
if (selector == undefined) { selector = ".showMoreNChildren" }
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$(selector).each(function () {
var pagesize = $(this).attr("pagesize") || 10;
var $children = $(this).children();
if ($children.length > pagesize) {
for (var i = pagesize; i < $children.length; i++) {
$children.eq(i).hide();
}
$("<div class=‘showMorehandle‘ >显示更多</div>").insertAfter($(this)).click(function () {
if (showMoreNChildren($children, pagesize) <= 0) {
//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
$(this).hide();
};
});
}
});
}
})()
</script>
</head>
<body>
<ul class="showMoreNChildren" pagesize="5">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>m</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>m</li>
</ul>

<script type="text/javascript">
//调用显示更多插件。参数是标准的 jquery 选择符
$.showMore(".showMoreNChildren,.mynews");
</script>
</body>
</html>

时间： 2024-10-09 17:30:07

jQuery 显示加载更多

jQuery 显示加载更多的相关文章

jQuery 显示加载更多(节流) 实现预加载

jquery 显示“加载状态结束”

android:ScrollView滑动到底部显示加载更多

硅谷新闻6--下拉刷新/上拉加载更多

Android上拉加载更多ListView——PulmListView

Android之Socket通信、List加载更多、Spinner下拉列表

tableView 加载更多

【jquery ，ajax，php】加载更多实例

使用jquery.more.js上滑加载更多