【IT168技术】前些天看了胡睿制任的 EonerCMS效果，我就被深深吸引了。这种效果很像WebQQ的效果。呵呵。很强大。正好公司一个游戏项目正好在做后台。我就突然冒出来这个想法。
考虑点：
①管理员权限分配(使用ajax异步取得管理员权限)
代码片段：
protected string AdminList(HttpContext ctt)
{
StringBuilder sb = new StringBuilder();
if (ctt.Session["ManageUserID"] == null || ctt.Session["ManageUserID"].ToString() == "")
{
return sb.Append("{\"data\":[]}").ToString();
}
else
{
Int16 AdminID = Convert.ToInt16(ctt.Session["ManageUserID"].ToString());
List<AdminMenuModel> list = AdminServer.GetAdminMenuPermission(AdminID);
if (list.Count > 0)
{
sb.Append("{\"data\":[");
for (int i = 0; i < list.Count; i++)
{
AdminMenuModel model = list[i];
if (model.MenuLevel != 1)
{
if (i == (list.Count-1))
{
sb.Append("{\"id\":" + (i * 10) + ",\"iconName\":\"" + model.MenuName.Trim() + "\",\"iconUrl\":\"img/shortcut/news.png\",\"url\":\"../" + model.MenuLinkUrl + "\",\"width\":"+model.MenuWidth+",\"height\":"+model.MenuHeight+",\"resize\":true}");
}
else
{
sb.Append("{\"id\":" + (i * 10) + ",\"iconName\":\"" + model.MenuName.Trim() + "\",\"iconUrl\":\"img/shortcut/news.png\",\"url\":\"../" + model.MenuLinkUrl + "\",\"width\":" + model.MenuWidth + ",\"height\":" + model.MenuHeight + ",\"resize\":true},");
}
}
}
sb.Append("]}");
}
return sb.ToString();
}
}
{
StringBuilder sb = new StringBuilder();
if (ctt.Session["ManageUserID"] == null || ctt.Session["ManageUserID"].ToString() == "")
{
return sb.Append("{\"data\":[]}").ToString();
}
else
{
Int16 AdminID = Convert.ToInt16(ctt.Session["ManageUserID"].ToString());
List<AdminMenuModel> list = AdminServer.GetAdminMenuPermission(AdminID);
if (list.Count > 0)
{
sb.Append("{\"data\":[");
for (int i = 0; i < list.Count; i++)
{
AdminMenuModel model = list[i];
if (model.MenuLevel != 1)
{
if (i == (list.Count-1))
{
sb.Append("{\"id\":" + (i * 10) + ",\"iconName\":\"" + model.MenuName.Trim() + "\",\"iconUrl\":\"img/shortcut/news.png\",\"url\":\"../" + model.MenuLinkUrl + "\",\"width\":"+model.MenuWidth+",\"height\":"+model.MenuHeight+",\"resize\":true}");
}
else
{
sb.Append("{\"id\":" + (i * 10) + ",\"iconName\":\"" + model.MenuName.Trim() + "\",\"iconUrl\":\"img/shortcut/news.png\",\"url\":\"../" + model.MenuLinkUrl + "\",\"width\":" + model.MenuWidth + ",\"height\":" + model.MenuHeight + ",\"resize\":true},");
}
}
}
sb.Append("]}");
}
return sb.ToString();
}
}
代码片段：
var loadShortcut = function(){
//获取json数组并循环输出每个图标
$.getJSON("js/F_AdminMenuList.ashx",function(sc){
$(ul).html("");
//把返回的json数组存为全局变量
jsonsc = sc;
if(sc['data'].length==0){
ZENG.msgbox.show("登录超时，请点左下方按钮退出重新登录", 4, 30000);
return;
}
for(i=0; i<sc['data'].length; i++){
_cache.shortcutTemp = {"top":_top,"left":_left,"title":sc['data'][i]['iconName'],"shortcut":sc['data'][i]['id'],"imgsrc":sc['data'][i]['iconUrl']};
$(ul).append(FormatModel(shortcutTemp,_cache.shortcutTemp));
//每循环一个图标后，给top的偏移量加90px
_top += 90;
//当下一个图标的top偏移量大于窗口高度时，top归零，left偏移量加90px
if(_top+Core.config.shortcutTop+57 > windowHeight){
_top = Core.config.shortcutTop;
_left += 90;
}
}
});
};
//获取json数组并循环输出每个图标
$.getJSON("js/F_AdminMenuList.ashx",function(sc){
$(ul).html("");
//把返回的json数组存为全局变量
jsonsc = sc;
if(sc['data'].length==0){
ZENG.msgbox.show("登录超时，请点左下方按钮退出重新登录", 4, 30000);
return;
}
for(i=0; i<sc['data'].length; i++){
_cache.shortcutTemp = {"top":_top,"left":_left,"title":sc['data'][i]['iconName'],"shortcut":sc['data'][i]['id'],"imgsrc":sc['data'][i]['iconUrl']};
$(ul).append(FormatModel(shortcutTemp,_cache.shortcutTemp));
//每循环一个图标后，给top的偏移量加90px
_top += 90;
//当下一个图标的top偏移量大于窗口高度时，top归零，left偏移量加90px
if(_top+Core.config.shortcutTop+57 > windowHeight){
_top = Core.config.shortcutTop;
_left += 90;
}
}
});
};
②每个窗体的大小问题(在数据库权限表中增加窗体高和宽的大小)
③每个菜单的图标问题(在数据库权限表中增加图标路径)
首先实现效果：
主界面：
子窗体界面：
感觉使用这种效果当后台，是不是很有个性呢?而且EonerCMS兼容性挺好。我在IE6-IE9都测试了，还有Chrome，火狐下都能测试通过，最主要的就是IE6下是否正常，因为现在网吧基本都使用IE6.以后再贴代码吧!
