libs/js/jquery-mobile-1.1.0/docs/buttons/buttons-icons.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 - Button icons</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>Button icons</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>Adding Icons to Buttons</h2>
  29                 <p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
  30
  31
  32                         <p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.  For example, the following markup:</p>
  33
  34                         <code>
  35                         &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong> data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
  36                         </code>
  37
  38                         <p>Creates this button with an icon:</p>
  39                         <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  40
  41                         <p>A more compact button with the <code> data-inline="true"</code> attribute added to the button:</p>
  42                         <a href="index.html" data-role="button" data-icon="delete" data-mini="true">Delete</a>
  43
  44                         <h2>Icon set</h2>
  45
  46                         <p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
  47
  48                         <p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
  49                         <a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
  50                         <p><strong>Right arrow</strong> - data-icon="arrow-r"</p>
  51                         <a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
  52                         <p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
  53                         <a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
  54                         <p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
  55                         <a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
  56                         <p><strong>Delete</strong> - data-icon="delete"</p>
  57                         <a href="index.html" data-role="button" data-icon="delete">My button</a>
  58                         <p><strong>Plus</strong> - data-icon="plus"</p>
  59                         <a href="index.html" data-role="button" data-icon="plus">My button</a>
  60                         <p><strong>Minus</strong> - data-icon="minus"</p>
  61                         <a href="index.html" data-role="button" data-icon="minus">My button</a>
  62                         <p><strong>Check</strong> - data-icon="check"</p>
  63                         <a href="index.html" data-role="button" data-icon="check">My button</a>
  64                         <p><strong>Gear</strong> - data-icon="gear"</p>
  65                         <a href="index.html" data-role="button" data-icon="gear">My button</a>
  66                         <p><strong>Refresh</strong> - data-icon="refresh"</p>
  67                         <a href="index.html" data-role="button" data-icon="refresh">My button</a>
  68                         <p><strong>Forward</strong> - data-icon="forward"</p>
  69                         <a href="index.html" data-role="button" data-icon="forward">My button</a>
  70                         <p><strong>Back</strong> - data-icon="back"</p>
  71                         <a href="index.html" data-role="button" data-icon="back">My button</a>
  72                         <p><strong>Grid</strong> - data-icon="grid"</p>
  73                         <a href="index.html" data-role="button" data-icon="grid">My button</a>
  74                         <p><strong>Star</strong> - data-icon="star"</p>
  75                         <a href="index.html" data-role="button" data-icon="star">My button</a>
  76                         <p><strong>Alert</strong> - data-icon="alert"</p>
  77                         <a href="index.html" data-role="button" data-icon="alert">My button</a>
  78                         <p><strong>Info</strong> - data-icon="info"</p>
  79                         <a href="index.html" data-role="button" data-icon="info">My button</a>
  80                         <p><strong>Home</strong> - data-icon="home"</p>
  81                         <a href="index.html" data-role="button" data-icon="home">My button</a>
  82                         <p><strong>Search</strong> - data-icon="search"</p>
  83                         <a href="index.html" data-role="button" data-icon="search">My button</a>
  84
  85
  86                 <h2>Icon positioning</h2>
  87                 <p>By default, all icons in buttons are placed to the left of the button text. </p>
  88                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
  89
  90                 <p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
  91
  92 <code>
  93 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;right&quot;</strong>&gt;Delete&lt;/a&gt;
  94 </code>
  95
  96                 <p>Creates this button with right-aligned icon:</p>
  97                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
  98
  99                 <p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
 100                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
 101
 102                 <p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
 103                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
 104
 105                 <p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
 106
 107 <code>
 108 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;notext&quot;</strong>&gt;Delete&lt;/a&gt;
 109 </code>
 110
 111                 <p>Creates this icon-only button:</p>
 112                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
 113
 114
 115
 116                         <h2>Mini &amp; Inline</h2>
 117                         <p>The <a href="../forms/forms-all-mini.html">mini</a> and <a href="buttons-inline.html">inline</a> attributes can be added to produce more compact buttons:<p>
 118                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="left" data-mini="true" data-inline="true">Delete</a>
 119                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" data-mini="true" data-inline="true">Delete</a>
 120                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="top" data-mini="true" data-inline="true">Delete</a>
 121                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom" data-mini="true" data-inline="true">Delete</a>
 122                         <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-mini="true" data-inline="true">Delete</a>
 123
 124
 125                 <h2>Custom Icons</h2>
 126                 <p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button: <code>ui-icon-myapp-email</code>. </p>
 127                 <p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
 128                 <p> In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
 129
 130 <pre><code>.ui-icon-myapp-email {
 131         background-image: url("app-icon-email.png");
 132 }</code></pre>
 133
 134                 <p>This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second rule that uses the <code>-webkit-min-device-pixel-ratio: 2</code> media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:</p>
 135 <pre><code>
 136 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
 137         .ui-icon-myapp-email {
 138                 background-image: url("app-icon-email-highres.png");
 139                 background-size: 18px 18px;
 140         }
 141         ...more HD icon rules go here...
 142 }
 143 </code></pre>
 144
 145                 <h2>Icons and themes</h2>
 146                 <p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with <a href="buttons-themes.html">themed buttons</a>.</p>
 147
 148                 <!-- A themed -->
 149                 <p><strong>Swatch "A"</strong> themed buttons</p>
 150                 <div data-role="controlgroup"  data-type="horizontal">
 151                 <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 152                 <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 153                 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 154                 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 155                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 156                 <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 157                 <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 158                 <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 159                 <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 160                 <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 161                 <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 162                 <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 163                 <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 164                 <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 165                 <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 166                 <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 167         <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 168         <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 169                 </div>
 170
 171                 <!-- B themed -->
 172                 <p><strong>Swatch "B"</strong> themed buttons</p>
 173                 <div data-role="controlgroup"  data-type="horizontal">
 174                 <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 175                 <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 176                 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 177                 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 178                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 179                 <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 180                 <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 181                 <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 182                 <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 183                 <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 184                 <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 185                 <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 186                 <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 187                 <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 188                 <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 189                 <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 190         <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 191         <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 192                 </div>
 193
 194                 <!-- C themed -->
 195                 <p><strong>Swatch "C"</strong> themed buttons</p>
 196                 <div data-role="controlgroup"  data-type="horizontal">
 197                 <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 198                 <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 199                 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 200                 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 201                 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 202                 <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 203                 <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 204                 <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 205                 <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 206                 <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 207                 <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 208                 <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 209                 <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 210                 <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 211                 <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 212                 <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 213         <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 214         <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 215                 </div>
 216
 217         </div><!--/content-primary -->
 218
 219         <div class="content-secondary">
 220
 221                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 222
 223                                 <h3>More in this section</h3>
 224
 225                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 226
 227                                         <li data-role="list-divider">Buttons</li>
 228                                         <li><a href="buttons-types.html">Button basics</a></li>
 229                                         <li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
 230                                         <li><a href="buttons-inline.html">Inline buttons</a></li>
 231                                         <li><a href="buttons-grouped.html">Grouped buttons</a></li>
 232                                         <li><a href="buttons-themes.html">Theming buttons</a></li>
 233
 234                                 </ul>
 235                 </div>
 236         </div>
 237
 238 </div><!-- /content -->
 239
 240 <div data-role="footer" class="footer-docs" data-theme="c">
 241                 <p>&copy; 2011-12 The jQuery Foundation</p>
 242 </div>
 243
 244 </div><!-- /page -->
 245
 246 </body>
 247 </html>