Changes between Version 10 and Version 11 of S3/S3GroupedOptionsWidget


Ignore:
Timestamp:
04/01/13 20:13:35 (13 years ago)
Author:
Dominic König
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • S3/S3GroupedOptionsWidget

    v10 v11  
    7474== CSS Classes ==
    7575
    76 The whole widget is either a {{{DIV.s3-groupedopts-widget}}} with embedded {{{TABLE.s3-groupedopts-widget}}} elements (one table for each letter-group), or just a {{{TABLE.s3-groupedopts-widget}}} (if there are no letter groups).
     76'''Example''':
     77  [[Image(groupedopts2.png)]]
    7778
    78 Every letter group is a {{{DIV.s3-groupedopts-label}}} containing the group label, followed by the respective {{{TABLE.s3-groupedopts-widget}}} with the options. An expanded group label has an additional {{{expanded}}}-class.
     79'''HTML''':
    7980
    80 Every option is a {{{INPUT.s3-groupedopts-option}}} followed by a {{{LABEL}}} element that refers to it.
     81{{{#!text/html
     82<div class="s3-groupedopts-widget">
     83  <div class="s3-groupedopts-label expanded">A - K</div>
     84  <table class="s3-groupedopts-widget" style="">
     85    <tbody>
     86      <tr>
     87        <td>
     88          <input id="s3-groupedopts-option-1-0" class="s3-groupedopts-option" type="checkbox" value="Ainaro" name="s3-groupedopts-2">
     89          <label for="s3-groupedopts-option-1-0">Ainaro</label>
     90        </td>
     91        <td>
     92          <input id="s3-groupedopts-option-1-1" class="s3-groupedopts-option" type="checkbox" value="Dili" name="s3-groupedopts-2">
     93          <label for="s3-groupedopts-option-1-1">Dili</label>
     94        </td>
     95        <td>
     96          <input id="s3-groupedopts-option-1-2" class="s3-groupedopts-option" type="checkbox" value="Kuala Lumpur" name="s3-groupedopts-2">
     97          <label for="s3-groupedopts-option-1-2">Kuala Lumpur</label>
     98        </td>
     99      </tr>
     100    </tbody>
     101  </table>
     102  <div class="s3-groupedopts-label">L - M</div>
     103  <table class="s3-groupedopts-widget" style="display: none;">
     104    ...
     105  </table>
     106  <div class="s3-groupedopts-label">V - Z</div>
     107  <table class="s3-groupedopts-widget" style="display: none;">
     108    ...
     109  </table>
     110</div>
     111}}}
     112
     113'''Explanations''':
     114
     115  The whole widget is either a {{{DIV.s3-groupedopts-widget}}} with embedded {{{TABLE.s3-groupedopts-widget}}} elements (one table for each letter-group), or just a {{{TABLE.s3-groupedopts-widget}}} (if there are no letter groups).
     116
     117  Every letter group is a {{{DIV.s3-groupedopts-label}}} containing the group label, followed by the respective {{{TABLE.s3-groupedopts-widget}}} with the options. An expanded group label has an additional {{{expanded}}}-class.
     118
     119  Every option is a {{{INPUT.s3-groupedopts-option}}} followed by a {{{LABEL}}} element that refers to it.
     120
     121  Every option has a unique ID generated by the jQueryUI widget.
    81122
    82123----