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>
<%-- 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> 创建： <a href="#" class="easyui-linkbutton" style="width:100px;height:30px"/><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>
<%-- 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>
<!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>
<!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>
