您的位置：首页 > Web前端 > JavaScript

js点击按钮加载更多效果

2016-12-31 17:23 295 查看

单个列表效果

1，把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种

这个pagesizie有一个默认值10。可以不写
如

<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>
</ul>

2,页面尾部引用这个插件js文件(在之前要先引入jquery)

<script type="text/javascript" src="js/jquery.showmorechildren.js"></script>

js代码如下

(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;//返回还剩余的隐藏子元素的数量
}

//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$(".showMoreNChildren").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();
};
});
}
});
})();

显示更多这一条你可以自定义样式。

<div class='showMorehandle' >显示更多</div>

多个列表效果

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.showMore.js"></script>

</head>
<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>

<ul class="mynews" pagesize="4">
<li>news 11</li>
<li>news 12</li>
<li>news 13</li>
<li>news 14</li>
<li>news 21</li>
<li>news 22</li>
<li>news 23</li>
<li>news 24</li>
<li>news 31</li>
<li>news 32</li>
<li>news 33</li>
<li>news 34</li>
</ul>

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

jquery.showMore.js代码如下

(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();
};
});
}
});
}
})();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航