|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
-
-
-
-
- RED.tabs = (function() {
-
-
- function createTabs(options) {
- var tabs = {};
-
- var ul = $("#"+options.id)
- ul.addClass("red-ui-tabs");
- ul.children().first().addClass("active");
- ul.children().addClass("red-ui-tab");
-
- function onTabClick() {
- activateTab($(this));
- return false;
- }
-
- function onTabDblClick() {
- if (options.ondblclick) {
- options.ondblclick(tabs[$(this).attr('href').slice(1)]);
- }
- return false;
- }
-
- function activateTab(link) {
- if (typeof link === "string") {
- link = ul.find("a[href='#"+link+"']");
- }
- if (!link.parent().hasClass("active")) {
- ul.children().removeClass("active");
- link.parent().addClass("active");
- if (options.onchange) {
- options.onchange(tabs[link.attr('href').slice(1)]);
- }
- }
- }
-
- function updateTabWidths() {
- var tabs = ul.find("li.red-ui-tab");
- var width = ul.width();
- var tabCount = tabs.size();
- var tabWidth = (width-6-(tabCount*7))/tabCount;
- var pct = 100*tabWidth/width;
- tabs.css({width:pct+"%"});
- }
-
- ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
- updateTabWidths();
-
-
- function removeTab(id) {
- var li = ul.find("a[href='#"+id+"']").parent();
- if (li.hasClass("active")) {
- var tab = li.prev();
- if (tab.size() === 0) {
- tab = li.next();
- }
- activateTab(tab.find("a"));
- }
- li.remove();
- if (options.onremove) {
- options.onremove(tabs[id]);
- }
- delete tabs[id];
- updateTabWidths();
- }
-
- return {
- addTab: function(tab) {
- tabs[tab.id] = tab;
- var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
- var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
- link.html(tab.label);
-
- link.on("click",onTabClick);
- link.on("dblclick",onTabDblClick);
- if (tab.closeable) {
- var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
- closeLink.html('<i class="icon-remove" />');
-
- closeLink.on("click",function(event) {
- removeTab(tab.id);
- });
- }
- updateTabWidths();
- if (options.onadd) {
- options.onadd(tab);
- }
- link.attr("title",tab.label);
- if (ul.find("li.red-ui-tab").size() == 1) {
- activateTab(link);
- }
- },
- removeTab: removeTab,
- activateTab: activateTab,
- resize: updateTabWidths,
- count: function() {
- return ul.find("li.red-ui-tab").size();
- },
- contains: function(id) {
- return ul.find("a[href='#"+id+"']").length > 0;
- }
-
- }
- }
-
- return {
- create: createTabs
- }
- })();
|