demos/tizen-winsets/widgets/checkbox/checkbox.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5                 <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6                 <script src="../../configure.js"></script>
   7                 <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8                 <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                                 data-framework-theme="tizen-white"
  10                                 data-framework-viewport-width="device-width">
  11                 </script>
  12                 <script src="../../main.js"></script>
  13                 <title>Tizen UI - Checkbox</title>
  14                 <!-- for compatibility test -->
  15                 <meta name="apple-mobile-web-app-capable" content="yes" />
  16                 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  17                 <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  18         </head>
  19         <body>
  20                 <div data-role="page" id="checkbox-demo" data-add-back-btn="true">
  21                         <div data-role="header" data-position="fixed">
  22                                 <h1>CHECKBOX</h1>
  23                         </div>
  24                         <div data-role="content">
  25                                 <div class="content-primary">
  26                                         <div class="my-check-button-style"><a id="check-1" data-role="button" data-inline="true">Check/UnCheck</a></div>
  27                                         <div class="my-check-button-style my-check-inline-style"><a id="get-check-value" data-role="button" data-inline="true">Get Check Value</a></div>
  28                                         <p>First checkbox check value :
  29                                                 <span class="checked-value">
  30                                                         <em>(click the button! )</em>
  31                                                 </span>
  32                                         </p>
  33                                         <hr/>
  34                                         <p> Trigged When user clicks a checkbox :
  35                                                 <span class="triggered-check">
  36                                                         <em>(This is updated when user clicks a checkbox )</em>
  37                                                 </span>
  38                                         </p>
  39                                         <hr/>
  40                                         <fieldset data-role="controlgroup">
  41                                                 <input type="checkbox" name="checkbox-1" id="checkbox-1"/>
  42                                                 <label for="checkbox-1">Normal</label>
  43                                                 <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked" disabled="disabled" />
  44                                                 <label for="checkbox-2">Checked, Disabled</label>
  45                                                 <input type="checkbox" name="checkbox-3" id="checkbox-3" disabled="disabled" />
  46                                                 <label for="checkbox-3">Disabled</label>
  47                                                 <input type="checkbox" name="checkbox-4" id="checkbox-4" class="favorite" />
  48                                                 <label for="checkbox-4">Favorite</label>
  49                                                 <input type="checkbox" name="checkbox-5" id="checkbox-5" checked="checked" disabled="disabled" class="favorite" />
  50                                                 <label for="checkbox-5">Favorite Checked, Disabled</label>
  51                                                 <input type="checkbox" name="checkbox-6" id="checkbox-6" disabled="disabled" class="favorite" />
  52                                                 <label for="checkbox-6">Favorite, Disabled</label>
  53                                                 <input type="checkbox" name="checkbox-7" id="checkbox-7" />
  54                                                 <input type="checkbox" name="checkbox-8" id="checkbox-8" />
  55                                         </fieldset>
  56                                 </div><!--/content-primary -->
  57                         </div>
  58                         <div data-role="footer">
  59                         </div>
  60                         <link rel="stylesheet" href="styles.css" />
  61                         <script src="checkbox.js"></script>
  62                 </div>
  63         </body>
  64 </html>