Thursday 8 March 2012

jQuery UI Custom Tabs - Issues & Notes

* had to change to 'bind' to get it to work more than once.

* mouseexit doesn't seem to exist

* the problem with his 'selected tab' solution is that it requires a unique action name for each tab

consider a simple site which has various controllers, each with an Index action which is the first View to return for each section rendered by a tab

so instead, the convention needs to change...

at first i tried to change it to controller-actiontab but then this breaks as soon as you load a view resulting from a call to a different action within that controller

luckily, the site works on the convention that a single controller is in charge of all the views rendered for a particular tab, so should be able to change the convention to use controller name by itself

also the use of 'find' is troublesome since it will find EVERY 'ul' element and 'li' element within the
container 'div' and apply the styles to it.

this is a problem since we've chosen to render the body of each view within the menu containing div:

<div id="tabs" >
    <ul id="menu">
        <li id="ControllerTab">@Html.ActionLink("Link Text", "ActionName", "ControllerName")</li>       
    </ul>           
       
    <section id="main">
        @RenderBody()
    </section>
</div>

what you need to do is restrict the application of styles to 'ul' element's with the ID 'tabmenu'

No comments:

Post a Comment