samples/web/Template/Tizen/Tizen Web UI Componment/Tizen_Web_UI_FW_SinglePage/project/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="utf-8"/>
   5     <meta name="viewport" content="width=device-width,user-scalable=no"/>
   6     <#if Theme != "">
   7     <link id="cowhide-theme" href="${cowhide}/cowhide-default.min.css" rel="stylesheet">
   8     <link href="${cowhide}/cowhide-responsive.css" rel="stylesheet">
   9     </#if>
  10     <title>Cowhide - Tizen Web UI Componment</title>
  11 </head>
  12
  13 <body>
  14     <div class="page">
  15         <div class="container">
  16             <ul><li><button id="night-mode-toggle" class="btn btn-primary">Toggle night mode</button></li>
  17                 <li>
  18                   <select class="btn" type="text" id="theme-selector">
  19                     <option value="0">Select theme:</option>
  20                     <option value="0">------------------------------------</option>
  21                     <option value="default">Default</option>
  22                     <option value="amelia">Amelia</option>
  23                     <option value="spruce">Spruce</option>
  24                   </select>
  25                  </li>
  26              </ul>
  27         </div>
  28         <div class="jumbotron masthead">
  29           <div class="container">
  30              <h1>Hello World!</h1>
  31              <h2>Cowhide - Tizen Web UI Componment</h1>
  32           </div>
  33         </div>
  34     </div> <!-- page -->
  35
  36     <!--NOTE:
  37         cowhide.js must be included.
  38         DO NOT REMOVE below code!
  39     -->
  40     <#if Theme != "">
  41     <script src="${cowhide}/cowhide.js"></script>
  42     </#if>
  43     <script>
  44 !function ($) {
  45
  46 $.cowhide.initThemeEngine({
  47    path: '${cowhide}',
  48   minified: true
  49 });
  50
  51 $('button#night-mode-toggle').click(function() {
  52   $.cowhide.toggleNightMode();
  53 });
  54
  55 $('select#theme-selector').change(function() {
  56     var value = $(this).find('option:selected').val();
  57     if (value !== '0')
  58         $.cowhide.setTheme(value);
  59 });
  60
  61 }(window.jQuery)
  62 </script>
  63 </body>
  64 </html>