Ubuntu HTML5應用程序：更改JS命令選項卡

也是第一個問題！好極了！剛剛從AskUbuntu中移除了這個。我剛剛完成一個小的私人項目，以獲得一些經驗，我嘗試更改應用佈局，使其作爲一個普通網站（在Jimdo上，因此它非常具有挑戰性），沒有太多的JavaScript要求，但完全在移動視圖功能。由於從Jimdo提供自然只有實際的網站，我不得不實施Ubuntu HTML5應用程序：更改JS命令選項卡

if (activeTab.getAttribute('jimdo-target') != null) 
    location.href = activeTab.getAttribute('jimdo-target');

重定向到__doSelectTab在tabs.js（）函數。（在js中，我從jimdo菜單字符串中獲取值以構建帶有此鏈接屬性的TABS菜單）現在一切正常，在頁面加載時可以免除第一個選項卡的選擇。我很容易地設置.active和.inactive類，但它不會左移。所以我的下一個想法是讓它像往常一樣初始化，然後發送一個命令來切換到當前選項卡。你有任何想法如何管理？我不能因爲這個。這個和那個元素我顯然不明白...

你們大多數人都有工具包和整個代碼，但我列出了選項卡的選擇功能部分。 JS：

__doSelectTab: function(tabElement, forcedSelection) { 
    if (! tabElement) 
     return; 
    if (tabElement.getAttribute("data-role") !== 'tabitem') 
     return; 
    if (forcedSelection || 
    (Array.prototype.slice.call(tabElement.classList)).indexOf('inactive') > -1) { 
     window.clearTimeout(t2); 
     activeTab = this._tabs.querySelector('[data-role="tabitem"].active'); 
     offsetX = this.offsetLeft; 
     this._tabs.style['-webkit-transition-duration'] = '.3s'; 
     this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)'; 
     this.__updateActiveTab(tabElement, activeTab); 

     if (activeTab.getAttribute('jimdo-target') != null) 
      location.href = activeTab.getAttribute('jimdo-target'); 

     [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) { 
      e.classList.remove('inactive'); 
     }); 
     var targetPageId = tabElement.getAttribute('data-page'); 
     this.activate(targetPageId); 
     this.__dispatchTabChangedEvent(targetPageId); 
    } else { 
     [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) { 
      el.classList.toggle('inactive'); 
     }); 
     var self = this; 
     t2 = window.setTimeout(function() { 
      var nonActiveTabs = self._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'); 
      [].forEach.call(nonActiveTabs, function (el) { 
       el.classList.toggle('inactive'); 
      }); 
     }, 3000); 
    } 
},

...我app.js還沒有什麼特別的東西：

var UI = new UbuntuUI(); 

document.addEventListener('deviceready', function() { console.log('device ready') }, true); 

$(document).ready(function() { 

    recreate_jimdo_nav(); 

    UI.init(); 

});

來源

2014-09-22 Peter Nerlich

你能給我們一個這個最低工作的例子嗎？ – therealrootuser 2014-09-22 16:50:56

_working_例子？我不知道我是否理解你是對的，因爲，看到我來自德國......同時找到了一個簡單的解決方法，我將作爲答案張貼，但是我仍然想知道是否有其他方法。 – 2014-09-23 15:08:38

所以同時發現了一個簡單的解決方法，但我還是想知道是否有是其他方式。最後我注意到__doSelectTab（）函數是執行點擊的函數，所以它只會在首先隱藏時顯示其他選項卡名稱。所以我加了全球價值

var jnavinitialized = false;

在tabs.js的開始和__setupInitialTabVisibility（）函數的頂部運行

var t = this; 
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 0); 
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 1); 
setTimeout(function(){jnavinitialized = true;}, 10);

。然後，我改變了location.href命令

if (activeTab.getAttribute('jimdo-target') != null && jnavinitialized) 
    location.href = activeTab.getAttribute('jimdo-target');

和它的作品。但最初我搜索了一種方法來改變標籤上的命令，而不是運行命令來選擇兩次。所以如果你知道更好或更清潔的方式，歡迎你！

來源

2014-09-23 15:35:41

Ubuntu HTML5應用程序：更改JS命令選項卡

回答

相關問題