RadioButton

From NSB App Studio
Jump to navigation Jump to search

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)