jQueryMobileのアイコン（data-icon）の種類です。
サンプルソース
例）アイコンの一覧を表示する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>data-iconの一覧</title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div role="main" class="ui-content"> <ul data-role="listview"> <li data-icon="action"><a href="#">action</a></li> <li data-icon="alert"><a href="#">alert</a></li> <li data-icon="arrow-d"><a href="#">arrow-d</a></li> <li data-icon="arrow-d-l"><a href="#">arrow-d-l</a></li> <li data-icon="arrow-d-r"><a href="#">arrow-d-r</a></li> <li data-icon="arrow-l"><a href="#">arrow-l</a></li> <li data-icon="arrow-r"><a href="#">arrow-r</a></li> <li data-icon="arrow-u"><a href="#">arrow-u</a></li> <li data-icon="arrow-u-l"><a href="#">arrow-u-l</a></li> <li data-icon="arrow-u-r"><a href="#">arrow-u-r</a></li> <li data-icon="audio"><a href="#">audio</a></li> <li data-icon="back"><a href="#">back</a></li> <li data-icon="bars"><a href="#">bars</a></li> <li data-icon="bullets"><a href="#">bullets</a></li> <li data-icon="calendar"><a href="#">calendar</a></li> <li data-icon="camera"><a href="#">camera</a></li> <li data-icon="carat-d"><a href="#">carat-d</a></li> <li data-icon="carat-l"><a href="#">carat-l</a></li> <li data-icon="carat-r"><a href="#">carat-r</a></li> <li data-icon="carat-u"><a href="#">carat-u</a></li> <li data-icon="check"><a href="#">check</a></li> <li data-icon="clock"><a href="#">clock</a></li> <li data-icon="cloud"><a href="#">cloud</a></li> <li data-icon="comment"><a href="#">comment</a></li> <li data-icon="delete"><a href="#">delete</a></li> <li data-icon="edit"><a href="#">edit</a></li> <li data-icon="eye"><a href="#">eye</a></li> <li data-icon="forbidden"><a href="#">forbidden</a></li> <li data-icon="forward"><a href="#">forward</a></li> <li data-icon="gear"><a href="#">gear</a></li> <li data-icon="grid"><a href="#">grid</a></li> <li data-icon="heart"><a href="#">heart</a></li> <li data-icon="home"><a href="#">home</a></li> <li data-icon="info"><a href="#">info</a></li> <li data-icon="location"><a href="#">location</a></li> <li data-icon="lock"><a href="#">lock</a></li> <li data-icon="mail"><a href="#">mail</a></li> <li data-icon="minus"><a href="#">minus</a></li> <li data-icon="navigation"><a href="#">navigation</a></li> <li data-icon="phone"><a href="#">phone</a></li> <li data-icon="plus"><a href="#">plus</a></li> <li data-icon="power"><a href="#">power</a></li> <li data-icon="recycle"><a href="#">recycle</a></li> <li data-icon="refresh"><a href="#">refresh</a></li> <li data-icon="search"><a href="#">search</a></li> <li data-icon="shop"><a href="#">shop</a></li> <li data-icon="star"><a href="#">star</a></li> <li data-icon="tag"><a href="#">tag</a></li> <li data-icon="user"><a href="#">user</a></li> <li data-icon="video"><a href="#">video</a></li> </ul> </div> </body> </html> |
解説
- jQueryMobileを使うには、jQueryもインポートする必要があります。
- jQueryはバージョン3系では動きません。