JQueryEasyUI框架入门

JQueryEasyUI入门

一、JQueryEasyUI简介

easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的

二、引入JQueryEasyUI

1️⃣、使用这个框架需要注意：基于对应的JQuery.js
所以需要先引入JQuery.js文件。
2️⃣、需要引入jquery.easyui.min.js
3️⃣、引入国际化的locale的js，中国的
4️⃣、导入默认主题样式文件
5️⃣、导入图标CSS文件
【三引入二导入】

<!-- 导入JQuery-->
        <script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js" ></script>
         <!--导入EasyUI.js-->
        <script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js" ></script>
        <!--导入国际化文件-->
        <script type="text/javascript" src="../js/EasyUI/locale/easyui-lang-zh_CN.js" ></script>
        <!--导入默认的主题文件-->
        <link href="../js/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"  />
        <!--导入图标文件-->
        <link href="../js/EasyUI/themes/icon.css" rel="stylesheet" type="text/css"  />
        <script type="text/javascript" src="../js/zTree_v3/js/jquery.ztree.all.js" ></script>

三、使用布局layout

通过 $.fn.layout.defaults 重写默认的 defaults。
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。
这里写图片描述
布局可以嵌套、可以依赖div元素和body进行布局。

相对div布局
1️⃣、先定义一个div 然后设置class属性为easyui-layout进行设置。
2️⃣、在此div中，设置div设置north west center east south 区域，中间区域必须存在。需要设置宽度和高度，不然区域会显示不全。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2.相对于body布局
1️⃣、在body元素中使用class属性为easyui-layout
在整个页面进行布局

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3.创建嵌套布局。
请注意，内部布局的西区面板是折叠的。

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

4.通过 ajax 加载内容。
布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

折叠布局面板
折叠布局面板（Collpase Layout Panel）

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

布局选项（Layout Options）
fit boolean 当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 ‘body’ 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。默认值为 false
通常会设置为true做适应父容器。

四、使用选项卡（标签页）

通过 $.fn.tabs.defaults 重写默认的 defaults。
这里写图片描述
用法
创建标签页（Tabs）

1、通过标记创建标签页（Tabs）
从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 ‘easyui-tabs’ class 添加到

标记。每个标签页面板（tab panel）通过子

标记被创建，其用法与面板（panel）一样。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <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>

2、编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 ‘onSelect’ 事件。

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

添加新的标签页面板（tab panel）

通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。

// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

获取选中的标签页（Tab）

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页（tab）对象

这里写图片描述

通常这个框架用作后台管理的框架使用，结合属性菜单控件ztree使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Layout布局页面</title>
        <!-- 导入JQuery-->
        <script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js" ></script>
         <!--导入EasyUI.js-->
        <script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js" ></script>
        <!--导入国际化文件-->
        <script type="text/javascript" src="../js/EasyUI/locale/easyui-lang-zh_CN.js" ></script>
        <!--导入默认的主题文件-->
        <link href="../js/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"  />
        <!--导入图标文件-->
        <link href="../js/EasyUI/themes/icon.css" rel="stylesheet" type="text/css"  />
        <script type="text/javascript" src="../js/zTree_v3/js/jquery.ztree.all.js" ></script>
        <link rel="stylesheet" href="../js/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
        <script type="text/javascript">
//          文档加载后执行
            $(function(){
//              ztree控件
                var setting ={
                     data: {
                         simpleData: {
                              enable: true
                            }
                        },
                    callback:{
                        onClick:function(event,treeID,treeNode,clickFlag){
                            //alert(treeNode.page);
                            var content ='<div style="width:100%;height:100%;overflow:hidden;">'
                            +'<iframe src="'
                            +treeNode.page
                            +'"scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';
                            if(treeNode.page!=undefined&&treeNode.page!=""){
//                              如果选项卡已经打开，选中选项卡
                            if($("#xxkmb").tabs('exists',treeNode.name)){
                                $("#xxkmb").tabs('select',treeNode.name);
                            }else{

                                $("#xxkmb").tabs('add',{
                                title:treeNode.name,
                                content:content,
                                closable:true
                            });
                            }

                            }


                        }
                    }
                    }
                var zNodes=[
                {id: 1, pId: 0, name: "常用网站"},
                {id: 2, pId: 0, name: "父节点二"},
                {id: 11, pId: 1, name: "百度", page:"http://www.baidu.com"},
                {id: 12, pId: 1, name: "安诚金融1+1贷",page:"http://www.yijiayidai.com"},
                {id: 21, pId: 2, name: "二的子节点一"},
                {id: 22, pId: 2, name: "二的子节点二"}
                ]
//              生成属性菜单
                var t =$("#ztreeMenu1");
                 $.fn.zTree.init(t, setting, zNodes);
//               对选项卡注册右键事件
                $("#xxkmb").tabs({
                    onContextMenu:function(e,title,index){
//                  取消默认的右键菜单的显示
                    e.preventDefault();
//                  显示自定义菜单的显示
                    $("#mm").menu('show',{
                    left:e.pageX,
                    top:e.pageY
                });
                    }
                });



            });
        </script>

    </head>
    <body class="easyui-layout">
        <!--north-->
        <div data-options="region:'north',title:'后台管理系统'" style="height: 100px;">北部区域</div>
        <!--west-->
        <div data-options="region:'west',title:'菜单导航'" style="width: 180px;" >
            <!--菜单面板-->
            <div class="easyui-accordion" data-options="fit:'true'">
                <div data-options="title:'基础菜单'">
                    <!--通过ztree制作菜单树-->
                    <ul class="ztree" id="ztreeMenu1">

                    </ul>
                </div>
                <div data-options="title:'系统设置'">面板二</div>
            </div>
        </div>
        <!--center-->
        <div data-options="region:'center'">
            <!--选项卡面板-->
            <div class="easyui-tabs" data-options="fit:'true'" id="xxkmb">

            </div>

        </div>
        <!--east-->
        <div data-options="region:'east'" style="width: 60px;">东部区域</div>

        <!--south-->
        <div data-options="region:'south'" style="animation-delay: 80px;">南部区域</div>

        <!--菜单区域，默认初始化都是隐藏的因为在布局外-->
        <div id="mm" class="easyui-menu" style="width:120px">
            <div>关闭当前窗口</div>
            <div>关闭其他窗口</div>
            <div class="menu-sep"></div><!--分割线-->
            <div data-options="iconCls:'icon-cancel'">关闭所有窗口</div>
        </div>

    </body>
</html>