The components PALETTE is shown to the left of the phone, and includes the following mobile UI components:

• Name – the mandatory property used for identifying the component. When you drag and drop the component from the components PALETTE, Appery.io Visual Builder gives it the standard name mobile<component>_X (e.g. mobilebutton_2, mobileimage_15, mobilenavbar_21, mobileaudio_34 etc.). It’s beneficial to rename the components so you can easily identify them.
• Visible – this box is checked by default, so every component on the page is visible by default. You may need to hide components (e.g. label with an ID, or an audio component that starts automatically and you don’t want the user to stop the sound). In this case, uncheck this box.
• Tab Index – specifies the order of a component when <Tab> is used for navigation. The value of this property should be unique for the component. It can be edited in the PROPERTIES panel. If you enter an existing value, an error message appears:
  

• To change the tab order for several components, you can click Change, next to the Tab Index input field. A pop-up with a list of all components containing this property appears:
  

• By clicking “Up” and “Down” you can change the order of the components. If your components have Name properties with easy-to-understand values, it’s easy to identify the components correctly:
  

After you set the desired order, click Save. The value of this property changed for all the components in the list at once.

• Element icon. Some components support icons. To choose the icon you want, click on the icon thumbnail:
  

• Select one of the icon you need from the set of icons:
  

• If you don’t need an icon after all, click No icon.

A list of components and their unique properties are listed below:

Dialog

Dialog is a page that can be opened as pop-up window. Because it is a page, it can contain any other UI components. Dialog is not presented in UI components palette, so to create a dialog, select CREATE NEW > Dialog. It’s a good idea to set a name for the dialog in PROPERTIES, in order to make it easier to refer to.

There are few events that helps to open and close the dialog.

Opening dialog

To open the dialog follow the steps:

1. To use this action, make sure at least one dialog exists in the project. You should decide on what event dialog window should be opened. For example, you can do this on button click:
2. Open the EVENTS tab, located towards the bottom of the screen. Select mobilebutton for COMPONENT, Click for EVENT and  for the ACTION select Open dialog. Choose dialog name and click Save.

You can also open the dialog via JavaScript. Because dialog is a page, use navigateTo command (change ScreenName to your dialog name):

Closing dialog

Closing dialog can be performed the same as opening, but change Open dialog action to Close dialog.

To close the dialog via JavaScript use the following code:

Button

The Button component is one of the most commonly used. It can navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close pop-ups, invoke a service or run JavaScript. The Button component has the following properties:

• Mini version – check to make a button smaller:
  

• Inline – check to put several buttons in a line:
  

• Icon – select the icon to be added to the button:
  

• Position – select the position of the icon on the button. It can be right, left, top, bottom or notext (no text on the button):
  

• Corners – check to make a button with round corners:
  

• Swatch – select the button swatch if you want it to differ from the default type specified in the app settings.

API examples

Getting button label value:

This is the same select without using the Apperyio(..) function:

The button label value must be changed through the ui-btn-inner span, otherwise all the CSS formatting will be lost.

This is the same select without using the Apperyio(..) function:

Learn about Apperyio JavaScript library.

Visit the jQuery Mobile documentation for complete Button component API.

Group Buttons

The Group Buttons component includes several buttons in a group. Each button has properties similar to those listed above. The Group Buttons component has the following properties:

• Mini Version – check to make all the buttons in a group smaller.
• Orientation – select vertical (by default) or horizontal placement for the buttons:

• Items – select how many buttons you need in the group.

Visit the jQuery Mobile documentation describing the Controlgroup (Group Buttons) component.

Input

The Input component allows you to receive data from the app user. It may be a name, login, email or password, a word, phrase, location or anything else you need in your app. The Input component has the following properties:

• Text – write the text you want to appear in the input field once the page loads; make this property empty if you want the input field have placeholder text:
  

• Placeholder – if you want the text disappear once the user starts typing, write the placeholder text in this field:
  

• Type – select the type of the input text. If password is selected, the entered text is shown as dots:
  

If file is selected, then the new check box Мultiple appears. Selecting this check box allows you to upload multiple files at once:

API examples

Getting input value:

This is the same select without using the Apperyio(..) function:

Setting input value:

This is the same select without using the Apperyio(..) function:

Learn about the Appery.io JavaScript library.

Visit the jQuery Mobile documentation for complete Input, Search and Textareas API.

Text Area

The Text Area component allows the app user to enter text. It has the following properties:

• Text – write the text you want to appear in the text area. This text may not be a placeholder, so it may not disappear by itself, but can be cleared if needed.
• Placeholder – write the placeholder text you want to appear in the text area; the Text property should be empty.
• Mini Version – check if you want to decrease the text size.

API examples

Getting the text area value:

This is the same select without using the Apperyio(..) function:

Setting the text area value:

This is the same select without using the Apperyio(..) function:

Learn about Appery.io JavaScript library.

Visit the jQuery Mobile documentation for complete Input, Search and Textareas API.

Datepicker

The Datepicker component is very helpful when the app user needs to enter a date.

Overview

The Datepicker component has the following properties:

• Date Format – you can change the standard mm/dd/yy order of the elements to any you like, but there are some notes you should know:
  1. Only slash / or dash - may be used as separators.
  2. Only two symbols must be specified to each date component, although in your app you will see a four-digit year.
  3. Appery.io database date format corresponds to yy-mm-dd.
• Default Date – by default the current date is set, but you can change this setting.
• Min Date – the dates before the one set in this field will be unselectable:
  

• Max Date – the dates after the one set in this field will be unselectable.
• First Day – you can select the first weekday: Sunday (default) or Monday.
• Day Names – you can change day names to symbols or other names if your language differs from English:
  

• Month Names – you can also change month names if your language isn’t English:
  

Label

The Label component is used to show information to the app user. The Label component has the following properties:

• Text – write the text you want to appear when the page loads.
• Font Face – select the font name to be used for the text in the Label component.
• Font Color/Size – specify the color and the size of the symbols in the Label component.
• Font – define if the text font will be bold, italic, underlined, etc.
• Align – define if the text alignment in the component will be left, right, center or justify. By default, it is left.

Link

The Link component is similar to the Label component. The difference is that upon clicking the Link component, the user will navigate to the specified URL. The Link component has the following properties:

• Text – write the link text here.
• URL – specify the destination of a link here.

The Font Face, Font Color/Size, Font and Align properties are the same the Label component has.

Visit the jQuery Mobile documentation describing the Link component.

Radio

The Radio component is a group of options where only one may be checked. The Radio component has the following properties:

• Options Count – define the number of alternatives from which to choose.
• Orientation – select vertical (default) or horizontal placement of the options:
  

When vertical orientation is chosen, a circular hole precedes the description and the selection is marked with a dot in it. When horizontal orientation is chosen, a circular hole is absent and the selected item is highlighted:

• Mini Version – check to make all the options in a group smaller.

Each option in the Radio component looks similar to the Button component, but the properties are different:

• Value – the value which will be set if the option is selected.
• Text – the description of the selection; by default it is the same as the value.
• Selected – check if you want this option to be selected by default. Once Selected is checked for one option, it will become unchecked for the rest of the options.

API examples

Getting the radio group selected value:

Getting the radio group item value:

Setting the radio group selected value:

Setting the radio group item text:

Learn about the Appery.io JavaScript library.

Visit the jQuery Mobile documentation for information about the Checkbox and Radio API.

Setting a default selection via JavaScript

Here is how you can set a default selection with JavaScript:

Make sure that when you’re using this JS, the third radio button is named “button3.” You can place this code, for example, for the startScreen load event:

Checkbox

The Checkbox component is a group of options where one or more options may be checked. The Checkbox component has the same properties as the Radio component:

Each option in the Checkbox component has the same properties as the Radio component options. The only difference is that any number of options may have the Selected property checked.

Visit the jQuery Mobile documentation describing the Checkbox and Radio components.

API examples

Getting the checkbox checked value:

Getting the checkbox item value:

To verify that the the checkbox is checked, perform the following:

Under EVENTS,  add the next JavaScript to: mobilecheckboxgroup_Name > Value change > Run JavaScript, and click Save:

Learn about the Appery.io JavaScript library.

Visit the jQuery Mobile documentation for information about the Checkbox and Radio API.

Slider

The Slider component allows you to choose a numeric value by moving an indicator:

The Slider component has the following properties:

• Max Value – the value set when the indicator is on the right end of the slider.
• Value – the default value.
• Min Value – the value set when the indicator is on the left end of the slider.
• Mini Version – check to make the Slider component smaller:
  

Visit the jQuery Mobile documentation describing the Slider and Toggle components.

Toggle

The Toggle component allows you to switch between two values:

The Toggle component has the following properties:

• Toggled – check to switch the toggle component on.
• Label On Text – text appearing when the toggle component is switched on.
• Label Off Text – text appearing when the toggle component is switched off.

API examples

Getting the toggle value:

Setting the toggle value:

Learn about the Appery.io JavaScript library.

Visit the jQuery Mobile documentation for information about the Slider and Toggle API.

Select

The Select component allows you to choose one item from a predefined set of values:

The Select component has the following properties:

• Icon – select the icon to be shown on the component, or remove the icon. The selected icon appears only on the main component, not on the lines of the list.
• Position – select the icon position.
• Options – click Change to set labels and values of the list:
  

• Selected – choose the option to be selected by default.
• Native Menu – check to make the list look like a menu:
  

• Mini Version – check to make the Select component smaller.
• Inline – check to locate several components in line:
  

Visit the jQuery Mobile documentation describing the Selectmenu component.

Building a dynamic select menu

This dynamic select menu contains two drop-down lists. The second drop-down list depends on the value selected in the first drop-down.

1. Create a new page, and build the following UI:

Both components are Select components. The first lists consists of: Fruits, Vegetables. On the PROPERTIES panel, go to Options > Change, and set the correct titles.

Set the component name to: list1.

The second list consists of: Orange, Apple, Banana, and the component name is: list2.

2. Add a value change event to the first list. Add Run JavaScript to the event.

3. Add this JavaScript, and then test the app.

List

The List component shows a list of items:

The List component has the following properties:

• Numbered – check to make the list ordered:
  

• Round Corners – uncheck to make the list square and screen wide:
  

• Data Filter – check to add a filter field:
  
  

• Auto Divider – check to add a divider to the list. The divider shows the first letter of the item (or group of items, if they start with one letter):
  

• Split Button – check to split each button into two parts: label and icon. If the property is checked, each part has specific properties (these properties will be listed below) and can have their own events:
• 

• Buttons Icon – select the default icon for list items.
• Buttons Swatch – select the default swatch for list icons. This property appears only when Split Button is checked:
  

• Placeholder – enter the text for the filter field. This property appears only when Data Filter is checked:
  

• Divider Swatch – select the swatch for dividers.
• Counter Swatch – select the swatch for counters:
  

• Items – set the number of items in the list.
• Linked – makes the list items active (checked by default).

List items have the following properties:

• Image Type – select whether you want to have images on the list items. You can select thumbnail image, icon image or no image:
  

• Image – click Change to upload or select the image.
• Icon – click Inherit to choose an icon.
• Counter Value – the counter appears if the Counter Visible box is checked.
• Counter Visible – check to make the Counter property visible.
• Text – enter the text for the list item.
• Divider – check to highlight the item as a divider. When the Auto Divider list property is checked, this check box becomes inactive. If the Divider property is checked, the following changes will appear:
  • The button icon and image are hidden on the divider item.
  • If the Split Button list property is checked, the divider item will not be split, because it has no icon:
    

• If the list is numbered, the numbering starts from 1 after every divider:
  

If you check the Auto Divider list property after the Divider property was checked for some items, these items will disappear from the list:

• If the Split Button list property is checked, you can define it for every list item’s unique icon and swatch:
  

To do this, select the list item button:

• Linked – makes the list items active or passive. This property inherit by default (takes value from List linked value). To turn off the inherit mode switch the toggle:
  
  When this property is unchecked, the list item becomes passive and doesn’t react on hover. However, events still work.
• Tab index – allows you to change item order by using the Up and Down buttons:
  

Set the Icon and Swatch properties.

You can add different events for the list item, and the list item button.

Visit the jQuery Mobile documentation describing the Listview components.

Image

The Image component allows you to add custom images to your app. The Image component has the following properties:

• Preserve Ratio – uncheck to change the image ratio.
• Asset – click Change to upload or select the image, or Clear image to clear it.

The examples here show how to use the File and String types to get images into your Appery.io app and display them with List component.

Grid

The Grid component allows you to format page content into rows and columns. The Grid component has the following properties:

• Rows – number of rows.
• Cols – number of columns.
• Dimension – grid width and height. Allowed values are <num>px, <num>pt, <num>% and auto.
• Border Thickness – the default value is 0 (it is invisible), but you can set the different value.
• Border Color – select the color for the border.

Every grid cell has the following properties:

• Background Transparent – uncheck, if you want the cell background to be colored.
• Background Color – select the color for the cell background if Background Transparent is unchecked.

Visit the jQuery Mobile documentation describing the Grid component.

Navbar

The Navbar component may be dragged and dropped on the page header or footer. It can consist of several buttons with optional icons. The Navbar component has only one main property – Items. The number of items in the Navbar can vary from 1 to 10:

If the number of items you set doesn’t exceed 5, the buttons will be on one line:

If you set more than 5 items, they will be placed in several lines – two buttons in a line (regardless of the page size):

This doesn’t look very good, which why we don’t recommend using the Navbar component with more than 5 items.

The Navbar items have the following properties:

• Icon – you can select any icon from the list or None.
• Text – enter the text to appear on the button (this field may be left empty).
• Active – check to make the button highlighted on this page:
  

The Navbar component is often used for creating Custom Components. Read about Custom Components.

Visit the jQuery Mobile documentation describing the Navbar component.

Adding custom icons to a navbar

Here is how to set custom icons on the jQuery Mobile Navbar component. From components PALETTE, drag and drop the Navbar component.

Setting via JavaScript

1. Open EVENTS view, select startScreen >Load event > Run JavaScript.
2. Enter the following code:
   
   JavaScript for custom icons

   JavaScript

   1	$('[name=mobilenavbaritem_4]').addClass("myClass");

   ‘mobilenavbaritem_4’ is the same name as the Navbar item name in PROPERTIES.

3. Click Save.
4. Click Create New > CSS, enter the name, and click Create CSS.
   
5. Enter the following code:
   
   CSS for custom icons

   CSS

   1 2 3 4 5

   .myClass:after{ background: url("http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.png") !important; background-size: 22px 22px !important; border-radius: 0 !important; }

6. Save.
7. Test the app. It should look like:
   

Setting via CSS

1. Click Create New > CSS, enter the name, and click Create CSS.
   
2. Enter the following code:
   
   CSS for custom icons

   CSS

   1 2 3 4

   [dsid=mobilenavbaritem_5]:after{ background: url("http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.png"); background-size: 22px 22px; }

   [dsid=mobilenavbaritem_5] – contains the same name as the Navbar item in PROPERTIES.

3. Save.
4. Test the app:
   

Search

The Search component is an input field with a search icon, and a clear text icon that appears once the app user begins typing:

The Search component has the following properties:

• Text – enter the text that should appear in the input field. This text may not be a placeholder, so it may not disappear by itself, but can be cleared if needed.
• Placeholder – write the placeholder text you want to appear in the text area; the Text property should be empty.

Visit the jQuery Mobile documentation describing the Input, Search and Textareas components.

CollapsibleSet

CollapsibleSet is a complex component that, when tapped, allows you to expand and collapse content. The CollapsibleSet component consists of one or several blocks, and each block has a header and content area. The header stays visible even when the content is collapsed. Using the CollapsibleSet component saves space on your mobile page.

The CollapsibleSet has the following properties:

• Items – number of blocks.
• Mini Version – check if you want the block headers be smaller:
  

• Data Inset – uncheck to make the component full width, without corner styling:
  

• Data Collapsed Icon – select the icon that appears on the header of the collapsed block.
• Data Expanded Icon – select the icon that appears on the header of the expanded block.
• Data Iconpos – select the position of the icon on all block headers.
• Swatch – select the component swatch if you want it to differ from the inherited.
• Data Content Theme – select the block contents’ swatch if you want it to differ from the inherited.
• Tab Index – allows you to change item order by using the Up and Down buttons.

The CollapsibleSet block properties open for editing when you click the block name:

The CollapsibleSet block properties are as follows:

• Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
• Swatch – select the block swatch if you want it to differ from other blocks. If you set the block swatch, it will not change after changing the component swatch.
• Tab index – allows you to change item order by using the Up and Down buttons.
• Mini Version – check if you want the block headers be smaller.

The CollapsibleSet block header properties:

• Icon Position – select this block header’s icon position.
• Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
• Text – enter the block header text.
• Swatch – select the block header swatch if you want it to differ from the inherited.

The CollapsibleSet block content area only has the Swatch property.

Visit the jQuery Mobile documentation describing the Collapsible set component.

Collapsible

The Collapsible component differs from the CollapsibleSet component only in the number of items – it has only one block, which has a header and content area, it may be collapsed or expanded by default, and can be of standard or mini size.

The Collapsible block properties are as follows:

• Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
• Swatch – select the block swatch if you want it to differ from other blocks. If you set the block swatch, it will not change after changing the component swatch.
• Tab Index – allows you to change item order by using the Up and Down buttons.
• Mini Version – check if you want the block headers be smaller.

The Collapsible block header properties:

• Icon Position – select this block header’s icon position.
• Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
• Text – enter the block header text.
• Swatch – select the block header swatch if you want it to differ from the inherited.

The Collapsible block content area only has the Swatch property.

Visit the jQuery Mobile documentation describing the Collapsible component.

Spacer

The Spacer component is used to make space between other components. You can resize it with mouse cursor or by changing the Dimension properties (allowed values are <num>px, <num>pt, <num>% and auto):

Video

The Video component allows you to embed a video in your app page. The Video component has the following properties:

• Auto Play – check to make the video start once the page loads.
• Src – specify the location of the video file.
• Type – specify the MIME-type of the video file. There are 3 pairs of Src/Type properties, so that you can specify 3 different video locations and types, because different browsers support different video formats.
• Show Controls – check to show play/stop/pause controls (they will be different depending on the browser).
• Loop – check to make the video start over every time it is finished.
• Mute – check if you want the audio output of the video be muted.
• Poster – specify the image to be shown when the video loads (but isn’t playing yet). It’s also used if the video isn’t available.
• Preload – select whether the video should be loaded as soon as the page loads. Possible values are:
  • none – the video should not start loading when the page loads.
  • metadata – only the metadata for the video should be loaded once the page loads.
  • auto – the video should start loading when the page loads.

Examples of the Src/Type properties:

• Src: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
• Type: video/mp4
• Src: http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv
• Type: video/ogg
• Src: http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm
• Type: video/webm

Audio

The Audio component allows you to embed a sound in your app page. The Audio component has the following properties:

• Auto Play – check to make the audio start playing as soon as it is ready.
• Src – specify the URL of the audio file.
• Type – specify the MIME-type of the audio file. There are 3 pairs of Src/Type properties, so that you can specify 3 different audio locations and types, because different browsers support different audio formats.
• Loop – check to make the audio start over every time it is finished.
• Preload – select if/how the audio should be loaded when the page loads. Possible values are:
  • none – the audio file should not start loading as soon as the page loads.
  • metadata – only the metadata for the audio should be loaded once the page loads.
  • auto – the entire audio file should start loading as the page loads.

The examples of the Src/Type properties:

• Src: http://nigelcoldwell.co.uk/audio/mp3s/mp3-048.mp3
• Type: audio/mpeg
• Src: http://nigelcoldwell.co.uk/audio/oggs/ogg–1-00%2848%29.ogg
• Type: audio/ogg
• Src: http://nigelcoldwell.co.uk/audio/wav-1-40mb.wav
• Type: audio/wav

Map

The Map component allows you to embed Google Maps into your app page. The Map component properties are as follows:

• Latitude – specify the coordinate which should be shown on the map when the page loads.
• Longitude – specify the coordinate which should be shown on the map when the page loads.
• Address – specify the address which should be shown on the map when the page loads.
• Zoom – specify the zoom level of the map.
• Show marker – check if you want the markers to be visible.

The Map component contains a marker, which is an info window:

The Map marker has the following properties:

• Show Info Window – check if you want it to appear.
• Latitude – specify the default coordinate of the info window.
• Longitude – specify the default coordinate of the info window.
• Address – specify the default address of the info window.
• Text – enter some text.

HTML

The HTML component allows you to insert custom HTML code; <div> and <span> tags. The HTML component properties are as follows:

• Type – you can select either div, span, html, or form.
• HTML – the Edit HTML button is enabled when the Type property is set to html. On clicking the Edit HTML button, the HTML Editor pop-up opens, where any custom HTML, JavaScript or CSS code can be entered:

• Dimension – component width and height. Allowed values are <num>px, <num>pt, <num>% and auto.

Creating forms

As you set the HTML Type property to form, the PROPERTIES panel changes – new properties appear:

• Form Action – you can enter the URL where the information should be sent, or from where it can be received.
• Form Method – you can choose a POST or GET method.

The form can be filled with components.

Add the Click event to the submitbutton withAction = Run JavaScript:

Where html_X is the HTML element name:

Wrapping external document

Sometimes you need to wrap external documents, such as websites. Follow this steps to do it:

1. Place an HTML component on the page.

2. In PROPERTIES, set Dimensions to auto and auto.

3. Set the ClassName property to htmlOtherSite:

4. Click Edit HTML and switch to HTML Source. Add the following code:

Change https://appery.io/ to the site that should be wrapped.

5. Create a new CSS and add the following code:

6. Test the application. You will see the wrapped content:

Carousel

The Carousel component allows you to create a list of frames which can be scrolled horizontally back and forth. The Carousel component has the following properties:

• Frames – set the number of frames in the Carousel component.
• Indicators – set the name of the component to which indicators of the carousel will be outputted. If it is empty, indicators will be displayed at the top of the carousel block.
• Show indicator – uncheck to hide indicators.
• Show title – uncheck to hide the title of the carousel.
• Title Built In – allows for the formatting of the frame title. If it is checked, title text is wrapped in two divs with class ui-carousel-title and an inside div with class ui-carousel-title-inside. Otherwise, the title text is wrapped in only one div with class ui-carousel-title.
• Title Is Text – if checked, then an attempt to pass html-code as a text will lead to the HTML being displayed as plain text with tags. Otherwise, the title is interpreted as HTML (e.g. you can pass <b>Text</b> and the text will be displayed as bold).
• Animation Duration – you can set the duration of an animation (in milliseconds).
• Use Legacy Animation – if checked, the JS code will be used for animation; otherwise it will try to use the built-in browser mechanisms for animation through CSS3-styles.
• Enabled – if unchecked, Carousel won’t work (frames won’t change, only the first frame will be accessible).

The Carousel item has the following properties:

• Type – you can select HTML or image type:
  • HTML – provides other components to be added to the frame (including the Image component).
  • image – provides only the image to be shown at the carousel frame (other components dropped to the frame will be invisible).
• Title – set the frame title.
• Image URL – this property appears when the image frame type is selected.

Learn more about the Carousel component here.

Panel

The Panel component allows you to create sliding panels which appear from the left or right. The Panel component has the following properties:

• Swatch – by default this property inherits the screen swatch property value.
• Position – the panel can slide out from the left or right side of the screen:
  

• Display – you can select one of the following modes:

Overlay – the panel appears over the page content:

Reveal – the page content moves and the panel appears from under it:

Push – the panel pushes the page content aside:

You can add any component to the Panel (with the exception of Popup, Panel and Navbar):

For editing the Panel component, use the OUTLINE tab opening the components tree:

To hide or delete the Panel, click the corresponding link next to its name in the components tree:

To reopen it, click on its link back.

Alternatively, every Panel component has a down arrow button to hide it and a delete button for deleting it:

Changing panel size

Reducing panel size can be handy when you want to not overlap the header or footer when panel is opened. Here is how you can do that:

1. Place the Button component on the page and add the following event:
mobilebutton_3 > Click > Run JavaScript. Add the following code:

This will open the panel.

2. Place the Panel component on the page and name it MyPanel:

3. Create a new CSS file and add the following code:

Make sure to set a class myPanel to the panel you use in the CSS.

4. Now you can test the app. You’ll see that panel doesn’t overlap the header and footer:

API examples

Open panel:

Close panel:

Learn about Appery.io JavaScript library.

Visit the jQuery Mobile documentation for complete Panels API.

Popup

The Popup component allows you to present any data as a pop-up. All the pop-ups are listed under OUTLINE:

You can manage (delete or hide/show) certain pop-ups from the OUTLINE tab by clicking the corresponding link:

You can also hide pop-ups by clicking the small down arrow above the pop-up:

The Popup component has the following properties:

• Swatch – select the button swatch if you want it to differ from the default type specified in the app settings.
• Overlay Theme – when pop-up is opened, it can overlay UI in the background with a different swatch:
  

By toggling this option, the overlay theme will be the same as the Popup Swatch:

The toggle button next to Overlay Theme can be set to on (property is enabled) or off (property is disabled) status.

If overlay isn’t needed, choose Transparent, and the UI in the background will be untouched:

Arrow – shows an arrow in the selected direction, and shifts the pop-up towards the opposite side. If the pop-up cannot be moved due to insufficient container size, the arrow will not be shown:

You can select multiple arrow directions by using the <Ctrl>+<Click> combination. So if one arrow cannot be shown, the next arrow will be performed. Use <Ctrl>+<Click> to unselect arrow direction.

The Arrow parameter is only available for 2.0 version libraries (or higher).

Corners – makes the pop-up corners rounded:

Dismissible – allows you to close a pop-up by clicking anywhere outside of the pop-up.

Position To – sets the element relative to which the pop-up will be centered. It has the following values:

1. window – when the pop-up opens, center in the window.
2. jQuery selector – when the pop-up opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with :visible. If the result is empty, the pop-up will be centered in the window. For example, to center the pop-up to the button specify the following jQuery selector:

The Tolerance parameter is ignored when the value for Position To is specified.

Shadow – whether or not to show a shadow around the pop-up:

Tolerance – the minimum distance between the pop-up and the edge of the window. Parameters are enumerated clockwise: top, right, bottom, left. Here is the pop-up with right Tolerance value of 85:

As you can see, the pop-up is shifted left.

Visit the jQuery Mobile documentation for the complete Popup component API.

YouTube

The YouTube component allows you to embed video from YouTube. The YouTube component has the following properties:

• Auto Play – check to make the video start once the page loads.
• Video ID – enter the video ID from youtube.com.
• Show controls – checked by default; uncheck if you want to hide the controls.
• Loop – check to make the video restart every time it is finished.
• Start – enter the start second of the video playing.
• End – enter the end second of the video; a 0 value means the video should play to the end.

The YouTube component can be placed to any container on a screen. The component width and height can be set by dragging a corner handler or by editing dimensional properties.

YouTube events

The YouTube component has the following built-in events:

• YouTube state change – fires whenever the player’s state changes. The value specifies an integer that corresponds to the player state. Possible values are:
  • -1 (unstarted)
  • 0 (ended)
  • 1 (playing)
  • 2 (paused)
  • 3 (buffering)
  • 5 (video cued)

  This event returns a state object that can be handled:
  

• YouTube video ended – fires when the player’s state changes to 0 (ended); this event is based on the YouTube state change event; it does not return any object:
  

• YouTube video playing – fires when the player’s state changes to 1 (playing); this event is based on the YouTube state change event; it does not return any object:
  

• YouTube video paused – fires when the player’s state changes to 2 (paused); this event is based on the YouTube state change event; it does not return any object:
  

• YouTube video buffering – fires when the player’s state changes to 3 (buffering); this event is based on the YouTube state change event; it does not return any object.
  

  The YouTube video buffering event is available only with the HTML5 player (not available in Flash Player). To switch the player type, open HTML5 settings and click Request the HTML5 player.

• YouTube playback quality change – fires whenever the video playback quality changes. The value is a string that identifies the new playback quality. Possible values are:
  • small
  • medium
  • large
  • hd720
  • hd1080
  • highres
• YouTube playback rate change – fires whenever the video playback rate changes. The value is a number that identifies the new playback rate:

The YouTube playback rate change event is available only with the HTML5 player (not available in Flash Player). To switch the player type, open HTML5 settings and click Request the HTML5 player.

• YouTube error – fires if an error occurs in the player. The value is an integer that identifies the type of error that occurred. Possible values are:
• YouTube playback quality change – fires whenever the video playback quality changes. The value is a string that identifies the new playback quality. Possible values are:
  • 2 – The request contains an invalid parameter value.
  • 100 – The video requested was not found.
  • 101 – The owner of the requested video does not allow it to be played in embedded players.
  • 150 – This error is the same as 101. It’s just a 101 error in disguise!
    

Read more about YouTube events via the link.

Vimeo

The Vimeo component allows to embed video from Vimeo. The Vimeo component has the following properties:

• Auto Play – check to make the video start once the page loads.
• Video ID – enter the video ID from vimeo.com.
• Loop – check to make the video restart every time it is finished.
• Show title – checked by default; uncheck if you want to hide the video title.
• Show portrait – checked by default; uncheck if you want to hide the author’s portrait.
• Controls color – change the color of the component controls to make it more appropriate to your application appearance:
  

If the Vimeo component width is less than 299px or its height is less than 168px, then the component has no controls (excluding the Play and Fullscreen buttons) and properties Show Title and Show Portrait have no visible effects. It’s a standard behavior for the embedded Vimeo video player.

Multiple component properties

By holding the <Ctrl> key and clicking components, you can select multiple components and set the same values for some of their properties.

When selecting multiple components on the PROPERTIES panel, you’ll only see the similar properties:

The properties that have different values will be highlighted:

When you edit the value of a property, it’s changed for all selected components. In the image above, you can see that the buttons have different texts, so the Text property is highlighted. As this property was edited, the text on all buttons changed, and highlighting disappeared:

This way you can quickly set different properties of similar and non-similar components. In the following image, you can see that the Swatch property was changed for the Button and Input components: