demos/tizen-winsets/widgets/button/button.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         <link rel="stylesheet"  href="themes/default/" />
   7         <script src="js/jquery.js"></script>
   8         <script src="js/"></script>
   9         <script src="theme.js"></script>
  10         <script src="js/jquery.mobile.forms.button.extension.js"></script>
  11         </head>
  12 <body>
  13
  14 <div data-role="page" id="ButtonDemo" data-add-back-btn="true" >
  15         <div data-role="header" data-position="fixed">
  16                 <h1>Buttons</h1>
  17         </div>
  18         <div data-role="content">
  19                 <ul data-role = "listview">
  20                         <li data-role="list-divider">Basic buttons</li>
  21                         <li class="ui-li-1line-btn1">List item 1<div data-role="button" data-inline="true">Text Button TesT</div></li>
  22                         <li class="ui-li-1line-btn1">List item 2<div data-role="button" data-inline="true" data-icon="arrow-r">Call Icon</div></li>
  23                         <li class="ui-li-1line-btn1">List item 3<div data-role="button" data-inline="true" data-icon="arrow-r">Longer Call Icon</div></li>
  24                         <li class="ui-li-1line-btn1">List item 4<div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div></li>
  25                         <li class="ui-li-1line-btn1">List item 3<div data-role="button" data-inline="true"  data-style="circle">data-style, circle</div></li>
  26                         <li data-role="list-divider">Only icon buttons for Tizen</li>
  27                         <li class="ui-li-1line-btn1">data-icon = "call" <div data-role="button" data-inline="true" data-icon="call"></div></li>
  28                         <li class="ui-li-1line-btn1">data-icon = "rename" <div data-role="button" data-inline="true" data-icon="rename"></div></li>
  29                         <li data-role="list-divider">Only icon buttons for jQM style</li>
  30                         <li class="ui-li-1line-btn1">data-icon = "arrow-l" <div data-role="button" data-inline="true" data-icon="arrow-l"></div></li>
  31                         <li class="ui-li-1line-btn1">data-icon = "arrow-r" <div data-role="button" data-inline="true" data-icon="arrow-r"></div></li>
  32                         <li class="ui-li-1line-btn1">data-icon = "arrow-u" <div data-role="button" data-inline="true" data-icon="arrow-u"></div></li>
  33                         <li class="ui-li-1line-btn1">data-icon = "arrow-d" <div data-role="button" data-inline="true" data-icon="arrow-d"></div></li>
  34                         <li class="ui-li-1line-btn1">data-icon = "delete" <div data-role="button" data-inline="true" data-icon="delete"></div></li>
  35                         <li class="ui-li-1line-btn1">data-icon = "plus" <div data-role="button" data-inline="true" data-icon="plus"></div></li>
  36                         <li class="ui-li-1line-btn1">data-icon = "minus" <div data-role="button" data-inline="true" data-icon="minus"></div></li>
  37                         <li class="ui-li-1line-btn1">data-icon = "check" <div data-role="button" data-inline="true" data-icon="check"></div></li>
  38                         <li class="ui-li-1line-btn1">data-icon = "gear" <div data-role="button" data-inline="true" data-icon="gear"></div></li>
  39                         <li class="ui-li-1line-btn1">data-icon = "refresh" <div data-role="button" data-inline="true" data-icon="refresh"></div></li>
  40                         <li class="ui-li-1line-btn1">data-icon = "forward" <div data-role="button" data-inline="true" data-icon="forward"></div></li>
  41                         <li class="ui-li-1line-btn1">data-icon = "back" <div data-role="button" data-inline="true" data-icon="back"></div></li>
  42                         <li class="ui-li-1line-btn1">data-icon = "grid" <div data-role="button" data-inline="true" data-icon="grid"></div></li>
  43                         <li class="ui-li-1line-btn1">data-icon = "star" <div data-role="button" data-inline="true" data-icon="star"></div></li>
  44                         <li class="ui-li-1line-btn1">data-icon = "alert" <div data-role="button" data-inline="true" data-icon="alert"></div></li>
  45                         <li class="ui-li-1line-btn1">data-icon = "info" <div data-role="button" data-inline="true" data-icon="info"></div></li>
  46                         <li class="ui-li-1line-btn1">data-icon = "home" <div data-role="button" data-inline="true" data-icon="home"></div></li>
  47                         <li class="ui-li-1line-btn1">data-icon = "search" <div data-role="button" data-inline="true" data-icon="search"></div></li>
  48                         <li data-role="list-divider">buttons with data-style </li>
  49                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="plus" data-style="circle" class="ui-li-1line-btn2"></div></li>
  50                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="minus" data-style="circle"></div></li>
  51                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="forward" data-style="circle"></div></li>
  52                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="call" data-style="circle"></div></li>
  53                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="star" data-style="nobg"></div></li>
  54                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-style="round">Test</div></li>
  55                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="star" data-style="box"></div></li>
  56                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="scrolltop" data-style="box"></div></li>
  57                         <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="scrollleft" data-style="box"></div></li>
  58                         <li data-role="list-divider">Round Button Test</li>
  59                         <li class="ui-li-has-multiline">
  60                                 Data Corners
  61                                 <span class="ui-li-text-sub">false, style - circle</span>
  62                                 <div data-role="button" data-inline="true" data-icon="minus" data-corners="false" data-style="circle"></div>
  63                         </li>
  64                         <li class="ui-li-has-multiline">
  65                                 Data Corners
  66                                 <span class="ui-li-text-sub">true, style - round</span>
  67                                 <div data-role="button" data-inline="true" data-icon="minus" data-corners="false" data-style="round"></div>
  68                         </li>
  69                         <li class="ui-li-has-multiline">
  70                                 Data Corners
  71                                 <span class="ui-li-text-sub">false, style - box</span>
  72                                 <div data-role="button" data-inline="true" data-icon="minus" data-corners="false" data-style="box"></div>
  73                         </li>
  74                         <li class="ui-li-has-multiline">
  75                                 Data Corners
  76                                 <span class="ui-li-text-sub">true, style - box</span>
  77                                 <div data-role="button" data-inline="true" data-icon="minus" data-corners="true" data-style="box"></div>
  78                         </li>
  79                         <li class="ui-li-has-multiline">
  80                                 Data Corners
  81                                 <span class="ui-li-text-sub">false, style - round</span>
  82                                 <div data-role="button" data-inline="true" data-icon="call" data-corners="false" data-style="round" data-iconpos="right">Icon Text</div>
  83                         </li>
  84                         <li class="ui-li-has-multiline">
  85                                 Data Corners
  86                                 <span class="ui-li-text-sub">true, style - box</span>
  87                                 <div data-role="button" data-inline="true" data-icon="call" data-corners="true" data-style="box" data-iconpos="right">Icon Text</div>
  88                         </li>
  89                         <li class="ui-li-has-multiline">
  90                                 Data Corners
  91                                 <span class="ui-li-text-sub">false, style - box</span>
  92                                 <div data-role="button" data-inline="true" data-icon="call" data-corners="false" data-style="box" data-iconpos="right">Icon Text</div>
  93                         </li>
  94                         <li data-role="list-divider">custom buttons</li>
  95                         <li><a href="buttonNolist.html">Buttons Pages(not in list) </a></li>
  96                 </ul>
  97         </div>
  98         <div data-role="footer">
  99         </div>
 100 </div>
 101
 102 </body>
 103 </html>