首页>>Jquery文字>>点击后加载显示更多内容的插件(2015-10-13)

点击后加载显示更多内容的插件

点击后加载显示更多内容的插件
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. /**! 
  2.  * jquery.moreContent.js 
  3.  * [description] SEO friendly hiding of long texts 
  4.  * [version] 1.0.0 
  5.  * [author] Dean Hidri 
  6.  * [website] http://visualcookie.me/ 
  7.  * [repository] https://github.com/visualcookie/jquery.moreContent.js 
  8.  * [license] The MIT License (MIT) 
  9.  */  
  10. (function($) {  
  11.   
  12.     $.fn.moreContent = function(params) {  
  13.         this.each(function(index, el) {  
  14.             var options                 = $.extend({}, $.fn.moreContent.options, $(el).data());  
  15.             options                     = $.extend({}, options, params);  
  16.             options.instance            = $(el);  
  17.             options                     = $.fn.moreContent.init(options);  
  18.         });  
  19.         return this;  
  20.     };  
  21.   
  22.     $.fn.moreContent.init = function(options) {  
  23.         options.button                  = $('<button class="'+ options.btnClass +'"/>').text(options.btn);  
  24.         options.wrapper                 = $('<div class="mc-wrapper"/>');  
  25.         options.instance.autoHeight     = options.instance.css('height', 'auto').height();  
  26.   
  27.         // make it wrap  
  28.         options.instance.wrap(options.wrapper);  
  29.   
  30.         // insert button after element  
  31.         options.button.insertAfter(options.instance);  
  32.   
  33.         // set default height for element  
  34.         options.instance.css({  
  35.             height: options.height,  
  36.             overflow: 'hidden'  
  37.         });  
  38.   
  39.         // on click perform $.fn.moreContent.click  
  40.         options.button.click(function(e) {  
  41.             $.fn.moreContent.click(options)  
  42.         });  
  43.   
  44.         return options;  
  45.     };  
  46.     $.fn.moreContent.click = function(options) {  
  47.         if (!options.instance.hasClass('active')) {  
  48.             options.instance.velocity(  
  49.             {  
  50.                 height: options.instance.autoHeight  
  51.             },  
  52.             {  
  53.                 duration: options.duration,  
  54.                 complete: function() {  
  55.                     options.instance.addClass('active');  
  56.                     options.button.addClass('active').text(options.btnActive);  
  57.                 }  
  58.             }, 'ease-in-out');  
  59.         } else {  
  60.             options.instance.velocity(  
  61.             {  
  62.                 height: options.height  
  63.             },  
  64.             {  
  65.                 duration: options.duration,  
  66.                 complete: function() {  
  67.                     options.instance.removeClass('active');  
  68.                     options.button.removeClass('active').text(options.btn);  
  69.                 }  
  70.             }, 'ease-in-out');  
  71.         }  
  72.     };  
  73.   
  74.     // default options  
  75.     $.fn.moreContent.options = {  
  76.         height: 160,  
  77.         duration: 1000,  
  78.         btn: 'Open',  
  79.         btnActive: 'Close',  
  80.         btnClass: 'btn-default'  
  81.     }  
  82.   
  83. })(jQuery);  

 


原文地址:http://www.freejs.net/article_jquerywenzi_510.html