JavaScript:jerichoTab每次刷新

关于

由于使用了jerichoTab,每次切换到已经打开的Tab时,不会刷新页面(可能导致页面内容状态不一致等问题).

jerichoTab是一款模拟 firefox 标签页的插件, 通过丰富的API可以轻松的实现动态添加, 删除, 激活tab, 当tab页过多时会在左右两段增加滚动条…引用自:【地址

jQuery LOGO
image-2448

解决方案

只需加一句即可:


//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();
$('#jerichotab_' + orderKey).loadData(true);//每次点击都刷新页面.[添加这一句即可每次点击页签都刷新内容]
return $('#jerichotab_' + orderKey).swapTabEnable();
},

附上完整JavaScript代码:


///
/*
* 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();
    $('#jerichotab_' + orderKey).loadData(true);//每次点击都刷新页面.
    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 = $('