(Form saving) |
(New form element) |
||
Line 128: | Line 128: | ||
}); | }); | ||
</code> | </code> | ||
|} | |||
{| class="nicetable" | |||
|+ New form elements | |||
|- | |||
!width="50%"|Type A | |||
!width="50%"|Type B | |||
|- | |||
| <code javascript> | |||
define(['jquery', 'core/form-element'], function($, formElement) { | |||
var Select = function() { | |||
formElement.call(this); | |||
this.type = 'select'; | |||
this.options = ''; | |||
this.template = "core/form-element-select"; | |||
}; | |||
/** | |||
* Format a normal array into an object for a select form element. | |||
* | |||
* @param {array} options An array of options. | |||
* @param {string} selected The selected option. Needs to match the array index. | |||
* @return {object} An options object that can be used with a select form element. | |||
*/ | |||
this.formatOptions = function(options, selected) { | |||
var returnoptions = []; | |||
var select = 0; | |||
if (selected !== 'undefined') { | |||
select = selected | |||
} | |||
for (index in options) { | |||
if (index == selected) { | |||
returnoptions.push({ | |||
value: index, | |||
text: options[index], | |||
selected: select | |||
}); | |||
} else { | |||
returnoptions.push({ | |||
value: index, | |||
text: options[index], | |||
}); | |||
} | |||
} | |||
return returnoptions; | |||
} | |||
Select.prototype.set_name = function(name) { | |||
formElement.prototype.set_name.call(this, name); | |||
}; | |||
Select.prototype.set_id = function(id) { | |||
formElement.prototype.set_id.call(this, id); | |||
}; | |||
Select.prototype.set_label = function(label) { | |||
formElement.prototype.set_label.call(this, label); | |||
}; | |||
Select.prototype.set_error = function(error) { | |||
formElement.prototype.set_error.call(this, error); | |||
}; | |||
Select.prototype.set_required = function() { | |||
formElement.prototype.set_required.call(this); | |||
}; | |||
Select.prototype.set_options = function(options, selected) { | |||
this.options = formatOptions(options, selected); | |||
}; | |||
Select.prototype.get_name = function() { | |||
return formElement.prototype.get_name.call(this); | |||
}; | |||
Select.prototype.show = function() { | |||
return formElement.prototype.show.call(this); | |||
}; | |||
return Select; | |||
}); | |||
</code> | |||
| | |||
|} | |} | ||
Revision as of 01:33, 26 November 2015
Type A | Type B |
---|---|
|
|
Type A | Type B |
---|---|
|
|
Type A | Type B |
---|---|
|
Template for a select element
Same for both.
<label {{#hiddenLabel}}class="accesshide"Adrian Greeve/form comparison/hiddenLabel for="Template:id">
Template:label
{{#required}}{{>core/form-required}}Adrian Greeve/form comparison/required
{{#advanced}}{{>core/form-advanced}}Adrian Greeve/form comparison/advanced
</label>
{{{helpButton}}}
{{#error}}
{{{error}}}
Adrian Greeve/form comparison/error
<select name="Template:name" id="Template:id" {{#required}}requiredAdrian Greeve/form comparison/required {{#size}}size="Template:size"Adrian Greeve/form comparison/size>
{{#options}}
<option value="Template:value" {{#selected}}selectedAdrian Greeve/form comparison/selected>Template:text</option>
Adrian Greeve/form comparison/options
</select>
Type A | Type B |
---|---|
|
Type A | Type B |
---|---|
|
|