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命令选项卡

回答

相关问题