上一节银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站运用EasyUI搭建了后台页面的框架,这一节银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站浸要运用EasyUI技术简单实现后台菜单,先将简单功能做出来,后期再继续充裕。()

  1. 实现左侧菜单

   起首看一下效果图:

SSH电商项目实战之四:EasyUI菜单的实现

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站可以点击“根蒂操作”和“其他操作”来切换菜单选项,正正在举座的选项内,点击折柳的结合,会正正在右侧显现出来。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先把左边的菜单做出来。

   左侧菜单实质浸要有两个:“种别牵制”和“商品牵制”。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站知途,上一节中,正正在aindex.jsp中应将后台页面的框架搭建好了,那么现正正在银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站只要做好这两个超链接,然后放到aindex.jsp中相应的div中即可。以是银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先正正在WebRoot文件夹下新建一个temp.jsp文件作为临时开发文件,由于正正在这里写jsp可以直接测出来,等效果可以后,再将实质复制到aindex.jsp中的相应位置。

  temp.jsp页面如下:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4.   <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6.     <style type="text/css">    
  7.         #menu {    
  8.             width:200px;    
  9.             /*border:1px solid red;*/    
  10.         }    
  11.         #menu ul {    
  12.             list-style: none;    
  13.             padding: 0px;    
  14.             margin: 0px;    
  15.         }    
  16.         #menu ul li {    
  17.             border-bottom: 1px solid #fff;    
  18.                 
  19.         }    
  20.         #menu ul li a {    
  21.             /*先将a标签转换为块级元素,能力设置宽和内间距*/    
  22.             display: block;    
  23.             background-color: #00a6ac;    
  24.             color: #fff;    
  25.             padding: 5px;    
  26.             text-decoration: none;    
  27.         }    
  28.         #menu ul li a:hover {    
  29.             background-color: #008792;    
  30.         }    
  31.             
  32.     </style>    
  33.   </head>    
  34.       
  35.   <body>    
  36.     <div id="menu">       
  37.         <ul>    
  38.             <li><a href="#">种别牵制</a>    
  39.             <li><a href="#">商品牵制</a>    
  40.         </ul>    
  41.     </div>    
  42.   </body>    
  43. </html>    

   temp.jsp中只做了两个链接,用li封装起来并放到div中,上面css是给这两个链接设置样式的,然后银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站开启tomcat,测试一下效果如下:

SSH电商项目实战之四:EasyUI菜单的实现

  做好了这两个超链接后,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站将封装两个超链接的ul拷贝到aindex.jsp中的左侧菜单实质显现位置,并扼要的修改,如下:

SSH电商项目实战之四:EasyUI菜单的实现

  css限制直接考到aindex.jsp的head标签里即可。看上面那个a标签,里面是title属性,并不是href,由于银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站不是跳转到新的页面,由于EasyUI就这一个页面,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站要让点击后的显现放到右边的tab选项卡那里,以是银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先把跳转的action写正正在title属性里,后面再改。接下来,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站要通过点击种别牵制,正正在右边的选项卡中弹出举座类容的功能。

  2. 实现右侧tab选项卡

   实现点击左边菜单栏弹出右边选项卡的功能,需要加入js代码了。运用EasyUI的思路是:起首点击超链接,拿到这个超链接的名字,由于弹出来的选项卡标题应该和这个超链接的名字往往的,比如“种别牵制”;然后坚决改名字的选项卡是否曾经存正正在,如果存正正在则显现,如果不存正正在则创建,并显现要显现的实质。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来看下js限制的代码:

XML/HTML代码
  1. <script type="text/javascript">    
  2.     $(function(){    
  3.         $("a[title]").click(function(){    
  4.             var text = $(this).text();    
  5.             var href = $(this).attr("title");    
  6.             //坚决当前右边是否已有相应的tab    
  7.             if($("#tt").tabs("exists", text)) {    
  8.                 $("#tt").tabs("select", text);    
  9.             } else {    
  10.                 //如果没有则创建一个新的tab,不然切换到当前tag    
  11.                 $("#tt").tabs("add",{    
  12.                     title:text,    
  13.                     closable:true,    
  14.                     content:'<iframe title=' + text + 'src=' + href + ' frameborder="0" width="100%" height="100%" />'    
  15.                     //href:默认通过url地址加载长途的页面,可是仅仅是body限制    
  16.                     //href:'send_category_query.action'    
  17.                 });    
  18.             }    
  19.                     
  20.         });    
  21.     });    
  22. </script>    

   银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来分解下这段js代码,起首拿到a标签,帮理这个a标签是带title属性的a标签,也就是银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站上面的“种别牵制”超链接,然后点击,click里面又有一个function,这个function都干啥了呢?起首获取当前链接的名字,即text,然后通过title属性拿到url(由于银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站刚刚把url写到title属性了),接下来坚决是否曾经有这个名字的选项(tab),如果有则显现该名字的选项,如果没有则创建。

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来举座看看if里面的语句,起首通过"#tt"拿到右边限制的jquery对象,然后调用tabs构制方法即拿到tab对象,如果有则返回true,不然返回false。那么tabs()里面的两个参数是什么意思呢?起首第一个参数是方法名,第二个参数是第一个参数(方法)对应的参数,tabs("exists", text)表示调用EasyUI的exists方法,参数为text,即坚决名字为text的tab是否存正正在,同样,下面的tabs("select", text)表示选择名字为text的tab显现,tabs("add", {})表示新创建一个tab,{}里添加新添加tab的一些属性:title表示名字,closable:true表示有封合按钮,即右上角的叉叉,content表示要显现的实质从哪获得,后面用<iframe>标签将一个页面的实质给包进来,这个页面不行直接拜访,是通过action跳转的,从action的名字中可以看出,是引入WEB-INF/category/query.jsp页面。如果银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站正正在该页面中的body标签中随便写个实质,然后通过点击左边菜单栏,就会正正在右边选项卡中显实践质。如下:

SSH电商项目实战之四:EasyUI菜单的实现

  着末把aindex.jsp中的代码放到这里来:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4. <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6.     <style type="text/css">    
  7.         #menu {    
  8.             width:60px;    
  9.             /*border:1px solid red;*/    
  10.         }    
  11.         #menu ul {    
  12.             list-style: none;    
  13.             padding: 0px;    
  14.             margin: 0px;    
  15.         }    
  16.         #menu ul li {    
  17.             border-bottom: 1px solid #fff;    
  18.                 
  19.         }    
  20.         #menu ul li a {    
  21.             /*先将a标签转换为块级元素,能力设置宽和内间距*/    
  22.             display: block;    
  23.             background-color: #00a6ac;    
  24.             color: #fff;    
  25.             padding: 5px;    
  26.             text-decoration: none;    
  27.         }    
  28.         #menu ul li a:hover {    
  29.             background-color: #008792;    
  30.         }    
  31.             
  32.     </style>    
  33.         
  34.     <script type="text/javascript">    
  35.         $(function(){    
  36.             $("a[title]").click(function(){    
  37.                 var text = $(this).text();    
  38.                 var href = $(this).attr("title");    
  39.                 //坚决当前右边是否已有相应的tab    
  40.                 if($("#tt").tabs("exists", text)) {    
  41.                     $("#tt").tabs("select", text);    
  42.                 } else {    
  43.                     //如果没有则创建一个新的tab,不然切换到当前tag    
  44.                     $("#tt").tabs("add",{    
  45.                         title:text,    
  46.                         closable:true,    
  47.                         content:'<iframe src="send_category_query.action" frameborder="0" width="100%" height="100%" />'    
  48.                         //href:默认通过url地址加载长途的页面,可是仅仅是body限制    
  49.                         //href:'send_category_query.action'    
  50.                     });    
  51.                 }    
  52.                     
  53.             });    
  54.         });    
  55.     </script>    
  56. </head>    
  57.     
  58.     <body class="easyui-layout">    
  59.         <div data-options="region:'north',title:' 银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站易购后台牵制',split:true" style="height:100px;"></div>       
  60.         <div data-options="region:'west',title:'编制操作',split:true" style="width:200px;">    
  61.             <!-- 此处显现的是编制菜单 -->    
  62.             <div id="menu" class="easyui-accordion" data-options="fit:true">       
  63.                 <div title="根蒂操作" data-options="iconCls:'icon-save'">       
  64.                     <ul>    
  65.                         <li><a href="#" title="send_category_query.action">种别牵制</a>    
  66.                         <li><a href="#">商品牵制</a>    
  67.                     </ul>    
  68.                 </div>       
  69.                 <div title="其他操作" data-options="iconCls:'icon-reload'">    
  70.                     <ul>    
  71.                         <li><a href="#">种别牵制</a>    
  72.                         <li><a href="#">商品牵制</a>    
  73.                     </ul>    
  74.                 </div>       
  75.             </div>       
  76.         </div>       
  77.         <div data-options="region:'center',title:'后台操作页面'" style="padding:1px;background:#eee;">    
  78.             <div id="tt" class="easyui-tabs" data-options="fit:true">       
  79.                 <div title="编制缺省页面" style="padding:10px;">    
  80.                     此处以后显现相应的编制信歇(当前操作编制的样板,当前项目标域名,硬件的相干装备或者显现报表    
  81.                 </div>       
  82.                     
  83.             </div>                        
  84.         </div>       
  85.     </body>      
  86.     
  87. </html>    

  很明显,代码没有抽取,css和js都混正正在一个jsp页面了,没关系,后面会一起抽取的。

   到此为止,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站完成了EasyUI菜单的实现,这里只是将实现方法完成了,举座显现的实质后面依据举座需求再完善。

 

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.sygjbus.cn/software/763.html
2017年9月11日
作家:鸡啄米 分类:软件开发 浏览: 评论:0