[jbosstools-issues] [JBoss JIRA] (JBIDE-16347) New Tabs wizard for JQM 1.4

[ https://issues.jboss.org/browse/JBIDE-16347?page=com.atlassian.jira.plugi... ] Viacheslav Kabanovich updated JBIDE-16347: ------------------------------------------ Description: Tabs widget can be implemented as navbar {code} <div data-role="tabs" id="tabs"> <div data-role="navbar"> <ul> <li><a href="#one" data-ajax="false">one</a></li> <li><a href="#two" data-ajax="false">two</a></li> </ul> </div> <div id="one" class="ui-body-d ui-content"> </div> <div id="two"> </div> </div> {code} or as listview {code} <div data-role="tabs"> <style scoped="scoped"> .tablist-left {width: 35%; display: inline-block;} .tablist-content {width: 50%; display: inline-block;vertical-align: top;margin-left: 5%;} </style> <ul data-role="listview" data-inset="true" class="tablist-left"> <li><a href="#one" data-ajax="false">one</a></li> <li><a href="#two" data-ajax="false">two</a></li> <li><a href="ajax-content.html" data-ajax="false">three</a></li> </ul> <div id="one" class="ui-body-d tablist-content"> </div> <div id="two" class="ui-body-d tablist-content"> </div> </div> {code} Some features are not supported by data-* attributes but can be set with script Collapsible {code} <script> $("#tabs").tabs({collapsible: true}); </script> {code} Initially collapsed {code} <script> $("#tabs").tabs({collapsible: true, active: false}); </script> {code} Specifying initially active tab {code} <script> $("#tabs").tabs({active: 1}); </script> {code} Tab disablement {code} <script> $("#tabs").tabs({disabled: [2]}); </script> {code} Animation of panel showing/hiding {code} <script> $("#tabs").tabs({show: true, hide: true}); </script> {code} Tab activation on mouse hover {code} <script> $("#tabs").tabs({event: "mouseover"}); </script> {code} was: Tabs widget can be implemented as navbar {code} <div data-role="tabs" id="tabs"> <div data-role="navbar"> <ul> <li><a href="#one" data-ajax="false">one</a></li> <li><a href="#two" data-ajax="false">two</a></li> </ul> </div> <div id="one" class="ui-body-d ui-content"> </div> <div id="two"> </div> </div> {code} or as listview {code} <div data-role="tabs"> <style scoped="scoped"> .tablist-left {width: 35%; display: inline-block;} .tablist-content {width: 50%; display: inline-block;vertical-align: top;margin-left: 5%;} </style> <ul data-role="listview" data-inset="true" class="tablist-left"> <li><a href="#one" data-ajax="false">one</a></li> <li><a href="#two" data-ajax="false">two</a></li> <li><a href="ajax-content.html" data-ajax="false">three</a></li> </ul> <div id="one" class="ui-body-d tablist-content"> </div> <div id="two" class="ui-body-d tablist-content"> </div> </div> {code} Some features are not supported by data-* attributes but can be set with script Collapsible {code} <script> $("#tabs").tabs({collapsible: true}); </script> {code} Initially collapsed {code} <script> $("#tabs").tabs({collapsible: true, active: false}); </script> {code} Tab disablement {code} <script> $("#tabs").tabs({collapsible: true, disabled: [2]}); </script> {code} Animation of panel showing/hiding {code} <script> $("#tabs").tabs({collapsible: true, show: true, hide: true, disabled: [2]}); </script> {code} -- This message is automatically generated by JIRA. If you think it was sent incorrectly, please contact your JIRA administrators For more information on JIRA, see: http://www.atlassian.com/software/jira