网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个功能丰富的JavaScript库,能够隐藏长内容并用show more和show less链接替换溢出的内容。
特征:
将指定的字符数隐藏。
将HTML列表截断为指定数量的列表项。
将HTML表格截断为指定数量的记录(行)。
1. 在HTML文档中加载showMore.min.js文件。
<script src="showMore.min.js"></script>
2. 将长文本截断为多个字符。
<p class="demo-1" data-config="{ 'type': 'text', 'limit': 140, 'more': '→ show more', 'less': '← less' }">
Long Text Here
</p>
3. 截断较长的HTML列表。
<ul class="demo-2" data-config="{ 'type': 'list', 'limit': 140, 'element': 'li', 'more': '→ show more', 'less': '← less' }">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
...
</ul>
// hide the overflowing list items
.hidden {
display:none
}
4. 截断一个大的HTML表,并在切换按钮旁边显示数字。
<table class="demo-3" data-config="{ 'type': 'table', 'limit': 140, 'number': true, 'more': '→ show more', 'less': '← less' }">
Large HTML Table Here
</table>
// hide the overflowing table rows
.hidden {
display:none
}
5.自定义显示更多和显示更少按钮的样式。
.show-more, .show-less {
cursor: pointer;
color: #222;
}
6. 确定显示更多和更少显示按钮后要显示的内容数量。
<p class="demo-1" data-config="{ 'type': 'text', 'limit': 140, 'after': 50 }">
Long Text Here
</p>
7.您还可以通过JavaScript初始化插件。
new ShowMore('.demo-2', {
type: 'li',
more: '↓ show more',
less: '↑ less',
showNumber: true
})
转载请注明来源:js点击显示再点击隐藏表格、列表、文本更多内容插件
本文永久链接地址:https://www.moyouyouw.cn/code/1370.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论