This is a migrated thread and some comments may be shown as answers.

Tab Strip as Buttons

5 Answers 130 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 2
Shawn asked on 22 Mar 2014, 02:57 AM
For many reasons I am using a tab strip as action buttons on a form instead of buttons.

First question:

I want to be able to deselect a tab once I have called its action.  For example I have the following snippet.

      <div data-role="footer">
            <div data-role="tabstrip" id="tabstrip" data-select="onTabSelected">
                <a data-icon="home">Save</a>
                <a data-icon="info">Previous</a>
                <a data-icon="details">Next</a>
                <a data-icon="camera">Scan</a>
            </div>
        </div>

And here is the select event

        function onTabSelected(e)
        {
            var index = $(e.item).index();

            console.log("tab index="index);

            if(index == 1)
            {
                    // do something
            }
            else if(index == 2)
            {
                    // do something
            }

            // deselect the tab item so the user can select it again and fire the select event

            return;
        }

Second question:

Can I use standard jquery icons like data-icon="ui-icon-carat-1-e"

Thanks in advance 





5 Answers, 1 is accepted

Sort by
0
Shawn
Top achievements
Rank 2
answered on 22 Mar 2014, 03:42 PM
I answered question #2 - the answer is no so I will use the custom icon methods.

Question #1 still pertains and I tried some of the solutions that were posted to clear the selections and they did not work.

var tabStrip = $("#tabstrip").data("kendoMobileTabStrip");
tabStrip.clear();

A little more background in why I am using tab strip is that they behave well when switching form factors, rotating and when the virtual keyboard is open.
0
Kiril Nikolov
Telerik team
answered on 24 Mar 2014, 01:21 PM
Hello Shawn,

I have tested the clear() method in the following jsBin and it seems to be working correctly. Can you please use it to reproduce the issue that you are having?

http://jsbin.com/xeneveba/1/edit

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shawn
Top achievements
Rank 2
answered on 25 Mar 2014, 12:40 AM
Hi Kiril

Here is a link to my code with yours included.

Hope this helps and let me know what is going wrong here or if I am doing something wrong.

http://jsbin.com/xeneveba/4/

0
Kiril Nikolov
Telerik team
answered on 25 Mar 2014, 12:04 PM
Hello Shawn,

Due to the async nature of the operations, you will need to wrap the clear() in a setTimeout() block, in order to successfully clear the state. Please check the updated example:

http://jsbin.com/xeneveba/5/edit

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shawn
Top achievements
Rank 2
answered on 26 Mar 2014, 04:05 PM
Thanks Kiril

That worked for me.


Tags
TabStrip (Mobile)
Asked by
Shawn
Top achievements
Rank 2
Answers by
Shawn
Top achievements
Rank 2
Kiril Nikolov
Telerik team
Share this question
or