文本/链接
点击显示隐藏更多文字内容jQuery插件
PetitQ
这是一款 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>',
}});
Github 网址：https://github.com/WahaWaher/morecontent-js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
