首先我们要安装并启用“Tabs Shortcode and Widget”插件。该插件安装启用后直接可以使用,不需任何设置。
第二步:设置标签页;
新建文章或页面,或者是编辑现有文章或页面,在编辑栏上方你会发现多了一个按钮;鼠标点击该按钮就会出现Tabs Layout选项;如下图:
点击Tabs Layout选项进入Tab设计界面,第一项是设置Tab的个数,在这里你可以选择满足您需求的标签页个数,第二项是选择Tab模式,这里有horizontal、vertical两种模式可供选择,之后是标签页总名称,和标签页1的名称,你还可以根据个人喜好,给标签页设置图标;最后编辑标签页内容;具体界面如下图:
第一个标签页编辑结束后,以同样的方式完成其余标签页的编辑。在整个设计的过程中,在编辑框右侧都可以看到编辑效果。编辑结束后,在编辑框最后还有一项自定义选项CSS Class。你可以根据你的个人爱后,在这里添加CSS类文件,将标签页的界面设置成你喜欢的界面。所有的标签页都设计完成后,点击对话框顶部或底部的insert按钮保存设置并发布文章或页面。这个时候打开网页,你就可以看到你的文章以标签页的形式显示。
接下来给大家介绍的是“Tabs Shortcode and Widget”插件的另一项添加标签页的功能——通过插入小工具,在主边栏添加标签页。设置过程与在文章中添加标签页相似,只是插入的位置不同。
具体步骤:
打开仪表盘,选择外观菜单下的小工具,选择添加“OTW Shortcode Widget”于主边栏。
点击添加,进入如下界面:
点击添加“Tabs Layout”进入标签页设计界面,该界面跟在文章中添加标签页的界面完全相同。按照前面编辑文章中标签页的方式编辑,结束后保存编辑并且保存小工具。现在打开之前打开过的网页,刷新,你会发现在主边栏的最下方出现了刚刚编辑好的标签页
上述就是添加选卡的全过程,希望对大家有所帮助。谢谢!
$("#tab").tabs(".tabContent", {tabs: "input"
})
试试把这上面的 tabs 功能定义为一个 function
例如
function tabs_run() {
....
}
然後在 click function 里面捕捉 event 完结时侯再次呼叫这个 tabs_run()
例如
$('#add').live('click', function() {
.....
tabs_run()
}
不过我疑惑了,你的 tabContent 没有设置 rel 或者 id… Tabs 是怎样侦测 index 的呢?
点击哪个 <li>会 load 哪个 tabContent 呢?
要先初始化tabs后才能调用add方法,使用样式来初始化easyUI需要在domready前将html代码添加到dom中,要不也无法初始化
var
tab
=
$("<div
id='tab_row_"
+
r
+
"_column_"
+
c
+
"'
class='easyui-tabs'
style='width:500pxheight:250px'>")
$('#xxxx').append(tab)
tab.tab()//要手动调用tabs进行初始化
var
content
=
"<table
id='table_datagrid_'"
+
view.id
+"></table>"
tab.tabs('add',
{
title:
view.title,
content
:
content,
closable:
true
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)