https://www.krtc.com.tw/scripts/tab_list.js

1(function($) {
2    $.fn.Tablist = function(settings) {
3        settings = jQuery.extend({
4            minHeight: 0, // 整個頁籤區塊最小高度
5            extHeight: 50, //整個頁籤區塊高度調整值
6            tabName: "tab", //頁籤class Name
7            selectTabName: "selectedTab", //被選取頁籤的class Name
8            contentName: "content", //內容區塊的class Name
9            TabIndex: 0, //預設顯示的頁籤
10            tabFade: false, //頁籤淡入效果
11            contentFade: false, //內容淡入效果
12            fadeSpeed: 800, //淡入效果速度
13            click: null,
14            mouseover: null,
15            focus: null,
16            event: "click" //使用的事件 click|mouseenter|focus
17        }, settings);
18
19        var tabs = this;
20
21        function initialize() {
22            //先將設有被選取頁籤的class, 設為未選取
23            tabs.children("li").children("." + settings.selectTabName).removeClass(settings.selectTabName).addClass(settings.tabName);
24
25            //設定預設選取頁籤的class
26            tabs.children("li").children("." + settings.tabName).eq(settings.TabIndex).removeClass(settings.tabName).addClass(settings.selectTabName);
27
28            //設定內容區塊的CSS
29            tabs.children("li").children("." + settings.contentName).css({ display: "none" });
30
31            //設定預設顯示的內容區塊
32            tabs.children("li").children("." + settings.contentName).eq(settings.TabIndex).css("display", "block");
33
34            //設定預設高度
35            var Height = tabs.children("li").children("." + settings.contentName).eq(settings.TabIndex).outerHeight(true) + settings.extHeight;
36            if (Height < settings.minHeight) {
37                Height = settings.minHeight;
38            }
39            tabs.css("height", Height + "px");
40
41            if (settings.click) {
42                tabs.children("li").children("." + settings.tabName + ",." + settings.selectTabName).click(function() {
43                    TabChange($(this));
44                });
45            }
46
47            if (settings.mouseover) {
48                tabs.children("li").children("." + settings.tabName + ",." + settings.selectTabName).bind("mouseenter", function() {
49                    TabChange($(this));
50                    this.focus();
51                });
52            }
53
54            if (settings.focus) {
55                tabs.children("li").children("." + settings.tabName + ",." + settings.selectTabName).bind("focus", function() {
56                    if ($(this).attr('class').toString() == settings.tabName) { TabChange($(this)); }
57                });
58            }
59
60            var eventset = (settings.click == null || settings.mouseover == null || settings.focus == null);
61
62
63            switch (settings.event) {
64
65                case "click":
66                    if (eventset) {
67                        tabs.children("li").children("." + settings.tabName + ",." + settings.selectTabName).click(function() {
68                            TabChange($(this));
69                        });
70                    }
71                    break;
72					
73                case "mouseenter":
74                    if (eventset) {
75                        tabs.children("li").children("." + settings.tabName + ",." + settings.selectTabName).bind("mouseenter", function() {
76                            TabChange($(this)); this.focus();
77                        });
78                    }
79                    break;
80
81                case "focus":
82                    if (eventset) {
83                        tabs.children("li").children("." + settings.tabName + ",." + settings.selectTabName).bind("focus", function() {
84                            if ($(this).attr('class').toString() == settings.tabName) { TabChange($(this)); }
85                        });
86                    }
87                    break;
88            }
89            //修正第一次執行時,上方的區塊會異常 
90            TabChange(tabs.children("li:first").children("." + settings.tabName + ",." + settings.selectTabName));
91        }
92
93        //頁籤變換
94        function TabChange(selectedTab) {
95            //設定所有頁籤為未選擇
96            tabs.children("li").children("." + settings.selectTabName).removeClass(settings.selectTabName).addClass(settings.tabName);
97
98            //設定被選擇頁籤
99            if (!settings.tabFade) {
100                selectedTab.removeClass(settings.tabName).addClass(settings.selectTabName);
101            }
102            else {
103                //淡入效果
104                selectedTab.removeClass(settings.tabName).addClass(settings.selectTabName).css("display", "none").fadeIn(settings.fadeSpeed);
105            }
106
107            //計算頁籤內容高度+調整值, 給外層ul
108            var height = selectedTab.parent("li").children("." + settings.contentName).outerHeight(true) + settings.extHeight;
109            if (height < settings.minHeight) height = settings.minHeight;
110            tabs.css("height", height + "px");
111			$(window).on('resize orientationchange', function () {
112				var height = selectedTab.parent("li").children("." + settings.contentName).outerHeight(true) + settings.extHeight;
113				if (height < settings.minHeight) height = settings.minHeight;
114				tabs.css("height", height + "px");
115			});
116
117            //隱藏所有頁籤內容
118            tabs.children("li").children("." + settings.contentName).css("display", "none");
119
120            //顯示被選擇的頁籤內容
121            if (!settings.contentFade) {
122                selectedTab.parent("li").children("." + settings.contentName).css("display", "block");
123            }
124            else {
125                //淡入效果
126                selectedTab.parent("li").children("." + settings.contentName).fadeIn(settings.fadeSpeed);
127            }
128        }
129        initialize();
130    };
131})(jQuery);