Multiple tabstrip sets in app

2 posts, 0 answers
  1. Adrian
    Adrian avatar
    13 posts
    Member since:
    Feb 2012

    Posted 03 Apr 2012 Link to this post

    I am trying to figure out a way to use multiple tabstrip sets with what will be a large app.  The idea is to drill down into sub-tabstrips from a main tabstrip (the equivalent of a Menu or TreeView for web).  I want the tabstrip to change based on where the user is at (has a home button in all cases).  An example outline:

    - Home (this tabstrip set) 
    - Calendar
       - Page 1
       - Page 2
       - Page 3
    - Customers
    - Settings (different sets of lookup tables)
       - Home
       - Settings (this tabstrip set)
       - Profile
       - Users

    I want to know if:
    1) Is this a good idea for larger mobile apps?
    If not, what should I be doing?  Could I mix in the web PanelBar, or would that not work well?

    2) If this is proper for mobile apps, could someone look at these three jsfiddle scenarios of what I am trying to do.  Note that the last one navigates to a different page entirely for the other tabstrip, which I have working on my development machine but do not know how to do in jsfiddle, if it can even be done there  The third version essentially creates two mobile apps.

    Mobile TabStrip - hide/show tabset  
    Onclick of Settings tabstrip icon hides Home tabstrip and displays Settings tabstrip via CSS changes and grabbing the HREF from anchor tags. 

    Mobile TabStrip - replace tabstrip HTML  
    Onclick of Settings tabstrip icon replaces tabstrip DIV HTML content with contents of Settings tabs div. It grabs the HREF from anchor tags for highlighting current tab. 

    Mobile TabStrip - separate page per tabstrip  
    Onclick of Settings tabstrip icon goes to new page with different tabstrip and vice versa to Home. The tabset attribute acts like a boolean for navigation to new page. 

    Thank you!
  2. Petyo
    Petyo avatar
    2437 posts

    Posted 04 Apr 2012 Link to this post


    For that case, you can consider using multiple layouts with different tabstrips. 

    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top