减少 jquery UI 标签代码
reducing jquery UI Tabs code
所以我有大约 20 个标签(页面)和很多子标签,所有这些都使用下面类似的代码显示:
我在想如何缩小这段代码以放入主 JS 文件和 use/re-use 每个 Div??,因为这些选项卡已加载。
我遇到的障碍是我需要处理所有这些 Div,所以我真的必须将相同的代码写 20 多次吗???
//dynamic tab add/remove
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' style=\"float:left;\" role='presentation'>Remove Tab</span></li>",
tabCounter = 1;
//jquery-ui
var divOneTabs = $( "#divOneTabs" ).tabs({ //same as: $( ".selector" ).tabs( "option", "active", 1 );
active: 0
});
$('.tabs').css('height','auto'); //extend height of tab content... not working as of now...
function divOneAddTab(t,c) {
var label = t,
id = t + "-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = c;
divOneTabs.find( ".divOneTabs" ).append( li );
divOneTabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
//below fixes the tab height issue in jquery-ui
//divOneTabs.append( '<div id="' + id + '"' + ' class="tabdiv" ' + '><p>' + tabContentHtml + '</p></div>' );
divOneTabs.tabs( "refresh" );
tabCounter++;
}
// close icon: removing the tab on click
divOneTabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
divOneTabs.tabs( "refresh" );
});
divOneTabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = divOneTabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
divOneTabs.tabs( "refresh" );
}
});
//end jquer-ui settings
...每个页面上的某些函数将调用其唯一的 divOneAddTab 例程,然后将 li 添加到其唯一的 class(同名)。
因此,此代码对 divOne、divTwo 重复.....
html:
<div id="divOneTabs">
<ul class="divOneTabs">
<li><a href="#divOneTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divOneTabsDef">
<pre>Sample Output.</pre>
</div>
这就是 classes 的用途。具有共同行为的所有事物都应该具有相同的 class。添加一个通用 class,例如 tabContainer
到您的选项卡容器,您可以使用它来引用所有选项卡容器。此外,class divOneTabs
不需要具体,因为父 ID 为您提供了所需的具体性。使用 id 来标识特定实例,并使用 classes 来标识公共块。
标签内容的唯一 ID 通常是必需的,因为它们 link 标签内容。
示例:
<div id="divOneTabs" class="tabContainer">
<ul class="divTabs">
<li><a href="#divOneTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
<li><a href="#divOneTabsStuff">Stuff</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divOneTabsDef">
<pre>Sample Output 1.</pre>
</div>
<div id="divOneTabsStuff">
<pre>Stuff</pre>
</div>
</div>
<button class="addTab">Add Tab to Div One</button>
<div id="divTwoTabs" class="tabContainer">
<ul class="divTabs">
<li><a href="#divTwoTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divTwoTabsDef">
<pre>Sample Output 2.</pre>
</div>
</div>
<button class="addTab">Add Tab to Div Two</button>
对于jQuery修改,使用.tabContainer
:
var divTabs = $(".tabContainer").tabs({
active: 0
});
此外,向 addTab
函数添加一个新参数以指定特定的选项卡容器。如果您从容器中添加选项卡,则不需要它,因为您可以使用上下文来确定它被添加到哪里。
function divAddTab(p, t, c) {
var label = t,
id = t + "-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = c;
p.find(".divTabs").append(li);
p.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
p.tabs("refresh");
tabCounter++;
}
JSfiddle 演示:https://jsfiddle.net/pjutycf6/
所以我有大约 20 个标签(页面)和很多子标签,所有这些都使用下面类似的代码显示:
我在想如何缩小这段代码以放入主 JS 文件和 use/re-use 每个 Div??,因为这些选项卡已加载。
我遇到的障碍是我需要处理所有这些 Div,所以我真的必须将相同的代码写 20 多次吗???
//dynamic tab add/remove
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' style=\"float:left;\" role='presentation'>Remove Tab</span></li>",
tabCounter = 1;
//jquery-ui
var divOneTabs = $( "#divOneTabs" ).tabs({ //same as: $( ".selector" ).tabs( "option", "active", 1 );
active: 0
});
$('.tabs').css('height','auto'); //extend height of tab content... not working as of now...
function divOneAddTab(t,c) {
var label = t,
id = t + "-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = c;
divOneTabs.find( ".divOneTabs" ).append( li );
divOneTabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
//below fixes the tab height issue in jquery-ui
//divOneTabs.append( '<div id="' + id + '"' + ' class="tabdiv" ' + '><p>' + tabContentHtml + '</p></div>' );
divOneTabs.tabs( "refresh" );
tabCounter++;
}
// close icon: removing the tab on click
divOneTabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
divOneTabs.tabs( "refresh" );
});
divOneTabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = divOneTabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
divOneTabs.tabs( "refresh" );
}
});
//end jquer-ui settings
...每个页面上的某些函数将调用其唯一的 divOneAddTab 例程,然后将 li 添加到其唯一的 class(同名)。
因此,此代码对 divOne、divTwo 重复.....
html:
<div id="divOneTabs">
<ul class="divOneTabs">
<li><a href="#divOneTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divOneTabsDef">
<pre>Sample Output.</pre>
</div>
这就是 classes 的用途。具有共同行为的所有事物都应该具有相同的 class。添加一个通用 class,例如 tabContainer
到您的选项卡容器,您可以使用它来引用所有选项卡容器。此外,class divOneTabs
不需要具体,因为父 ID 为您提供了所需的具体性。使用 id 来标识特定实例,并使用 classes 来标识公共块。
标签内容的唯一 ID 通常是必需的,因为它们 link 标签内容。
示例:
<div id="divOneTabs" class="tabContainer">
<ul class="divTabs">
<li><a href="#divOneTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
<li><a href="#divOneTabsStuff">Stuff</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divOneTabsDef">
<pre>Sample Output 1.</pre>
</div>
<div id="divOneTabsStuff">
<pre>Stuff</pre>
</div>
</div>
<button class="addTab">Add Tab to Div One</button>
<div id="divTwoTabs" class="tabContainer">
<ul class="divTabs">
<li><a href="#divTwoTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divTwoTabsDef">
<pre>Sample Output 2.</pre>
</div>
</div>
<button class="addTab">Add Tab to Div Two</button>
对于jQuery修改,使用.tabContainer
:
var divTabs = $(".tabContainer").tabs({
active: 0
});
此外,向 addTab
函数添加一个新参数以指定特定的选项卡容器。如果您从容器中添加选项卡,则不需要它,因为您可以使用上下文来确定它被添加到哪里。
function divAddTab(p, t, c) {
var label = t,
id = t + "-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = c;
p.find(".divTabs").append(li);
p.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
p.tabs("refresh");
tabCounter++;
}
JSfiddle 演示:https://jsfiddle.net/pjutycf6/