UIkit：將切換器選項卡設置爲當前窗口哈希值

我在此詢問this question以獲得更多觀衆 - 這是未記錄的內容。UIkit：將切換器選項卡設置爲當前窗口哈希值

在我的登錄表單中使用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')); 
}

但我缺少一個步驟的地方，因爲現在我無法回到「新建會話」選項卡。

上面的方法如何覆蓋內置行爲？如果是這樣，那麼方法顯然是不正確的 - 在這種情況下，做到這一點的正確方法是什麼？

來源

2016-02-07 Mike Rockétt

在此期間，我使用的是'active'屬性，設置它根據'tab'查詢字符串參數。儘管如此，我*真的*想要恢復到理想的行爲。 –

我正在嘗試使用'active'屬性：'data-uk-switcher =「{connect：'＃tabs'，active：1}」'。只是一個想法。我還沒有甜甜圈。如果你正在使用某個框架，你可以嘗試這樣做：'var index = window.location.hash'和'{active：{{index}}}' –

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

其中hash: true - PARAM允許在地址欄的變化哈希（默認情況下點擊選項卡 - event.preventDeault()）

2。將hash添加到默認參數param到uikit.js（下面僅顯示更改）

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

來源

2016-08-07 09:13:11 Vitaliy

你應該提交一個pull請求，而不是直接編輯UIKit。 –

我的版本

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-24 10:12:00

UIkit：將切換器選項卡設置爲當前窗口哈希值

回答

相關問題