标签：ext 技术 res var oat eth append hang http
控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。
Tabs插件很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手
）
下面直接贴代码，不喜勿喷：
1 (function ($) { 2 ‘use strict‘; 3 var defaults = { 4 type: "iframe", 5 onchanged: null, 6 style: { 7 header_panel: "tab-headers", 8 content_panel: "tab-contents", 9 header: "tab-header", 10 content: "tab-content", 11 selected: "selected", 12 icon_base: "fa", 13 icon_close: "fa-close" 14 } 15 } 16 var methods = { 17 init: function (options) { 18 return this.each(function () { 19 var $this = $(this); 20 if (!$this.hasClass("tabs")) { 21 $this.addClass("tabs"); 22 } 23 var settings = $this.data(‘tw.tabs‘); 24 if (typeof (settings) == ‘undefined‘) { 25 settings = $.extend({}, defaults, options); 26 $this.data(‘tw.tabs‘, settings); 27 } else { 28 settings = $.extend({}, settings, options); 29 $this.data(‘tw.tabs‘, settings); 30 } 31 if ($this.find("." + settings.style.header_panel).length == 0 || $this.find("." + settings.style.content_panel).length == 0) { 32 $this.empty(); 33 $this.append($("<ul class=‘" + settings.style.header_panel + "‘></ul>")); 34 $this.append($("<div class=‘" + settings.style.content_panel + "‘></div>")); 35 } 36 if (settings.data) { 37 if (typeof settings.data === ‘string‘) { 38 settings.data = $.parseJSON(settings.data); 39 } 40 $.each(settings.data, function () { 41 $this.tabs("add", this); 42 }); 43 } 44 }); 45 }, 46 add: function (tab) { 47 var $this = $(this); 48 var settings = $this.data("tw.tabs"); 49 var headers = $this.find("." + settings.style.header_panel); 50 var contents = $this.find("." + settings.style.content_panel); 51 if (headers.find("[data-tab=‘" + tab.id + "‘]").length == 0) { 52 var header = $("<li class=‘" + settings.style.header + "‘ data-tab=‘" + tab.id + "‘><i class=‘" + settings.style.icon_base + "" + tab.icon + "‘></i><span class=‘tab-title‘>" + tab.name + "</span></li>"); 53 if (tab.canClose) { 54 var close = $("<i class=‘" + settings.style.icon_base + "" + settings.style.icon_close + "‘></i>"); 55 close.click(function () { 56 $this.tabs("remove", tab.id); 57 }); 58 header.append(close); 59 } 60 header.data("tw.tab", tab); 61 headers.append(header); 62 var content = $("<div class=‘" + settings.style.content + "‘ data-tab=‘" + tab.id + "‘></div>"); 63 if (settings.type == "iframe") { 64 content.append("<iframe src=‘" + tab.url + "?target_id=" + tab.id + "‘></iframe>"); 65 } else if (settings.type == "ajax"){ 66 $.ajax({ 67 url: tab.url, 68 type: "post", 69 async: false, 70 data: { target_id: tab.id }, 71 success: function (result) { 72 content.html(result); 73 } 74 }); 75 } else { 76 content.html(tab.content); 77 } 78 contents.append(content); 79 if (tab.selected) { 80 $this.tabs("select", tab); 81 } 82 } else { 83 $this.tabs("select", tab); 84 } 85 }, 86 select: function (tab) { 87 var $this = $(this); 88 var settings = $this.data("tw.tabs"); 89 $this.find("." + settings.style.selected).removeClass(settings.style.selected); 90 if (typeof tab == "object") { 91 $this.find("[data-tab=‘" + tab.id + "‘]").addClass(settings.style.selected); 92 } else { 93 $this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected); 94 } 95 if (settings.onchanged) { 96 settings.onchanged(tab); 97 } 98 }, 99 refresh: function () { 100 var $this = $(this); 101 var selected = $this.find("." + settings.style.selected); 102 var tab = $this.find("." + settings.style.header).data("tw.tab"); 103 if (settings.type == "iframe") { 104 selected.find("iframe").attr(‘src‘, tab.url + "?target_id=" + tab.id); 105 } else if (settings.type == "ajax") { 106 $.ajax({ 107 url: tab.url, 108 type: "post", 109 async: false, 110 data: { target_id: tab.id }, 111 success: function (result) { 112 content.html(result); 113 } 114 }); 115 } else { 116 content.html(tab.content); 117 } 118 }, 119 remove: function (id) { 120 var $this = $(this); 121 var settings = $this.data("tw.tabs"); 122 var tab = $this.find("[data-tab=‘" + id + "‘]"); 123 if (tab.find("." + settings.style.selected)) { 124 var index = tab.eq(0).index(); 125 $this.tabs("select", index); 126 } 127 tab.remove(); 128 }, 129 destroy: function (options) { 130 return $(this).each(function () { 131 var $this = $(this); 132 $this.removeData(‘tabs‘); 133 }); 134 } 135 } 136 $.fn.tabs = function () { 137 var method = arguments[0]; 138 var args = arguments; 139 if (typeof (method) == ‘object‘ || !method) { 140 method = methods.init; 141 } else if (methods[method]) { 142 method = methods[method]; 143 args = $.makeArray(arguments).slice(1); 144 } else { 145 $.error(‘Method ‘ + method + ‘ does not exist on tw.tabs‘); 146 return this; 147 } 148 return method.apply(this, args); 149 } 150 } 151 )(jQuery);
1 .tabs { 2 width:100%; 3 height:100%; 4 } 5 .tabs .tab-headers { 6 margin:0; 7 padding:0 10px; 8 height:40px; 9 list-style:none; 10 background:#f5f5f5; 11 border-bottom:1px solid #ccc; 12 } 13 .tabs .tab-headers .tab-header { 14 float:left; 15 height:30px; 16 font-size:12px; 17 padding:7px 15px 0; 18 margin-top:10px; 19 margin-right:5px; 20 border:1px solid #ccc; 21 border-bottom:none; 22 position:relative; 23 cursor:pointer; 24 } 25 .tabs .tab-headers .tab-header:hover { 26 background:#ccc; 27 color:#0094ff; 28 } 29 .tabs .tab-headers .tab-header.selected { 30 background:#fff; 31 border:none; 32 cursor:default; 33 padding-top:5px; 34 margin-left:1px; 35 margin-right:6px; 36 border-top:3px solid #0094ff; 37 } 38 .tabs .tab-headers .tab-header .tab-title { 39 margin-left:5px; 40 } 41 .tabs .tab-headers .tab-header .fa-close { 42 position:relative; 43 right:-6px; 44 top:0; 45 } 46 .tabs .tab-headers .tab-header .tab-close:hover { 47 color:#f00; 48 cursor:pointer; 49 } 50 .tabs .tab-contents { 51 width: 100%; 52 height: calc(100% - 40px); 53 } 54 .tabs .tab-contents .tab-content { 55 display:none; 56 } 57 .tabs .tab-contents .tab-content.selected { 58 display: block; 59 width: 100%; 60 height: 100%; 61 overflow: hidden; 62 } 63 .tabs .tab-contents .tab-content.selected iframe { 64 width: 100%; 65 height: 100%; 66 border: none; 67 }
标签：ext 技术 res var oat eth append hang http
原文地址：http://www.cnblogs.com/cxyzj/p/6081717.html
