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标签

以上是本文的全部内容,希望大家能喜欢。