NavBar

Description

The Navbar control puts up to 5 buttons anyplace on the form. Buttons can be text, an icon or both. When clicked, <NavBarID>_onclick(choice) is called. The name of the button which is called is in choice. If the text of the button has a space in it, it is replaced by an underbar. For example, "Edit Text" will call onclick with "Edit_Text"

To add a control to your app, choose the control’s 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 control: usually, just on click.

When clicked, two events are sent. Ignore the first one - it's an object. See sample code below.

To make a NavBar with icons only, set iconPos to top and put an empty, comma separated string in items. (",,").

To select and unselect buttons in code:

$("#NavBar1_0").addClass("ui-btn-active")
$("#NavBar1_1").removeClass("ui-btn-active")

In code, sometimes this needs to be done after a brief delay:

SetTimeout("$('#NavBar1_1').removeClass('ui-btn-active')",500) 

Custom Icons

There are a few steps to using your own icon instead of the built in ones.

1. In the Properties Window, put 'custom' into the icon property. (In the picker, it's the gray circle in the 4th row).

2. Add your icon to the project. Dragging into the Project Explorer is fine. The icon should be 16x16.

3. Add this code to the styleheaders property in Project Properties:

#NavBar1_0:after {background-image: url("icon_16x16.png")}

The first word should be the name of the control with a # in front of it.

Properties

Standard properties are supported, plus:

ChangeForm	A comma separated list of form names to go to if a button is clicked.
items	A list of names for the buttons, comma separated.
iconPos	The position of the icon. Can be none, top, bottom, left, right or notext.
icons	Names of icons for each button. Many to choose from: action, arrow-d-l, arrow-d-r, arrow-d, arrow-l,arrow-r, arrow-u-l, arrow-u-r, arrow-u, audio,calendar, camera, carat-d, carat-l, carat-r,carat-u, check, clock, custom, grid,mail, eye, gear, heart, home,info, bullets, bars, navigation, lock,search, location, minus, forbidden, edit,user, phone, plus, power, recycle,forward, refresh, shop, comment, star,tag, back, video, alert, delete..

Events

Standard events are supported. However, events are not usually associated with the control.

Example

Function NavBar1_onclick(choice)
  If TypeName(choice)="object" Then Exit Function
  MsgBox "Button pressed: " & choice
End Function

Change the text on a NavBar item:

NavBar1_0.innerHTML="one" 
NavBar1_1.innerHTML="two" 

Output

(message box showing “Button pressed: 1”)