2

I am asking this question here for a larger audience - this is something that is not documented.

Using tab switchers in UIkit for my signin form. This is the markup:

<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>

When the window hash is #help, I need to set the active tab to the "Help" tab. It seems I've accomplished this in part only, with the following:

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

But I'm missing a step somewhere, because now I can't go back to the "New Session" tab.

How is the method above overriding the built in behaviour? If so, the methodology is obviously incorrect - in which case, what is the correct way to do this?

Mike Rockétt
  • 8,947
  • 4
  • 45
  • 81
  • In the meantime, I'm using the `active` property, setting it according to the `tab` query string parameter. Nonetheless, I *really* want to revert to the desired behaviour. – Mike Rockétt Feb 07 '16 at 16:41
  • I was trying to use the `active` attribute: `data-uk-switcher="{connect:'#tabs', active:1}"`. Just an idea. No donuts for me yet. If you are using some framework, you may try doing something like this: `var index = window.location.hash` and `{active: {{ index }} }` – Paulo Cheque Jun 10 '16 at 06:59

2 Answers2

1

My version

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>
Дмитрий Алфёров
  • 370
  • 2
  • 6
-1

my solution is:

1.Create html code

<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 - param that allow change hash in address bar (by default on click tab - event.preventDeault())

2.Add hash to default param param to uikit.js (below shows only the changes)

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.Activate active tab by hash. Add some code to swticher component

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. example: http://codepen.io/Intiligent/pen/RRqwAZ

Vitaliy
  • 588
  • 4
  • 6