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. |