RadioButton: Difference between revisions
No edit summary |
|||
(22 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
[[file: | [[file:RadioButton.png]] | ||
== Description == | == Description == | ||
Line 16: | Line 14: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| getValue(n) || Get the value of line n, which will be true or false. n starts | | getValue(n) || Get the value of line n, which will be true or false. n starts at 1 for the top line. | ||
|- | |- | ||
| items || A comma separated list of titles for the buttons. (Design time) | | items || A comma separated list of titles for the buttons. (Design time) | ||
Line 22: | Line 20: | ||
| orientation || Horizontal or vertical. Design time, jQuery Mobile only. | | orientation || Horizontal or vertical. Design time, jQuery Mobile only. | ||
|- | |- | ||
| setValue(''n'', ''val'') || Sets the value of line ''n'' to true or false. This function should not be called until the | | setValue(''n'',''val'') || Sets the value of line ''n'' to true or false, starting at 1 for the top line. This function should not be called until the RadioButton is fully drawn, in Sub Main or later. | ||
|- | |- | ||
| value || Which item should be initially checked? (Design time) | | value || Which item should be initially checked? (Design time) | ||
|- | |- | ||
| value() || Returns the number of the currently selected item. | | value() || Returns the number of the currently selected item, starting at 1 for the top line. Return -1 if nothing selected. | ||
|} | |} | ||
Line 36: | Line 34: | ||
<pre> | <pre> | ||
RadioButton1.setValue(1, True) | |||
RadioButton2.setValue(2, True) | |||
Function | Function RadioButton1_onchange() | ||
MsgBox "One is " & | MsgBox "One is " & RadioButton1.getValue(1) & vbCRLF & "Two is " & RadioButton1.getValue(2) | ||
End Function | End Function | ||
Function | Function RadioButton2_onchange() | ||
MsgBox "One is " & | MsgBox "One is " & RadioButton2.getValue(1) & vbCRLF & _ | ||
"Two is " & | "Two is " & RadioButton2.getValue(2) & vbCRLF & _ | ||
"Three is " & | "Three is " & RadioButton2.getValue(3) | ||
End Function | End Function | ||
</pre> | |||
To change some sizes of a RadioButton: | |||
<pre> | |||
$("#RadioButton1 .ui-btn").css("height","32px") | |||
$("#RadioButton1 .ui-btn").css("width","44px") | |||
$("#RadioButton1 .ui-btn-text").css("font-size","12px") | |||
'jQM 1.4: | |||
$("#RadioButton1").find("label").css("fontSize","10px") | |||
$("#RadioButton1").find("label").css("padding-left","35px") | |||
</pre> | |||
To change the text of a RadioButton: | |||
<pre> | |||
$(RadioButton1).find("label")[0].textContent="Perhaps" | |||
</pre> | |||
Change the background color of line 2 in a jQuery Mobile RadioButton | |||
<pre> | |||
$("label[for='RadioButton1_2']").css("background-color",RGB(255,247,245)) 'jQM 1.4 | |||
</pre> | </pre> | ||
Line 60: | Line 79: | ||
[[Category:Controls]] | [[Category:Controls]] | ||
[[Category:iWebKit]] |
Latest revision as of 12:46, 15 April 2016
Description
The RadioButton is used to display a list of mutually exclusive options.
While a variety of different events are available, a handy response to clicking a radiobutton is to call the function <buttonID>_onchange().
To add a radiobutton to your app, choose the Radiobutton icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the button: usually, just onchange.
Properties
Standard properties are supported, plus:
getValue(n) | Get the value of line n, which will be true or false. n starts at 1 for the top line. |
items | A comma separated list of titles for the buttons. (Design time) |
orientation | Horizontal or vertical. Design time, jQuery Mobile only. |
setValue(n,val) | Sets the value of line n to true or false, starting at 1 for the top line. This function should not be called until the RadioButton is fully drawn, in Sub Main or later. |
value | Which item should be initially checked? (Design time) |
value() | Returns the number of the currently selected item, starting at 1 for the top line. Return -1 if nothing selected. |
Events
Standard events are supported. For this control, the onchange event will be most useful.
Example
RadioButton1.setValue(1, True) RadioButton2.setValue(2, True) Function RadioButton1_onchange() MsgBox "One is " & RadioButton1.getValue(1) & vbCRLF & "Two is " & RadioButton1.getValue(2) End Function Function RadioButton2_onchange() MsgBox "One is " & RadioButton2.getValue(1) & vbCRLF & _ "Two is " & RadioButton2.getValue(2) & vbCRLF & _ "Three is " & RadioButton2.getValue(3) End Function
To change some sizes of a RadioButton:
$("#RadioButton1 .ui-btn").css("height","32px") $("#RadioButton1 .ui-btn").css("width","44px") $("#RadioButton1 .ui-btn-text").css("font-size","12px") 'jQM 1.4: $("#RadioButton1").find("label").css("fontSize","10px") $("#RadioButton1").find("label").css("padding-left","35px")
To change the text of a RadioButton:
$(RadioButton1).find("label")[0].textContent="Perhaps"
Change the background color of line 2 in a jQuery Mobile RadioButton
$("label[for='RadioButton1_2']").css("background-color",RGB(255,247,245)) 'jQM 1.4
Output
(depends on input)