学用jQuery，写了一个简单的tabsView。

yaohaixiao 楼主

jQuery 用得还不是太熟悉，自己开始写些简单的控件，呵呵，还是从最常用的tabsView开始吧，看看：

1. 支持tab键切换。
2. 支持ajax切换。
3. 可以设置默认显示项
4. 一开始可以显示全部内容
5. 可以根据路径的hash值，设置默认显示项
6. 可以设置切换的触发事件
7. 切换完成后，可以执行回调方法

基本常用的方法都有了，如果你还在找tabsView，或者想学学实现原理，可以看看，当然如果有BUG，也不奇怪，希望大家指正。

1. /**
   
2. * @author Yaohaixiao
   
3. */
   
4. jQuery.tabsView = function(config){       
   
5.         // 初始化配置项       
   
6.         this.setting = {
   
7.                 tabs: null,
   
8.                 contents: null,
   
9.                 lastTab: null,
   
10.                 lastContent: null,
    
11.                 lastIndex: 0,
    
12.                 defaultIndex: 0,
    
13.                 hashFirst: false,
    
14.                 showAll: false,
    
15.                 ajax: null,
    
16.                 evtType: 'click',
    
17.                 focusEvt: true,
    
18.                 callback: null
    
19.         };
    
20.        
    
21.         // 合并配置信息
    
22.         $.extend(this.setting, config);
    
23.        
    
24.         // 初始化
    
25.         this.initializer();
    
26.        
    
27.         return this;
    
28. };
    
29. 
    
30. jQuery.tabsView.prototype = {
    
31.         /**
    
32.          * 初始化 tabView
    
33.          *
    
34.          * @method initializer
    
35.          * @return {Object} jQuery.tabsView
    
36.          */
    
37.         initializer: function(){
    
38.                 // 获得默认的 lastTab 和 lastContent
    
39.                 this.getDefTab();
    
40.                 this.getDefContent();
    
41.                
    
42.                 // 设置默认的选中内容
    
43.                 this.setDefSelection();
    
44.                
    
45.                 // 绑定 tabView 组件的 UI 处理函数
    
46.                 this.bindUI();
    
47.                
    
48.                 return this;
    
49.         },
    
50.         setDefSelection: function(){
    
51.                 var tabsView = this,
    
52.                     setting = this.setting,
    
53.                         tabs = setting.tabs,
    
54.                         contents = setting.contents,
    
55.                         tabHash = this._getTabHash(),
    
56.                         showAll = setting.showAll;
    
57.                
    
58.                 if (!showAll) {
    
59.                         // 如果有 url 的 hash值，默认显示项的设置以 hash 值为优先设置
    
60.                         if (tabHash && setting.hashFirst) {
    
61.                                 $(tabs).each(function(i, tab){
    
62.                                         var curTitle = $(tab).attr('title');
    
63.                                        
    
64.                                         if (curTitle === tabHash) {
    
65.                                                 tabsView.setCurrent(i);
    
66.                                         }
    
67.                                 });
    
68.                         }
    
69.                         else {
    
70.                                 // 没有 URL 的 hash 值，则显示配置项中设置的默认项
    
71.                                 this.setCurrent(setting.defaultIndex);
    
72.                         }
    
73.                 }
    
74.                 else{
    
75.                         // 显示所有的 contents
    
76.                         $(contents).removeClass('hide');
    
77.                 }
    
78.                
    
79.                 return this;
    
80.         },
    
81.         /**
    
82.          * 给 tabs 绑定事件
    
83.          *
    
84.          * @method fire
    
85.          * @return {Object} jQuery.tabsView
    
86.          */
    
87.         bindUI: function(){
    
88.                 var tabsView = this,
    
89.                     setting = this.setting,
    
90.                         tabs = setting.tabs;
    
91.                
    
92.                 // 给每个 tab 绑定处理方法
    
93.                 $(tabs).each(function(i, tab){
    
94.                         var curTab = $(tab);
    
95.                        
    
96.                         curTab[setting.evtType](function(evt){
    
97.                                 // 当前 tab 不触发事件
    
98.                                 if (!curTab.hasClass('current')) {
    
99.                                         tabsView.setCurrent(i);
    
100.                                 }
     
101.                                 // 阻止冒泡和默认行为事件
     
102.                                 evt.preventDefault();
     
103.                                 evt.stopPropagation();
     
104.                         });
     
105.                        
     
106.                         // Tab 键切换事件，使用 focusein 事件就可以了
     
107.                         if (setting.focusEvt) {
     
108.                                 curTab.focusin(function(evt){
     
109.                                         // 当前 tab 不触发事件
     
110.                                         if (!curTab.hasClass('current')) {
     
111.                                                 tabsView.setCurrent(i);
     
112.                                         }
     
113.                                 });
     
114.                         }
     
115.                 });
     
116.                
     
117.                 return this;
     
118.         },
     
119.         _afterTabSelectedChange: function(){
     
120.                 var callback = this.setting.callback;
     
121.                
     
122.                 // 如果设置了 tab 切换完成后的自定义方法，则执行它
     
123.                 if (callback && $.isFunction(callback)) {
     
124.                         callback();
     
125.                 }
     
126.                
     
127.                 return this;
     
128.         },
     
129.         /**
     
130.          * 设置当前选中项的样式和内容
     
131.          *
     
132.          * @method setCurrent
     
133.          * @param {Number} curTabIndex
     
134.          * @return {Object} jQuery.tabsView
     
135.          */
     
136.         setCurrent: function(curTabIndex){
     
137.                 var setting = this.setting,
     
138.                     tabs = setting.tabs,
     
139.                     contents = setting.contents,
     
140.                         curTab = tabs[curTabIndex],
     
141.                         curCnt = contents[curTabIndex],
     
142.                         fileName = '';
     
143.                
     
144.                 // 移除上次选中的 tab 的选中样式
     
145.                 if (setting.lastTab) {
     
146.                         $(setting.lastTab).removeClass('current');
     
147.                 }
     
148.                 // 隐藏上次 tab 项相关的内容
     
149.                 if (setting.lastContent) {
     
150.                         $(setting.lastContent).addClass('hide');
     
151.                 }
     
152.                
     
153.                 // 将当前选中的 tab 显示为选中样式
     
154.                 $(curTab).addClass('current');
     
155.                 // 当前标签显示为选中样式后，当前标签就是上次选中标签了
     
156.                 setting.lastTab = curTab;
     
157.                 // 当前标签显示为选中样式后，当前标签的索引值就是上次选中标签索引值了
     
158.                 setting.lastIndex = curTabIndex;
     
159.                
     
160.                 // 如果是 ajaxTab
     
161.                 if (setting.ajax) {
     
162.                         fileName = $(curTab).attr('title');
     
163.                         this.ajaxInsert(fileName);
     
164.                 }
     
165.                 else {
     
166.                         // 如果不是 ajaxTab                               
     
167.                         $(curCnt).removeClass('hide'); // 显示当前选中项的相关内容
     
168.                         setting.lastContent = curCnt; // 当前选中项的相关内容在现实后就是上次的选中项显示内容了
     
169.                        
     
170.                         this._afterTabSelectedChange();
     
171.                 }
     
172.                
     
173.                 return this;
     
174.         },
     
175.         /**
     
176.          * 显示 ajax 请求返回来的数据
     
177.          *
     
178.          * @method ajaxInsert
     
179.          * @param {String} fileName
     
180.          * @return {Object} jQuery.tabsView
     
181.          */
     
182.         ajaxInsert: function(fileName){
     
183.                 var tabView = this,
     
184.                     setting = this.setting,
     
185.                     ajaxSet = setting.ajax,
     
186.                     curAjaxType = 'GET',
     
187.                         curAjaxTarget = null,
     
188.                         curAjaxPath = '',
     
189.                         curExtName = '.js',
     
190.                         curAjaxDataType = 'JSON';
     
191.                
     
192.                 if (!ajaxSet.target || !ajaxSet.path) {
     
193.                         return this;
     
194.                 }
     
195.                
     
196.                 // 获得请求类型
     
197.                 if (ajaxSet.type) {
     
198.                         curAjaxType = ajaxSet.type.toUpperCase();
     
199.                 }
     
200.                 // 获得请求数据类型
     
201.                 if (ajaxSet.dataType) {
     
202.                         curAjaxDataType = ajaxSet.dataType.toUpperCase();
     
203.                 }
     
204.                 // 根据请求数据类型，获得文件扩展名，并组合成完整的请求路径
     
205.                 switch (curAjaxDataType) {
     
206.                         case 'JSON':
     
207.                                 curExtName = '.js';
     
208.                                 break;
     
209.                         case 'HTML':
     
210.                                 curExtName = '.htm';
     
211.                                 break;
     
212.                 }
     
213.                 // 获得Ajax请求数据要插入的DOM对象
     
214.                 curAjaxTarget = $(ajaxSet.target);
     
215.                 // ajaxTab 请求的信息，只做展示之用，应该要缓存住，因此没有用  Math.random() 方法清除缓存
     
216.                 curAjaxPath = ajaxSet.path + fileName + curExtName;
     
217.                
     
218.                 // 执行 ajax 请求
     
219.                 $.ajax({
     
220.                         type: curAjaxType,
     
221.                         url: curAjaxPath,
     
222.                         success: function(data){
     
223.                                 var htmlContent = '';
     
224.                                
     
225.                                 switch (curAjaxDataType) {
     
226.                                         case 'JSON':
     
227.                                             htmlContent = data.html;
     
228.                                                 break;
     
229.                                         case 'HTML':
     
230.                                             htmlContent = data;
     
231.                                                 break;
     
232.                                 }
     
233.                                
     
234.                                 curAjaxTarget.html(htmlContent);
     
235.                                
     
236.                                 tabView._afterTabSelectedChange();
     
237.                         },
     
238.                         dataType: curAjaxDataType
     
239.                 });
     
240.                
     
241.                 return this;
     
242.         },
     
243.         _getDefSelection: function(){
     
244.                 var defaultSelection = [],
     
245.                     setting = this.setting,
     
246.                         showAll = setting.showAll,
     
247.                         ajax = setting.ajax,
     
248.                         tabs = setting.tabs,
     
249.                         contents = setting.contents;
     
250.                
     
251.                 // 显示默认的选中项和内容
     
252.                 if (showAll) {
     
253.                         // 默认的上次显示项为所有 tabs
     
254.                         setting.lastTab = tabs;
     
255.                         setting.lastContent = contents;
     
256.                 }
     
257.                 else {
     
258.                         // 默认的上次显示项为第一个tab
     
259.                         setting.lastTab = tabs[setting.lastIndex];
     
260.                         // 如果是 ajaxTab 则上次显示的 content 为 null
     
261.                         // 因为 ajaxTab 都是在一个 targetContent 中显示异步加载的信息
     
262.                         if (!ajax) {
     
263.                                 setting.lastContent = contents[setting.lastIndex];
     
264.                         }
     
265.                 }
     
266.                
     
267.                 defaultSelection = [setting.lastTab, setting.lastContent];
     
268.                
     
269.                 return defaultSelection;
     
270.         },
     
271.         _getTabHash: function(){
     
272.                 var tabHash = '';
     
273.                
     
274.                 // 根据URL地址参数设置默认选中的 tab 显示项
     
275.                 if (location.href.indexOf('tab=') > -1) {
     
276.                         tabHash = location.href.split('tab=')[1];
     
277.                        
     
278.                         // URL地址如：tabs.htm?tab=javascript&id=4#xml
     
279.                         if (tabHash.indexOf('&') > -1) {
     
280.                                 tabHash = tabHash.split('&')[0];
     
281.                         }
     
282.                         else {
     
283.                                 // URL地址如：tabs.htm?tab=javascript#xml
     
284.                                 if (tabHash.indexOf('#') > -1) {
     
285.                                         tabHash = tabHash.split('#')[0];
     
286.                                 }
     
287.                         }
     
288.                 }
     
289.                 else {
     
290.                         // URL地址如：tabs.htm#xml
     
291.                         if (location.href.indexOf('#') > -1) {
     
292.                                 tabHash = location.href.split('#')[1];
     
293.                         }
     
294.                 }
     
295.                
     
296.                 return tabHash;
     
297.         },
     
298.         /**
     
299.          * 获得 tabsView 实例的配置项信息
     
300.          *
     
301.          * @method getSetting
     
302.          * @return {Object} this.setting
     
303.          */
     
304.         getSetting: function(){
     
305.                 return this.setting;
     
306.         },
     
307.         /**
     
308.          * 获得 tabsView 实例的 tabs 的 NodeList 信息
     
309.          *
     
310.          * @method getTabs
     
311.          * @return {HTMLNodeList} this.setting.tabs
     
312.          */
     
313.         getTabs: function(){
     
314.                 return this.setting.tabs;
     
315.         },
     
316.         /**
     
317.          * 获得 tabsView 实例的 contents 的 NodeList 信息
     
318.          *
     
319.          * @method getContents
     
320.          * @return {HTMLNodeList} this.setting.contents;
     
321.          */
     
322.         getContents: function(){
     
323.                 return this.setting.contents;
     
324.         },
     
325.         getDefTab: function(){
     
326.                 var defaultTab = this._getDefSelection()[0];
     
327.                
     
328.                 return defaultTab;
     
329.         },
     
330.         getDefContent: function(){
     
331.                 var defaultContent = this._getDefSelection()[1];
     
332.                
     
333.                 return defaultContent;
     
334.         },
     
335.         getCurTab: function(){
     
336.                 return this.setting.lastTab;
     
337.         },
     
338.         getCurContent: function(){
     
339.                 return this.setting.lastContent;
     
340.         },
     
341.         /**
     
342.          * 获得 tabsView 实例的 lastIndex 信息 - 当前选中标签在 tabs 中的索引值
     
343.          *
     
344.          * @method getContents
     
345.          * @return {HTMLNodeList} this.setting.contents;
     
346.          */
     
347.         getCurIndex: function(){
     
348.                 return this.setting.lastIndex;
     
349.         }
     
350. };
     
351. 
     
352. /**
     
353. * jQuery.tabsView 的静态方法，用来同时设置多个 tabsView
     
354. *
     
355. * @method tabs
     
356. * @static
     
357. * @return {Object|Array} tabs - 一个或者多个 jQuery.tabsView 的实例
     
358. */
     
359. jQuery.tabs = function(){
     
360.         var tabs = [],
     
361.             args = arguments,
     
362.                 i = 0,
     
363.                 len = args.length;
     
364.        
     
365.        
     
366.         for (; i < len; i += 1) {
     
367.                 tabs[i] = new jQuery.tabsView(args[i]);
     
368.         }
     
369.        
     
370.         return len > 0 ? tabs : null;
     
371. };

复制代码

raoyafei

不错不错，收藏了！！

chenjmdgjl

注释写得挺好，顶一下。