demos/tizen-winsets/widgets/list/list-dialogue-edit.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 - Slider</title>
  14
  15         <!-- for compatibility test -->
  16         <meta name="apple-mobile-web-app-capable" content="yes" />
  17         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  18         <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  19 </head>
  20 <body>
  21 <div data-role="page" id="genlist-dialog-edit" data-add-back-btn="true">
  22         <div data-role="header" data-position="fixed">
  23                 <h1>DIALOGUE LIST - EDIT MODE</h1>
  24         </div>
  25         <div class="content" data-role="content" data-scroll="y">
  26                 <ul data-role="listview">
  27                         <li data-role="list-divider" data-style="dialogue">CONTACT SAMPLE</li>
  28                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  29                                 <div class="ui-edit-title">Name </div>
  30                                 <input placeholder="Input your name" />
  31                         </li>
  32                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  33                                 <div class="ui-edit-title">Tel.</div>
  34                                 <input placeholder="Input your tel number" type="tel" />
  35                         </li>
  36                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  37                                 <div class="ui-edit-title">Address </div>
  38                                 <input placeholder="Input your address" />
  39                         </li>
  40                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  41                                 <div class="ui-edit-title">City </div>
  42                                 <input placeholder="Input your city" />
  43                         </li>
  44
  45                         <li data-role="list-divider" data-style="dialogue">CONTACT SAMPLE ( BUTTON )</li>
  46                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  47                                 <div class="ui-edit-title">Name </div>
  48                                 <input placeholder="Input your name" />
  49                                 <div data-role="button" data-style="edit">Delete</div>
  50                         </li>
  51                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  52                                 <div class="ui-edit-title">Tel.</div>
  53                                 <input placeholder="Input your tel number" type="tel" />
  54                                 <div data-role="button" data-style="edit">Delete</div>
  55                         </li>
  56                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  57                                 <div class="ui-edit-title">Address </div>
  58                                 <input placeholder="Input your address" />
  59                                 <div data-role="button" data-style="edit">Delete</div>
  60                         </li>
  61                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  62                                 <div class="ui-edit-title">City </div>
  63                                 <input placeholder="Input your city" />
  64                                 <div data-role="button" data-style="edit">Delete</div>
  65                         </li>
  66
  67                         <li data-role="list-divider" data-style="dialogue">CONTACT SAMPLE ( DISABLED )</li>
  68                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  69                                 <div class="ui-edit-title">Name </div>
  70                                 <input value="Tizen" disabled />
  71                         </li>
  72                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  73                                 <div class="ui-edit-title">Tel.</div>
  74                                 <input value="0000000" disabled />
  75                         </li>
  76                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  77                                 <div class="ui-edit-title">Address </div>
  78                                 <input value="777-77" disabled />
  79                         </li>
  80                         <li class="ui-li-dialogue ui-li-dialogue-edit">
  81                                 <div class="ui-edit-title">City </div>
  82                                 <input value="Seoul, Korea" disabled />
  83                         </li>
  84
  85                 </ul>
  86         </div>
  87         <div data-role="footer"></div>
  88         <script src="list-edit.js"></script>
  89 </div>
  90 </body>
  91 </html>