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

[Viacheslav Kabanovich (JIRA)]

     [ https://issues.jboss.org/browse/JBIDE-16347?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

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}
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}


  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-2").tabs({collapsible: true});
</script>
{code}
Initially collapsed
{code}
<script>
	$("#tabs-2").tabs({collapsible: true, active: false});
</script>
{code}
Tab disablement
{code}
<script>
	$("#tabs-2").tabs({collapsible: true, disabled: [2]});
</script>
{code}
Animation of panel showing/hiding
{code}
<script>
	$("#tabs-2").tabs({collapsible: true, show: true, hide: true, 
disabled: [2]});
</script>
{code}



    
> New Tabs wizard for JQM 1.4
> ---------------------------
>
>                 Key: JBIDE-16347
>                 URL: https://issues.jboss.org/browse/JBIDE-16347
>             Project: Tools (JBoss Tools)
>          Issue Type: Sub-task
>          Components: jsp/jsf/xml/html source editing
>            Reporter: Viacheslav Kabanovich
>            Assignee: Viacheslav Kabanovich
>              Labels: new_and_noteworthy
>             Fix For: 4.2.0.Alpha2
>
>         Attachments: Tabs.png, TabsWizBan.png
>
>
> 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