// 导入指定样式
<link rel="stylesheet" type="text/css" href="..easyui.css">
// 给div标签加样式easyui-tabs,变成选项卡
<div id="tabs" style=".." class=”easyui-tabs”>
// 给选项卡内添加四个面板
<div title="tab1" style=".."></div>
<div title="tab2" style=".."></div>
<div title="tab3" style=".."></div>
<div title="tab4" style=".."></div>
</div>
// 选项卡的内容在触发onselect事件时由脚本生成,并填入指定的面板
$("#tabs").tabs({
// 是否显示选项卡的边框
border : false,
// 一个导航控件,不详述
justified : true,
// 初始选项卡要显示的面板索引,索引从0开始,默认0
selected : 0,
// 用户在选择选项卡的某个面板时触发,参数为面板的标题和索引
onSelect : function(title, index) {
// 获取被选中的面板句柄
var tab = $('#tabs').tabs('getSelected');
// 更新选项卡的内容
$('#tabs').tabs('update', {
// 要更新的面板
tab : tab,
options : {
// 从远程加载面板内容,请求一个控制器,响应一个vm,渲染一个网页返回,填充到面板
href : '/site/task/tasktab?tab='+index
}
});
}
});
jQuery的tabs
最新推荐文章于 2023-04-11 08:46:50 发布