李炎恢_PHP_jQuery EasyUI[012] ~ Tabs(選項卡)元件[下]
李炎恢_PHP_jQuery EasyUI[012] ~ Tabs(選項卡)元件[下]
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$('#box').tabs({
//width : 300,
//height : 100,
//plain : true,
//fit : true,
//border : false,
//tabWidth : 300,
//tabHeight : 50,
//scrollIncrement : 50,
//scrollDuration : 1000,
//tools : [{
// iconCls : 'icon-add',
// handler : function () {
// alert('add');
// },
//},{}],
//tools : '#tt',
//toolPosition : 'left',
//tabPosition : 'left',
//headerWidth : 300,
//selected : 1,
//showHeader : false,
/*
onSelect : function (title, index) {
alert(title + '|' + index);
}
onUnselect : function (title, index) {
alert(title + '|' + index);
}
onBeforeClose : function (title, index) {
alert(title + '|' + index);
}
onClose : function (title, index) {
alert(title + '|' + index);
}
onContextMenu : function (e,title, index) {
alert(e.type + '|' + title + '|' + index);
}
//tabWidth : 300,
onAdd : function (title, index) {
alert(title + '|' + index);
}
onLoad : function (panel) {
alert(panel);
}
*/
onUpdate : function (title, index) {
alert(title + '|' + index);
}
});
//console.log($('#box').tabs('tabs'));
//$(document).click(function () {
// $('#box').tabs().css('display', 'block');
// $('#box').tabs('resize');
//});
/*
$('#box').tabs('add', {
id : 'bbb',
title : '新选项卡',
content : '新面板',
href : 'content.html',
iconCls : 'icon-add',
width : 1,
height : 1,
collapsible : true,
closable : true,
selected : false,
});
*/
//$('#box').tabs('close', 1);
//console.log($('#box').tabs('getTab', 1));
//console.log($('#box').tabs('getTabIndex', $('#tab2')));
//console.log($('#box').tabs('getSelected'));
//$('#box').tabs('select', 1);
//$('#box').tabs('unselect', 0);
//$('#box').tabs('hideHeader');
//$('#box').tabs('showHeader');
//console.log($('#box').tabs('exists', 1));
$(document).click(function () {
$('#box').tabs('update', {
tab : $('#tab2'),
options : {
title : '修改标题',
},
});
});
//$('#box').tabs('disableTab', 1);
//$('#box').tabs('enableTab', 1);
//$('#box').tabs('scrollBy', 100);
});
content
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="../../easyui_15/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" />
</head>
<body>
<!--
<div id="box" class="easyui-tabs" style="width:500px;height:300px;">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
<div title="tab3">tab3</div>
</div>
-->
<div id="box" style="width:500px;height:300px;">
<div title="tab1">tab1</div>
<div title="tab2" id="tab2" data-options="closable:true">tab2</div>
<div title="tab3">tab3</div>
</div>
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"> </a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</body>
</html>
PDF:
執行結果:
