This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Simple Page
We have already covered the code it takes to build the basic structure for a mobile site, but we have not actually made it look like a mobile site. Let’s expand that into a one-page and one-button site so that we can get a better feel for how jQuery Mobile works.
In Listing 4.3 we add several elements to the page and use data attributes to apply functionality and style.
Listing 4.3 Expanding the Mobile Site to Include a Header and a Button
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>Developing with jQuery Mobile</title> 5: <meta name="viewport" content="width=device-width, initial-scale=1"> 6: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 7: <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script> 8: <script src="https://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> 9: </head> 10: <body> 11: <div data-role="page"> 12: <div data-role="header"><h1>Single Page Site</h1></div> 13: <div data-role="content"> 14: <p>Look at the button!</p> 15: <a href="#" data-role="button">I am a button</a> 16: </div> 17: </div> 18: </body> 19: </html>
The preceding code was based on the code from Listing 4.1 and can be viewed by opening the file expanded_layout.html. Let’s go over the changes that were made from the original code.
Inside the body element we have added a new div element on line 11. This div has an attribute of data-role="page", which allows jQuery Mobile to treat this div as a single page. This functionality also allows you to have a multipage site contained in one HTML file. Continuing on to line 12 you can see that it contains a div with an attribute of data-role="header". This tells jQuery Mobile to treat this as a container for the header section of the page. Inside this div element is an h1 element. It is important that we have this element in the header, not only for Search Engine Optimization (SEO) purposes, but because it gets a specific style applied to it that helps complete the look of the header section.
Line 13 contains another div with an attribute of data-role="content". This applies some padding and other styles and designates this div as the container for the content section of the page. Line 14 shows a p element with some text inside it. This is included as an example of what text looks like inside the content section. Also inside the content section line 15 shows a link that we have set up. While this link currently does not go anywhere (the href attribute is set to #), it is important to notice that the a element contains the data-role="button" attribute. jQuery Mobile uses this attribute to transform the standard link into a fully styled button.
If you were to render the page in a browser, the whole page should now look more like a mobile site. The default theme is applied including a clearly defined header section and content section. The button that we added is in the content section and automatically expands to fit the size of the screen it is being viewed on.
I mentioned previously that the button that was added does not actually do anything when clicked. This is fine for personal amusement and practical jokes, but we can make it do something if we set the href attribute to link somewhere. In Listing 4.4, which shows the contents of button_click.html, you can see that the button has been set to point to another page, and a second page section has been set up within our HTML file.
Listing 4.4 The Mobile Site with a Working Button and Second Page Section
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>Developing with jQuery Mobile</title> 5: <meta name="viewport" content="width=device-width, initial-scale=1"> 6: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 7: <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script> 8: <script src="https://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> 9: </head> 10: <body> 11: <div data-role="page"> 12: <div data-role="header"><h1>Single Page Site</h1></div> 13: <div data-role="content"> 14: <p>Look at the button!</p> 15: <a href="#dpop" data-role="button" data-rel="dialog">I am a button</a> 16: </div> 17: </div> 18: <div data-role="page" id="dpop" data-theme="d"> 19: <div data-role="header"><h1>Clicked!</h1></div> 20: <div data-role="content"> 21: <p>clicked content!</p> 22: <a href="#" data-rel="back" data-role="button">Go back</a> 23: </div> 24: </div> 25: </body> 26: </html>
The first change is on line 15. We changed the link to now point at a populated anchor instead of an empty one. We also added another attribute to the a element. Using data-rel="dialog" allows jQuery Mobile to display the linked element as a dialog page instead of a standard page. Using a dialog gives a different style and feel than a standard page and also shows the page with a special pop transition by default.
If you look farther down in the code for the referenced anchor you will find it on line 18. This is where we set up a second page. We gave the second page an id of dpop, and just like the page on line 11, it is a div element. Something else we have done is added data-theme="d", which styles the dialog window a little differently than the current color scheme.
There are currently five basic swatches in the jQuery Mobile default theme. The swatches are selected by passing either a, b, c, d, or e into the data-theme attribute.
Line 19 shows that we set up another header section and added another h1. Line 20 is the same as line 13, which is a div with an attribute of data-role="content", and just like line 13 it tells jQuery Mobile that this div element will be used as a content section. Within this section we created a back button on line 22. The back button works through the use of the data-rel="back". This attribute sends the browser back one step in history. This is why the href has an empty anchor value.
Figure 4.1 shows the first page, and Figure 4.2 shows the dialog page.
)
Figure 4.1 A simple page with one button linking to the dialog page
)
Figure 4.2 The dialog page that appears when linked from the first page
As you can see from the preceding coding exercise, jQuery Mobile allows you to easily make mobile sites with very little code. You can also create your own events, or even tweak the default ones. To get started adding your own customization we need cover some subtle differences between the standard jQuery framework and the jQuery Mobile framework.