jquery
sanosh3
week_11-_lecture_1.pdf
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 1 of 23
jQuery Mobile Continued
As mentioned last week, when using jQuery Mobile, a single HTML5 can hold one or more
pages or views. This can be done by defining div elements with data-role="page" for each page
with different id attributes. Let’s see how this works by going back to the JQueryMobileDemo
solution that we created last week and modify it to have three pages within the Index.html file.
First, browse to C:\ITC2811\Week10\ (or wherever you saved the JQueryMobileDemo project
last week) and copy the JQueryMobileDemo folder as seen below and copy it to
C:\ITC2811\Week11\.
Now in Visual Studio, go to FILE -> Open -> Project/Solution as seen below.
In the Open Project dialog box, browse to the solution folder you copied earlier and double click
the JQueryMobileDemo.sln file as seen below to open up the solution.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 2 of 23
Open up the index.html file. With the <head></head> section and the footer div collapsed, it
would like the following image. Note that there is currently one div within the <body></body>
tags with data-role="page" meaning that this HTML5 contains one view (page).
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 3 of 23
Now modify the document by adding another div with data-role="page" as seen below. Since
you now have two divs with data-role="page", you will need to give each one an id attribute. In
this case the first page is given id="page1" and the second page is given id="page1". Note that
each page can have its own header, content, and footer divs. As you can see, in the first page, a
jQuery Mobile button (identified by data-role="button") with a link to the second page is
defined via a hyperlink as seen below (notice how the second page is identified in the hyperlink
by the prefix # followed by the page id).
<a href="#page2" data-role="button">More</a>
Now run the application by hitting F5. The project then runs in the desktop/laptop browser as
seen in the next image. Copy the URL and keep the browser open so that the application
continues to run.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 4 of 23
Now it’s time to test the application in the Opera Mobile browser. Launch the emulator, choose a
Profile, and click Launch as seen in the image below.
Now paste the URL you copied earlier into the Opera Mobile browser and hit enter. The
index.html page loads as seen in the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 5 of 23
Clicking on the More button loads the second page as seen below.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 6 of 23
Now close the desktop/laptop browser to stop the application from running. Back in the
index.html file, add a third div with data-role="page" and id="page3". We would like this third
page to be linked from page 2 as a modal dialog box. This is done adding the data-rel="dialog"
property to the hyperlink that links to page3 from within page2 as seen in the following
statement.
<p><a href="#page3" data-role="button" data-rel="dialog" >More</a></p>
When page3 loads as modal dialog box, we would like it to have a link back to page2. This is
done by creating a hyperlink with href="#" and data-rel="back" as seen in the following
statement.
<a href="#" data-role="button" data-rel="back">Close</a>
The complete listing for page2 and page3 divs is shown below.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 7 of 23
Now run the application again by hitting F5. The index.html loads in the desktop/laptop browser,
as seen below.
Copy the URL from the desktop/laptop browser and paste it into the Opera Mobile browser and
hit enter. The index.html page should now be displayed in the mobile browser as seen below.
Clicking the More button on the first page should load the second page as seen in the following
image. If you examine the full URL on this page, you can see that it ends with #page2. For
example, in my case, the full URL is: http://localhost:60212/index.html#page2
This means that the page currently being displayed is the one defined by the following div:
<div data-role="page" id="page2">
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 8 of 23
Now go ahead and click the More button on the second page as seen below.
The third page then opens up as a modal dialog box as seen below.
If you click the Close button, the browser navigates back to the second page as seen in the next
image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 9 of 23
Next, close the desktop/laptop browser to stop the application from running.
Adding a Home Button to the Second Page
You are now going to add a button to the header section of page 2 that displays a Home icon.
When clicked, this button should navigate back to page 1. Go ahead and add the line shown
below in the beginning of the header div in page2. Note that the home icon is added using the
data-icon="home".
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 10 of 23
Now if you run the application and navigate to the second page in the mobile browser, you see
that a Home icon appears in the header of the page as seen in the image below.
Clicking on the Home button will take you the first page as seen below.
The complete listing for index.html minus the details of the <head></head> section is shown in
the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 11 of 23
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 12 of 23
Adding a Toolbar to the Footer DIVs
If the application is still running in the desktop/laptop browser, close the browser so it stops
running.
At this point, go back to the Solution Explorer window, right click the project, and choose
Add ->HTML Page as seen below.
Call the page second.html and click OK.
Copy the contents of index.html and paste it into second.html and then update the divs with data-
role="footer" in the divs with data-role="page" id="page1" and data-role="page" id="page2"
as seen in the next image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 13 of 23
In the code listing above, the class="ui-bar" property is used to add padding to the footer
toolbars. Also the data-icon="arrow-r" attribute in the following anchor element (hyperlink)
adds a right-arrow icon before the text of the hyperlink, which in this case is a link to the second
page defined within the second.html file.
<a href="#page2" data-icon="arrow-r" data-role="button">Next</a>
Now launch the application again by hitting F5. If the browser, change the URL so that it ends
with second.html as seen below.
http://localhost:60212/second.html
Click enter so that second.html loads as seen in the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 14 of 23
Now copy the URL from the desktop browser and paste it in the Opera Mobile browser and hit
enter. Once the page loads, take note of the button on the footer toolbar that has a right-arrow
icon followed by the text Next.
Clicking the Next button should load the second page as seen in the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 15 of 23
Now clicking the Next button should load the third page as modal dialog box as seen in the
image below.
Next clicking the Close button should close the modal dialog box and return to the second page
as seen below.
On the second page clicking the Home button takes you back to the first page defined in
second.html.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 16 of 23
Adding a jQuery Mobile Unordered List
If it is open, close the desktop browser to stop the application from running.
Next, head back to the Solution Explorer window, right click the project, and choose Add ->
HTML Page.
Call the new HTML file lists and click OK to continue.
Clear the contents of lists.html and replace it with the code listing seen in the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 17 of 23
Make sure to reference the jQuery Mobile CSS file, the jQuery script file, and the jQuery Mobile
script file in the <head></head> section by dragging them from the Content and Scripts folder
and dropping them in the <head></head> section or by simply typing them in.
The jQuery Mobile data-role="listview" property seen in the code listing above makes an
HTML unordered list (ul) or an HTML ordered list (ol) mobile optimized. As you might have
guessed, lists.html contains one page (view), which contains a mobile optimized unordered list of
items that represent the world continents.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 18 of 23
Now run the application by hitting F5. If lists.html is not loaded, modify the URL to point to it as
seen in the following line:
http://localhost:60212/lists.html
The lists.html page should then load in the browser as seen below. This is how a jQuery Mobile
list looks like.
Now copy the URL in the desktop browser, paste in the Opera Mobile browser, and hit enter.
The lists.html file should now be displayed in the mobile browser as seen below.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 19 of 23
Close the desktop/laptop browser if it is open so that the application stops running.
In the last part of this lecture, you are going to add another HTML file to the project by right
clicking the project in the Solution Explorer and choosing Add -> HTML Page as seen below.
Call the file list2.html and click OK to continue.
Clear the contents of list2.html and replace it with the listing shown in the following image.
Again, make sure to reference the jQuery Mobile CSS file, the jQuery script file, and the jQuery
Mobile script file in the <head></head> section as instructed earlier in the lecture.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 20 of 23
As you can see in the listing above, the div with data-role="content" contains a jQuery Mobile
unordered list of the continents Africa and Asia along with two countries in each with hyperlinks
to their Wikipedia (Wikipedia is a free online encyclopedia that can be found at
http://en.wikipedia.org/) pages. In this list,
The property data-filter="true" in the <ul> (unordered list) element adds filtering
capabilities to the list.
The property data-role="list-divider" adds list dividers with texts Africa and Asia.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 21 of 23
Now run the application again by hitting F5. The list2.html page then renders in the
desktop/laptop browser as seen below. If the application loads the index.html file instead, just
replace the index.html with list2.html in the URL and hit enter. Notice the following on the page:
The list with two dividers with text Africa and Asia
List items under each divider with right-arrows, which indicates that they are hyperlinks.
The filter box on the top of the page. This is where you can start typing a substring of any
item on the list to narrow down the list.
Now copy the URL in the desktop/laptop browser, paste it in Opera Mobile, and hit enter. The
list2.html file should now load in the mobile browser as seen in the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 22 of 23
Next type in a substring such as “ja” in the filter box to narrow down the items shown in the list
to those that have “ja” in their text. In this case the only matching result is Japan as seen below.
Note that the divider that contains the matching list item also displays when using the filter. In
this case the divider is Asia.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 1
Page 23 of 23
Now clear out the filter so that the full list is displayed again and click the Egypt hyperlink list
item as seen in the image below.
The link to the Egypt Wikipedia page is then loaded as seen below. Note that Wikipedia also has
a mobile optimized version of this page, which it returns as it detects that the request was sent
from a mobile browser.
