CHAPTER 5 - jQuery Mobile Hidden Components

The previous chapter introduced EZoApp's JQM components. However, there are still some nice JQM components that were not included. We call them the Hidden Components. You can use these hidden components to create apps that really stand out from among the others!

There are two main hidden components:Popup and Slide Panel

1. Popup

Popup is a popup window. Everyone should have seen this function; some might even see it several times in a day. Why? Because every time an app crashes, a popup window appears telling you that the application program has stopped - XD. So how do we create it?

( Example; click Preview on top to preview it: http://jqmdesigner.appspot.com/designer.html#&ref=6072732781379584 )

To create a popup, two conditions should be met first. First, there must be a trigger event, such as a button click, that should bring up the popup. Second, there must be a div to hold the contents of popup; otherwise, where would you define the behavior of the popup? Let us first place a button on the screen, which we will click to trigger the popup action.

<a class="ui-btn" data-rel="popup" href="#popup1">Popup 1 ( default )</a>

The line above shows the code of a button. 1data-rel="popup"1 refers to the popup action. 1href="#popup1"1 refers to the contents of the popup. It is okay if you do not know how to write the code; you can use the property panel to set these, but you must manually enter the href.

After the button is created, next, we need to write some code manually. Manually type the following HTML code,

<div data-role="popup" id="popup1">大家好我是 popup 1</div>

You might ask- will the div not show up on the page? You may or may not have noticed that there is a data-role="popup" in the div. That means this div is a popup and will only appear when you want it to appear! The id in the code is the id called by the href in the button above.

That is all we need to do to create a popup. If you need to use some special effects, you can use the transition in the property panel to set them up. There will be a chapter introducing these special effects later.

This is an example of popup. Click the Preview on top to preview it:http://jqmdesigner.appspot.com/designer.html#&ref=4868278459564032

2. Slide Panel

Slide Panel and popup are both hidden components. Slide Panel is also invisible and only appears when triggered. Compared to popup, slide panel is an even more essential component for creating apps. Slide panel is the frequently seen function menu that slides out from the left or right. We see it often while using the Facebook app.

Slide panel can be used in a way similar to that of the popup. First, we add a div in the HTML code, then set its data-role="panel" and data-position. That is how to turn the div into a menu sliding out from the left or right.

<div id="left-menu" data-role="panel" data-position="left" data-theme="b">
  <div>This is the contents coming out from the left</div>
</div>
<div id="right-menu" data-role="panel" data-position="right" data-theme="b">
  <div>This is the contents coming out from the left</div>
</div>

The method for calling a slide panel is similar and even easier than that of calling out a popup. You just need to set the button’s href to the slide panel’s id!

However, slide panel has two easily overlooked attributes. The first one is the data-display="overlay", which allows the slide panel to overlay on top of the original contents; its default is false, which means the original contents will slide off along with the slide panel as it comes out. ( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5192034302296064 )

The second attribute is the data-position-fixed="true". If it is set to true, the div sliding out will not be affected by the height of the original screen. ( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5029845465563136 )

That is all what you need to do to create a menu that slides out from either the left or the right! ( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5575935659081728 )

Continue reading Chapter 6 - Extension Components (Basic Components)
Or Return to Table of Contents