JQueryEasyUI解析

最新推荐文章于 2025-06-19 14:19:06 发布

Frank_Wang_2014

最新推荐文章于 2025-06-19 14:19:06 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wangchunyang51/article/details/79777705

1.JQueryEasyUI目录结构简介

demo：案例
locale：国际化
plugins：框架包含的控件包
src：框架包含源代码
themes：样式css和icon
easyloader。js：框架核心加载器
jquery-1.8.0min.js JQuery框架压缩文件
jQeryEasyUi。min。js JQueryEasyUi框架压缩文件。

--jquery.easyui.min.js 所有插件功能=====easyloader+plugins


<script type="text/javascript" src="../jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="../easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="../easyui/themes/icon.css" />

1.1导入easyui框架layout测试

基于body或者Style
<body class="easyui-layout">
        <div data-options="region:'north',title:'tommy friend'" style="height:100px;">north area</div>
        <div data-options="region:'west'" style="width: 100px;">Weat Area</div>
        <div data-options="region:'center'">Center</div>
        <div data-options="region:'east'" style="width: 80px;">East Area</div>
        <div data-options="region:'south'" style="width: 80px;">South Area</div>

    </body>

1.2EasyUI-西部区域折叠面板 Accordion

--1.对折叠面板区域设置 class="easyui-accordion"
--2.在区域添加多个div，每个div就是一个面板（每个面板设置title属性）
--3.设置面板属性fit为true,自适应。

        <div data-options="region:'west',title:'tommy home'" style="width: 180px;">
            <div class="easyui-accordion" data-options="fit:true">
                <div data-options="title:'hans'">hans</div>
                <div data-options="title:'johnson'">johnson</div>
                <div data-options="title:'rong'">rong</div>
            </div>
        </div>

1.3EasyUI-中心区域选项卡设置

--1.对选项卡面板区域div设置class=“easyui-tabs”
--2.对选项卡面板区域添加多个div，每个div就是一个选项卡，每个面板设置title
--3.设置面板fit，自适应父容器。
--4.设置选项卡closable为true，添加可选关闭菜单。
--5.通过超链接，点击后，添加新的选项卡
    语法：页面对象easyui插件（方法名，参数）

<html>
    <head>
        <meta charset="UTF-8">
        <title>Accordion 可折叠面板</title>
        <script type="text/javascript" src="../jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="../easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="../easyui/themes/icon.css" />

        <script type="text/javascript">
            // 页面加载执行
            $(function(){
                //绑定链接点击事件
                $("#tommylink").click(function(){
                    //添加一个新的选项卡
                    $("#mytabs").tabs('add',{
                        title:'tommylink',
                        content:'hahah simle'
                    });
                });
            });
        </script>

    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',title:'tommy friend'" style="height:100px;">north area</div>
        <div data-options="region:'west',title:'tommy home'" style="width: 180px;">
            <div class="easyui-accordion" data-options="fit:true">
                <div data-options="title:'hans'">
                    <a href="javascript:void(0)" id="tommylink">tommylink</a>
                </div>
                <div data-options="title:'johnson'">johnson</div>
                <div data-options="title:'rong'">rong</div>
            </div>
        </div>
        <div data-options="region:'center'">
            <div id="mytabs" class="easyui-tabs" data-options="fit:true">
                <div data-options="title:'selection1',closable:true"> selection1</div>
                <div data-options="title:'selection2',closable:true">selection2</div>
                <div data-options="title:'selection3',closable:true">selection3</div>
            </div>


        </div>
        <div data-options="region:'east'" style="width: 80px;">East Area</div>
        <div data-options="region:'south'" style="width: 80px;">South Area</div>

    </body>

1.4Ztree 编写树形菜单

--项目引用Ztree， 使用css和js
--all所有功能 == core核心功能+excheck勾选功能+exedit功能+exhide隐藏功能。
--在页面中引入ztree
<!--引入ztree-->
        <script src="../ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="UTF-8"></script>
        <link rel="stylesheet" type="text/javascript" href="../ztree/zTreeStyle.css"

通过Ztree制作树形菜单：
--两种数据格式：
1.标准json数据
var nodes = [
    {name: "父节点1", children: [
        {name: "子节点1"},
        {name: "子节点2"}
    ]}
];

2.简单json数据
var nodes = [
    {id:1, pId:0, name: "父节点1"},
    {id:11, pId:1, name: "子节点1"},
    {id:12, pId:1, name: "子节点2"}
];
在每个节点添加id和pid，id表示当前节点编号，pid表示父节点编号。

--步骤：
---1.第一步在页面显示菜单位置，添加《ul》设置class=“ztree”
    <div data-options="title:'基础菜单'">
                    <ul id="baseMenu" class="ztree"></ul>
                </div>

--2.开启简单数据格式支持
var setting = {
                        data : {

                            simpleData:{
                                enable : true //支持简单的json
                            }
                        }

--3.第三步：编写树形菜单数据
//提供ztree属性菜单数据
                var zNodes = [
                    {id:1,pid:0,name:"父节点1"},
                    {id:2,pid:0,name:"父节点1"},
                    {id:11,pid:0,name:"子节点1"},
                    {id:12,pid:0,name:"子节点2"},
                    {id:13,pid:0,name:"子节点3"},
                    {id:14,pid:0,name:"子节点4"}
                ];

--4.第四步：生成树形菜单
$.fn.zTree.init($("#baseMenu"),setting,zNodes);

1.5将树形菜单和选项卡结合

--分析ztree节点自带url属性，无法满足业务需求
--1.添加自定义属性page：
{id:13,pId:2,name:"tommy",page:"www.baidu.com"},

--2.为ztree每个树形节点，添加点击事件。
onclick

--3.tabs选项API：
select ：选择一个选项卡面板，可以是标题或者索引的面板
exists ： 特别面板已经存在。
<html>
    <head>
        <meta charset="UTF-8">
        <title>树形菜单和选项卡实现</title>
        <script type="text/javascript" src="../jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="../easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="../easyui/themes/icon.css" />
        <!--引入ztree-->
        <script src="../ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="UTF-8"></script>
        <link rel="stylesheet" type="text/css" href="../ztree/zTreeStyle.css">

        <script type="text/javascript">
            // 页面加载执行
            $(function(){

                    //1.进行Ztree菜单设置
                    var setting = {
                        data : {

                            simpleData:{
                                enable : true //支持简单的json
                            }
                        },

                        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%;broder:0;"></iframe>';
                                //没有page树形菜单，不打开选项卡
                                if (treeNode.page != undefined && treeNode.page != "") {
                                    //如果选项卡已经打开，就选中
                                    if ($("#mytabs").tabs('exists',treeNode.name)) {
                                        //选中选项卡
                                        $("#mytabs").tabs('select',treeNode.name);
                                    }else{

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


                                }
                            }
                        }

                    };
                //提供ztree属性菜单数据
                var zNodes = [
                    {id:1,pId:0,name:"父节点1"},
                    {id:2,pId:0,name:"父节点1"},
                    {id:11,pId:1,name:"子节点1"},
                    {id:12,pId:1,name:"子节点2"},
                    {id:13,pId:2,name:"tommy", page:"https://www.baidu.com"},
                    {id:14,pId:2,name:"子节点4"}
                ];

                //3.生成树形菜单
                $.fn.zTree.init($("#baseMenu"),setting,zNodes);
            });
        </script>

    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',title:'tommy friend'" style="height:100px;">north area</div>
        <div data-options="region:'west',title:'tommy home'" style="width: 180px;">
            <!--折叠菜单-->
            <div class="easyui-accordion" data-options="fit:true">
                <div data-options="title:'基础菜单'">
                    <ul id="baseMenu" class="ztree"></ul>
                </div>
                <div data-options="title:'johnson'">johnson</div>
                <div data-options="title:'rong'">rong</div>
            </div>
        </div>
        <div data-options="region:'center'">
            <div id="mytabs" class="easyui-tabs" data-options="fit:true">
                <div data-options="title:'selection1',closable:true"> selection1</div>
                <div data-options="title:'selection2',closable:true">selection2</div>
                <div data-options="title:'selection3',closable:true">selection3</div>
            </div>


        </div>
        <div data-options="region:'east'" style="width: 80px;">East Area</div>
        <div data-options="region:'south'" style="width: 80px;">South Area</div>

    </body>

1.6选项卡右击菜单

--1.使用jQuery EasyUI 提供Menu菜单
<!--
    菜单初始化都是因隐藏的
-->
        <div id="mm" class="easyui-menu" style="width: 120px;">
            <div>关闭当前窗口</div>
            <div>关闭其他窗口</div>
            <div class="menu-sep"></div>
            <div>关闭全部窗口</div>
        </div>
//对选项卡注册右击事件
$.fn.zTree.init($("#baseMenu"),setting,zNodes);

                $("#mytabs").tabs({
                    onContextMenu : function(e,title,index){
                        //阻止默认菜单
                        e.preventDefault();

                        //页面显示后直接显示菜单
                        $("#mm").menu('show',{
                            left:200,
                            top:200
                        })
                        ;
                    }

                });

3.对菜单项添加图标，添加iconCls属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>树形菜单和选项卡实现</title>
        <script type="text/javascript" src="../jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="../easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="../easyui/themes/icon.css" />
        <!--引入ztree-->
        <script src="../ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="UTF-8"></script>
        <link rel="stylesheet" type="text/css" href="../ztree/zTreeStyle.css">

        <script type="text/javascript">
            // 页面加载执行
            $(function(){

                    //1.进行Ztree菜单设置
                    var setting = {
                        data : {

                            simpleData:{
                                enable : true //支持简单的json
                            }
                        },

                        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%;broder:0;"></iframe>';
                                //没有page树形菜单，不打开选项卡
                                if (treeNode.page != undefined && treeNode.page != "") {
                                    //如果选项卡已经打开，就选中
                                    if ($("#mytabs").tabs('exists',treeNode.name)) {
                                        //选中选项卡
                                        $("#mytabs").tabs('select',treeNode.name);
                                    }else{

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


                                }
                            }
                        }

                    };
                //提供ztree属性菜单数据
                var zNodes = [
                    {id:1,pId:0,name:"父节点1"},
                    {id:2,pId:0,name:"父节点1"},
                    {id:11,pId:1,name:"子节点1"},
                    {id:12,pId:1,name:"子节点2"},
                    {id:13,pId:2,name:"tommy", page:"https://www.baidu.com"},
                    {id:14,pId:2,name:"子节点4"}
                ];

                //3.生成树形菜单
                $.fn.zTree.init($("#baseMenu"),setting,zNodes);

                //对选项卡注册右击事件
                $.fn.zTree.init($("#baseMenu"),setting,zNodes);

                $("#mytabs").tabs({
                    onContextMenu : function(e,title,index){
                        //阻止默认菜单
                        e.preventDefault();

                        //页面显示后直接显示菜单
                        $("#mm").menu('show',{
                            left:e.pageX,
                            top:e.pageY
                        })
                        ;
                    }

                });




            });
        </script>

    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',title:'tommy friend'" style="height:100px;">north area</div>
        <div data-options="region:'west',title:'tommy home'" style="width: 180px;">
            <!--折叠菜单-->
            <div class="easyui-accordion" data-options="fit:true">
                <div data-options="title:'基础菜单'">
                    <ul id="baseMenu" class="ztree"></ul>
                </div>
                <div data-options="title:'johnson'">johnson</div>
                <div data-options="title:'rong'">rong</div>
            </div>
        </div>
        <div data-options="region:'center'">
            <div id="mytabs" class="easyui-tabs" data-options="fit:true">
                <div data-options="title:'selection1',closable:true"> selection1</div>
                <div data-options="title:'selection2',closable:true">selection2</div>
                <div data-options="title:'selection3',closable:true">selection3</div>
            </div>


        </div>
        <div data-options="region:'east'" style="width: 80px;">East Area</div>
        <div data-options="region:'south'" style="width: 80px;">South Area</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>

1.7下拉菜单MenuButton

--1.在页面中提供超链接，设置class=“easyui-menubutton”
<a href="#" class="easyui-menubutton" data-options="iconCls:'icon-save'">Menu</a>

--2.编写子菜单div元素
        <div id="mm" style="width:120px;">
            <div>menu1</div>
            <div>menu2</div>
            <div class="menu-shadow">menu3</div>
            <div class="menu-sep">menu4</div>
            <div>menu5</div>
        </div>

--3.设置下拉菜单超链接menu属性，指向下拉菜单的menu
    <a href="#" class="easyui-menubutton" data-options="iconCls:'icon-save',menu:'#mm'">Menu</a>
        <div id="mm" style="width:120px;">
            <div>menu1</div>
            <div>menu2</div>
            <div >menu3</div>
            <div class="menu-sep"></div>
            <div>menu5</div>
        </div>

1.8 消息提示messager的使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MenuButton</title>
                <script type="text/javascript" src="../jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="../easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="../easyui/themes/icon.css" />
        <script type="text/javascript">
            $(
                function(){
                    //警告窗口
                    $.messager.alert("title","message","warnning");

                    //确认窗口
                    $.messager.confirm("title","message",function(result){
                        if(result){
                            alert(confirm);
                        }else{
                            alert(cancel);
                        }
                    });

                        //prompt窗口
                    $.messager.prompt("title","message",function(){
                        alert("hellow" + val);
                    });

                    //右下角窗口
                    $.messager.show(
                        title: "title",
                        msg: "message,<a href='#'>confirm</a>",
                        timeout : 5
                    );

                    //进度条窗口
                    $.messager.progress(
                        interval:1000

                    );

                    //定时器，5秒后自动关闭进度条
                    window.setTimeout("$.messager.progress('close');",5000);

                }

            );
        </script>
    </head>
    <body>

    </body>
</html>