jquery EasyUi的使用

其他 2019-01-06 20:13:02 阅读次数: 0

一：首先需要导入一下文件：

<link href="../jquery-plug/themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../jquery-plug/themes/icon.css" rel="stylesheet" type="text/css" />

<script src="../jquery-plug/jquery.min.js"></script>

<script src="../jquery-plug/jquery.easyui.min.js"></script>

<script src="../jquery-plug/locale/easyui-lang-zh_CN.js"></script>    //这个是多语言包，可导入也可以不导入

二：先看下需要实现的页面：

 三：代码设计

  有图可以看出，总体页面分为三部分上，左 ，中，所以先实现布局：

<body class="easyui-layout">
 <div data-options="region:'north',tools:'#north-header-tool',title:'商务管理系统',split:'true',onCollapse:collapseUp" class="north"  style="height:0px"></div>
 <div data-options="region:'center',split:true">
 <div data-options="region:'left',split:true">
</body>

接着进行头部的具体实现：

其实头部右侧的内容完全可以通过放入工具栏来实现：

 <div id="north-header-tool">    <!-- tool内部不能出现div，所以用了a span等标签没用div，令标题可以放入tool中-->
                  <a href="##" class="clock"><span>1</span></a>&nbsp;&nbsp;<img src="../2.png" alt="" /><a href="##" class="s_name">购物中心 </a><span>打印机:</span>
                 <select class="print"></select><span>当前用户:[<span>你好HK</span>]
                  <select class="language">
                      <option value="simple_cn" checked></option>
                      <option value="english">English</option>
                  </select>
                  <a href="##" class="icon-back" title="退出"></a>
                  <a href="javascript:void(0)" class="icon-help" title="帮助"></a>
          </div>

再看左侧菜单，左侧菜单其实使用了手风琴和树两种插件：

 <!-- 折叠面板 -->
            <div class="easyui-accordion"  multiple=true style="" border=false; >
                <div fit="false" title="供应商信息管理"  animate='true'>   <!--这一层其实是面板,也就是手风琴下一级是是面板-->
                    <ul class="easyui-tree" fit="true" data-options="
                    data:[
                    {'text':'供应商账户信息管理','urls':'./index.html'},
                    {'text':'供应商地址管理','urls':'./index.html'},
                    {'text':'供应商信息品牌维护','urls':'./index.html'}
                    ]
                    ">
                </div>
                    <div fit="false" title="商品管理">  <!--这一行是控制ul展开的高度，设置fit为false，然后设置高度就可以了-->
                    <ul class="easyui-tree" fit="true" data-options="
                    data:[
                    {'text':'供应商账户信息管理','urls':'./index.html'},
                    {'text':'供应商地址管理','urls':'./index.html'},
                    {'text':'供应商信息品牌维护','urls':'./index.html'}
                    ]
                    ">    
                    </ul>
            </div>
                    <div fit="false" title="供应商门户">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">    
                            </ul>
            </div>
                    <div fit="false" title="PR Summary">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">   
                            </ul>
            </div>
                    <div fit="false" title="采购">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">    
                            </ul>
            </div>
                    <div fit="false" title="财务">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">                  
                            </ul>
            </div>
                    <div fit="false" title="后台消息中心">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">                               
                            </ul>
            </div>
                    <div fit="false" title="合同管理">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">  
                        </ul>
            </div>
            </div>  
        </div>
        <!-- 标签面板关闭菜单 -->

再看中间部分，其实就是标签面板嵌套标签面板：

  <!---这里去掉center的标题就给标签标题留下了位置-->
                <div class="easyui-tabs" fit="true" border="false" id="tabs" data-options="tabHeight:'30px'">
                        <div title="首页">  <!--这是一个panel-->
                           <div class="info_btn" style="padding:20px;">
                               <a id="info_submit" href="##" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">提交</a>
                               <a id="info_history" href="##" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">审核记录</a>
                               <span>账户状态:</span><span>有效</span>
                               <div>
                                <div id="tt" class="easyui-tabs"> <!---又一个标签面板-->
                                    <div title="Tab1" style="padding:20px;display:none;">
                                        tab1
                                    </div>
                                    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
                                        tab2
                                    </div>
                                    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                                        tab3
                                    </div>
                                </div>
                               </div>
                           </div>
                           <!---->
                        </div>
                    </div>

 布局中还用到了，菜单，网格列表等就不细说了，下面是完整的代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link href="../jquery-plug/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../jquery-plug/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="easyui-layout">
        <!-- north -->
        <div data-options="region:'north',tools:'#north-header-tool',title:"shangwu商管理系统',split:'true',onCollapse:collapseUp" class="north"  style="height:0px"></div>
          <div id="north-header-tool">    <!-- tool内部不能出现div，所以用了a span等标签没用div，令标题可以放入tool中-->
                  <a href="##" class="clock"><span>1</span></a>&nbsp;&nbsp;<img src="../2.png" alt="" /><a href="##" class="s_name">fua商家中心 </a><span>打印机:</span>
                 <select class="print"></select><span>当前用户:[<span>跃科达HK</span>]
                  <select class="language">
                      <option value="simple_cn" checked></option>
                      <option value="english">English</option>
                  </select>
                  <a href="##" class="icon-back" title="退出"></a>
                  <a href="javascript:void(0)" class="icon-help" title="帮助"></a>
          </div>
        <div data-options="region:'center',split:true">  <!---这里去掉center的标题就给标签标题留下了位置-->
                <div class="easyui-tabs" fit="true" border="false" id="tabs" data-options="tabHeight:'30px'">
                        <div title="首页">  <!--这是一个panel-->
                            <div style="font-size: 12px;margin-top: 10px;">
                                <p>Hi 你还HK,您昨天有 &nbsp;&nbsp;
                                    <span style="color: #ff0000;">
                                            &nbsp;<span id="hasCount">0</span>&nbsp;
                                    </span>被结算的结算单,
                                    &nbsp;&nbsp;
                                    <span style="color: #ff0000;cursor: pointer">
                                        &nbsp;<span id="xia_jia" data-number="0">0</span>&nbsp;
                                    </span>被下架的SKU,
                                    &nbsp;&nbsp;
                                    <span style="color: #ff0000;cursor: pointer">
                                        &nbsp;<span id="shang_jia" data-number="0">0</span>&nbsp;
                                    </span>被上架的SKU
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        账户状态: &nbsp;<span style="color: #ff0000">通过</span>
                                </p>
                            </div>
                            <p style="text-align:center;font-size: 26px;font-weight: bold">重要通知</p>
                            <div style="font-size: 12px;line-height: 26px;text-align:center;">2018-12-20 14:18</div>
                        </div>
                    </div>   
        </div>
        <!-- west -->
        <div data-options="region:'west',title:'导航',split:true" style="width:197px;" class="west">
            <!-- 折叠面板 -->
            <div class="easyui-accordion"  multiple=true style="" border=false; >
                <div fit="false" title="供应商信息管理"  animate='true'>   <!--这一层其实是面板,也就是手风琴下一级是是面板-->
                    <ul class="easyui-tree" fit="true" data-options="
                    data:[
                    {'text':'供应商账户信息管理','urls':'./index.html'},
                    {'text':'供应商地址管理','urls':'./index.html'},
                    {'text':'供应商信息品牌维护','urls':'./index.html'}
                    ]
                    ">
                </div>
                    <div fit="false" title="商品管理">  <!--这一行是控制ul展开的高度，设置fit为false，然后设置高度就可以了-->
                    <ul class="easyui-tree" fit="true" data-options="
                    data:[
                    {'text':'供应商账户信息管理','urls':'./index.html'},
                    {'text':'供应商地址管理','urls':'./index.html'},
                    {'text':'供应商信息品牌维护','urls':'./index.html'}
                    ]
                    ">    
                    </ul>
            </div>
                    <div fit="false" title="供应商门户">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">    
                            </ul>
            </div>
                    <div fit="false" title="PR Summary">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">   
                            </ul>
            </div>
                    <div fit="false" title="采购">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">    
                            </ul>
            </div>
                    <div fit="false" title="财务">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">                  
                            </ul>
            </div>
                    <div fit="false" title="后台消息中心">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">                               
                            </ul>
            </div>
                    <div fit="false" title="合同管理">
                            <ul class="easyui-tree" fit="true" data-options="
                            data:[
                            {'text':'供应商账户信息管理','urls':'./index.html'},
                            {'text':'供应商地址管理','urls':'./index.html'},
                            {'text':'供应商信息品牌维护','urls':'./index.html'}
                            ]
                            ">  
                        </ul>
            </div>
            </div>  
        </div>
        <!-- 标签面板关闭菜单 -->
        <div id="menus" class="easyui-menu">
            <div name="cur">关闭当前</div>
            <div name="all">关闭所有</div>
            <div name="other">关闭其他</div>
        </div>
        <!-- 上架对话框 -->
        <div id="home_shop_number" class="easyui-dialog"  data-options="modal:'true', closed:'true'" style="height: 400px; width: 600px;">
            <table class="easyui-datagrid" data-options="fit:'true', url:'',rownumbers:'true'" id="home_shop">
                <thead>
                    <tr>
                        <th data-options="field:'goodsId',width:100">GOODS ID</th>
                        <th data-options="field:'skuId',width:100">SKU ID</th>
                        <th data-options="field:'goodssuppcode',width:160">供方货号</th>
                        <th data-options="field:'skuValue',width:180">规格</th>
                    </tr>
                </thead>
            </table>
        </div>
<script src="../jquery-plug/jquery.min.js"></script>
<script src="../jquery-plug/jquery.easyui.min.js"></script>
<script src="../jquery-plug/locale/easyui-lang-zh_CN.js"></script>  
<script src="index.js"></script>    
</body>
</html>

JS:


//顶部折叠
function collapseUp(){
     $('.layout-expand').find('.panel-header').css({'height':'30px','line-height':'21px'}).find('.panel-title').html('商务管理系统')
}
 //增加标签面板 
 function addPanel (title,url) {
      var tabsp = $('#tabs');
    if(tabsp.tabs('exists',title)){   //首先判断标签面板是否存在
        tabsp.tabs('select',title)   //已存在，则选中该标签面板
        var pane = tabsp.tabs('getSelected');  //获取被选中的标签面板对象,这里它已经是面板对象
        pane.panel('refresh',url);
    }else{
        tabsp.tabs('add',{  //这里的属性是标签页面板的属性
            title:title,
            href: url,  //加载远程的内容
            closable: true, //是否存在关闭按钮
        })
    }
}
//菜单关闭事件
function closeMenu(menus,item) {
    var alltabs = $('#tabs').tabs('tabs')  //获得所有的标签面板
    var len = alltabs.length;
    var curtitle=[];
    var curmenu = $(menus).data('titles');
    if(item=='cur'){
        //触发标签面板关闭事件
        $('#tabs').tabs('close',curmenu);
        return;
    }
        for( var i=0;i<len;i++){
            var titled = alltabs[i].panel('options').title; //这里有一个逻辑误区
            if(titled!='首页'&&item==='all'){
                curtitle.push(titled)
            }else if(titled!='首页'&&item==='other'&&titled!=curmenu){
                curtitle.push(titled);
            }
        }
        for(var i=0,len=curtitle.length;i<len;i++){
            $('#tabs').tabs('close',curtitle[i])
        }
    }
    //下架上架对话框
    function dialogOpen (a) {
        // if($(a).data('number')==0){
        //     $.messager.alert('提示','没有数据')
        //     return;
        // }else{
           
        // }
         var ids = $(a).attr('id');
         if(ids === 'shang_jia'){
           $('#home_shop_number').dialog('setTitle','被上架的SKU')   //setTitle方法
         }else {
            $('#home_shop_number').dialog('setTitle','被下架的SKU')   
         }
         $('#home_shop_number').dialog('open').dialog('center');
    }
//点击子菜单触发点击事件
 $(function(){
     $('.west ul').tree({
         onClick: function(node){
         var title= node.text;
         var url = node.urls;
         addPanel(title,url);
         }
     });
     //标签面板右击事件
     $('#tabs').tabs({
         onContextMenu: function(e,title,index){
             e.preventDefault();
             //点击右键使菜单显示
             $('#menus').menu('show',{
                 left: e.pageX,
                 top: e.pageY,
             }).data('titles',title)
         }
     })
     //menu菜单点击事件
     $("#menus").menu({
         onClick: function(item){
            closeMenu(this,item.name); //菜单可以添加name属性，class属性还有其他自定义的属性无法读取
         }
     })
     //点击下架
     $('#xia_jia').click(function(){
        dialogOpen(this)
     })
     $('#shang_jia').click(function(){
        dialogOpen(this)
     })
 });

CSS:

.layout .panel .north { height:0}
.panel-header { height: 51px; line-height: 51px;}
.layout-panel-north .panel-header .panel-title { font-size: 24px; font-weight: normal; height: 40px; line-height: 40px;}
.layout-panel { border:0;}
.panel-tool { height: 50px;line-height: 0;}
.panel-tool .s_name { vertical-align:baseline; width: 90px; text-align: center; height: 20px; line-height: 17px; text-decoration: none; color: black; font-size: 14px; font-family: microsoft YaHei;}
.print { width: 180px;}
.language { width: 78px}
.layout-panel-north .panel-tool span { font-size: 14px;}
.layout-panel-north .panel-tool img { vertical-align: middle;}
.layout-panel-north .panel-tool { line-height: 50px; top:20%}
.layout-panel-north .panel-tool a { vertical-align: middle}
.layout-panel-north .panel-tool .clock { margin-right: 10px; background: url(../1.png) no-repeat;}
.layout-panel-north .panel-tool .clock span { width: 15px; height: 15px;border-radius: 50%; position: absolute; display: block; background: red; left: 10px; top: 10px;font-size: 10px; color: black; text-align: center; line-height: 15px;}
.west {overflow-y: hidden}
.panel .west .easyui-accordion .panel-body { height: 150px;}
 .tabs li.tabs-selected a.tabs-inner::after{ content: ''; height: 1; width: 100%; background: red; height: 1px; position: absolute; left: 0; background: white; top: 25px;}
 .layout-panel-west .panel-header .panel-title { font-size: 18px;margin-left: 26px; line-height: 40px;}
 .layout-panel-west .accordion .accordion-header .panel-title { font-size: 14px; margin-left: 0; line-height: 21px; height: 40px; line-height: 40px; padding-left: 21px; background: url(../3.png) no-repeat 0;}
 .layout-panel-west .accordion .accordion-header-selected .panel-title { color: red;background: url(../4.png) no-repeat 0;}
 .tabs li a.tabs-inner {border-bottom: 0;}
 .layout-split-north .panel-header { margin-bottom: -2px;}
 .window-header { height: 30px;}

猜你喜欢

转载自blog.csdn.net/qq_35176916/article/details/85243076
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022