|
|
Rank: Newbie
Groups: Member
Joined: 11/26/2007
Posts: 8
|
Hi,
I have a tabstrip with several tab items. On certain client events, I would like to change the style of the selected tab item. I already have a reference to the tab item object.
My question is how can I change the style of this tab item object on client-side (javascript)?
Thanks in advance.
eyal
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
You can not do that directly. You can only assign different style for different state, and then change the tab item's state. For example, you can have a different style for "Selected" state and then call setSelected(true) on the TabItem to place the item into selected state. You can also use "Disabled" state.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 11/26/2007
Posts: 8
|
Thanks for the quick reply.
I know about the state style but unfortunately it does not fit to my case.
I'll try to explain the situation so maybe another approach would pop-up. The tabs are categories in a (very large) form. Each tab has form fields related to its category. Some of these fields are required to be filled in order to submit the form (marked with red). However, only the fields of the selected tab are visible to the client (well, that's the point of the tabstrip). My idea is that the title of the tabs would be red as long as one or more of the tab's required form-fields are empty. Once all the required form fields of the tab are filled, the title would turn black. It better indicates the form situation to the client and prevent from trying to submit a partial-filled form.
Currently it works by setting the NormalStyle-CssText to red on tabs that have required form-fields. Then, several javascript functions set it to black (the tab text is html). It works well but I thought there must be a simpler approach for modifying the tab's style.
Thanks for any idea.
eyal
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
I think using HTML text as tab text is the best way. That way you can change the tab item appearance in whatever way possible with JavaScript/DHTML. The TabStrip is basically left out in this case since itself does not have the capability to change tab colors through JavaScript.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 11/26/2007
Posts: 8
|
Thanks for the answer.
Could you please show an example of how to refer to a specific tab-item on client side, when the event is not raised by the tabstrip or tab-item itself. For instance - let's say I have 4 tabs, each with form fields. I would like to do some modification to the tab-item when a form-field raises an onclick event. How can I get a reference to the specific tab-item?
br,
eyal
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, It will be something like this:
Code: JavaScript
//Get the TabStrip object
var tabStrip = eo_GetObject("TabStrip1");
//Get the first TabItem object
var tabItem = tabStrip.getTopGroup().getItemByIndex(0);
//Call methods on tabItem....
......
Please see here for more details on how to use our client side API: http://doc.essentialobjects.com/library/1/clientapi_howto.aspxIf you use HTML in tab item, then the key is to interact with those HTML directly though (for example, by assigning a different id to HTML in different tab item, then use document.getElementById to access that HTML directly). That means you will totally bypass the TabStrip and there will be no need to access the tabstrip at all. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 11/26/2007
Posts: 8
|
Thanks!
Great idea! The approach you recommended in the last paragraph seems to be the one for this case.
Regarding the client side API, I already went through it. I posted the question here because the documentation in Client API Reference > JavaScript Objects does not include the TabStrip object.
br,
eyal
short feedback on the documentation: the layout of the documentation screen lack in usability. The size of the navigation and content panes are too small. There is no way for the client to expand it. It requires over-scrolling and memorizing items (especially the navigation pane).
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Glad that it works for you and thank you very much for the feedback. As for the documentation, you can also use the offline version. A local version of the help file in .chm format is also installed on your machine. That will be much easier to navigate than the online version.
Thanks!
|
|