RadioButton: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
(Created page with "file:RadioButtonC.jpg file:RadioButtonC.jpg '''Classic          jQuery''' '''Description''' The RadioButton is used to displ...")
 
 
(30 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[file:RadioButtonC.jpg]] [[file:RadioButtonC.jpg]]
[[file:RadioButton.png]]


'''Classic          jQuery'''
== Description ==
 
'''Description'''


The RadioButton is used to display a list of mutually exclusive options.
The RadioButton is used to display a list of mutually exclusive options.
Line 11: Line 9:
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.
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'''
== Properties ==


Standard properties are supported (“Properties”), plus:
Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
{| class="wikitable"
|-
|-
| getValue(n) || Get the value of line n, which will be true or false. n starts a 1 for the top line.
| 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 checkbox is fully drawn, in Sub Main or later.
| 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.
|}
|}


'''Events'''
== Events ==


Standard events are supported. See “Events”. For this control, the onchange event will be most useful.
Standard [[events]] are supported. For this control, the onchange event will be most useful.


'''Example'''
== Example ==


<pre>
<pre>
RadioButton_jqm1.setValue(2, True)
RadioButton1.setValue(1, True)
RadioButton_jqm2.setValue(1, True)
RadioButton2.setValue(2, True)
   
   
Function RadioButton_jqm1_onchange()
Function RadioButton1_onchange()
   MsgBox "One is " & RadioButton_jqm1.getValue(1) & vbCRLF & _
   MsgBox "One is " & RadioButton1.getValue(1) & vbCRLF & "Two is " & RadioButton1.getValue(2)
        "Two is " & RadioButton_jqm1.getValue(2)
End Function
End Function
   
   
Function RadioButton_jqm2_onchange()
Function RadioButton2_onchange()
   MsgBox "One is " & RadioButton_jqm2.getValue(1) & vbCRLF & _
   MsgBox "One is " & RadioButton2.getValue(1) & vbCRLF & _
         "Two is " & RadioButton_jqm2.getValue(2) & vbCRLF & _
         "Two is " & RadioButton2.getValue(2) & vbCRLF & _
         "Three is " & RadioButton_jqm2.getValue(3)
         "Three is " & RadioButton2.getValue(3)
End Function
End Function
</pre>
</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")


'''Output'''
  '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>
 
== Output ==


<pre>
<pre>
Line 57: Line 76:
</pre>
</pre>


'''Related Items'''
[[Category:Language Reference]]
 
[[Category:Controls]]


[[events|EVENTS]], [[properties|PROPERTIES]]
[[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)