EasyUI Forum

<script type="text/javascript">
  $(document).ready(function() {//begin on page load


    //////////////////////////////////////////////////////////////////////////////////////
    //TAB FUNCTIONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //////////////////////////////////////////////////////////////////////////////////////

    //add a way to identify tabs by a unique id, instead of by the tab title. there needs to be the ability to have tabs that have the same title!!

    //initialize the main tabs & add events to the main tabs
    $('#main-tab-bar').tabs({//for all tabs

      onAdd: function(title) {//do this on add tab
        addTabPopup(title);//add the tab popup links. note: find a better way to do this!
      },//end on add tab

      onLoad: function(p) {//do this when a tab's href is loaded
        //figure out which tab was loaded. get its portal's id. initialize that portal.
        //problems:
        //  (1) this assumes this tab is still selected, when getting the id of the portal
        //  (2) if another tab is loaded quickly, the 1st tab's portal is squashed, and the 2nd tab doesn't load one
        //find the unique id of the portal to load (there is only one per tab, the same div that has the class "aportal")
        var thisPortal = $(".aportal").attr("id");
        //load the portal
        if (thisPortal != undefined) {//if the portal's id was found
          initializePortal(thisPortal); //initialize that portal
        }
      },//end on tab load

    });//end for all tabs
    //end init tabs & add events to all tabs

    $('#main-tab-bar').tabs('resize'); //now that the tabs are initialized, resize the main tab bar (to set its initial size correctly)

    //add tabs that should appear on page load
    if ($("body#home").length != 0) {//if this is the home page and not the popup
      //note: these two tabs are only added on page load during testing. later, clicking on a link will cause a new tab to appear
      addMainTabAjax("Test A", "include/portal-testA.asp?test=Hello", "icon-reps-profile", true);
      addMainTabAjax("Test B", "include/portal-testB.asp?test=World", "icon-reps", true);
    }

    $("#reloadTab").live("click", function(){//now and in the future, reload a tab's href via ajax when clicked
      var tabTitle = getTabProperty("title");//get this tab's title (find a way to use an id instead of title)
      $('#main-tab-bar').tabs('getTab', tabTitle).panel('refresh');//refresh this tab (reload its content via ajax)
    });

    //when the tab popup button is clicked, pop up that tab in a new window
    $(".tabs-popup").live("click", function(){
      //get the title, icon & content of this (the currently selected) tab
      var tabTitle = getTabProperty("title");
      var tabIcon = getTabProperty("icon");
      var tabContent = getTabProperty("content"); //note: this only returns the content if it was added dynamically
      var tabHref = getTabProperty("href"); //note: this only returns the href if the tab has one.
      //find a way to get the tab's unique id also
      //open a new window with that info
      //figure out how to encrypt this query string to hide it from the user
      var url = "popup_tab.asp?title=" + tabTitle + "&icon=" + tabIcon + "&content=" + tabContent + "&href=" + tabHref;
      url = encodeURI(url);
      var windowName = tabTitle;
      var windowOptions = "width=1000,height=700,scrollbars=yes,location=yes,menubar=no,resizable=yes,status=yes,toolbar=no";
      window.open(url, windowName, windowOptions);
      //close the tab that was popped up
      $('#main-tab-bar').tabs('close', tabTitle);//find a way to use an id instead of title
    });//end handle tab popup

    //add the popup icon and link to a new tab
    //this is a hack, because I can't read the easyUI code, so can't tell how to add a button to the tab properly
    function addTabPopup(title) {
      var newTab = $('#main-tab-bar').tabs("getTab", title); //get the tab that was just added
      if (newTab.panel('options').closable) {//if this tab can be closed
        $('#main-tab-bar .tabs-header .tabs-wrap .tabs li .tabs-title').each(function() {//for all tabs in the main tabs
          if ($(this).text() == title) {//if this is the tab that was added
            $(this).parent().next().before('<a href="javascript:void(0)" class="tabs-popup"><\/a>');//add the popup link before the close link
          }//end if this is the tab that was added
        });//end for all tabs
      }//end if this tab can be closed
    }//end add the popup icon and link

    //add a tab to the main tab bar, load content by href (ajax)
    function addMainTabAjax(tabTitle, tabContent, tabIcon, tabClose){
      //title of the tab, url for its content, what icon to show, whether to show the close button on the tab
      //find a way to set a unique id for the tab
      if ($('#main-tab-bar').tabs('exists', tabTitle)){//if the tab to add already exists (find a way to test by id, not title)
        $('#main-tab-bar').tabs('select', tabTitle);//go to that tab and select it (don't add it twice)
      }//end if the tab exists
      else {//else the tab does not already exist
        $('#main-tab-bar').tabs('add',{ //add the new tab
          title: tabTitle,    //tab title
          href: tabContent,   //url to load via ajax
          cache: true,        //cache the content so the tab doesn't reload it every time this tab is selected
          closed: true,       //close the tab: misnomer... for some reason the href was loaded twice. setting closed to true makes it only load once. the tab isn't really closed. http://www.jeasyui.com/forum/index.php?topic=29.0
          iconCls: tabIcon,   //tab icon
          closable: tabClose, //whether to show the close button on the tab
          selected: true      //whether this tab should be selected after it is added
        });//end add the new tab
      }//end else the tab is new
    }//end add a tab to the main tab bar

    //get a property of a specific tab or of the entire tab group in the main tab bar
    function getTabProperty(prop, num) {//property to find, which tab (use selected tab if null)
      //usage: getTabProperty("title") or getTabProperty("title", 3)
      var selectedTab; //which tab to find the property for
      var tabs = $('#main-tab-bar').tabs('tabs'); //get array of all tabs
      if (num != undefined) {//if the tab # was sent in, use it
        selectedTab = tabs[num]; //get specific tab
      }
      else {//else use the currently selected tab
        selectedTab = $('#main-tab-bar').tabs('getSelected'); //get the currently selected tab
      }
      switch(prop) {//find the property
        //per tab properties
        case 'closable': return selectedTab.panel('options').closable; break;//return whether the tab can be closed
        case 'title': return selectedTab.panel('options').title; break;     //return tab's title
        case 'icon': return selectedTab.panel('options').iconCls; break;    //return tab's icon
        case 'content': return selectedTab.panel('options').content; break; //return tab's content
        case 'href': return selectedTab.panel('options').href; break;       //return tab's href
        case 'index': //return the tab's number
          var tindex = 0; //start at first tab
          var tlength = $('#main-tab-bar').tabs('tabs').length; //number of tabs
          var ttitle = ""; //title of that tab
          for (tindex = 0; tindex < tlength; tindex++) {//for all tabs
            ttitle = tabs[tindex].panel('options').title; //get that tab's title
            if (ttitle == selectedTab.panel('options').title) {//if that tab's title = the selected tab's title
              return tindex; //return that index
            }//end if
          }//end for
          return null; //else return null if not found (although it should be)
          break;
        //global propties of tab group
        case 'width': return $('#main-tab-bar').tabs('options').width; break;                     //return tab container's width
        case 'height': return $('#main-tab-bar').tabs('options').height; break;                   //return tab container's height
        case 'plain': return $('#main-tab-bar').tabs('options').plain; break;                     //return tab container's plain
        case 'fit': return $('#main-tab-bar').tabs('options').fit; break;                         //return tab container's fit
        case 'border': return $('#main-tab-bar').tabs('options').border; break;                   //return tab container's border
        case 'scrollIncrement': return $('#main-tab-bar').tabs('options').scrollIncrement; break; //return tab container's scrollIncrement
        case 'scrollDuration': return $('#main-tab-bar').tabs('options').scrollDuration; break;   //return tab container's scrollDuration
        case 'length': return $('#main-tab-bar').tabs('tabs').length; break;                      //return tab container's number of tabs
        default: return null; //else not found
      }//end find the property
    }//end get tab property


    //////////////////////////////////////////////////////////////////////////////////////
    //TEST FOR COOKIES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //////////////////////////////////////////////////////////////////////////////////////

    function checkCookies() {//check to see if cookies are enabled
      $.setCookie("MyTest", "testing if cookies are enabled", {expires: 1});//try to set a test cookie
      var myCookie = $.getCookie("MyTest"); //try to load the test cookie
      if (myCookie == null) {//if the test cookie was not found
        return false; //cookies aren't enabled
      }//end if the cookie was not found
      else {//else the test cookie was found
        $.removeCookie("MyTest"); //delete the test cookie
        return true; //cookies are enabled
      }//end else the test cookie was found
    }//end check to see if cookies are enabled


    //////////////////////////////////////////////////////////////////////////////////////
    //SET UP PORTAL DEFAULTS/VARIABLES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //////////////////////////////////////////////////////////////////////////////////////

    //the default values for the portal
    var wDefaults = {//this is an object containing portal default properties
      //each item holds all panels that can go in that portal
      //panel id, whether closed, whether collapsed, which column
      "testAPortal":{
        "w001":{"wclosed":false,"wcollapsed":true,"pcol":0},
        "w002":{"wclosed":false,"wcollapsed":true,"pcol":1},
        "w003":{"wclosed":false,"wcollapsed":true,"pcol":2}
      },
      "testBPortal":{
        "w004":{"wclosed":false,"wcollapsed":true,"pcol":0},
        "w005":{"wclosed":false,"wcollapsed":true,"pcol":1},
        "w006":{"wclosed":false,"wcollapsed":true,"pcol":2}
      }
    }
    //end the default values for the portal

    //the current values for the portal
    var wCurrent = {};
    //end the current values for the portal


    //////////////////////////////////////////////////////////////////////////////////////
    //ADD THE PORTAL PANELS TO THE PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //////////////////////////////////////////////////////////////////////////////////////

    //set up the portal
    function initializePortal(pID){
      //add portal functionality to the div with that pID
      $('#' + pID).portal(); //turn the three column portal area into a portal
      //load the portal settings to use into wCurrent
      if (checkCookies()) {//if cookies are enabled
        wCurrent = $.getCookie("MyPortal2-" + <%=session("UserIDInt")%>); //try to load the cookie values into the "current" portal object for this user's id
        if (wCurrent == null || wCurrent == "") {//if the cookie was not found
          //the user does not have any portal settings saved, so we will set them up with the defaults
          $.setCookie("MyPortal2-" + <%=session("UserIDInt")%>, wDefaults, {expires: 3650});//save the default portal values in the cookie for this user's id
          wCurrent = $.getCookie("MyPortal2-" + <%=session("UserIDInt")%>); //load the cookie values into the "current" portal object
        }//end if the cookie was not found
      }//end if cookies are enabled
      else {//else cookies are disabled
        wCurrent = wDefaults; //load the default panels into the "current" portal object
        $('#cookieError').css('display', 'block'); //show the error message
      }//end else cookies are disabled
      //now the portal settings to use are saved in wCurrent
      addPortalWidgets(pID); //add panels into the pID portal
    }//end set up the portal

    //dynamically add all panels to the portal
    function addPortalWidgets(pID){//add all panels to the pID portal
      var tid, tcol, tclosed, tcollapsed; //panel properties
      var colAlt = 0; //alternating column values
      $.each(wCurrent[pID], function(widgetID) {//for each panel in the pID portal
        tid = widgetID; //get its id
        tcol = wCurrent[pID][widgetID].pcol; //get which column it goes in
        tclosed = wCurrent[pID][widgetID].wclosed; //get whether it is closed
        tcollapsed = wCurrent[pID][widgetID].wcollapsed; //get whether it is collapsed
        addPortalWidget(pID, tid, tcol, tclosed, tcollapsed); //add that panel to the portal
      });//end for each panel in the pID portal
      //add: resize the portal to adjust its width
    }//end add all panels to the pID portal

    //dynamically add a single panel to the portal
    function addPortalWidget(pID, wID, cID, isClosed, isCollapsed){//add a single panel wID to the pID portal
      //portal id, panel id, which column, whether closed, whether collapsed
      //moves the panel from the staging area into the portal area specified and gives it these properties
      if ($("#" + wID).length) { //if the panel exists (if this user is allowed to see it)
        //determine whether to initially collapse it
        if (isCollapsed == false || isCollapsed == "false") {//if it is NOT supposed to be collapsed
          $("#" + wID).panel("expand");//expand it
        }//end if it is supposed to be collapsed
        else {//else if it IS supposed to be collapsed
          $("#" + wID).panel("collapse");//collapse it
        }//end determine whether to initially collapse it
        //determine whether to initially close it
        if (isClosed == true || isClosed == "true") {//if it is supposed to be closed
          $("#" + wID).panel("close");//close it
        }//end if it is supposed to be closed
        else {//else it is NOT supposed to be closed
          $("#" + wID).panel("open");//open it
        }//end determine whether to initially close it
        //add it to the portal at the bottom of the specified column
        //Note: panels are saved in the order they appear, so when we add them to the portal from the saved values, it automatically puts them back in the correct order
        $("#" + pID).portal('add', { panel: $("#" + wID), columnIndex: cID });
        //this seems redundant, but adding a closed panel to the portal opens it, so we need to close it again
        if (isClosed == true || isClosed == "true") { //if the panel is closed
          $("#" + wID).panel("close");//close it
        }//end if the panel is closed
      }//end if the panel exists (if this user is allowed to see it)
      //else the panel was not allowed, so don't add it to the portal
    }//end add a single panel wID to the pID portal


  });//end  on page load
</script>

$.fn.tabs.methods.getTabByProperty = function(jq, param){
var tabs = jq.tabs('tabs');
for(var i=0; i<tabs.length; i++){
var tab = tabs[i];
if (tab.panel('options')[param.prop] == param.value){
return tab;
}
}
return null;
}

var index = 0;
$('#tt').tabs('add',{
title:'...',
closable:true,
mydata:'tab-'+(++index),  // add customized property
//...
});

var tab = $('#tt').tabs('getTabByProperty', {
  prop: 'mydata',
  value: 'tab-1'
});
var index = $('#tt').tabs('getTabIndex', tab);  // get tab index

$('#tt').tabs('add',{
  id:'tab-1',  // assign an id property
  title:'...',
  //...
});
var index = $('#tt').tabs('getTabIndex', $('#tab-1'));  // get tab index