600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > html查看更多隐藏内容 jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js

html查看更多隐藏内容 jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js

时间:2019-11-16 01:39:30

相关推荐

html查看更多隐藏内容 jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js

插件描述:这是一款jQuery显示隐藏更多文字内容插件。该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果。

jquery.morecontent.js

这是一款jQuery显示/隐藏更多文字内容插件。该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果。

使用方法

在页面中引入jquery和jquery.morecontent.js文件。

HTML结构

页面的HTML结构如下。

这里是一段很长很长的文本......

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:'ShowMore',

textOpen:'Close'

});

其它可用的配置参数有:$('.example').moreContent({

useCss:true,

speed:250,

tpl:{

content:'

contentWrap:'

btn:'',

btnWrap:'

controls:'

shadow:'

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。