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

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

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

演示

 

 

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