Tabs (Bootstrap): Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Created page with "file:Bstabs.png == Description == Provide tab links for your site or app with customizable appearance. Introduction_to_Bootstrap#Popovers_and_Tooltips|Popovers and To..."
 
No edit summary
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''''This control is Bootstrap 3 only. Use [[Navs (Bootstrap)|Navs]] in Bootstrap 4.'''''
[[file:Bstabs.png]]
[[file:Bstabs.png]]


Line 14: Line 17:
| addItem(''item'', ''type'') || Adds an ''item'' to the end. ''type'' can be "active" or "disabled" .  Runtime.
| addItem(''item'', ''type'') || Adds an ''item'' to the end. ''type'' can be "active" or "disabled" .  Runtime.
|-
|-
| clear || Clears all items. Runtime.
| clear() || Clears all items. Runtime.
|-
| enable([''index'',]''bool'') || Enables and disables items. ''Index'' can be an item or an array of items. If no index supplied, all items are affected. ''Bool'' is true or false. Runtime only.
|-
|-
| items || Items to show, one per line. Prefix * for disabled, > for selected, ! for heading (not all controls support headings). Design Time.
| items || Items to show, one per line. Prefix * for disabled, > for selected, ! for heading (not all controls support headings). Design Time.
Line 23: Line 28:
|-
|-
| pills ||  Show tabs highlighted with Pill format? tabs or pills. Runtime.
| pills ||  Show tabs highlighted with Pill format? tabs or pills. Runtime.
|-
| text || Get the text of the active tab. Runtime.
|-
|-
| value || Get and set the active tab. Runtime.
| value || Get and set the active tab. Runtime.
Line 33: Line 40:
Standard [[events|events]] are supported. For this control, the onclick event will be most useful.
Standard [[events|events]] are supported. For this control, the onclick event will be most useful.


== Example (Basic) ==
== Example ==
<pre>
 
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Tabs1.onclick = function(i) {
  if (typeof i == "object") return;
  NSB.MsgBox("Tab chosen: " + Tabs1.value);
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Tabs1_onclick(i)
Function Tabs1_onclick(i)
  If TypeName(i) = "object" Then Exit Function
   MsgBox "Tab chosen: " + Tabs1.value
   MsgBox "Tab chosen: " + Tabs1.value
End Function
End Function
</pre>
</syntaxhighlight>
 
</tabber>
== Example (JavaScript) ==
<pre>
Tabs1.onclick = function(i) {
    NSB.MsgBox("Tab chosen: " + Tabs1.value);
};
</pre>


== Output ==
== Output ==
Line 55: Line 70:


[[Category:Bootstrap]]
[[Category:Bootstrap]]
[[Category:iWebKit]]

Latest revision as of 15:32, 10 March 2019

This control is Bootstrap 3 only. Use Navs in Bootstrap 4.


Description

Provide tab links for your site or app with customizable appearance.

Popovers and Tooltips are supported.

Properties and Methods

Standard properties are supported, plus:

addItem(item, type) Adds an item to the end. type can be "active" or "disabled" . Runtime.
clear() Clears all items. Runtime.
enable([index,]bool) Enables and disables items. Index can be an item or an array of items. If no index supplied, all items are affected. Bool is true or false. Runtime only.
items Items to show, one per line. Prefix * for disabled, > for selected, ! for heading (not all controls support headings). Design Time.
justified Make tabs or pills equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked. Design Time.
length Current number of items. Runtime.
pills Show tabs highlighted with Pill format? tabs or pills. Runtime.
text Get the text of the active tab. Runtime.
value Get and set the active tab. Runtime.
vertical Show Tabs/Pills vertically? (If so, >selected only works for Pills.). Design Time.

Events

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

Example

// JavaScript
Tabs1.onclick = function(i) {
  if (typeof i == "object") return;
  NSB.MsgBox("Tab chosen: " + Tabs1.value);
};

' Basic
Function Tabs1_onclick(i)
  If TypeName(i) = "object" Then Exit Function
  MsgBox "Tab chosen: " + Tabs1.value
End Function

Output