首页>>Jquery文字>>jQuery Readmore 很简单的阅读更多，可以关闭(2014-01-23)

jQuery Readmore 很简单的阅读更多，可以关闭

 在js文件中设置好默认显示高度，超过的会隐藏

jQuery Readmore 很简单的阅读更多，可以关闭
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.     $('article').readmore({maxHeight: 216});  
  3.   </script>  

 

JavaScript Code
  1. /*! 
  2.  * Readmore.js jQuery plugin 
  3.  * Author: @jed_foster 
  4.  * Project home: jedfoster.github.io/Readmore.js 
  5.  * Licensed under the MIT license 
  6.  */  
  7.   
  8. ;(function($) {  
  9.   
  10.   var readmore = 'readmore',  
  11.       defaults = {  
  12.         speed: 100,  
  13.         maxHeight: 200,  
  14.         moreLink: '<a href="#">Read More</a>',  
  15.         lessLink: '<a href="#">Close</a>'  
  16.       };  
  17.   
  18.   function Readmore( element, options ) {  
  19.     this.element = element;  
  20.   
  21.     this.options = $.extend( {}, defaults, options) ;  
  22.   
  23.     this._defaults = defaults;  
  24.     this._name = readmore;  
  25.   
  26.     this.init();  
  27.   }  
  28.   
  29.   Readmore.prototype = {  
  30.   
  31.     init: function() {  
  32.       var $this = this;  
  33.   
  34.       $(this.element).each(function() {  
  35.         var current = $(this),  
  36.             maxHeight = (current.css('max-height').replace(/[^-d.]/g, '') > $this.options.maxHeight) ? current.css('max-height').replace(/[^-d.]/g, '') : $this.options.maxHeight;  
  37.   
  38.         if(current.css('max-height') != "none") {  
  39.           current.css("max-height", "none");  
  40.         }  
  41.   
  42.         current.data("boxHeight", current.height());  
  43.   
  44.         if(current.innerHeight() < maxHeight) {  
  45.           // The block is shorter than the limit, so there's no need to truncate it.  
  46.           return true;  
  47.         }  
  48.         else {  
  49.           current.after($($this.options.moreLink).on('click', function(event) { $this.openSlider(this, current, event) })); 
  50.         } 
  51.  
  52.         sliderHeight = maxHeight; 
  53.  
  54.         current.css("height", sliderHeight).css("overflow", 'hidden'); 
  55.       }); 
  56.     }, 
  57.  
  58.     openSlider: function(trigger, element, event) 
  59.     { 
  60.       event.preventDefault(); 
  61.  
  62.       var $this = this, 
  63.           open_height = $(element).data().boxHeight + "px"; 
  64.  
  65.       $(element).animate({"height": open_height}, {duration: $this.options.speed }); 
  66.  
  67.       $(trigger).replaceWith($($this.options.lessLink).on('click', function(event) { $this.closeSlider(this, element, event) })); 
  68.     }, 
  69.  
  70.     closeSlider: function(trigger, element, event) 
  71.     { 
  72.       event.preventDefault(); 
  73.  
  74.       var $this = this; 
  75.  
  76.       $(element).animate({"height": sliderHeight}, {duration: $this.options.speed }); 
  77.  
  78.       $(trigger).replaceWith($($this.options.moreLink).on('click', function(event) { $this.openSlider(this, element, event) })); 
  79.     } 
  80.   }; 
  81.  
  82.   $.fn[readmore] = function( options ) { 
  83.     var args = arguments; 
  84.     if (options === undefined || typeof options === 'object') { 
  85.       return this.each(function () { 
  86.         if (!$.data(this, 'plugin_' + readmore)) { 
  87.           $.data(this, 'plugin_' + readmore, new Readmore( this, options )); 
  88.         } 
  89.       }); 
  90.     } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { 
  91.       return this.each(function () { 
  92.         var instance = $.data(this, 'plugin_' + readmore); 
  93.         if (instance instanceof Readmore && typeof instance[options] === 'function') {  
  94.           instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );  
  95.         }  
  96.       });  
  97.     }  
  98.   }  
  99. })(jQuery);  

 


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