mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-28 15:08:46 +00:00
Add size attribute to select widget for multiple selection mode
This commit is contained in:
parent
93f7d8c028
commit
0cbe97615a
@ -138,6 +138,7 @@ SelectWidget.prototype.execute = function() {
|
|||||||
this.selectClass = this.getAttribute("class");
|
this.selectClass = this.getAttribute("class");
|
||||||
this.selectDefault = this.getAttribute("default");
|
this.selectDefault = this.getAttribute("default");
|
||||||
this.selectMultiple = this.getAttribute("multiple", false);
|
this.selectMultiple = this.getAttribute("multiple", false);
|
||||||
|
this.selectSize = this.getAttribute("size");
|
||||||
// Make the child widgets
|
// Make the child widgets
|
||||||
var selectNode = {
|
var selectNode = {
|
||||||
type: "element",
|
type: "element",
|
||||||
@ -150,6 +151,9 @@ SelectWidget.prototype.execute = function() {
|
|||||||
if(this.selectMultiple) {
|
if(this.selectMultiple) {
|
||||||
$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
|
$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
|
||||||
}
|
}
|
||||||
|
if(this.selectSize) {
|
||||||
|
$tw.utils.addAttributeToParseTreeNode(selectNode,"size",this.selectSize);
|
||||||
|
}
|
||||||
this.makeChildWidgets([selectNode]);
|
this.makeChildWidgets([selectNode]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -10,6 +10,8 @@ type: text/vnd.tiddlywiki
|
|||||||
The select widget displays a popup menu based on a [[HTML select element|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select]]. The popup (or dropdown) contains a list of items defined by `<option>` and `<optgroup>` elements.
|
The select widget displays a popup menu based on a [[HTML select element|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select]]. The popup (or dropdown) contains a list of items defined by `<option>` and `<optgroup>` elements.
|
||||||
Every time the user selects a new value in the menu, the selected value is written to the text of a specified tiddler field or index. If the tiddler value changes the menu is automatically updated to reflect the new value.
|
Every time the user selects a new value in the menu, the selected value is written to the text of a specified tiddler field or index. If the tiddler value changes the menu is automatically updated to reflect the new value.
|
||||||
|
|
||||||
|
In multiple selection mode, the list of selected values is bound to the specified tiddler field or index. Browsers generally use the <kbd>ctrl</kbd> or <kbd>cmd</kbd> keys for multiple selection.
|
||||||
|
|
||||||
For example, this select widget displays a list of the tags in this wiki:
|
For example, this select widget displays a list of the tags in this wiki:
|
||||||
|
|
||||||
<$macrocall $name="wikitext-example-without-html" src="<$select tiddler=<<qualify 'select-demo'>> default='HelloThere'>
|
<$macrocall $name="wikitext-example-without-html" src="<$select tiddler=<<qualify 'select-demo'>> default='HelloThere'>
|
||||||
@ -34,7 +36,8 @@ The content of the `<$select>` widget should be one or more HTML `<option>` or `
|
|||||||
|index |The index of a property in a [[DataTiddler|DataTiddlers]] (takes precedence over the field attribute) |
|
|index |The index of a property in a [[DataTiddler|DataTiddlers]] (takes precedence over the field attribute) |
|
||||||
|class |CSS classes to be assigned to the HTML select element |
|
|class |CSS classes to be assigned to the HTML select element |
|
||||||
|default |Default value to be used if the tiddler, field or index specifies a missing value |
|
|default |Default value to be used if the tiddler, field or index specifies a missing value |
|
||||||
|
|multiple |If present, switches to multiple selection mode |
|
||||||
|
|size |The number of rows to display in multiple selection mode |
|
||||||
|
|
||||||
! Examples
|
! Examples
|
||||||
|
|
||||||
@ -104,7 +107,7 @@ This example uses a nested pair of list widgets. The outer one generates the `<o
|
|||||||
|
|
||||||
This example uses the `multiple` keyword to specify that we should be able to select multiple items.
|
This example uses the `multiple` keyword to specify that we should be able to select multiple items.
|
||||||
|
|
||||||
<$macrocall $name="wikitext-example-without-html" src="<$select tiddler='$:/generated-list-demo-state' field='testing' multiple>
|
<$macrocall $name="wikitext-example-without-html" src="<$select tiddler='$:/generated-list-demo-state' field='testing' multiple size='8'>
|
||||||
<$list filter='[tag[TableOfContents]]'>
|
<$list filter='[tag[TableOfContents]]'>
|
||||||
<option><$view field='title'/></option>
|
<option><$view field='title'/></option>
|
||||||
</$list>
|
</$list>
|
||||||
|
Loading…
Reference in New Issue
Block a user