Question

我在这里问this question更多的观众 - 这是没有记录的内容。

在UIkit中使用选项卡切换器作为我的登录表单。这是标记：

<ul class="uk-tab" data-uk-switcher="{connect:'#tabs'}">
    <li id="session" class="uk-active"><a href="">New Session</a></li>
    <li id="help"><a href="">Help</a></li>
</ul>

<ul id="tabs" class="uk-switcher">
    <li id="session">...</li>
    <li id="help">...</li>
</ul>

当窗口哈希值为#help时，我需要将活动选项卡设置为“帮助”选项卡。我似乎只是部分完成了这一点，具体如下：

if (window.location.hash == '#help') {
    UIkit.switcher($('[data-uk-switcher]')).show($('li#help'));
}

但我在某个地方错过了一步，因为现在我无法返回“新会话”标签。

上述方法如何覆盖内置行为？如果是这样，这种方法显然是不正确的 - 在这种情况下，这样做的正确方法是什么？

Answer 1

我的版本

JS

switcherTab('uk-tab-administration');

function switcherTab(id){
    $('#'+id+' a[href = "'+window.location.hash+'"]').parent('li').click();

    $('#'+id+' a').click(function(){
        var val = $(this).attr('href');
        window.location.hash = val.replace("#", "");
    });
}

HTML

<ul uk-tab id="uk-tab-administration">
    <li><a href="#item1">Item 1</a></li>
    <li><a href="#item2">Item 2</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>content1</li>
    <li>content2</li>
</ul>

Answer 2

我的解决方案是：

1.创建HTML代码

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content', hash: true}">
    <li><a href="#tab-profile">Профиль</a></li>
    <li><a href="#tab-verify">Подтверждение телефона</a></li>
    <li><a href="#tab-access">Изменить пароль</a></li>
</ul>

<ul class="uk-switcher uk-margin-medium-top" id="tab-content">
    <li>i am tab-profile</li>
    <li>i am tab-verify</li>
    <li>i am tab-access</li>
</ul>

其中hash: true - 允许在地址栏中更改哈希的参数（默认情况下在点击标签上显示 - event.preventDeault()）

2.将hash添加到uikit.js的默认参数param（以下仅显示更改）

UI.component('tab', {

    defaults: {
        'target'    : '>li:not(.uk-tab-responsive, .uk-disabled)',
        'connect'   : false,
        'active'    : 0,
        'animation' : false,
        'duration'  : 200,
        'swiping'   : true,
        'hash'      : false
    },

    init: function() {
        ...
        this.on("click.uk.tab", this.options.target, function(e) {
            e.preventDefault();
            if($this.options.hash) {
                location.hash = $(e.currentTarget).find('a').attr('href');
            }
            ...
        });
        ...
    },
    ...
});

3.通过哈希激活活动选项卡。将一些代码添加到swticher组件

UI.component('switcher', {
    init: function() {
        // init active tab by hash
        if(document.location.hash.match(/^#?tab/gi)) {
            UIkit.$("[href="+document.location.hash+"]").parents("li").addClass("uk-active");
        }
        ...
    },
    ...
});

Uikit v.2.26.4。例如：http://codepen.io/Intiligent/pen/RRqwAZ

UIkit：将切换器选项卡设置为当前窗口哈希

2 个答案: