<%--
Created by IntelliJ IDEA.
User: zhen
Date: //
Time: :
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 = ; 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: //
Time: :
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>
linkbutton
<%--
Created by IntelliJ IDEA.
User: zhen
Date: //
Time: :
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')[]; 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 : ,
top :
}); $('#menu').menu({
onHide: menuHide(),
onShow: menuShow(),
onClick: menuClick()
}); var itemEl = $("#six")[];
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")[],
iconCls: 'icon-excel'
}); $('#memu').menu('appendItem', {
text: 'New Item',
iconCls: 'icon-ok',
onclick: function(){alert('New Item')}
}); $("#menu").menu('enableItem', $("#five")[]); $("#menu").menu('disableItem', $("#five")[]); $("#menu").menu('removeItem', $("#six")[]); }); 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)[] == $(menu)[]){
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)[] == $(menu)[]){
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','').css('outline','none').unbind('.menunav').bind('keydown.menunav', function(e){
var item = $(this).find('.menu-active');
switch(e.keyCode){
case : // enter
item.trigger('click');
break;
case : // esc
rootMenu.find('.menu-active').trigger('mouseleave');
break;
case : // up
var prev = item.length ? item.prevAll(firstItemSelector) : menu.find(lastItemSelector);
prev.trigger('mouseenter');
return false;
case : // down
var next = item.length ? item.nextAll(firstItemSelector) : menu.find(firstItemSelector);
next.trigger('mouseenter');
return false;
case : // 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 : // right
if (item.length && item[].submenu){
$(item[].submenu).menu('enableNav', rootMenu).find(firstItemSelector).trigger('mouseenter');
$(item[].submenu).focus();
}
return false;
}
});
});
}
});
})(jQuery); $(function(){
$('#mm-nav').menu().menu('enableNav');
$(document).keydown(function(e){
if (e.altKey && e.keyCode == ){
$('#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 %
</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 %</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 </div>
<div title="Title2">Content </div>
<div title="Title3">Content </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="" 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 </div>
<div title="Title2">Content </div>
<div title="Title3">Content </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 = ;
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