Eeid—ligerUI学习（1）[首页布局]
来源：互联网 发布：js 中 json点不出来 编辑：程序博客网 时间：2024/04/30 20:51
EeidDemo
登陆以后跳入的页面main.jsp
main.jsp
<%@page language="java" contentType="text/html;charset=UTF-8"%><%@taglibprefix="s" uri="/struts-tags"%><% String path = request.getContextPath();%><html><head> <title>欢迎使用证书签发管理系统</title><metahttp-equiv="pragma" content="no-cache"><metahttp-equiv="cache-control" content="no-cache"><metahttp-equiv="expires" content="0"><linkrel="stylesheet" type="text/css" href="<%=path%>/StaticRes/css/main.css"/><linkhref="<%=path%>/StaticRes/css/ligerui-all.css"rel="stylesheet" type="text/css" /><linkhref="<%=path%>/StaticRes/css/common.css"rel="stylesheet" type="text/css" /><scriptsrc="<%=path%>/UIRes/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><scriptsrc="<%=path%>/UIRes/ligerUI/js/ligerui.all.js" type="text/javascript"></script><scriptsrc="<%=path%>/StaticRes/js/common.js"type="text/javascript"></script> <scripttype="text/javascript"> var tab = null; var menu; var actionNodeID; var nodeUrl; var treeManager = null; var accordion = null; var tabItems = []; var tabidcounter = 0; $(function () { //布局 $("#layout1").ligerLayout({leftWidth: 190, height: '100%',heightDiff:-34,space:4, onHeightChanged:f_heightChanged }); var height =$(".l-layout-center").height(); //Tab $("#framecenter").ligerTab({ height: height, showSwitchInTab : true, showSwitch: true }); //面板 $("#accordion1").ligerAccordion({ height: height - 24, speed:null }); //绑定菜单事件 //鼠标滑过事件 $("ul.menulistli").hover(function () { $(this).addClass("over"); //添加css样式，over类是js样式库中的 }, function () { $(this).removeClass("over");//去除css样式 }); //菜单点击事件 $("ul.menulistli").click(function () { //得到id并且依据【id,title,url】添加tab var tabid =$(this).attr("menuno"); f_addTab(tabid,$(this).attr("title"), $(this).attr("url")); }); //获取framecenter属性赋给tab tab = liger.get("framecenter"); //获取accordion1属性赋给accordion accordion =liger.get("accordion1"); $("#pageloading").hide(); //指定菜单的数据源 menu = $.ligerMenu({ top: 100, left: 100,width: 120, items: [ //右键出现的文字、点击事件（itemclick下面有定义）、图标 { text: '增加', click: itemclick, icon: 'add'}, { text: '修改', click: itemclick }, { line: true }, { text: '查看', click: itemclick } ] }); //构造树级菜单 $("#treeMenu").ligerTree({ //该url用于得到构建树的请求动作 url:'<%=path%>/ajax_Login_treeMenu.do', ajaxType:'get', checkbox:false,//参数：是否有复选框，默认值为true isExpand:false,//参数：是否展开，默认为null onSuccess:f_onSuccess,//加载成功事件： (data) onClick:f_click,//点击事件：({data,target}) //右击事件 onContextmenu:function (node, e) { actionNodeID = node.data.text;//节点文本 nodeUrl =node.data.url; //节点URL menu.show({ top: e.pageY, left: e.pageX});//显示位置 return false; } }); }); // treeManager =$("#treeMenu").ligerGetTreeManager(); function f_click(node) { if(node.data.url !=null) //f_addTab方法下面有定义 f_addTab(node.data.id,node.data.text, node.data.url); else if(!isLeaf) { } //f_add(node.data.url,node.data.text,600,400); /* else { var nodes =treeManager.getSelected(); treeManager.onExpand(nodes); } */ } function itemclick(item, i) { //f_addTab(item.id,actionNodeID+item.text, nodeUrl); f_add(nodeUrl, item.text,600,400); } function f_heightChanged(options) { if (tab) tab.addHeight(options.diff); if (accordion &&options.middleHeight - 24 > 0) accordion.setHeight(options.middleHeight -24); } function f_addTab(tabid, text, url) { if (!tab) return;//如果该tab存在不做处理 if (!tabid) { tabidcounter++; tabid = "tabid" +tabidcounter; } //isTabItemExist：依据tabid判断tab是否存在的方法 //这里每次点击一下树菜单，会有刷新的效果 if (tab.isTabItemExist(tabid)) {//如果该tabid的tab存在 //方法：移除一个tab tab.removeTabItem(tabid); //方法：增加一个tab tab.addTabItem({ tabid: tabid, text:text, url: url }); } else{ tab.addTabItem({ tabid: tabid, text:text, url: url }); } }</script> </head><body> <divid="pageloading"></div> <div id="topmenu"class="l-topmenu"> <divclass="l-topmenu-logo">SSAward管理后台</div> <div class="l-topmenu-welcome"> <ahref="javascript:chkLogout();" class="l-link2">退出</a> </div> </div> <div id="layout1"style="width: 99.2%; margin: 0 auto; margin-top: 4px;"> <div position="left"title="主要菜单"id="accordion1"> <div title="树级菜单"> <ulid="treeMenu" style="margin-top:3px;"></ul> </div> <!-- 一级菜单 --> <div title="一级菜单"> <ulclass="menulist"> <!-- 对应loginAction中dispatcherMenu方法(将参数传递过去) --> <!-- 这里所有的二级菜单虽然对应Action和方法都是一样的，但是由于传的参数不一样， 效果也是完全不一样，因为Action中的相应方法实现的是页面跳转 --> <!-- 总结：li(url/title/menuno)->img(src)->div(class)--> <liurl="<%=path%>/syn_Login_dispatcherMenu.do?menuUrl=gridview"title="表格测试"menuno="no1"> <imgsrc="<%=path%>/StaticRes/icons/32X32/search.gif"/><span>表格测试</span> <divclass="menuitem-l"></div> <divclass="menuitem-r"></div></li> <liurl="<%=path%>/syn_Login_dispatcherMenu.do?menuUrl=tree" title="树形菜单"menuno="no2"><img src="<%=path%>/StaticRes/icons/32X32/bank.gif"/><span>树形菜单</span> <divclass="menuitem-l"></div> <divclass="menuitem-r"></div></li> </ul> </div> <div title="一级菜单2"> <ulclass="menulist"> <liurl="<%=path%>/syn_Login_dispatcherMenu.do?menuUrl=upload"title="二级菜单3"menuno="no3"> <imgsrc="<%=path%>/StaticRes/icons/32X32/search.gif"/><span>二级菜单</span> <divclass="menuitem-l"></div> <divclass="menuitem-r"></div></li> <liurl="myprojectlist.aspx" title="二级菜单4"menuno="no4"><img src="<%=path%>/StaticRes/icons/32X32/bank.gif"/><span>二级菜单</span> <divclass="menuitem-l"></div> <divclass="menuitem-r"></div></li> </ul> </div> </div> <divposition="center" id="framecenter"> <divtabid="ifm_Div" title="我的主页"style="height: 300px"> <!-- iframe 元素会创建包含另外一个文档的内联框架（即行内框架） frameborder：取值0&1，规定是否显示框架周围的边框 name：规定iframe 的名称 --> <iframeframeborder="1" name="ifm_work"id="ifm_work"></iframe> </div> </div> </div> <!-- line-height:表示文字和线的距离 --> <div style="height: 20px;line-height: 20px; text-align: center;"> Copyright © 2011-2014www.baidu.com</div></body> <scriptlanguage="javascript"> //iframe在加载的时候会加载三次，导致action被调用三次，所以才用动态赋值。//只有加载完成了之后才给src赋值。document.onreadystatechange=function(){ if (document.readyState=="complete"){ document.getElementById("ifm_work").src="<%=path%>/syn_Login_dispatcherMenu.do?menuUrl=welcome"; }}</script></body><s:includevalue="message.jsp"></s:include></html> <!--总结： 该页面的跳转有：gridviewtree upload welcome -->对应的Struts.xml
<?xml version="1.0"encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD StrutsConfiguration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"><struts> <constant name="struts.enable.DynamicMethodInvocation"value="false" /> <constant name="struts.action.extension" value="do" /> <!-- 设置浏览器是否缓存静态内容,默认值为true(生产环境下使用),开发阶段最好关闭 --> <constant name="struts.serve.static.browserCache" value="false" /> <!-- 指定国际化资源文件的baseName为uploadFile--> <constant name="struts.custom.i18n.resources" value="resource/uploadFile"></constant> <!-- 解决乱码 --> <constant name="struts.i18n.encoding" value="UTF-8" /> <!-- 指定允许上传的文件最大字节数。默认值是2097152(2M) <constant name="struts.multipart.maxSize"value="2097152"/> --> <!-- 设置上传文件的临时文件夹,默认使用javax.servlet.context.tempdir <constant name="struts.multipart.saveDir "value="G:/testUpload" />--> <package name="default"namespace="/" extends="struts-default"> <interceptors> <!-- 定义同步请求的拦截器,可以做权限控制 --> <interceptor name="synInterceptor"class="cslg.eeid.Interceptor.SynLoginInterceptor"></interceptor> <!-- 异步操作Ajax调用Action配置,可以做权限控制 --> <interceptor name="ajaxInterceptor" class="cslg.eeid.Interceptor.AjaxLoginInterceptor"></interceptor> <interceptor-stack name="eeidSynStack"> <interceptor-ref name="synInterceptor"/> <interceptor-ref name="defaultStack"/> </interceptor-stack> <interceptor-stack name="eeidAjaxStack"> <interceptor-ref name="ajaxInterceptor"/> <interceptor-ref name="defaultStack"/> </interceptor-stack> </interceptors> <!-- 普通同步Action调用，使用配置进行页面跳转--> <!-- 第一个参数指定action类型，第二个参数指定action中的方法 --> <action name="syn_*_*" class="cslg.eeid.action.{1}Action"method="{2}"> <interceptor-ref name="eeidSynStack" /> <result>${target}</result> <!-- 在拦截器中无法调用baseAction的setTarget方法，所以需要重新定义返回 --> <result name="login">/login.jsp</result> <result name="message">/WEB-INF/page/message.jsp</result> </action> <!-- 异步操作Ajax调用Action配置 --> <!-- 采用传统方式在Action中返回JSON数据，通过Json插件生成Json数据，以流的方式返回给js--> <action name="ajax_*_*" class="cslg.eeid.action.{1}Action"method="{2}" > <!-- 此时没有用到struts2默认方式返回JSON，所以没有 type="json"；extends="json-default" 等配置--> <!--<result type="json" > <param name="root">rows</param> </result> --> <!-- 此处不需要定义视图 --> <!-- 在拦截器中需要跳转到指定页面，所以需要重新定义返回 --> <result name="message">/WEB-INF/page/message.jsp</result> <!-- 使用此拦截器 --> <interceptor-ref name="eeidAjaxStack"/> </action> <!-- 用于处理文件上传Action配置 --> <action name="upload"class="cslg.eeid.action.FileUploadAction" method="uploadFile"> <result name="success">/WEB-INF/page/upload.jsp</result> <result name="input">/WEB-INF/page/upload.jsp</result> <result name="message">/WEB-INF/page/message.jsp</result> <interceptor-ref name="fileUpload"> <!-- 文件过滤,允许后缀名为png,bmp,jpg,doc,xls,xlsx的文件上传 --> <param name="allowedExtensions"> png,bmp,jpg,doc,xls,xlsx </param> <!-- 文件大小, 以字节为单位 --> <param name="maximumSize">10259560</param> </interceptor-ref> <!-- 默认拦截器必须放在fileUpload之后，否则无效 --> <interceptor-ref name="eeidSynStack"/> </action> </package> <!-- 异步操作Ajax调用Action配置,可以做权限控制 --> <!-- 采用传统方式在Action中返回JSON数据，通过Json插件生成Json数据，以流的方式返回给js <package name="ajax-default"namespace="/" extends="struts-default"> 定义异步请求的拦截器 <interceptors> <interceptorname="authority"class="cslg.eeid.Util.AjaxLoginInterceptor"> </interceptor> 拦截器栈 <interceptor-stackname="ajaxInterceptor"> <interceptor-refname="defaultStack" /> <interceptor-refname="authority" /> </interceptor-stack> </interceptors> </package>--></struts>对应的LoginAction.java
public class LoginAction extendsBaseAction<User> {//……字段和相应的get和set方法//拼接用于构建树的数据源 publicvoidtreeMenu(){ String menu = "["; //权限为0的树节点信息 List<TreeMenu> parentList = userService.getParentList("0"); //如果没有父节点，退出 if(parentList.size()<1) return; //遍历节点信息 for (int i = 0; i < parentList.size(); i++) { //得到节点信息，以JSON格式存储 menu += "{id:"+ "'"+parentList.get(i).getMenuID()+"'"; menu += ",text:" + "'"+parentList.get(i).getMenuDes()+"'"; menu += ",icon:" + "'"+parentList.get(i).getImg() + "'"; if(i==0) menu += ",isExpand:true";//是否可以展开 String parentId =parentList.get(i).getMenuID(); List<TreeMenu> childMenuList= userService.getParentList(parentId); if (childMenuList.size() < 1) continue; else{ menu += ",children:["; for (int j = 0; j < childMenuList.size(); j++) { menu += "{id:" + "'"+childMenuList.get(j).getMenuID()+"'"; menu += ",text:"+ "'"+ childMenuList.get(j).getMenuDes() +"'"; menu += ",url:"+ "'"+childMenuList.get(j).getUrl() +"'"; menu += ",icon:"+ "'"+childMenuList.get(j).getImg() + "'"; if(j != childMenuList.size()-1) menu += "},"; else menu+= "}"; } menu+="]}"; } if(i!= parentList.size()-1) menu += ","; else menu += "]"; } String rows = menu; System.out.println(rows); //源码中要用rows，所以得到的数据赋给rows renderJson (rows,"encoding:UTF-8"); }public String dispatcherMenu () throws Exception { @SuppressWarnings("unused") StringserverRand =(String)ActionContext.getContext().getSession().get("rand"); //？？动态跳转的jsp页面（menuUrl是页面提交上来的参数） this.setTarget("/WEB-INF/page/" + menuUrl+".jsp"); return SUCCESS;}} 0 0
- Eeid—ligerUI学习（1）[首页布局]
- ligerUI学习
- LigerUi框架布局的随心所欲调整（实例）！
- ligerUI总结—— grid表格篇（1）
- html学习-day03:简单首页布局
- Android学习笔记--FragmentTabHost完成首页布局
- 首页布局
- ligerui学习笔记
- ligerui学习问题记录
- jquery ligerUI学习
- 初次学习ligerui
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果）
- [SSH_easyUI]细节1：首页布局、登录注册
- React Native布局实践：开发京东客户端首页（四）——首页功能按钮及控件封装
- css布局之流动布局（腾讯软件首页案例）
- LigerUI
- ligerUI
- LigerUI
- Js获取短信验证码前段效果
- Linux hostname命令修改主机名称
- VxWorks6.6 pcPentium BSP 使用说明（三）：设备驱动
- VxWorks6.6 pcPentium BSP 使用说明（二）：创建启动盘
- VxWorks6.6 pcPentium BSP 使用说明（一）：基本概念
- Eeid—ligerUI学习（1）[首页布局]
- STL中heap算法（堆算法）
- cubieboard2 编译安装opencv
- this 关键字 （二）
- 实训一：电子商务模式
- 黑马程序员——正则表达式
- mingw编译thrif和boost
- 知己知彼，IT公司对数据挖掘相关从业者的的要求
- GPIO的驱动模型
