2

我在这里向更多的观众提出这个问题——这是没有记录的。

在 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'));
}

但是我在某处错过了一步，因为现在我无法返回“新会话”选项卡。

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

4

2 回答 2

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>
于 2017-03-24T10:12:00.423 回答
-1

我的解决方案是：

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>

where hash: true- 允许在地址栏中更改哈希的参数（默认情况下在单击选项卡上 - event.preventDeault()）

2.添加到uikit.jshash的默认参数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.通过哈希激活活动标签。向切换组件添加一些代码

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

于 2016-08-07T09:13:11.990 回答