tests/additional-unit-tests/segmentcontrol/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
   5         <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   6         <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
   7                 data-framework-theme="tizen-white"
   8                 data-framework-viewport-scale=false>
   9         </script>
  10
  11
  12         <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.2.0/external/qunit.css" />
  13
  14         <script src="../../../libs/js/jquery-mobile-1.2.0/external/qunit.js"></script>
  15
  16   <script src="segmentcontrol-tests.js"></script>
  17 </head>
  18 <body>
  19
  20 <h1 id="qunit-header">Controlbar</h1>
  21 <h2 id="qunit-banner"></h2>
  22 <h2 id="qunit-userAgent"></h2>
  23 <ol id="qunit-tests">
  24 </ol>
  25
  26
  27 <div data-nstest-role="page" id='segmentcontrol_page'>
  28   <div data-nstest-role="header" data-position="inline">
  29     <h1>SegmentControl Test - markup</h1>
  30   </div>
  31   <div data-nstest-role="content">
  32                 <div data-role="fieldcontain" id="segmentcontrol-2btn">
  33                         <fieldset data-role="controlgroup" data-type="horizontal">
  34                                 <input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
  35                                 <label for="segment1">List</label>
  36                                 <input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
  37                                 <label for="segment2">Grid</label>
  38                         </fieldset>
  39                 </div>
  40
  41                 <div data-role="fieldcontain" id="segmentcontrol-3btn">
  42                         <fieldset data-role="controlgroup" data-type="horizontal">
  43                                 <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment3" value="on" checked="checked" />
  44                                 <label for="segment3">List</label>
  45                                 <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
  46                                 <label for="segment4">Grid</label>
  47                                 <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment5" value="off" />
  48                                 <label for="segment5">Grid</label>
  49                         </fieldset>
  50                 </div>
  51
  52                 <div data-role="fieldcontain" id="segmentcontrol-4btn">
  53                         <fieldset data-role="controlgroup" data-type="horizontal">
  54                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment6" value="on" checked="checked" />
  55                                 <label for="segment6">List</label>
  56                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment7" value="off" />
  57                                 <label for="segment7">Grid</label>
  58                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment8" value="off" />
  59                                 <label for="segment8">Grid</label>
  60                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment9" value="off" />
  61                                 <label for="segment9">Grid</label>
  62                         </fieldset>
  63                 </div>
  64
  65                 <div data-role="fieldcontain" class="controlField" id="segmentcontrol-2btn-v">
  66                         <fieldset data-role="controlgroup" data-type="vertical">
  67                                 <legend>segment toolbar with 2 options</legend>
  68                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="on" checked="checked" />
  69                                 <label for="segment861">Option 1</label>
  70                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
  71                                 <label for="segment862">Option 2</label>
  72                         </fieldset>
  73                 </div>
  74
  75                 <div data-role="fieldcontain" class="controlField" id="segmentcontrol-3btn-v">
  76                         <fieldset data-role="controlgroup" data-type="vertical">
  77                                 <legend>segment toolbar with 3 options</legend>
  78                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="off"  />
  79                                 <label for="segment861">Option 1</label>
  80                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="on" checked="checked" />
  81                                 <label for="segment862">Option 2</label>
  82                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
  83                                 <label for="segment863">Option 3</label>
  84                         </fieldset>
  85                 </div>
  86
  87                  <div data-role="fieldcontain" class="controlField" id="segmentcontrol-4btn-v">
  88                         <fieldset data-role="controlgroup" data-type="vertical">
  89                                 <legend>segment toolbar with 4 options</legend>
  90                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="off" />
  91                                 <label for="segment861">Option 1</label>
  92                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
  93                                 <label for="segment862">Option 2</label>
  94                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
  95                                 <label for="segment863">Option 3</label>
  96                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment864" value="on"  checked="checked" />
  97                                 <label for="segment864">Option 4</label>
  98                         </fieldset>
  99                 </div>
 100
 101         </div>
 102         <div data-nstest-role="footer">
 103         </div>
 104 </div>
 105
 106
 107 </body>
 108 </html>