jQuery标签选项卡插件共享
在网站的开发中,经常使用制表符功能,为了节省代码时间,封装tab插件,方便调用。创建选项卡组件
使用方法:html结构
表1
tab-2
见表3.
tabs-1-panel
tabs-2-panel
tabs-3-panel
JS调用
$(#标签)标签();
相关参数:
初始化参数
参数缺省参数规范
活动null设置所选选项卡的索引,默认值为NULL,例如,将第一个选项卡设置为0。
在点击事件选项卡切换事件,默认的单击事件,可以设置鼠标悬停
Add tab parameters
参数缺省参数规范
标题空白选项卡显示文本,默认为空
href空链接选项卡,如果对应的字符串(# STR)是静态的数据填充,和远程数据对应的URL
内容空白选项卡是静态数据的内容,动态数据不需要填写。
真正的iconcls标签关闭按钮,默认情况下显示真实,不虚假
演示:
示例1:静态数据:
表1
tab-2
见表3.
tabs-1-panel
tabs-2-panel
tabs-3-panel
JS调用:
$(#标签选项卡());
示例2:通过加载页面通过远程数据动态创建面板。
表1
tab-2
见表3.
tabs-1-panel
JS调用:
$(#标签选项卡());
例3:输入参数,设置选项卡切换事件mouseover
表1
tab-2
见表3.
tabs-1-panel
JS调用:
$(#标签)。标签({事件:'mouseover});
示例4:添加选项卡:
表1
tab-2
见表3.
tabs-1-panel
JS调用:
$(#标签选项卡());
无功tabcount = 4;
功能addtab(){
tab.tabs('add,{
标题:'tab+ +tabcount,
链接:#标签+ +tabcount,
内容:'tab ----+ tabcount +,
iconcls:真
});
tabcount + +;
}
总结:
通过不同的ID调用,可以创建不同的选项卡结构,并且样式可以由ID从不同的样式定义。
小弟弟不是。欢迎众神教…
演示下载地址:MyUI标签
以上是本文的全部内容,希望大家能喜欢。