XMLWordPrintable

      Tabs widget can be implemented as navbar

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

      or as listview

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

      Some features are not supported by data-* attributes but can be set with script
      Collapsible

      <script>
      	$("#tabs").tabs({collapsible: true});
      </script>
      

      Initially collapsed

      <script>
      	$("#tabs").tabs({collapsible: true, active: false});
      </script>
      

      Specifying initially active tab

      <script>
      	$("#tabs").tabs({active: 1});
      </script>
      

      Tab disablement

      <script>
      	$("#tabs").tabs({disabled: [2]});
      </script>
      

      Animation of panel showing/hiding

      <script>
      	$("#tabs").tabs({show: true, hide: true});
      </script>
      

      Tab activation on mouse hover

      <script>
      	$("#tabs").tabs({event: "mouseover"});
      </script>
      

        1. scr.png
          99 kB
          Alexey Kazakov
        2. Tabs.png
          0.4 kB
          Daniel Azarov
        3. TabsWizBan.png
          0.9 kB
          Daniel Azarov

              scabanovich Viacheslav Kabanovich (Inactive)
              scabanovich Viacheslav Kabanovich (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: