Best Tabbed Navigation Bar Implementation?

edited June 2013 in Newbie Questions
I was browsing for a tabbed navigation layout for Enyo, and the best example I could find was this JSFiddle:
http://jsfiddle.net/mausmalone/XbCZM/4/

But one odd thing with this example is that if you swipe the panels it will change the panel, but not the radio button. Is there an easy way to fix this issue? To me, it seems that one way is to use the panel's onTransitionStart event to update the radio buttons to the panels active index. Then, just remove the CSS "active" class from the old button and add it to the new active button. I'm still very new to Enyo and web development though, so is there a better way to do this? Or a better tabbed navigation implementation? Thanks.

Comments

  • Check out the in-developement version of Onyx, https://github.com/enyojs/onyx/blob/master/source/TabPanels.js has something useful :)
  • It looks nice, but I can't get it running on JSFiddle to figure it out. I was hoping something like this would work:
    this.$.toolbar.components[this.$.panels.fromIndex].removeClass("active");
    this.$.toolbar.components[this.$.panels.toIndex].addClass("active");
    but it seems that, even though the radio button inherits Control, which is where addClass() and removeClass() are declared, I cannot call the function from the RadioButton kind. Is there a way to call inherited functions like this? It works if I create a RadioButton in the Chrome console and call addClass(), but not in the code. I'm guessing is a scope thing. Thanks again.
  • I'm using panels with a tabbed navigation bar in one of my apps. Maybe you could do something similar?

    Webapp: Dash Weather+ (Best on smaller screens)
    Source: https://github.com/choorp/dash-weather-plus

    It's not packaged as a single component, so it would take some effort to get working in your own app. Just an idea.
  • Choorp, That looks really good, lots better than the plain fiddle example. Thanks for sharing. I need to look through this some more.

    chris, Thanks, that solved my problem. I'm still curious why calling the parent's inherited function fails though.
Sign In or Register to comment.