etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new UI - instance page - be able to switch between tabs.

This commit is contained in:
Jessica Wang 2010-09-08 15:08:49 -07:00
parent f5801a4f57
commit 7770da13db
3 changed files with 43 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui/new/jsp/tab_instance.jsp
View File

@ -23,15 +23,16 @@
<p id="after_action_info"></p>
</div>
<div class="tabbox" style="margin-top:15px;">
<div class="content_tabs on">
<div class="content_tabs on" id="tab_details">
<%=t.t("Details")%></div>
<div class="content_tabs off">
<div class="content_tabs off" id="tab_volume">
<%=t.t("Volume")%></div>
<div class="content_tabs off">
<div class="content_tabs off" id="tab_statistics">
<%=t.t("Statistics")%></div>
</div>
<!--VM details start here-->
<div class="grid_container" style="display:none;">
<!--Details tab (start)-->
<div class="grid_container" style="display:block;" id="tab_content_details">
<div class="grid_rows odd">
<div class="vm_statusbox">
<div class="vm_consolebox">
@ -140,10 +141,10 @@
</div>
</div>
</div>
<!--VM details ends here-->
<!--Details tab (end)-->
<!--Volume start here-->
<div class="grid_container" style="display:block;">
<!--Volume tab (start)-->
<div class="grid_container" style="display:none;" id="tab_content_volume">
<div class="grid_header">
<div class="grid_header_title">i-2-7-JW</div>
<div class="grid_actionbox"></div>
@ -186,6 +187,13 @@
</div>
</div>
<!--Volume tab (end)-->
<!--Statistics tab (start)-->
<div class="grid_container" style="display:none;" id="tab_content_statistics">
statistics....
</div>
<!--Statistics tab (start)-->
</div>
<!-- VM detail panel (end) -->
<!-- VM wizard (begin)-->

26
ui/new/scripts/cloud.core.instance.js
View File

@ -542,6 +542,32 @@ function clickInstanceGroupHeader($arrowIcon) {
zIndex: 2000
}));
//***** switch to different tab (begin) ********************************************************************
$("#tab_details").bind("click", function(event){
$(this).removeClass("off").addClass("on");
$("#tab_volume, #tab_statistics").removeClass("on").addClass("off");
$("#tab_content_details").show();
$("#tab_content_volume, #tab_content_statistics").hide();
return false;
});
$("#tab_volume").bind("click", function(event){
$(this).removeClass("off").addClass("on");
$("#tab_details, #tab_statistics").removeClass("on").addClass("off");
$("#tab_content_volume").show();
$("#tab_content_details, #tab_content_statistics").hide();
return false;
});
$("#tab_statistics").bind("click", function(event){
$(this).removeClass("off").addClass("on");
$("#tab_details, #tab_volume").removeClass("on").addClass("off");
$("#tab_content_statistics").show();
$("#tab_content_details, #tab_content_volume").hide();
return false;
});
//***** switch to different tab (end) **********************************************************************
//***** VM Wizard (begin) ******************************************************************************
$vmPopup = $("#vm_popup");
var $serviceOfferingTemplate = $("#vm_popup_service_offering_template");

2
ui/new/scripts/cloud.core.js
View File

@ -170,7 +170,7 @@ function fromdb(val) {
}
function todb(val) {
return encodeURIComponent(escape(display));
return encodeURIComponent(escape(val));
}