Small white Learn jQuery mobile "building cross-platform App:jquery Mobile mobile app" series six-design player app

Examples of the previous sections have introduced some of the use of button controls, but the author's colleagues consistently reflect that in the jquery Mobile button can only be a full line of tiles appear too monotonous, happened to the author in the bar to see a student design of a simple player (6-13), and then produced inspiration, Decide to implement a simple player control panel with a set of inline buttons.

Figure 6-13 a simple music player

The function you want to implement is simply to select a row in the page so that you can place 4 buttons of the same size, which are displayed as play, stop, forward, and rewind, but is this really possible?

Some readers might say that it's a straightforward way to redesign the button's style file to rewrite its CSS, but it's too much of a hassle. Because jquery Mobile has already prepared the button's inline function for the developer, it is easy to realize the effect I want.

"Example 6-5 player interface made with button grouping"

<! DOCTYPE html> <!--declaration HTML 5-->
Run result 6-14 as shown.
In addition to the operator panel, a simple music content panel is designed with the button grouping feature, which includes the name of the music being played, the author's source, and so on, which describes how to group the buttons.
The first is the upper part of the Music content panel, a simple set of 4 buttons in a group, the group of buttons outside the package of a "div" tag, where the property data-role set to "Controlgroup". In the page can be clearly seen 4 buttons are tightly linked together, the outer side of the two faces were added arc, looks very atmospheric.
Next is the operation panel, still is the 4 buttons in a group, the difference is to give the outside DIV tag more set a set of properties data-type= "Horizontal", the arrangement is set to horizontal.
Tip: You can also set a theme for a button, such as a play key with a different color, making it more visible and easier for users to manipulate.

Figure 6-14 Music Player Interface

jquerymobile availability is getting higher, the entry threshold is low, and you can write less code to create a mobile-friendly interface. "Building cross-platform App:jquery Mobile mobile app" This book uses an instance-driven approach to introduce app development under Jquerymobile, which provides more than 70 practical cases to teach readers to develop mobile Finally, through 6 small projects to review and consolidate the knowledge points learned. Want to communicate with the author, add Q Group: 348632872, the author here waiting for you to come oh.