Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How to Use - TabbedBar?

Alright I am having troubles using TabbedBar on my App… Here is pretty much what I have, and what I want:


A TableView. In the first row is an image and some buttons. In the second row, I have a TabbedBar with 3 options and then in the 3rd row I have some text.


  1. A TableView; Row 1 is the image and some buttons (Unrelated to this question)
  2. At the top of Row 2, a TabbedBar with 3 options (Related, Comments, Info)
  3. Default is: Related
  4. When you click on one of the options, the content below the TabbardBar changes to whatever I want.

Anybody help? My code is all over the place right now, so I can't really show you anything, and the KitchenSink example isn't really what I want, at all…

— asked September 3rd 2010 by Colton Arabsky
  • tabbedbar

4 Answers

  • Try adding a textarea or label below the tabbed bar and change its content based on the button clicked. There may be a more efficient way of handling tabbedBar indexes but this always works for me.

    Hope it helps

    yourTabbedBarName.addEventListener('click', function(e){
      if(e.index == 0) // Related
        content.text = 'Related content; // if using a textarea it should be content.value
      if(e.index == 1)  // Comments
        content.text = 'Comments content'; 
       if(e.index == 2) // Info
        content.text = 'Info content'; 
    var content = Ti.UI.createLabel();
    — answered September 3rd 2010 by Kelly Redd
    • Thank you for the quick answer, Kelly.

      The thing is… My information is all pulled from a MySQL database and it seems that with the way you showed, it would mean a LOT of data would be pulled and it would be very slow on the device.

      It seems like a great way for just normal data that you have on the device, but for my project this way does not work that well, in terms of device speed.

      — commented September 3rd 2010 by Colton Arabsky
    • I think you need to be a bit clearer about what you have and what you want. Your enormous database wasn't mentioned at all in your initial question.

      Can you tell us about the data you have and how you'd ideally like it to be displayed?

      — commented September 3rd 2010 by James K
  • In response to James K:

    For the TabbedBar, all I need is this:

    1. Related Videos - Will list 5-10 rows of various videos that have something to do with the main page
    2. Comments - Will list 7 rows of various comments about the main page
    3. Information - Will list 5 hand-written things about the main paged

    All information is stored in a MySQL Database that was grabbed in another window and will be displayed.

    — answered September 3rd 2010 by Colton Arabsky
    1 Comment
    • I'd suggest that inside each if statement use XHR to make the appropriate request to your database for the content. Maybe store it somewhere once it's already loaded to speed up performance?

      — commented September 3rd 2010 by Kelly Redd
  • Kelly Redd, I have how I want to show the information all fine. What I need is to be able to change it when someone chooses one or the other of the tabs. Right now it's not working, or if it is it's really laggy and choppy.

    — answered September 4th 2010 by Colton Arabsky
    1 Comment
    • That's what my example below does. In order to know which tabbedBar button was pushed you need to check it's index. Check out the addEventsListener code i posted first.

      — commented September 4th 2010 by Kelly Redd
  • Bump

    — answered September 4th 2010 by Colton Arabsky
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.