/// /* * jerichotab * version: release-2.0.1 (05/13/2009) * @ jQuery v1.3.* * * Licensed under the GPL: * http://gplv3.fsf.org * * Copyright 2008, 2009 Jericho [ thisnamemeansnothing[at]gmail.com ] ======================================== #example: ======================================== ======================================== #API: #$.fn.initJerichoTab(Function): *renderTo(String): the tab render to('#sample') *uniqueId(String): the tab's id(It must be unique) *tabs(Array): the tabs will be initialized, whose items will be formated as follows: { **title(String): the tab title text **iconImg(String): the tab icon that displayed from title text, **closeable(Boolean): the switch that controls whether the tab can be closed (true as default) } *activeTabIndex(Int): the tab you'd like to select after loading(0 as default) *contentHeight(Int): height of the content div tag *contentCss(Object): the same as style sheet *loadOnce(Boolean): the switch controls if load tab content at the first time(true as default) *tabWidth(Int): width of each tab(150 as default) #$.fn.jerichoTab.addTab(Function): *tabId(String); the unique tab Id(Unused, private) *tabFirer(JQuery Object): the object that makes tab shown in a special way *title(String): the tab title text *data(Object): the tab data to load,including: **dataType:type of data, **dataLink:data link #example(must use as suited): ##formtag: *dataType:'formtag', //***use the html tags in this page *dataLink:'#example' //***id of the tag you'd like to display in this tab ##iframe: *dataType:'iframe', //***use the iframe to load another page *dataLink:'' //***such as 'iframetemplates/iframe.htm' //***the relative url of the page you'd like to display in this tab, //***and jerichoTab will use an iframe to load it ###html: *dataType:'html', //*** load data from html url *dataLink:'' // *** the relative url of your html page ##ajax: *dataType:'ajax', //***use ajax to load data with asynchronous operations *dataLink:'' //*** yes,u can write down your ajax handler url and then jerichotab'll make a callback, //*** so the responseText will be displayed in the content holder(u can use html tags in your server callback datas) *onLoadCompleted(Function): fired after the data has been loaded *iconImg(String): the tab icon that displayed below title text(relative to...), *closeable(Boolean): set whether the tab can be closed(true as default) ======================================== */ //; (function($) { $.extend($.fn, { initJerichoTab: function(setting) { var opts = $.fn.extend({ //the container of jerichotab(is required, a jQuery format selector String as '.container' or '#container') renderTo: null, //the unique id of jerichotab(is required and unique, not null) uniqueId: null, //format your tab data like this: [{title:'',iconImg:'',closeable:true},{title:'',iconImg:'',closeable:true}] //it's an Array... tabs: [], //when the jerichotab has been loaded, the tab you'ld like to display first(start at 0, and 0 as default) activeTabIndex: 0, //the style sheet of tab content contentCss: { 'height': '500px' }, //if you set this property as true, the data'll be loaded only at the first time when users click the tab //in other times jerichotab only swich it's css(display property) from 'none' to 'block' loadOnce: true, //the tab width (150 as default) tabWidth: 110, //set an ajaxload effect, jerichotab has provided two choices: 'usebg' | 'righttag' //'usebg': control if set a big loading gif in the contentholder //'righttag': this will set a small loading gif in the right top of contentholder loader: 'righttag', //两边滑块宽度 slidersWidth: 19, //标题高度 titleHeight: 26 }, setting); //initialize the jerichotab function createJerichoTab() { //make sure that a container and uniqueId were provided if (opts.renderTo == null) { alert('you must set the \'renderTo\' property\r\t--JeirchoTab'); return; } if (opts.uniqueId == null) { alert('you must set the \'uniqueId\' property\r\t--JeirchoTab'); return; } if ($('#' + opts.uniqueId).length > 0) { alert('you must set the \'uniqueId\' property as unique\r\t--JeirchoTab'); return; } //the jerichotab html tree: /*
    ###tabpages here
###tabcontents here
*/ var jerichotab = $('
    ') .appendTo($(opts.renderTo)); //apply contentcss to the contentholder $('.tab_content>.content', jerichotab).css(opts.contentCss); //fill data $.fn.jerichoTab = { master: jerichotab, tabWidth: opts.tabWidth, tabPageWidth: $('.tab_pages', jerichotab).width(), slidersWidth: opts.slidersWidth, loader: opts.loader, loadOnce: opts.loadOnce, tabpage: $('.tab_pages>.tabs>ul', jerichotab), addTab: function(tabsetting) { //set as the unique tab id and tabFirer tag tagGuid = (typeof tagGuid == 'undefined' ? 0 : tagGuid + 1); var curIndex = tagGuid; //this function will be open to all users for them to add tab at any time var ps = $.fn.extend({ //if there is a DOM that cause the tab to be added to tabpages, //you should pass it to jerichotab, in which way tab'll only be activated when //user click the DOM next time tabFirer: null, title: '新增页签'+(curIndex+1), //the dataType and dataLink were suited as: //1.formtag: // dataType:'formtag', // --use the html tags in this page // dataLink:'#example' // --id of the tag you'ld like to display in this tab //2.iframe: // dataType:'iframe', // --use the iframe to load another page // dataLink:'' // --such as 'iframetemplates/iframe.htm', set // --the relative url of the page u'ld like to display in this tab, // --and jerichoTab will use an iframe to load it //3.html: // dataType:'html', // --load html tags from a url // dataLink:'' // --the relative url of your html page //4.ajax: // dataType:'ajax', // --use the ajax to load datas with asynchronous operations // dataLink:'' // --yes,u can write down your ajax handler url and jerichotab'll make a callback, // --so the responseText will be displayed in the content holder(u can use html tags in your server callback datas) data: { dataType: '', dataLink: '' }, //set the tab icon of each(relative to...) iconImg: '', //whether this tab can be closed(ture as default) closeable: true, //this function will be fired after all data has been loaded onLoadCompleted: null, // the tab's name name:'' }, tabsetting); //window.console && console.log('%o', tabsetting); //check whether the tabFirer exists or not, and that it has an attribute['jerichotabindex'], then set the tab that tabFirer was connected activated //otherwise attach the jerichotabindex' attribute if (ps.tabFirer != null) { var jerichotabindex = ps.tabFirer.attr('jerichotabindex'); if (typeof jerichotabindex != 'undefined' && $('#jerichotab_' + jerichotabindex).length > 0) return $.fn.setTabActive(jerichotabindex).adaptSlider().loadData(); ps.tabFirer.attr('jerichotabindex', curIndex); } // set name if(ps.name == ''){ ps.name = ps.title; } //newTab html tree: /*
  • JerichoTab
     
     
  • */ /*var newTab = $('
  • ' + '
    ' + (ps.iconImg == '' ? '' : '
     
    ') + '
    ' + ps.title.cut(opts.tabWidth / 10 - 1) + '
    ' + '
    ' + (ps.closeable ? ' ' : '') + '
    ' + '
    ' + '
     
    ' + '
  • ')*/ var newTab = $('
  • ' + '
    ' + (ps.iconImg == '' ? '' : '
     
    ') + '
    ' + ps.title.cut(opts.tabWidth / 10 - 1) + '
    ' + '
    ' + (ps.closeable ? ' ' : '') + '
    ' + '
    ' + '
     
    ' + '
  • ').appendTo($.fn.jerichoTab.tabpage).css('opacity', '0').applyHover() .applyCloseEvent().animate({ 'opacity': '1', width: opts.tabWidth }, 100, function() { $.fn.setTabActive(curIndex); }); //use an Array named "tabHash" to restore the tab information tabHash = (typeof tabHash == 'undefined' ? [] : tabHash); tabHash.push({ index: curIndex, tabFirer: ps.tabFirer, tabId: 'jerichotab_' + curIndex, holderId: 'jerichotabholder_' + curIndex, iframeId: 'jerichotabiframe_' + curIndex, onCompleted: ps.onLoadCompleted }); return newTab.applySlider(); }, closeCurrentTab: function(tabsetting) { $('.tab_selected .tab_close>a').click(); /*var ps = $.fn.extend({ name:'', activeTabName:'', isReaload: false }, tabsetting); $.fn.jerichoTab.tabpage.children('li[name='+ps.name+']').remove(); var isLoad = 0; if(ps.activeTabName != ''){ var lis = $.fn.jerichoTab.tabpage.children('li'); for(var i=0;i 0) ? ($.fn.jerichoTab.slidersWidth * 2) : 0); $(".tabs", $.fn.jerichoTab.master).width($.fn.jerichoTab.tabPageWidth).applySlider().adaptSlider(); var fixHeight = -2; //if (Metronic.isIE8()){ // fixHeight = 25; //} $('#jerichotab_contentholder').height($(opts.renderTo).height() - opts.titleHeight - 5 - fixHeight); $(".jericho_tab iframe").height($(".jericho_tab").parent().height() - opts.titleHeight - fixHeight); }; $(window).resize(function() { $.fn.jerichoTab.resize(); }) //window.console && console.log('width :' + $.fn.jerichoTab.tabpage.width()); }, //activate the tag(orderkey is the tab order, start at 1) setTabActiveByOrder: function(orderKey) { var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected'); if (lastTab.length > 0) lastTab.swapTabEnable(); return $('#jericho_tabs').filter(':nth-child(' + orderKey + ')').swapTabEnable(); }, //activate the tag(orderKey is the tagGuid of each tab) setTabActive: function(orderKey) { var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected'); if (lastTab.length > 0) lastTab.swapTabEnable(); return $('#jerichotab_' + orderKey).swapTabEnable(); }, addEvent: function(e, h) { var target = this.get(0); if (target.addEventListener) { target.addEventListener(e, h, false); } else if (target.attachEvent) { target.attachEvent('on' + e, h); } }, //create an iframe in the contentholder to load pages buildIFrame: function(src) { return this.each(function() { var onComleted = null, jerichotabiframe = ''; for (var tab in tabHash) { if (tabHash[tab].holderId == $(this).attr('id')) { onComleted = tabHash[tab].onCompleted; jerichotabiframe = tabHash[tab].iframeId; break; } } src += (src.indexOf('?') == -1 ? '?' : '&') + 'tabPageId=' + jerichotabiframe; var iframe = $('