EasyUi框架的使用以及实现左侧点击中部区域实现改变

最新推荐文章于 2020-06-26 20:15:09 发布

峰峰崛起的我

最新推荐文章于 2020-06-26 20:15:09 发布

阅读量926

点赞数

分类专栏：框架 html css 文章标签： EasyUi 实现页面跳转

本文链接：https://blog.csdn.net/lw_1220/article/details/90023281

版权

html 同时被 3 个专栏收录

11 篇文章 1 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

框架

8 篇文章 1 订阅

订阅专栏

使用EasyUi框架实现后台管理

1.EasyUi框架简单实现页面布局，代码如下：

<body class="easyui-layout">
       <div class="top" data-options="region:'north',split:false,border:false">
           <span>xxx管理系统</span>
       </div>
       <div class="left" data-options="region:'west',split:false,border:false,title:'导航菜单'">
           <div class="easyui-accordion" id="form" >
               <div class="tall" title="商品管理">
                   <p>
                       <a class="navMenu" href="JavaScript:void(0);" url="login.html">查询所有商品</a>
               </p>
               <p>
               <a class="navMenu" href="JavaScript:void(0);"url="">添加商品</a>
               </p>
               </div>

           </div>
           <div class="easyui-accordion" id="form">
               <div class="tall" title="商品类别管理">
                   <p>
               <a class="navMenu" href="JavaScript:void(0);"url="">查询所有类别</a>
           </p>
           <p>
               <a class="navMenu" href="JavaScript:void(0);"url="">添加类别</a>
           </p>
               </div>

           </div>

       </div>
       <div class="foot" data-options="region:'south',split:true,border:false">
           <a href="userocl?action=logout">安全离开</a>
       </div>
       <div class="main" data-options="region:'center',split:false,border:false">
           <div class="easyui-tabs" id="tabs" fit="true">
               
           </div>
       </div>

   </body>

2.样式代码如下：样式根据自己的要求修改，以下仅供参考

.top,.foot{
               height:60px;
               background-color: #66ccff;
               text-align: center;
               line-height: 50px;
               color: white;
           }
           .left{
               width: 20%;
               background-color: #1094FA;
           }
           #form{
               background-color: #000000;
           }
           a{
               color: white;
               text-decoration: none;
           }
           .accordion .accordion-header {
               background:whitesmoke;
               color: black;
            }
            .navMenu{
                color: white;
            }
            .tall{
                background-color: black;
            }
            .accordion .accordion-header-selected {
               background: #1094FA;
           }

3.通过点击左侧实现中部页面刷新，也叫局部刷新，通过ajax请求获取数据，实现页面跳转，以下是js代码，使用以下js代码需要引入jquery包

$(function () {
               $(".navMenu").click(function () {
                   var mtitle=$(this).html();
                   var murl=$(this).attr("url");
                   var tabsexit=$("#tabs").tabs("exists",mtitle);
                   if (!tabsexit) {
                       $("#tabs").tabs("add",{title:mtitle,content:getContent(murl),closable:true});
                   } else{
                       $("#tabs").tabs("select",mtitle);
                   }
               });
           });
           function getContent (url) {
               return "<iframe src='"+url+"' width='100%' height='100%' frameborder='0'></iframe>";
           }

注意以下几点：

（1）、js中控制的区域是显示内容的区域，通过id来控制，js中的id要和控制区域的id保持一致

（2）、js通过iframe来实现url跳转

峰峰崛起的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUi框架的使用以及实现左侧点击中部区域实现改变

使用EasyUi框架实现后台管理1.EasyUi框架简单实现页面布局，代码如下：<body class="easyui-layout"> <div class="top" data-options="region:'north',split:false,border:false"> <span>xxx管理系统&l...
复制链接

扫一扫