如何跳过禁用选项卡的焦点
How to skip focus of disabled tabs
我有一个包含多个选项卡的 html 页面,可以根据 Angular 中的某些条件禁用其中一个或多个选项卡。 (至少其中之一将始终启用)
<tabset>
<tab ng-disabled="vm.disableTab(1)">
<tab ng-disabled="vm.disableTab(2)">
<tab ng-disabled="vm.disableTab(3)">
</tabset>
当用户进入页面时,第一个选项卡会获得焦点,无论它是否被禁用。
我希望它最初 focus/show 第一个未禁用的选项卡 。我将如何实现这样的目标?
编辑:plnkr:http://plnkr.co/edit/NWQDPk3DgBUpLqA0vRPw?p=preview
需要创建将执行以下 activity、
的自定义指令
- 识别禁用的 TAB,如果它的第一个选项卡然后删除它的 'active' css
- 从选项卡列表中迭代第二个活动选项卡,检查它是否被禁用。
- 如果第二个也被禁用,则移至下一个...依此类推...
- 如果发现第二个选项卡处于活动状态,则添加 'active' css 并触发相应锚标记的点击。它将在 UI.
上显示其各自的 div 内容
你的 JS 指令,
.directive('activeTabs', function($compile)
{
return {
link: function(scope, el, attrs) {
var tabs = el.find('li');
setTimeout(function(){
var activeTab = false;
for (var i = 0; i < tabs.length; i++)
{
if (activeTab)
break;
tab = tabs[i];
if (!angular.element(tab).hasClass("disabled"))
{
angular.element(tab).addClass('active');
tab.active = true;
activeTab = true;
var a = angular.element(tab).find('a')[0];
a.click();
break;
}
else
{
tab.active = false;
angular.element(tab).removeClass('active');
}
}
},10);
}
}
});
你的HTML有新指令,
<div ng-controller="test">
<tabset active-tabs> <!--New directive is here-->
<tab heading="One" disabled="isDisabled(1)">This should not be shown</tab>
<tab heading="Two" disabled="isDisabled(2)">This should receive initial focus</tab>
<tab heading="Three" disabled="isDisabled(3)">Three</tab>
</tabset>
</div>
更新Plunker
我有一个包含多个选项卡的 html 页面,可以根据 Angular 中的某些条件禁用其中一个或多个选项卡。 (至少其中之一将始终启用)
<tabset>
<tab ng-disabled="vm.disableTab(1)">
<tab ng-disabled="vm.disableTab(2)">
<tab ng-disabled="vm.disableTab(3)">
</tabset>
当用户进入页面时,第一个选项卡会获得焦点,无论它是否被禁用。
我希望它最初 focus/show 第一个未禁用的选项卡 。我将如何实现这样的目标?
编辑:plnkr:http://plnkr.co/edit/NWQDPk3DgBUpLqA0vRPw?p=preview
需要创建将执行以下 activity、
的自定义指令- 识别禁用的 TAB,如果它的第一个选项卡然后删除它的 'active' css
- 从选项卡列表中迭代第二个活动选项卡,检查它是否被禁用。
- 如果第二个也被禁用,则移至下一个...依此类推...
- 如果发现第二个选项卡处于活动状态,则添加 'active' css 并触发相应锚标记的点击。它将在 UI. 上显示其各自的 div 内容
你的 JS 指令,
.directive('activeTabs', function($compile)
{
return {
link: function(scope, el, attrs) {
var tabs = el.find('li');
setTimeout(function(){
var activeTab = false;
for (var i = 0; i < tabs.length; i++)
{
if (activeTab)
break;
tab = tabs[i];
if (!angular.element(tab).hasClass("disabled"))
{
angular.element(tab).addClass('active');
tab.active = true;
activeTab = true;
var a = angular.element(tab).find('a')[0];
a.click();
break;
}
else
{
tab.active = false;
angular.element(tab).removeClass('active');
}
}
},10);
}
}
});
你的HTML有新指令,
<div ng-controller="test">
<tabset active-tabs> <!--New directive is here-->
<tab heading="One" disabled="isDisabled(1)">This should not be shown</tab>
<tab heading="Two" disabled="isDisabled(2)">This should receive initial focus</tab>
<tab heading="Three" disabled="isDisabled(3)">Three</tab>
</tabset>
</div>
更新Plunker