easyui再学习的一部分代码

<%--
  Created by IntelliJ IDEA.
  User: zhen
  Date: 2018/6/25
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tab Position - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">
        $(function(){
            //动态菜单数据
            var treeData = [{
                text:"其他资源管理",
                state: 'closed',
                children: [{
                    text: "linkbutton",
                    attributes: {
                        url: "${pageContext.request.contextPath}/common/visitPage?pagePath=easyui-study/base-component/linkbutton"
                    }
                }, {
                    text: "meun",
                    attributes: {
                        url: "${pageContext.request.contextPath}/common/visitPage?pagePath=easyui-study/base-component/menu"
                    }
                }]
            }, {
                text: "资源模板管理",
                state: 'closed',
                children: [{
                    text: "用户管理",
                    attributes: {
                        url: "${pageContext.request.contextPath}/user/toManage"
                    }
                }, {
                    text: "资源模板新增",
                    attributes: {
                        url: ""
                    }
                }]
            }];

            //实例化树形菜单
            $("#tree").tree({
                data: treeData,
                lines: true,
                onClick: function (node) {
                    if(node.attributes){
                        Open(node.text, node.attributes.url);
                    }
                }
            });

            //在右边的center区域打开菜单,新增tab
            function Open (text, url) {
                if($("#tabs").tabs('exists', text)){
                    $("#tabs").tabs('select', text);
                } else {
                    $("#tabs").tabs('add',{
                        title : text,
                        closable: true,
                        href : url
                    });
                }
            }

            //绑定tabs的右键菜单
            $("#tabs").tabs({
                onContextMenu : function(e, title) {
                    e.preventDefault();
                    $("#tabsMenu").menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            });

            //实例化menu的onClick事件
            $("#tabsMenu").menu({
                onClick: function (item) {
                    CloseTab(this, item.name);
                }
            });

            //几个关闭事件的实现
            function  CloseTab(menu, type) {
                var curTabTitle = $(menu).data("tabTitle");
                var tabs = $("#tabs");

                if (type == "close"){
                    tabs.tabs("close", curTabTitle);
                    return;
                }

                var allTabs = tabs.tabs("tabs");
                var closeTabsTitle = [];
                $.each(allTabs, function () {
                    var opt = $(this).panel("options");
                    if (opt.closable && opt.title != curTabTitle && type == "Other"){
                        closeTabsTitle.push(opt.title);
                    } else if(opt.closable && type == "All") {
                        closeTabsTitle.push(opt.title);
                    }
                })

                for (var i = 0; i < closeTabsTitle.length; i++) {
                    tabs.tabs("close", closeTabsTitle[i]);
                }
            };

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

    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
        <div data-options="region:'west',split:true,title:'West'" style="width:300px;padding:10px;">
            <ul id="tree"></ul>
        </div>
        <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
        <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
        <div data-options="region:'center',title:'Center'">
        <div id="tabs" class="easyui-tabs" data-option="tabPosition'top'"  style="width:99.8%;height:99.8%">
            <div title="Main">管理系统主页</div>
        </div>

    </div>
    </div>
    <div id="tabsMenu" class="easyui-menu" style="width:120px">
        <div name="close">关闭</div>
        <div name="Other">关闭其他</div>
        <div name="All">关闭所有</div>
    </div>

</body>

</html>
TreeAndTabs
<%--
  Created by IntelliJ IDEA.
  User: zhen
  Date: 2018/6/26
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <h3>easyui-linkbutton</h3>
    <p>
        描述:<br>
        linkbutton,用于创建超链接按钮。a标记拓展而成。<br>
        创建:
        &lt;a href="#" class="easyui-linkbutton" style="width:100px;height:30px"/&gt;<br/>
        $("#buttonId").linkbutton({xxx:xxx});
        属性:
        <ul>
            <li>id</li>
            <li>disabled(禁用,默认true)</li>
            <li>toggle(可切换选中状态,默认false)</li>
            <li>selected(按钮是否已选择,默认false)</li>
            <li>group,分组名称</li>
            <li>plain(是否显示简单效果,默认false)</li>
            <li>text(按钮文本)</li>
            <li>iconCls(在左边显示的图标)</li>
            <li>loanAlign(按钮图标的位置)</li>
        </ul><br/>
        方法:
        <ul>
            <li>options,返回选项属性</li>
            <li>disable。禁用按钮</li>
            <li>enable。启用按钮</li>
            <li>select。选中按钮按钮</li>
            <li>unselect。未选中按钮</li>
        </ul>

    </p>
    <div>
        <a href="#" class="easyui-linkbutton" data-options="id:'basic'">basic</a><br>
        <a href="#" class="easyui-linkbutton" data-options="disabled:true">disabled</a><br>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true">toggle</a><br>
        <a href="#" class="easyui-linkbutton" data-options="selected:true">selected</a><br>
        <a href="#" class="easyui-linkbutton" data-options="plain:true">plain</a><br>
        <a href="#" class="easyui-linkbutton" data-options="text:'text'"/><br>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a><br>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add', iconAlign: 'right'">新增</a><br>
        <a href="#" id="search"/>





    </div>

<script type="text/javascript">
    $(function(){
        $("#search").linkbutton({
            iconCls: 'icon-search',
            text: '查询',
            toggle: true
        });
        $("#search").linkbutton('disable');
        $("#search").linkbutton('enable');
        $("#search").linkbutton('select');
    });

</script>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic LinkButton - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut', disabled:true">Cut</a>
        <a href="#" class="easyui-linkbutton" >Text Button</a>
    </div>
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px;">Search</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:80px;">Print</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:80px;">Reload</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'" style="width:80px;">Help</a>
    </div>
    
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width:15%">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="width:15%">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:15%">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut', disabled:true" style="width:15%">Cut</a>
        <a href="#" class="easyui-linkbutton" style="width:15%" >Text Button</a>
    </div>
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:20%">Search</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:20%">Print</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:20%">Reload</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'" style="width:20%">Help</a>
    </div>
    
    <div style="padding:5px 0;">
        Selecy Icon Align:
        <select onChange="cgIconPosition(this)">
            <option value="left">Left</option>
            <option value="top">Top</option>
            <option value="right">Right</option>
            <option value="bottom">Bottom</option>
        <select><br/>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut', disabled:true">Cut</a>
    </div>
    
    <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">Cancel</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-refresh',plain:true">Refresh</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">Search</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Text Button</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print',plain:true">Print</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"></a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back',plain:true"></a>
    </div>
    
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',size:'small'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',size:'small'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',size:'small'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut', disabled:true,size:'small'">Cut</a>
        <a href="#" class="easyui-linkbutton" data-options="size:'small'" >Text Button</a>
    </div>
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">Clip Art</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart', disabled:true,size:'large',iconAlign:'top'">SmartArt</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls: 'icon-large-chart',size:'large',iconAlign:'top'" >Chart</a>
    </div>
    
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" style="width:120px; color:white; background:#4BAC4B;">Button1</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; color:white; background:#707070;">Button2</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; background:#FFAAAA;">Button3</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; background:#B3EDCB;">Button4</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; color:white; background:#D44743;">Button5</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; color:white; background:#277F9D;">Button6</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; background:#FFA318;">Button7</a>
        <a href="#" class="easyui-linkbutton" style="width:120px; color:white; background:#5F8FB6;">Button8</a>
        
    </div>
    
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',size:'small', toggle:true">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',size:'small', toggle:true">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',size:'small', toggle:true">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',size:'small', toggle:true">Cut</a>
        <a href="#" class="easyui-linkbutton" data-options="size:'small', toggle:true" >Text Button</a>
    </div>
    
    <div class="easyui-panel" style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1', selected: true" style="width:120px; ">Button1</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="width:120px;">Button2</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="width:120px; ">Button3</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="width:120px; ">Button4</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="width:120px; ">Button5</a>
    </div>
    
    <script type="text/javascript">
        function cgIconPosition(obj){
            var value = $(obj).val();
            $(obj).parent().find("a").each(function(){
                $(this).linkbutton({
                    iconAlign: value
                });
            });
        }
    </script>
    
</body>
</html>
linkbutton
<%--
  Created by IntelliJ IDEA.
  User: zhen
  Date: 2018/6/27
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span id="menuPage"></span>
<h3>menu</h3>
描述:<br>
菜单Menu是创建其他菜单组件的基础组件。可以用于导航和执行命令<br/>
创建:<br/>
基于div创建,通过class:easyui-menu。菜单项(menu item)也通过div创建.iconCls属性可以增加图标。menu-sep的class到菜单项将产生一个菜单分隔符号<br/>
默认菜单创建后是不显示的,通过show方法显示<br>
属性:<br/>
菜单项属性:<br/>
<ul>
    <li>li</li>
    <li>text 文本 (未发现什么作用)</li>
    <li>iconCls 左图标</li>
    <li>href 点击菜单项时设置页面位置</li>
    <li>disabled</li>
    <li>onclick 点击回调(目前未发现作用) 这个在div上直接写onclick事件即可</li>
</ul><br>
菜单属性:<br>
<ul>
    <li>zIndex (menu的z-index样式)</li>
    <li>left (菜单的左边位置)</li>
    <li>top (菜单的顶部位置)</li>
    <li>minWidth (菜单的最小宽度)</li>
    <li>hideOnUnhover (当鼠标离开时自定隐藏菜单,默认为true)</li>
</ul><br>
菜单事件:<br>
<ul>
    <li>onShow 当菜单显示之后触发</li>
    <li>onHide 当菜单隐藏之后触发</li>
    <li>onClick 当菜单点击之后触发</li>
</ul><br>
菜单方法:<br>
<ul>
    <li>options 返回选项对象</li>
    <li>show 参数pos,对象 pos{left:左定位、top定位}</li>
    <li>hide 隐藏菜单</li>
    <li>destroy 销毁菜单</li>
    <li>getItem 获取菜单项 参数itemElement对象。 如: var itemEl = $('#m-open')[0]; var item = $('#mm').menu('getItem', itemEl);</li>
    <li>setText 给菜单项设置文本 参数param,对象 param{target:DOM对象, text: 新的文本值}</li>
    <li>setIcon 参数param,对象 param{target:DOM对象, iconCls: 图标class}</li>
    <li>findItem 参数text</li>
    <li>appendItem options 追加一个新的菜单栏,参数为新的菜单项目属性。默认情况下,新增的是顶级菜单项,如果是追加子菜单,设置‘parent’属性指定子项目的父项目元素</li>
    <li>removeItem 参数itemElement对象 移除指定的菜单项</li>
    <li>enableItem 参数itemEl 启用菜单项</li>
    <li>disableItem 参数itemEl 禁用菜单项</li>
</ul>



<p></p>
<div class="easyui-menu" id="menu" data-options="left:100, top:20, minWidth:100, hideOnUnhover : false,onShow:menuShow" style="width:150px">
    <div>第一列</div>
    <div data-options="text:'第二列2'">第二列</div>
    <div data-options="iconCls:'icon-add'">第三列</div>
    <div data-options="href:'http://www.baidu.com'">第4列</div>
    <div id= "five" data-options="disabled:true">第5列</div>
    <div id = "six" data-options="onclick:menuClick">第6列</div>
</div>

<button onclick="hideMenu('menu')"> </button>


<script>
    $(function () {
        //ajax出来的页面不一定会自动渲染到,所以先执行一下解析器
        $.parser.parse($('#menuPage').parent());

        $('#menu').menu('show', {
            left : 0,
            top : 0
        });

      $('#menu').menu({
          onHide: menuHide(1),
          onShow: menuShow(2),
          onClick: menuClick(3)
      });

      var itemEl = $("#six")[0];
      var item = $('#menu').menu('getItem', itemEl);
      console.log(item);
      $("#menu").menu('setText',{
          target: item.target,
          text: 'saVing'
      });
      console.log("======================");
      console.log($("#menu").menu('findItem', '第4列'));
      //保留
        $("#menu").menu('setIcon',{
            target: $("#six")[0],
            iconCls: 'icon-excel'
        });



        $('#memu').menu('appendItem', {
            text: 'New Item',
            iconCls: 'icon-ok',
            onclick: function(){alert('New Item')}
        });

        $("#menu").menu('enableItem', $("#five")[0]);

        $("#menu").menu('disableItem', $("#five")[0]);

        $("#menu").menu('removeItem', $("#six")[0]);



    });

    function hideMenu(obj){
        var menu = $('#' + obj);
        console.log(menu.menu('options'));
        menu.menu('hide');
    }

    function menuHide(obj){
        if (obj == undefined || obj == null){
            alert('menuHide');
        } else{
            alert(obj);
        }

    }

    function menuShow(obj){
        if (obj == undefined || obj == null){
            alert('menuShow');
        } else{
            alert(obj);
        }

    }
    function menuClick(obj){
        if (obj == undefined || obj == null){
            alert('menuClick');
        } else{
            alert(obj);
        }

    }


</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Menu - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>

<!--
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="javascript:alert('new')">New</div>
        <div>
            <span><b>Open</b></span>
            <div style="width:150px;">
                <div><b>Word</b></div>
                <div>Excel</div>
                <div>PowerPoint</div>
                <div>
                    <span>M1</span>
                    <div style="width:120px;">
                        <div>sub1</div>
                        <div>sub2</div>
                        <div>
                            <span>Sub</span>
                            <div style="width:80px;">
                                <div onclick="javascript:alert('sub21')">sub21</div>
                                <div>sub22</div>
                                <div>sub23</div>
                            </div>
                        </div>
                        <div>sub3</div>
                    </div>
                </div>
                <div>
                    <span>Window Demo</span>
                    <div style="width:120px;">
                        <div>Window</div>
                        <div>Dialog</div>
                        <div><a href="http://www.baidu.com" target="_black">Easyui</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div data-options="iconCls:'icon-save'">Save</div>
        <div data-options="iconCls:'icon-print', disabled:true">Print</div>
        <div class="menu-sep"></div>
        <div>Exit</div>
    </div>
-->
    
<!--
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div>New</div>
        <div>
            <span>Open</span>
            <div class="menu-content" style="text-align:left;padding:10px;">
                <div style="font-weight:bold; font-size:14px;margin-bottom:10px;">Select your language:</div>
                <ul id="tt">
                    <li>Java</li>
                    <li>Basic</li>
                    <li>C++</li>
                    <li>Fortran</li>
                </ul>
            </div>
        </div>
        <div data-options="iconCls:'icon-save'">Save</div>
        <div data-options="iconCls:'icon-print'">Print</div>
        <div class="menu-sep"></div>
        <div>Exit</div>
    </div>
-->

<!--
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div>New</div>
        <div data-options="iconCls:'icon-save'">Save</div>
        <div data-options="iconCls:'icon-print'">Print</div>
        <div class="menu-sep"/></div>
        <div>Exit</div>
    </div>
    
    <div id="log" class="easyui-panel" title="Event Log" style="height:250px; padding:10px;"></div>
-->

    <div class="easyui-panel" title="Menu" style="width:150px;">
        <div id="mm-nav" class="easyui-menu" data-options="inline:true" style="width:100%;">
            <div onclick="javascript:alert('new')">New</div>
            <div>
                <span><b>Open</b></span>
                <div style="width:150px;">
                    <div><b>Word</b></div>
                    <div>Excel</div>
                    <div>PowerPoint</div>
                    <div>
                        <span>M1</span>
                        <div style="width:120px;">
                            <div>sub1</div>
                            <div>sub2</div>
                            <div>
                                <span>Sub</span>
                                <div style="width:80px;">
                                    <div onclick="javascript:alert('sub21')">sub21</div>
                                    <div>sub22</div>
                                    <div>sub23</div>
                                </div>
                            </div>
                            <div>sub3</div>
                        </div>
                    </div>
                    <div>
                        <span>Window Demo</span>
                        <div style="width:120px;">
                            <div>Window</div>
                            <div>Dialog</div>
                            <div><a href="http://www.baidu.com" target="_black">Easyui</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div data-options="iconCls:'icon-save'">Save</div>
            <div data-options="iconCls:'icon-print', disabled:true">Print</div>
            <div class="menu-sep"></div>
            <div>Exit</div>
        </div>
    </div>

    <script type="text/javascript">
                (function($){
            function getParentMenu(rootMenu, menu){
                return findParent(rootMenu);

                function findParent(pmenu){
                    var p = undefined;
                    $(pmenu).find('.menu-item').each(function(){
                        if (!p && this.submenu){
                            if ($(this.submenu)[0] == $(menu)[0]){
                                p = pmenu;
                            } else {
                                p = findParent(this.submenu);
                            }
                        }
                    });
                    return p;
                }
            }
            function getParentItem(pmenu, menu){
                var item = undefined;
                $(pmenu).find('.menu-item').each(function(){
                    if ($(this.submenu)[0] == $(menu)[0]){
                        item = $(this);
                        return false;
                    }
                });
                return item;
            }

            $.extend($.fn.menu.methods, {
                enableNav: function(jq, rootMenu){
                    var firstItemSelector = '.menu-item:not(.menu-item-disabled):first';
                    var lastItemSelector = '.menu-item:not(.menu-item-disabled):last';
                    return jq.each(function(){
                        var menu = $(this);
                        rootMenu = $(rootMenu).length ? $(rootMenu) : menu;
                        menu.attr('tabindex','0').css('outline','none').unbind('.menunav').bind('keydown.menunav', function(e){
                            var item = $(this).find('.menu-active');
                            switch(e.keyCode){
                                case 13:  // enter
                                    item.trigger('click');
                                    break;
                                case 27:  // esc
                                    rootMenu.find('.menu-active').trigger('mouseleave');
                                    break;
                                case 38:  // up
                                    var prev = item.length ? item.prevAll(firstItemSelector) : menu.find(lastItemSelector);
                                    prev.trigger('mouseenter');
                                    return false;
                                case 40:  // down
                                    var next = item.length ? item.nextAll(firstItemSelector) : menu.find(firstItemSelector);
                                    next.trigger('mouseenter');
                                    return false;
                                case 37:  // left
                                    var pmenu = getParentMenu(rootMenu, menu);
                                    if (pmenu){
                                        item.trigger('mouseleave');
                                        var pitem = getParentItem(pmenu, menu);
                                        if (pitem){
                                            pitem.trigger('mouseenter');
                                        }
                                        pmenu.focus();
                                    }
                                    return false;
                                case 39:  // right
                                    if (item.length && item[0].submenu){
                                        $(item[0].submenu).menu('enableNav', rootMenu).find(firstItemSelector).trigger('mouseenter');
                                        $(item[0].submenu).focus();
                                    }
                                    return false;
                            }
                        });
                    });
                }
            });
        })(jQuery);

        $(function(){
            $('#mm-nav').menu().menu('enableNav');
            $(document).keydown(function(e){
                if (e.altKey && e.keyCode == 87){
                    $('#mm-nav').focus();
                }
            })
        })
    
    
        $(function(){
            //重写鼠标右键事件
            //$('#mm').menu();
            //$('#tt').tree();
            /**
            $('#mm').menu({
                onClick: function(item){
                var text = "<p>Click Item: " + item.text + "</p>";
                $('#log').prepend(text);
                }
            });
            */
            /**
            $(document).bind('contextmenu', function(e){
                e.preventDefault();
                //展示菜单
                $("#mm").menu('show',{
                    left: e.pageX,
                    top: e.pageY
                });
            });
            */    
        });
    </script>
</body>
</html>
menu
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Panel Tools - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>

<!--
<div id="p" class="easyui-panel" title="My Panel" 
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    data-options="iconCls:'icon-save', closable:true, collapsible:true, minimizable:true, maximizable:true">
    <p>panel content</p>
    <p>panel content</p>
</div>

<div id="p1" style="padding:10px;">
    <p>panel content</p>
    <p>panel content</p>
</div>

    <div>
        <a href="#" class="easyui-linkbutton" text="Open" onClick="javascript:$('#p').panel('open')"/></a>
        <a href="#" class="easyui-linkbutton" text="Close" onClick="javascript:$('#p').panel('close')"></a>
    <div>
    <div id="p" class="easyui-panel" title="Basic Panel" style="padding:10px;width:700px;height:200px;">
        <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
        <ul>
            <li>easyui is a collection of user-interface plugin based on jQuery.</li>
            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
            <li>complete framework for HTML5 web page.</li>
            <li>easyui save your time and scales while developing your products.</li>
            <li>easyui is very easy but powerful.</li>
        </ul>

    </div>

    <div id="p" class="easyui-panel" title="Basic Panel" style="padding:10px;width:700px;height:200px;" 
    data-options="iconCls:'icon-save', tools:'#panelTools', closable:true" >
        <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
        <ul>
            <li>easyui is a collection of user-interface plugin based on jQuery.</li>
            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
            <li>complete framework for HTML5 web page.</li>
            <li>easyui save your time and scales while developing your products.</li>
            <li>easyui is very easy but powerful.</li>
        </ul>

    </div>
    
    <div id="panelTools">
        <a href="#" class="icon-add" onClick="javascript:alert('add');" plain="true"/>
        <a href="#" class="icon-edit" onClick="javascript:alert('edit');" plain="true"/>
        <a href="#" class="icon-cut" onClick="javascript:alert('cut');" plain="true"/>
        <a href="#" class="icon-help" onClick="javascript:alert('help');" plain="true"/>
    </div>

    
    <div class="easyui-panel" title="Fluid Panel" style="width:100%; height:200px;padding:10px;">
        The panel has a width of 100%
    </div>

    <div class="easyui-panel" title="Panel Footer" style="width:700px; height:200px;padding:10px;" data-options="footer:'#panelFooter'">
    </div>
    

    <div id="panelFooter" style="background:#F4F4F4; padding: 5px;">
    Footer Content.
    </div>
    
    <div class="easyui-panel" title="Head on Top" style="width:700px; height:200px;padding:10px;" 
    data-options="halign:'top'">
    </div>
    <div class="easyui-panel" title="Head on Left" style="width:700px; height:200px;padding:10px;" 
    data-options="halign:'left'">
    </div>
    <div class="easyui-panel" title="Head on Right" style="width:700px; height:200px;padding:10px;" 
    data-options="halign:'right'">
    </div>

    <div id="p" class="easyui-panel" title="Load Panel Content" style="width:700px; height:200px;padding:10px;" 
    data-options=" tools:'#tools'">
    </div>
    <div id="tools">
        <a href="#" class="icon-reload" onclick="javascript:$('#p').panel('refresh','_content.html')"/>
    </div>
    
    <div id="p" class="easyui-panel" title="Load Panel Content" style="width:700px; height:200px;padding:10px;" 
    data-options="tools:[{
        iconCls:'icon-reload',
        handler: function(){
            $('#p').panel('refresh','_content.html');
        }
    }]">
    </div>
    

    <div id="p" class="easyui-panel" title="Nested Panel" style="width:700px; height:200px;padding:10px;" 
    data-options="tools:[{
        iconCls:'icon-reload',
        handler: function(){
            $('#p').panel('refresh','_content.html');
        }
    }]">
    </div>

    <div id="p" class="easyui-panel" title="Nested Panel" style="width:700px; height:200px;padding:10px;" >
    
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west', split:true" style="width:100px;padding:10px;">Left Content</div>
            <div data-options="region:'east'" style="width:100px;padding:10px;">Right Content</div>
            <div data-options="region:'center'" style="padding:10px;">Center Content</div>
            
        <div>
    
    </div>
-->

    <div>
        <a href="#" class="easyui-linkbutton" onClick="javascript:$('#p').panel('open')">Open</a>
        <a href="#" class="easyui-linkbutton" onClick="javascript:$('#p').panel('close')">Close</a>
        <a href="#" class="easyui-linkbutton" onClick="javascript:$('#p').panel('expand', true)">Expand</a>
        <a href="#" class="easyui-linkbutton" onClick="javascript:$('#p').panel('collapse', true)">Collapse</a>
    </div>    
    <div style="width:1000px;height:500px;border:1px solid #95B8E7; padding:10px;">
        <div id="p" class="easyui-panel" iconCls="icon-save" title="Pannel Tools" style="width:700px; height:200px;padding:10px;"
            data-options="collapsible:true, minimizable:true, maximizable:true, closable:true,">
        </div>
    </div>
    
    
<script type="text/javascript">

/**
    $(function(){
        $("#p1").panel({
            width:500,
            height:150,
            title:'My Panel',
            tools:[{
                iconCls:'icon-add',
                handler:function(){
                    alert('new');
                }
            },{
                iconCls:'icon-save',
                handler:function(){
                    alert('save');
                }
            }]
        });
        
        $('#p').panel('move',{
            left:300,
            top:300
        });
    });
    
*/
    
</script>

</body>
</html>
panel
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Auto Height for Tabs - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>

<!--
    <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>

    <div id="tt" class="easyui-tabs" style="width:700px;height:auto;">
        <div title="About" style="padding:20px;">
            <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>

        </div>
        <div title="My Documents" style="padding:20px;">
        
        </div>
        <div title="Help" iconCls="icon-help" style="padding:20px;" closable="true">
            This is the help content.
        </div>
    </div>

    <div id="tt" class="easyui-tabs" style="width:700px;height:auto;">
        <div title="About" style="padding:20px;">
            <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>

        </div>
        <div title="My Documents" style="padding:20px;">
        
        </div>
        <div title="Help" style="padding:20px;">
            This is the help content.
        </div>
    </div>
    
    <div id="mm">
        <div>Welcome</div>
        <div>Help Contents</div>
        <div iconCls="icon-search">Search</div>
        <div>Dynamic Help</div>
    </div>

    <div class="easyui-tabs" style="padding:20px;width:700px;height:300px;">
        <div title="Home" style="padding:20px;">Home Content</div>
        <div title="Maps" style="padding:20px;">Maps Content</div>
        <div title="Journal" style="padding:20px;">Journal Content</div>
        <div title="History" style="padding:20px;">History Content</div>
        <div title="Refrences" style="padding:20px;">Refrences Content</div>
        <div title="Contact" data-options="tabWidth:110" style="padding:20px;">Contact Content</div>
    </div>

    <div class="easyui-tabs" style="padding:20px;width:100%;height:300px;">
        <div title="About" style="padding:20px;">the tabs has a width of 100%</div>
        <div title="Title2" style="padding:20px;"></div>
        <div title="Title3" style="padding:20px;"></div>
    </div>

    <div id="tt" class="easyui-tabs" style="padding:20px;width:100%;height:300px;">
        <div title="About" style="padding:20px;">
            <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>
        </div>
        <div title="My Documents" style="padding:20px;"></div>
        <div title="Help" iconCls="icon-help" style="padding:20px;">This is the help content.</div>
    </div>
    
    <div id="tt" class="easyui-tabs" style="padding:20px;width:700px;height:300px;">
        <div title="Sub Tabs" style="padding:20px;">
            <div class="easyui-tabs" data-options="fit:true, plain:true">
                <div title="Title1">Content 1</div>
                <div title="Title2">Content 2</div>
                <div title="Title3">Content 3</div>
            </div>
        </div>
        <div title="Ajax" data-options="href:'_content.html,closable:true;'" style="padding:10px;"></div>
        <div title="Iframe" data-options="closable:true" style="overflow:hidden;">
            <iframe scrolling="yes" frameborder="0" src="http://www.baicu.com" style="width:100%;height:100%"></iframe>
        </div>
        <div title="DataGrid">
            <table class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true">
                <thead>
                    <tr>
                        <th data-options="field:'f1',width:100">Title1</th>
                        <th data-options="field:'f2',width:100">Title2</th>
                        <th data-options="field:'f3',width:100">Title3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>d11</td>
                        <td>d12</td>
                        <td>d13</td>
                    </tr>
                    <tr>
                        <td>d21</td>
                        <td>d22</td>
                        <td>d23</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div id="tt" class="easyui-tabs" style="padding:20px;width:700px;height:300px;">
        <div title="About" style="padding:20px;">
            <div class="easyui-tabs" data-options="fit:true, plain:true">
                <div title="Title1">Content 1</div>
                <div title="Title2">Content 2</div>
                <div title="Title3">Content 3</div>
            </div>
        </div>
    </div>

    <div id="tt" class="easyui-tabs" style="padding:20px;width:100%;height:300px;" >
        <div title="About" style="padding:20px;" tools="#tools">
            <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>
        </div>
        <div title="Help" iconCls="icon-help" closable="true" style="padding:20px;">This is the help content.</div>
    </div>
    
    <div id="tools">
        <a href="#" class="icon-mini-add" onClick="alert('add')"/>
        <a href="#" class="icon-mini-edit" onClick="alert('edit')"/>
        <a href="#" class="icon-mini-refresh" onClick="alert('refresh')"/>
    </div>

    <div>
        <input type="checkbox" id="plain" onclick="setTabs()"><span>plain</span><br>
        <input type="checkbox" id="narrow" onclick="setTabs()"><span>narrow</span><br>
        <input type="checkbox" id="pill" onclick="setTabs()"><span>pill</span><br>
        <input type="checkbox" id="justified" onclick="setTabs()"><span>justified</span><br>
    </div>

    <div id="tt" class="easyui-tabs" style="padding:20px;width:100%;height:300px;">
        <div title="About" style="padding:20px;">
            <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>
        </div>
        <div title="My Documents" style="padding:20px;"></div>
        <div title="Help" iconCls="icon-help" closable="true" style="padding:20px;">This is the help content.</div>
    </div>
    
    <div class="easyui-tabs" data-options="tabWidth:100,tabHeight:60" style="width:700px;height:250px">
        <div title="<span class='tt-inner'><img src='images/modem.png'/><br>Modem</span>" style="padding:10px">
        
        </div>
    </div>
    
    <style scoped="scoped">
        .tt-inner{
            display:inline-block;
            line-height:12px;
            padding-top:5px;
        }
    </style>
    

    <div class="easyui-tabs" data-options="tabWidth:100,tabHeight:60,tabPosition:'left'" style="width:700px;height:250px" >
        <div title="<span class='tt-inner'><img src='images/modem.png'/><br>Modem</span>" style="padding:10px">
        
        </div>
    </div>
-->

    <div id="tt" class="easyui-tabs" tools="#tools" style="width:700px;height:250px;">
    </div>    
    <div id="tools">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addPanel()"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removePanel()"></a>
    </div>
    <script type="text/javascript">
    /**
        function setTabs(){
                $('#tt').tabs({
                    plain:$('#plain').is(":checked"),
                    narrow:$('#narrow').is(":checked"),
                    pill:$('#pill').is(":checked"),
                    justified:$('#justified').is(":checked"),
                });
            }
    */
        var index = 0;
        function addPanel(){
            index++;
            $('#tt').tabs('add',{
                title:'Tab'+index,
                content:'<div style="padding:10px">Content'+index+'</div>',
                closable:true
            });
        }
        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if(tab){
                var index = $('#tt').tabs('getTabIndex', tab);
                $('#tt').tabs('close', index);
            }
        }
    
        $(function(){
        /**
            $('#tt').tabs({
                border:false,
                onSelect:function(title){
                    alert(title + ' is selected');
                }
            });
            
            $('#tt').tabs('add',{
                title:'New Tab',
                content:'Tab Body',
                closable:true,
                tools:[{
                    iconCls:'icon-mini-refresh',
                    handler:function(){
                        alert('refresh');
                    }
                }]
            })
            
            var pp = $('#tt').tabs('getSelected');//选中的标签面板
            var tab = pp.panel('options').tab;//相应的标签页对象
            console.log(pp);
            console.log(tab);
            
        
            var helpTab = $('#tt').tabs('getTab',2);
            var mb = helpTab.panel('options').tab.find('a.tabs-inner');
            mb.menubutton({
                menu:'#mm',
                iconCls:'icon-help'
            }).click(function(){
                $('#tt').tabs('select',2);
            });
            
            
            var tabs = $('#tt').tabs().tabs('tabs');
            for(var i = 0; i < tabs.length; i++){
                tabs[i].panel('options').tab.unbind().bind('mouseover',{index:i}, function(e){
                    $('#tt').tabs('select', e.data.index);
                })
            }
            */
            
            
            
        });
        
        
        
        
        
    </script>
</body>
<html>
tabs

 

posted @ 2018-07-02 10:44  guodaxia  阅读(208)  评论(0编辑  收藏  举报