demos/tizen-gray/widgets/segmentctrl.html

   1 <div data-role="page">
   2
   3         <div data-role="header" data-position="fixed">
   4                 <h1>Segment Control</h1>
   5         </div><!-- /header -->
   6
   7         <div data-role="content">
   8                 <div data-role="fieldcontain">
   9                         <fieldset data-role="controlgroup" data-type="horizontal">
  10                                 <legend>segment toolbar segonly style with 2 buttons:</legend>
  11                                 <input type="radio" name="radio-view-7" data-icon="segment-titlestyle-segonly" id="segment61" value="on" checked="checked" />
  12                                 <label for="segment61">Listtest length</label>
  13                                 <input type="radio" name="radio-view-7" data-icon="segment-titlestyle-segonly" id="segment62" value="off" />
  14                                 <label for="segment62">Grid</label>
  15                         </fieldset>
  16                 </div>
  17
  18                 <div data-role="fieldcontain">
  19                         <fieldset data-role="controlgroup" data-type="horizontal">
  20                                 <legend>segment toolbar segonly style with 3 buttons:</legend>
  21                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
  22                                 <label for="segment71">List</label>
  23                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
  24                                 <label for="segment72">Grid</label>
  25                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
  26                                 <label for="segment73">Grid</label>
  27                         </fieldset>
  28                 </div>
  29
  30                 <div data-role="fieldcontain">
  31                         <fieldset data-role="controlgroup" data-type="horizontal">
  32                                 <legend>segment toolbar segonly style with 4 buttons:</legend>
  33                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="on" checked="checked" />
  34                                 <label for="segment861">List</label>
  35                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
  36                                 <label for="segment862">Grid</label>
  37                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
  38                                 <label for="segment863">Grid</label>
  39                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment864" value="off" />
  40                                 <label for="segment864">Grid</label>
  41                         </fieldset>
  42                 </div>
  43                 <div data-role="fieldcontain">
  44                         <fieldset data-role="controlgroup" data-type="horizontal">
  45                                 <input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
  46                                 <label for="segment1">List</label>
  47                                 <input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
  48                                 <label for="segment2">Grid</label>
  49                         </fieldset>
  50                 </div>
  51
  52                 <div data-role="fieldcontain">
  53                         <fieldset data-role="controlgroup" data-type="horizontal">
  54                                 <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment3" value="on" checked="checked" />
  55                                 <label for="segment3">List</label>
  56                                 <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
  57                                 <label for="segment4">Grid</label>
  58                                 <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment5" value="off" />
  59                                 <label for="segment5">Grid</label>
  60                         </fieldset>
  61                 </div>
  62
  63                 <div data-role="fieldcontain">
  64                         <fieldset data-role="controlgroup" data-type="horizontal">
  65                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment6" value="on" checked="checked" />
  66                                 <label for="segment6">List</label>
  67                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment7" value="off" />
  68                                 <label for="segment7">Grid</label>
  69                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment8" value="off" />
  70                                 <label for="segment8">Grid</label>
  71                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment9" value="off" />
  72                                 <label for="segment9">Grid</label>
  73                         </fieldset>
  74                 </div>
  75
  76                 <div id=test> </div>
  77
  78         </div><!-- /content -->
  79 </div><!-- /page -->