easyui再学习的一部分代码

其他 2018-07-02 11:04:33 阅读次数: 0 
<%--
  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

猜你喜欢

转载自www.cnblogs.com/aigeileshei/p/9252743.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022