本文介绍如何使用 jQuery UI 的 tabs 组件来创建可交互的标签式导航。内容涵盖基本的 HTML 结构定义、JavaScript 初始化配置及动态操作方法，如选择、添加和移除标签等。
- jquery ui组件的使用一般都是包括两个部分：
- 定义标签;
- 初始化组件
- tabs组件的使用
- 首先定义标签
格式是这样的:
<div id="tt">
<ul>
<li><a href="#tabs-1"><span>查询结果1</span></a></li>
<!--此处定义的是标签标题;注意标签a的链接指向下面的标签面板,此处用的是锚链 接,以"#"号开头加上面板标签的id-->
<li><a href="#tabs-2"><span>查询结果2</span></a></li>
</ul>
<div id="tabs-1"></div><!--此处定义的是每个标签面板里的内容-->
<div id="tabs-2"></div>
</div>
注意在这里，id为tt的标签元素属于一个tabs容器，在定义标签内容时，一定写在里面。 - 初始化tabs组件
$("#tt").tabs({
event:'click',//切换标签采用的方式，默认为单击
spinner:null,//加载标签标题时显示的内容
selected:0,//默认选中的标签项，默认index为0
tabTemplate:"<li><a href='#{href}'><span>#{label}</span></a><span class='ui-icon ui-icon-close' style='float:left;margin: 0.4em 0.2em 0 0; cursor: pointer;'> </span></li>"//定义新增标签的标题样式，固定格式为
"<li><a href='#{href}'><span>#{label}</span></a></li>"
panelTemplate:"<div></div>",//定义新增标签的面板内容，即标签下要显示的内容
add:function(event,ui){
$(this).tabs('select',ui.index);//定义触发的时间，此事件为在增加一个标签时，会选中当前新 增加的标签
},
}); - 使用定义好的tabs组件
$('#tt').tabs('select',1);//选中序号为1的标签
$('#tt').tabs('add','test.actio','新标签');//增加一个新的标签
$('#tt').tabs('remove',0);//移出序号为0的标签
.................. -
<html> <head> <script src="jquery.ui.core.js"></script> <script src="jquery.ui.widget.js"></script> <script src="jquery.ui.tabs.js"></script> </head> <body> <div id="tt"> <ul> <li><a href="#tabs-1"><span>查询结果1</span></a></li> <li><a href="#tabs-2"><span>查询结果2</span></a></li> </ul> <div id="tabs-1">我是标签1里的内容</div> <div id="tabs-2">我是标签2里的内容</div> </div> <script type="text/javascript"> $("#tt").tabs();//可以不用初始化任何属性 </script> <body> </html>
- 首先定义标签
转载于:https://my.oschina.net/u/198742/blog/91117
扫一扫
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
