李炎恢_PHP_jQuery EasyUI[011] ~ Tabs(選項卡)元件[上]
李炎恢_PHP_jQuery EasyUI[011] ~ 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);
}
});
});
<!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" 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:
執行結果:
