文本溢出插件jquery.dotdotdot.js使用方法详解
更新时间:2017年06月22日 14:03:34 作者:第7维度
这篇文章主要介绍了文本溢出插件jquery.dotdotdot.js使用方法详解,需要的朋友可以参考下
插件下载地址:https://github.com/FrDH/jQuery.dotdotdot
引入jQuery.js和jquery.dotdotdot.js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dotdotdot.js"></script>
给包含文本的元素定一个宽高,当文本超过这个高度后会触发效果
变成省略号:
<div class="box" style="width:300px;height:100px;"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </div> <script type="text/javascript"> $(function(){ $(".box").dotdotdot(); }) </script>
有省略号加自己定义内容:
<div class="box02" style="width:300px;height:100px;"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 <span style="color:#ff0000;"><a style="color: #F4606C">read more</a></span> </div> <script type="text/javascript"> $(function(){ $(".box02").dotdotdot({ after: 'a' }); }); </script>
有展开/收起 按钮:
<div class="box03" style="width:300px;height:100px;"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </div> <style type="text/css"> .opened{height: auto;} .toggle .close,.opened .toggle .open{display: none;} .toggle .opened,.opened .toggle .close{display: inline;} </style> <script type="text/javascript"> var $dot = $('.box03'); $dot.append( ' <a class="toggle" href="#" rel="external nofollow" ><span class="open">[ + ]</span><span class="close">[ - ]</span></a>' ); function createDots() { $dot.dotdotdot({ after: 'a.toggle' }); } function destroyDots() { $dot.trigger( 'destroy' ); } createDots(); $dot.on( 'click', 'a.toggle', function() { $dot.toggleClass( 'opened' ); if ( $dot.hasClass( 'opened' ) ) { destroyDots(); } else { createDots(); } return false; } ); </script>
以上所述是小编给大家介绍的文本溢出插件jquery.dotdotdot.js使用方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
浅析jQuery对select操作小结(遍历option,操作option)
本篇文章是关于jQuery对select的操作进行了总结介绍,需要的朋友可以参考下2013-07-07模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下2013-09-09
最新评论