libs/js/jquery-mobile-1.2.0/docs/buttons/buttons-grouped.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Grouped Buttons</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17 <div data-role="page" class="type-interior">
  18
  19         <div data-role="header" data-theme="f">
  20                 <h1>Grouped</h1>
  21                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content">
  26                 <div class="content-primary">
  27
  28                 <h2>Grouped buttons</h2>
  29                 <p>Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
  30 <pre><code>
  31 &lt;div data-role=&quot;controlgroup&quot;&gt;
  32 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
  33 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;No&lt;/a&gt;
  34 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Maybe&lt;/a&gt;
  35 &lt;/div&gt;
  36 </code></pre>
  37
  38                 <p>By default, grouped buttons are presented as a vertical list:</p>
  39
  40                 <div data-role="controlgroup">
  41                         <a href="index.html" data-role="button">Yes</a>
  42                         <a href="index.html" data-role="button">No</a>
  43                         <a href="index.html" data-role="button">Maybe</a>
  44                 </div>
  45
  46                 <p>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)</p>
  47
  48                 <p>Horizontal grouped buttons:</p>
  49                 <div data-role="controlgroup" data-type="horizontal">
  50                         <a href="index.html" data-role="button">Yes</a>
  51                         <a href="index.html" data-role="button">No</a>
  52                         <a href="index.html" data-role="button">Maybe</a>
  53                 </div>
  54
  55                 <p>Horizontal grouped buttons with icons:</p>
  56                 <div data-role="controlgroup" data-type="horizontal" >
  57                         <a href="index.html" data-role="button" data-icon="plus">Add</a>
  58                         <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  59                 </div>
  60
  61                 <p>Mini horizontal grouped buttons by adding <code>data-mini="true"</code> to the controlgroup:</p>
  62                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
  63                         <a href="index.html" data-role="button">Yes</a>
  64                         <a href="index.html" data-role="button">No</a>
  65                         <a href="index.html" data-role="button">Maybe</a>
  66                 </div>
  67
  68
  69                 <p>Mini horizontal grouped buttons with icons:</p>
  70                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
  71                         <a href="index.html" data-role="button" data-icon="plus">Add</a>
  72                         <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  73                 </div>
  74
  75                 <p>Horizontal grouped buttons, icon only:</p>
  76                 <div data-role="controlgroup" data-type="horizontal" >
  77                         <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
  78                         <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
  79                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
  80                 </div>
  81
  82                 <p>Mini horizontal grouped buttons, icon only:</p>
  83                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
  84                         <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
  85                         <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
  86                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
  87                 </div>
  88
  89
  90         </div><!--/content-primary -->
  91
  92         <div class="content-secondary">
  93
  94                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  95
  96                                 <h3>More in this section</h3>
  97
  98                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
  99
 100                                         <li data-role="list-divider">Buttons</li>
 101                                         <li><a href="buttons-types.html">Button basics</a></li>
 102                                         <li><a href="buttons-icons.html">Button icons</a></li>
 103                                         <li><a href="buttons-inline.html">Inline buttons</a></li>
 104                                         <li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
 105                                         <li><a href="buttons-themes.html">Theming buttons</a></li>
 106
 107                                 </ul>
 108                 </div>
 109         </div>
 110
 111 </div><!-- /content -->
 112
 113 <div data-role="footer" class="footer-docs" data-theme="c">
 114                 <p class="jqm-version"></p>
 115                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 116 </div>
 117
 118 </div><!-- /page -->
 119
 120 </body>
 121 </html>