new UI - clicking events in middle panel will load detail to right panel.

This commit is contained in:
Jessica Wang 2010-09-03 15:22:44 -07:00
parent d62c44ad11
commit 6c3a4eb2e7
3 changed files with 27 additions and 7 deletions

View File

@ -31,6 +31,8 @@
<script type="text/javascript" src="scripts/cloud.core.init.js"></script>
<script type="text/javascript" src="scripts/cloud.core.instance.js"></script>
<script type="text/javascript" src="scripts/cloud.core.event.js"></script>
<title>Cloud.com CloudStack</title>
</head>

View File

@ -1,5 +1,5 @@
<!--
<script type="text/javascript" src="scripts/cloud.core.instances.js"></script>
<script type="text/javascript" src="scripts/cloud.core.instance.js"></script>
-->
<%@ page import="java.util.*" %>

View File

@ -54,9 +54,25 @@ $(document).ready(function() {
return false;
});
function setMidmenuItem(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.data("jsonObj", jsonObj);
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
// $midmenuItem1.bind("click", function(event) {
// var $t = $(this);
// toRightPanelFn($t);
// return false;
// });
}
var $midmenuItem = $("#midmenu_item");
function listMidMenuItems(leftmenuId, apiName, jsonResponse1, jsonResponse2, descriptionProperty) {
function listMidMenuItems(leftmenuId, apiName, jsonResponse1, jsonResponse2, descriptionProperty, rightPanelJSP, toRightPanelFn) {
$("#"+leftmenuId).bind("click", function(event) {
$("#right_panel").load(rightPanelJSP);
$.ajax({
cache: false,
data: createURL("command="+apiName+"&response=json"),
@ -68,18 +84,20 @@ $(document).ready(function() {
for(var i=0; i<items.length;i++) {
var item = items[i];
var $midmenuItem1 = $midmenuItem.clone();
$midmenuItem1.data("jsonObj", item);
$midmenuItem1.find("#description").text(item[descriptionProperty].substring(0,25));
$midmenuContainer.append($midmenuItem1.show());
setMidmenuItem(item, $midmenuItem1, toRightPanelFn);
}
}
//selectedItemType = jsonResponse2;
}
}
});
});
return false;
});
}
listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "description");
listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "description");
listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "description", "jsp/tab_event.jsp", loadEventToRigntPanelFn);
//listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "description", loadAlertToRightPanel);