这是一款jQuery显示/隐藏更多文字内容插件。该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果。
使用方法
在页面中引入jquery和jquery.morecontent.js文件。
<script src="assets/js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.morecontent.js"></script>
HTML结构
页面的HTML结构如下。
<div class="example"> <p>这里是一段很长很长的文本......</p> </div>
JavaScript
在页面DOM元素加载完毕之后,通过moreContent()
方法来初始化该插件。
$('.example').moreContent();
配置参数
设置隐藏时显示文本的最大高度。默认为175。
$('.example').moreContent({ height: 200 });
设置触发内容隐藏/显示的事件,默认为click
。
$('.example').moreContent({ event: 'mouseover' });
设置是否使用阴影效果。
$('.example').moreContent({ shadow: true });
设置动画的缓动效果。
$('.example').moreContent({ easing: 'easeOutBounce' });
设置展开和收起时按钮上的文字。
$('.example').moreContent({ textClose: 'Show More', textOpen: 'Close' });
其它可用的配置参数有:
$('.example').moreContent({ useCss: true, speed: 250, tpl: { content: '<div class="mrc-content"></div>', contentWrap: '<div class="mrc-content-wrap"></div>', btn: '<button class="mrc-btn" type="button"></button>', btnWrap: '<div class="mrc-btn-wrap"></div>', controls: '<div class="mrc-controls"></div>', shadow: '<div class="mrc-shadow"></div>', } });
该jQuery显示/隐藏更多文字内容插件的github网址为:https://github.com/WahaWaher/morecontent-js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!