|
5 | 5 | <longdesc> |
6 | 6 | <p>Selectmenu Widget will act as a proxy back to the original select element, controlling its state for form submission or serialization.</p> |
7 | 7 |
|
8 | | - <p>Selectmenu Widget support both in-place "popup" or drop-down styles. It supports optgroups and custom markup to render specific presentations like multiple lines.</p> |
| 8 | + <p>It supports optgroups and custom markup to render specific presentations like multiple lines.</p> |
9 | 9 |
|
10 | 10 | <p>The select or its options can be disabled by adding the <code>disbaled="disabled"</code> attribite to that element.</p> |
11 | 11 |
|
|
18 | 18 | <li>END/PAGE DOWN - Focus last item.</li> |
19 | 19 | <li>HOME/PAGE UP - Focus first item.</li> |
20 | 20 | <li>ESCAPE - Close the select.</li> |
21 | | - <li>ENTER - Select the currently focused item and close the select.</li> |
| 21 | + <li>ENTER/SPACE - Select the currently focused item and close the select.</li> |
22 | 22 | <li>ALT+UP/DOWN - Toggle select.</li> |
23 | | - <li>SPACE - Toggle select.</li> |
24 | 23 | </ul> |
25 | 24 |
|
26 | 25 | <p>When the menu is closed, the following key commands are available:</p> |
|
30 | 29 | <li>END/PAGE DOWN - Select last item.</li> |
31 | 30 | <li>HOME/PAGE UP - Select first item.</li> |
32 | 31 | <li>ALT+UP/DOWN - Toggle select.</li> |
33 | | - <li>SPACE - Toggle select.</li> |
| 32 | + <li>SPACE - Open menu.</li> |
34 | 33 | </ul> |
35 | 34 | </longdesc> |
36 | 35 | <note id="functional-css"/> |
37 | | - <added>1.10</added> |
| 36 | + <added>1.11</added> |
38 | 37 | <options> |
39 | | - <option name="appendTo" type="Selector" default='"body"' example-value='"#someElem"'> |
40 | | - <desc>Which element the menu should be appended to. Override this when the selectmenu is inside a <code>position: fixed</code> element. Otherwise the popup menu would still scroll with the page.</desc> |
| 38 | + <option name="appendTo" type="Selector" default="null" example-value='"#someElem"'> |
| 39 | + <desc>Which element the menu should be appended to. When the value is <code>null</code>, the parents of the input field will be checked for a class of <code>ui-front</code>. If an element with the <code>ui-front</code> class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.</desc> |
41 | 40 | </option> |
42 | | - <option name="dropdown" type="Boolean" default="true" example-value="false"> |
43 | | - <desc>If set to <code>true</code> the menu will open as a pop-up. Otherwise the menu is opened below the button just like a native select element.</desc> |
| 41 | + <xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/> |
| 42 | + <option name="icons" type="Object" default='{ button: "ui-icon-triangle-1-s" }' example-value='{ button: "ui-icon-circle-triangle-s" }'> |
| 43 | + <desc> |
| 44 | + Icons to use for button, matching an icon defined by the jQuery UI CSS Framework. |
| 45 | + <ul> |
| 46 | + <li>button (string, default: "ui-icon-triangle-1-s")</li> |
| 47 | + </ul> |
| 48 | + </desc> |
44 | 49 | </option> |
45 | 50 | <option name="position" type="Object" default='{ my: "left top", at: "left bottom", collision: "none" }' example-value='{ my : "left+10 center", at: "right center" }'> |
46 | 51 | <desc>Identifies the position of the menu in relation to the associated button element. Please note position option <code>my</code> and <code>at</code> will be overwritten if option <code>dropdown</code> is set to <code>false</code>. You can refer to the <a href="/position">jQuery UI Position</a> utility for more details about the various options.</desc> |
@@ -155,12 +160,9 @@ $('#files').selectmenu(); |
155 | 160 | ]]></css> |
156 | 161 | </example> |
157 | 162 | <example> |
158 | | - <desc>A jQuery UI Selectmenu with overflow in pop-up mode</desc> |
| 163 | + <desc>A jQuery UI Selectmenu with overflow</desc> |
159 | 164 | <code><![CDATA[ |
160 | | -var withOverflow = $('#number').selectmenu({ |
161 | | - dropdown: false |
162 | | -}); |
163 | | -withOverflow.selectmenu("menuWidget").addClass("overflow"); |
| 165 | +$('#number').selectmenu().selectmenu("menuWidget").addClass("overflow"); |
164 | 166 | ]]></code> |
165 | 167 | <html><![CDATA[ |
166 | 168 | <label for="number">Select a number:</label> |
|
0 commit comments