Details

      Description

      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>
      

        Gliffy Diagrams

          Attachments

          1. scr.png
            scr.png
            99 kB
          2. Tabs.png
            Tabs.png
            0.4 kB
          3. TabsWizBan.png
            TabsWizBan.png
            0.9 kB

            Activity

              People

              • Assignee:
                scabanovich Viacheslav Kabanovich
                Reporter:
                scabanovich Viacheslav Kabanovich
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: