jQuery实现切换字体大小的方法

栏目分类：javaScript教程   发布日期：2015-03-11   来源：   浏览次数：次

本文实例讲述了jQuery实现切换字体大小的方法。分享给大家供大家参考。具体实现方法如下：

1. $.fn.switchSize = function(settings) { 
2.  
3. // defaults settings 
4.  
5. settings = $.extend({ 
6.  
7.     container: 'body', 
8.  
9.     arrSizeClass: ['small', 'medium', 'large'], 
10.  
11.     defaultClass: 'medium', 
12.  
13.     saveCookie: true 
14.  
15. }, settings); 
16.  
17. var $container = $(settings.container); 
18.  
19. return this 
20.  
21.     .each(function() { 
22.  
23.         if ($.cookie('switchSize')) {  
24.  
25.         $container.addClass($.cookie('switchSize')); 
26.  
27.         $(this).data("current", $.cookie('switchSize'))  
28.  
29.         } 
30.  
31.     }) 
32.  
33.     .bind("click", function() { 
34.  
35.         var pos; 
36.  
37.         if ($(this).data("current")) { 
38.  
39.         pos = jQuery.inArray($(this).data("current"), settings.arrSizeClass); 
40.  
41.         } else { 
42.  
43.         pos = jQuery.inArray(settings.defaultClass, settings.arrSizeClass); 
44.  
45.         } 
46.  
47.         if (pos >= 0) { //Found Class 
48.  
49.         if (pos == settings.arrSizeClass.length - 1) { //Check if last 
50.  
51.             $(this).data("current", settings.arrSizeClass[0]); 
52.  
53.         } else { 
54.  
55.             $(this).data("current", settings.arrSizeClass[pos + 1]); 
56.  
57.         } 
58.  
59.         } else { 
60.  
61.         //To prevent error 
62.  
63.         $(this).data("current", settings.arrSizeClass[0]); 
64.  
65.         } 
66.  
67.   
68.  
69.         $container.removeClass(settings.arrSizeClass[pos]).addClass($(this).data("current")); 
70.  
71.   
72.  
73.         if (settings.saveCookie === true) { 
74.  
75.         $.cookie('switchSize', $(this).data("current"), { expires: 365, path: '/' }); 
76.  
77.         } 
78.  
79.     }); 
80.  
81. };