demos/tizen-winsets/widgets/button/buttonNolist.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="ButtonNolist" 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                 *Default Button
  20                 <div data-role="button">Button</div>
  21                 HTML Code:
  22                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset" class="formfield" readonly="readonly" disabled><div data-role="button">Button</div></textarea>
  23                 <br/><br/>
  24                 *Inline Button, Inline Button With Icon<br/>
  25                 <div data-role="button" data-inline="true">DataInline True</div>
  26                 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
  27                 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
  28                 <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
  29                 <div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div><br/>
  30                  HTML Code:
  31                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset" readonly="readonly" disabled><div data-role="button" data-inline="true">DataInline True</div>
  32 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
  33 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
  34 <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
  35 <div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div></textarea><br/><br/>
  36                 *Default Button (A tag)
  37                 <a href="#buttonTest" data-role="button">A Tag Button</a>
  38                 HTML Code:
  39                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"  readonly="readonly" disabled><a href="#buttonTest" data-role="button">A Tag Button</a></textarea>
  40                 <br/><br/>
  41                 *Button Icon Position top, bottom (with inline)
  42                 <div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div><br/>
  43                 <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div><br/>
  44                 <div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
  45                 <div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
  46                  HTML Code:
  47                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"  readonly="readonly" disabled><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
  48 <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
  49 <div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
  50 <div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
  51                 *Custom Button:<br/>
  52                 <div data-role="button" data-inline="true" data-icon="call">0</div>
  53                 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">1</div>
  54                 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">2</div>
  55                 <div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">3</div>
  56                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div><br/>
  57                 HTML Code:
  58                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"  readonly="readonly" disabled><div data-role="button" data-inline="true" data-icon="call">0</div>
  59 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">1</div>
  60 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">2</div>
  61 <div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">3</div></textarea>
  62                 CSS Code:<br/>
  63                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"  readonly="readonly" disabled>.ui-icon-test{
  64         background-size: 100% 100%;
  65         background-image: url(00_button_call);
  66 }
  67
  68 .ui-icon-test2{
  69         background-position:0% 0%;
  70         background-size:50% 50%;
  71         background-image: url(00_button_call);
  72 }</textarea>
  73                 *Input Type = "Button"
  74                 <input type="button" value="test button"/>
  75                 HTML Code:
  76                 <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"  readonly="readonly" disabled><input type="button" value="test button"/></textarea>
  77                 <br/><br/>
  78                 Button No text
  79                 <div data-role="button" id="button1test" data-corners="false" data-inline="false" data-style="circle"></div>
  80                 <br/><br/>
  81                 <div data-role="button" id="button1test2" data-corners="false" data-inline="false" ></div>
  82                 <br/><br/>
  83                 <div data-role="button" id="button1test3" data-corners="false" data-inline="true" data-style="circle"></div>
  84                 <br/><br/>
  85                 <div data-role="button" id="button1test4" data-corners="false" data-inline="true" ></div>
  86         </div>
  87         <div data-role="footer">
  88         </div>
  89 </div>
  90 </body>
  91 </html>