Button: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
mNo edit summary
Line 51: Line 51:
   $("#Button1").buttonMarkup({ icon: "false" });
   $("#Button1").buttonMarkup({ icon: "false" });
   $("#Button1").buttonMarkup({ iconPos: "none" });
   $("#Button1").buttonMarkup({ iconPos: "none" });
</pre>
To have a button which responds with "Slow Click" if it is depressed for more than a second:
<pre>
Function Button1_ontouchstart()
  Button1Touched=SysInfo(10)
End Function
Function Button1_ontouchend()
  If SysInfo(10)-Button1Touched<1000 Then
    MsgBox "fast click"
  Else
    MsgBox "slow click"
  End If
End Function
</pre>
</pre>



Revision as of 18:43, 29 October 2013

iWebKit                         jQuery Mobile

Description

The Button is used to display a standard button object.

While a variety of different events are available, the usual response to clicking a Button is to call the function <buttonID>_onclick() in BASIC or <buttonID>.onclick() in JavaScript.

To add a button to your app, choose the Button 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 onclick.

The styling of buttons is controlled by the framework they belong to. If you want to change the color or appearance of an iWebKit button, blank out the "class" property. For a jQuery Mobile button, you need to change the theme using ThemeRoller.

To change the text of a button at runtime, do one of the following:

you can define the Button-Text at runtime:
  
  Button1.text = "New Value"                      'iWebKit
  $("#Button2 .ui-btn-text").text("New Value ")   'jQuery Mobile
  Button3.value="New Value"                       'jQWidgets


you can change the text at runtime:                       

Function Form1_onshow()
  Button1.text="I'm an iWebKit button"
  $("#Button2 .ui-btn-text").text("I'm a jQuery button ")
  Button3.value="I'm a jqWidgets button"
End Function

You can set the font size for iWebKit in the IDE. For jQuery Mobile, font sizes other than normal or mini, you will need to do this after the app is loaded - for example, in Sub Main():

  $("#Button1 .ui-btn-text").css("font-size","12px")  'jQuery Mobile
  $("#Button1").css("font-size", "50px");             'jqWidgets

  'To center the text, you will also want to change the padding:
  $("#Button1").children().css("padding","6px")

  'To change the theme of a jQuery Mobile button:
  $("#Button1").buttonMarkup({theme: "a"})

To change the icon settings for a jQuery Mobile button at runtime, do the following:

  $("#Button1").buttonMarkup({ icon: "false" });
  $("#Button1").buttonMarkup({ iconPos: "none" });

To have a button which responds with "Slow Click" if it is depressed for more than a second:

Function Button1_ontouchstart()
  Button1Touched=SysInfo(10)
End Function

Function Button1_ontouchend()
  If SysInfo(10)-Button1Touched<1000 Then
    MsgBox "fast click"
  Else
    MsgBox "slow click"
  End If
End Function

Properties and Methods

Standard properties are supported, plus:

groupBegin If you have a group of buttons, set this to Yes on the first one. jQuery Mobile only.
groupEnd If you have a group of buttons, set this to Yes on the last one. jQuery Mobile only.
icon Set to false for no icon. You have a choice of 18 standard icons otherwise. jQuery Mobile only.
iconPos Position of the icon. Can be none, left, right, top, bottom or notext. jQuery Mobile only.
mini true/false. For jQuery Mobile, should the text be normal size or mini size?
value The title of the button.

Events

Standard events are supported. For this control, the onclick event will be most useful.

Example (Basic)

Rem Button Example

Function Button1_onclick()
  Msgbox "Hello World"
End Function

Example (JavaScript)

//Button Example

Button1.onclick = function() {
  alert("Hello World");
}

Form1.onshow = function() {
  Button1.text="I'm an iWebKit button";
  $("#Button2 .ui-btn-text").text("I'm a jQuery button ");
  Button3.value="I'm a jqWidgets button";
}

Output