new UI - specify element instead of elementId when switching between tabs.

This commit is contained in:
Jessica Wang 2010-10-13 10:52:41 -07:00
parent e8898f25c5
commit f27785658e
8 changed files with 463 additions and 452 deletions

View File

@ -174,6 +174,7 @@
<!--Details tab (end)-->
<!--Volume tab (start)-->
<div style="display: none;" id="tab_content_volume">
Volume
</div>
<!--Volume tab (end)-->
<!--Statistics tab (start)-->

View File

@ -21,6 +21,7 @@
<p id="after_action_info">
</p>
</div>
<div id="zone_page">
<div class="tabbox" style="margin-top: 15px;">
<div class="content_tabs on" id="tab_details">
<%=t.t("details")%></div>
@ -157,8 +158,25 @@
<!-- Network tab (end)-->
<!-- Secondary Storage tab (start)-->
<div id="tab_content_secondary_storage" style="display: none">
Secondary Storage
</div>
<!-- Secondary Storage tab (end)-->
</div>
<div id="pod_page" style="display:none">
Pod Page
</div>
<div id="cluster_page" style="display:none">
Cluster Page
</div>
<div id="host_page" style="display:none">
Host page
</div>
<div id="primarystorage_page" style="display:none">
Primary Storage Page
</div>
<div id="systemvm_page" style="display:none">
System VM Page
</div>
</div>
<!-- domain detail panel (end) -->
<!-- treenode template (begin) -->
@ -295,10 +313,7 @@
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_zoneicon.png" id="zone_icon" alt="Zone" /></div>
<span id="zone_label">Zone:</span>
<strong>
<span id="zone_name">Zone 1</span>
</strong>
<span id="zone_label">Zone:</span> <strong><span id="zone_name">Zone 1</span> </strong>
</div>
</div>
<div id="zone_content" style="display: none">
@ -326,9 +341,7 @@
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_podicon.png" id="pod_icon" alt="Pod" /></div>
<span id="pod_label">Pod:</span>
<strong>
<span id="pod_name">Name of the Pod</span>
<span id="pod_label">Pod:</span> <strong><span id="pod_name">Name of the Pod</span>
</strong>
</div>
</div>
@ -355,10 +368,8 @@
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_clustericon.png" id="cluster_icon" alt="Cluster" /></div>
<span id="cluster_label"">Cluster:</span>
<strong>
<span id="cluster_name">(Name of the Cluster)</span>
</strong>
<span id="cluster_label"">Cluster:</span> <strong><span id="cluster_name">(Name of the
Cluster)</span> </strong>
</div>
</div>
<div id="cluster_content">
@ -384,9 +395,7 @@
<div class="leftmenu_fourthindent">
<div class="leftmenu_list_icons">
<img src="images/zone_hosticon.png" id="host_icon" alt="Host" /></div>
<span id="host_label">Host:</span>
<strong>
<span id="host_name">(Name of the Host)</span>
<span id="host_label">Host:</span> <strong><span id="host_name">(Name of the Host)</span>
</strong>
</div>
</div>
@ -407,10 +416,8 @@
<div class="leftmenu_fourthindent">
<div class="leftmenu_list_icons">
<img src="images/zone_primarystorageicon.png" id="primarystorage_icon" alt="PrimaryStorage" /></div>
<span id="primarystorage_label">Storage:</span>
<strong>
<span id="primarystorage_name">(Name of the Primary Storage)</span>
</strong>
<span id="primarystorage_label">Storage:</span> <strong><span id="primarystorage_name">
(Name of the Primary Storage)</span> </strong>
</div>
</div>
</div>
@ -423,10 +430,8 @@
<div class="leftmenu_secondindent">
<div class="leftmenu_list_icons">
<img src="images/zone_systemvmicon.png" id="systemvm_icon" alt="System VM" /></div>
<span id="systemvm_label">System VM:</span>
<strong>
<span id="systemvm_name">(System VM name)</span>
</strong>
<span id="systemvm_label">System VM:</span> <strong><span id="systemvm_name">(System
VM name)</span> </strong>
</div>
</div>
</div>

View File

@ -238,8 +238,8 @@ function afterLoadDomainJSP() {
refreshWholeTree(defaultRootDomainId, defaultRootLevel);
//***** switch between different tabs (begin) ********************************************************************
var tabArray = ["tab_details", "tab_resource_limits", "tab_admin_account"];
var tabContentArray = ["tab_content_details", "tab_content_resource_limits", "tab_content_admin_account"];
var tabArray = [$("#tab_details"), $("#tab_resource_limits"), $("#tab_admin_account")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_resource_limits"), $("#tab_content_admin_account")];
switchBetweenDifferentTabs(tabArray, tabContentArray);
//***** switch between different tabs (end) **********************************************************************

View File

@ -47,8 +47,8 @@ function clickInstanceGroupHeader($arrowIcon) {
initDialog("dialog_create_template", 400);
//***** switch between different tabs (begin) ********************************************************************
var tabArray = ["tab_details", "tab_volume", "tab_statistics", "tab_router"];
var tabContentArray = ["tab_content_details", "tab_content_volume", "tab_content_statistics", "tab_content_router"];
var tabArray = [$("#tab_details"), $("#tab_volume"), $("#tab_statistics"), $("#tab_router")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_volume"), $("#tab_content_statistics"), $("#tab_content_router")];
switchBetweenDifferentTabs(tabArray, tabContentArray);
//***** switch between different tabs (end) **********************************************************************

View File

@ -1,8 +1,8 @@
//***** baseline (begin) *******************************************************************************************************************
function afterLoadIpJSP() {
//***** switch between different tabs (begin) ********************************************************************
var tabArray = ["tab_details", "tab_port_forwarding", "tab_load_balancer"];
var tabContentArray = ["tab_content_details", "tab_content_port_forwarding", "tab_content_load_balancer"];
var tabArray = [$("#tab_details"), $("#tab_port_forwarding"), $("#tab_load_balancer")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_port_forwarding"), $("#tab_content_load_balancer")];
switchBetweenDifferentTabs(tabArray, tabContentArray);
//***** switch between different tabs (end) **********************************************************************

View File

@ -585,17 +585,17 @@ function switchBetweenDifferentTabs(tabArray, tabContentArray) {
}
function switchToTab(tabIndex, tabArray, tabContentArray) {
$("#"+tabArray[tabIndex]).bind("click", function(event){
$("#"+tabArray[tabIndex]).removeClass("off").addClass("on"); //current tab turns on
tabArray[tabIndex].bind("click", function(event){
tabArray[tabIndex].removeClass("off").addClass("on"); //current tab turns on
for(var k=0; k<tabArray.length; k++) {
if(k != tabIndex)
$("#"+tabArray[k]).removeClass("on").addClass("off"); //other tabs turns off
tabArray[k].removeClass("on").addClass("off"); //other tabs turns off
}
$("#"+tabContentArray[tabIndex]).show(); //current tab content shows
tabContentArray[tabIndex].show(); //current tab content shows
for(var k=0; k<tabContentArray.length; k++) {
if(k != tabIndex)
$("#"+tabContentArray[k]).hide(); //other tab content hide
tabContentArray[k].hide(); //other tab content hide
}
return false;
});

View File

@ -1,9 +1,11 @@
function afterLoadResourceJSP() {
//***** switch between different tabs (begin) ********************************************************************
var tabArray = ["tab_details", "tab_network", "tab_secondary_storage"];
var tabContentArray = ["tab_content_details", "tab_content_network", "tab_content_secondary_storage"];
var $zonePage = $("#zone_page");
//***** switch between different tabs in zone page (begin) ********************************************************************
var tabArray = [$zonePage.find("#tab_details"), $zonePage.find("#tab_network"), $zonePage.find("#tab_secondary_storage")];
var tabContentArray = [$zonePage.find("#tab_content_details"), $zonePage.find("#tab_content_network"), $zonePage.find("#tab_content_secondary_storage")];
switchBetweenDifferentTabs(tabArray, tabContentArray);
//***** switch between different tabs (end) **********************************************************************
//***** switch between different tabs in zone page (end) **********************************************************************
var forceLogout = true; // We force a logout only if the user has first added a POD for the very first time
var $zoneetree1 = $("#zonetree").clone().attr("id", "zonetree1");
@ -198,6 +200,9 @@ function afterLoadResourceJSP() {
case "zone_name":
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
//???
var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
//zoneObjectToRightPanel(obj);
break;

View File

@ -364,8 +364,8 @@ function afterLoadVolumeJSP() {
// *** recurring snapshot dialog - event binding (end) ******************************
//***** switch between different tabs (begin) ********************************************************************
var tabArray = ["tab_details", "tab_snapshot"];
var tabContentArray = ["tab_content_details", "tab_content_snapshot"];
var tabArray = [$("#tab_details"), $("#tab_snapshot")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_snapshot")];
switchBetweenDifferentTabs(tabArray, tabContentArray);
//***** switch between different tabs (end) **********************************************************************
}