JqxTabs

From NSB App Studio
Jump to navigation Jump to search

Description

jqxTabs represents a jQuery Tabs widget. jqxTabs is breaking the content into multiple sections. You can populate it from 'LI' elements for the tab titles and 'DIV' elements for tab contents.

Properties and Methods

See the complete documentation at jqWidget's site: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtabs/jquery-tabs-getting-started.htm

Example

Events

selected

This event is triggered when the user selects a new tab.

Function Tabs1_onselected(e)
  MsgBox "selected " & e.args.item
End Function

tabclik

This event is triggered when the user click a tab. You can retrieve the clicked tab's index.

Function Tabs1_ontabclick(e)
  MsgBox "tabclick " & e.args.item
End Function

Functions

removeAt

Removing tab with indicated index.


Function Button1_onclick()

  Rem delete 2.Tab on Tabs1
  $("#Tabs1").jqxTabs("removeAt",1)

End Function

disableAt / enableAt

Disabling/Enabling tab with indicated index.


Function Button1_onclick()

  Rem disable 2.Tab on Tabs1
  $("#Tabs1").jqxTabs("disableAt",1)

End Function


Function Button2_onclick()

  Rem enable 2.Tab on Tabs1
  $("#Tabs1").jqxTabs("enableAt",1)

End Function


addAt

Adding tab at indicated position.

Function Button1_onclick()

 Dim tmpTabTitle, tmpTabContent
 tmpTabTitle = "Test1"
 tmpTabContent =  "Here is tabcontent at runtime with or <b>without HTML</b>"
 tmpTabContent += "<img src='http://www.testedich.de/quiz29/picture/pic_1310387805_7.jpg' width=100px>"

Rem add a new Tab at 2. position
  $("#Tabs1").jqxTabs("addAt", 1, tmpTabTitle, tmpTabContent)
End Function

setTitleAt

Sets the title of a Tab.

Function Button1_onclick()

  $("#Tabs1").jqxTabs("setTitleAt", 1, "New Title")

End Function

setContentAt

Sets the content of a Tab.

Function Button1_onclick()

  Dim tmpContent
  tmpContent = "Here is new content"
  $("#Tabs1").jqxTabs("setContentAt", 1, tmpContent)

End Function


Output

See above.