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: 'Show More',

textOpen: 'Close'

});

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

useCss: true,

speed: 250,

tpl: {

content: '

contentWrap: '

btn: '',

btnWrap: '

controls: '

shadow: '

}

});

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

jQuery便利多个相同的class，点击显示隐藏图标，显示及隐藏其下的内容
这里使用了bootstrap 而jQuery的遍历标签 each 和事件hide().show().toggle(); 直接上代码: <!DOCTYPE html> <html la ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
html点击显示隐藏判断,jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性 var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了,我是隐藏的啦!&q ...
JS点击显示隐藏内容
JS点击显示隐藏密码思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
点击显示隐藏盒子函数
示例:(手机导航栏) <header> <div class="logo"></div> <p class="text" ...
vue组件弹出框点击显示隐藏
1. vue组件弹出框点击显示隐藏转载于:https://www.cnblogs.com/knuzy/p/9525852.html
elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...
如何隐藏CAD图层？怎么显示隐藏的CAD图层？
CAD图层是编辑CAD文件时常常会使用的工具,如果我们在编辑CAD文件时,想要将一些不重要的图层隐藏,或者将隐藏的图层显示,那么应该怎么进行操作?如何隐藏CAD图层?怎么显示隐藏的CAD图层?接下来我 ...

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

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

最新文章

热门文章