js点击更多显示更多内容效果
2014-09-29 14:49
453 查看
我写了一个简单的分段显示插件,
用法很简单:
1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种
这个pagesizie有一个默认值10。可以不写
如
2,页面尾部引用这个插件js文件(在之前要先引入jquery)
<script type="text/javascript" src="js/jquery.showmorechildren.js"></script>
js代码如下
用法很简单:
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(); }; }); } }); })();
相关文章推荐
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- js实现二级菜单点击显示当前内容效果
- 原生JS实现点击按钮显示更多内容
- 表单提交到下一个页面后,再点击IE上的后退,如何能让表单内容再次显示出来?(以及当前页禁止IE返回按钮js)
- jquery教程:仿miqike.com首页"热门标签"层绝对定位 点击隐藏/点击显示JS效果
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- jquery实现点击查看更多内容控制段落文字展开折叠效果
- 一次和别人争吵一个按钮,点击后显示导航;再点击不显示的效果,是否一定以及必须用js?
- javascript html js仿LightBox内容显示效果,div覆盖层,锁定页面
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- ext4js 主页面布局,动态分配菜单,并点击url 显示到内容面板中
- 输入框点击内容清空或显示的js代码
- jquery实现点击查看更多内容控制段落文字展开折叠效果
- css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果
- TextView属性android:ellipsize实现跑马灯效果,TextView内容过长加省略号,点击显示全部内容
- 点击显示和隐藏层(js效果,IE FF均可)
- JS实现文章中显示内容字体 大 中 小 的显示效果
- ajax.js里面有内容显示效果,根据ID
- JS/jQuery实现默认显示部分文字点击按钮显示全部内容
- 一个窗口里包含一个iframe,点击iframe内的submit按钮,返回的视图总是显示在iframe中,我想要的效果是点击按钮后返回的视图是在浏览器窗口中...?asp.net mvc 的action中,不用js怎么实现??????????