Collapsible: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
← Older edit
No edit summary
 
(9 intermediate revisions by 2 users not shown)
Line 5: Line 5:
== Description ==
== Description ==


The Collapsible control displays HTML or a Form in a panel that floats on top of the current form. It can be animated to appear from the left or right.
Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.


To add a Collapsible to your app, choose the Collapsible icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need.
To add a Collapsible to your app, choose the Collapsible icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need.


If a form is opened in a Panel, NSBCurrentForm is set to the new form and the form's onshow() function is called. When the Panel is closed, the onhide() function is called and NSBCurrentForm is set to the previous form. The size of the form is adjusted to be equal the size of the panel.
Children can be added at Design Time by dragging them on to the Collapsible control in the Design Screen. At runtime, use the addChild() function.


== Properties ==
== Properties ==
Line 15: Line 15:
Standard [[properties and methods|properties]] are supported, plus:
Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
{| class="wikitable"
{| class="wikitable"
|-
| addChild(''control'') || ''control'' is added to the Control. Runtime.
|-
| backgroundColor || Color of background. Can be name, #RRGGBB, rgb(R,G,B) or transparent.
|-
|-
| animate || Sets whether the panel will animate when opening and closing. If set to false, the panel will just appear and disappear without animation. This is recommended for fastest performance. Design time.
| color || Color of letters. Can be name, #RRGGBB or rgb(R,G,B)
|-
|-
| close() || Closes panel. Runtime.
| content ||Content of the control. HTML supported.
|-
|-
| dismissable || Sets whether the panel can be closed by clicking outside onto the page. Design time.
| contentTheme || Theme: a-z. a is normal, b is black and others custom. False for no theme.
|-
|-
| display || The relationship of the panel to the page contents. Default is 'reveal: the panel will sit under the page and reveal as the page slides away. 'overlay" for the panel to appear on top of the page contents. "push" animates both the panel and page at the same time. Design time.
| expanded || Show control initially expanded
|-
|-
| open([''form'']) || Opens ''form'' in the panel. If ''form'' is blank, uses contents of text property. Runtime.
| heading || Heading which shows all the time. Can be text or HTML.
|-
|-
| positionFixed || Sets whether the panel has fixed positioning so the contents are in view even if the page is scrolled down. This also allows the page to scroll while the panel stays fixed. Design time.
| headingTheme || Theme: a-z. a is normal, b is black and others custom. False for no theme.
|-
|-
| previousForm || A reference to the form which will be returned to when the panel is closed. Runtime.
| iconPos || Icon Position
|-
|-
| text || The text to display on the form. Can be HTML. Leave blank if using Form1.open(Form2). Design time.
| mini || Show smaller version of control.
|}
|}


== Events ==
== Events ==
{| class="wikitable"
|-
| oncollapsiblecollapse || Called when collapsible is closed.
|-
| oncollapsibleexpand || Called when collapsible is expanded.
|}


== Example ==
== Example ==


Open Form2 in a Panel
See Collapsible sample in Samples/2. Controls/jQuery Mobile.
 
Adding a control to a Collapsible at run time:
<pre>
Collapsible2.addChild(Button1)
</pre>
 
To expand a Collapsible at run time:
<pre>
<pre>
  Panel2.open(Form2)
$("#Collapsible1").collapsible("expand")
</pre>
</pre>


See above for output.
To collapse a Collapsible at run time:
<pre>
$("#Collapsible1").collapsible("collapse")
</pre>


[[Category:Language Reference]]
[[Category:Language Reference]]

Latest revision as of 12:59, 10 April 2018

On the top, a closed Collapsible with a black them. Underneath, an open Collapsible with a white theme.

Description

Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.

To add a Collapsible to your app, choose the Collapsible icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need.

Children can be added at Design Time by dragging them on to the Collapsible control in the Design Screen. At runtime, use the addChild() function.

Properties

Standard properties are supported, plus:

addChild(control) control is added to the Control. Runtime.
backgroundColor Color of background. Can be name, #RRGGBB, rgb(R,G,B) or transparent.
color Color of letters. Can be name, #RRGGBB or rgb(R,G,B)
content Content of the control. HTML supported.
contentTheme Theme: a-z. a is normal, b is black and others custom. False for no theme.
expanded Show control initially expanded
heading Heading which shows all the time. Can be text or HTML.
headingTheme Theme: a-z. a is normal, b is black and others custom. False for no theme.
iconPos Icon Position
mini Show smaller version of control.

Events

oncollapsiblecollapse Called when collapsible is closed.
oncollapsibleexpand Called when collapsible is expanded.

Example

See Collapsible sample in Samples/2. Controls/jQuery Mobile.

Adding a control to a Collapsible at run time: 

Collapsible2.addChild(Button1)

To expand a Collapsible at run time: 

$("#Collapsible1").collapsible("expand")

To collapse a Collapsible at run time: 

$("#Collapsible1").collapsible("collapse")
Retrieved from "https://wiki.appstudio.dev/index.php?title=Collapsible&oldid=9391"