August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery...
Transcript of August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery...
![Page 1: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/1.jpg)
basicsSmartboard.notebook
1
August 30, 2013
JQuery Mobile is a JavaScript library and a framework for developing mobile applications that work on a wide variety of devices.
<!DOCTYPE html> <html>
<head> <title>Testing...</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.css" /><script src="http://code.jquery.com/jquery1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.js"></script>
</head> <body>
<div datarole="page">
<div datarole="header"><h1>Testing...</h1>
</div>
<div datarole="content"><p>This is just some basic writing. This page is being
written as I experiment with JQuery Mobile.</p></div>
<div datarole="footer"><h4>The end...</h4>
</div></div></body></html>
The information in the head sets up the page to use CDNhosted versions. You link to the stylesheet and the JQuery libraries that set up JQuery Mobile for use.
Note that we are using standard HTML5 including the doctype, the head and the body tags. The div tag has a series of datarole attributes such as page and within page header, content and footer.
![Page 2: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/2.jpg)
basicsSmartboard.notebook
2
August 30, 2013
![Page 3: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/3.jpg)
basicsSmartboard.notebook
3
August 30, 2013
Notice what happens when I eliminate the datarolein the inner divisions.
![Page 4: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/4.jpg)
basicsSmartboard.notebook
4
August 30, 2013
<!DOCTYPE html><html><head> <title>Testing JQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.css" /> <script src="http://code.jquery.com/jquery1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.js"></script></head> <body> <body> <div datarole="page" id="home">
<div datarole="header"> <h1>Testing...</h1> </div>
<div datarole="content"> <p>This is just some basic writing. This page is being written as I experiment with JQuery Mobile.</p> </div>
<div datarole="footer"> <h4>The end (home)...</h4> </div></div><div datarole="page" id="moreinfo">
<div datarole="header"> <h1>Testing the second page...</h1> </div>
<div datarole="content"> <p>I am putting a second page in the basic code so as you can see above there is a page with an id of home and there is a page with an id of moreinfo. I am showing you an experiment about how this works. Note that to see this second page, you can type #moreinfo after the address. Notice that when you do that and view the second page, the back button appears.</p> </div>
<div datarole="footer"> <h4>The end (moreinfo) ...</h4> </div></div><div datarole="page" id="contact">
<div datarole="header"> <h1>Testing the third page</h1> </div>
<div datarole="content"> <p>This is testing the third page in the basic code. This will show content so it will give the address of my web site which is www.pgrocer.net. Note that the page has an id of contact in this page. To see this page, you would enter #contact after the address of the page.</p> </div>
<div datarole="footer"> <h4>The end (contact)...</h4> </div></div></body></html>
JQueryBasic1with3.html
Note that I have set this up to include the information for three different pages. The thing that identifies the pages is the id.
![Page 5: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/5.jpg)
basicsSmartboard.notebook
5
August 30, 2013
Shows the default first page
![Page 6: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/6.jpg)
basicsSmartboard.notebook
6
August 30, 2013
Note #moreinfoand #content tosee the second andthird pages.
![Page 7: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/7.jpg)
basicsSmartboard.notebook
7
August 30, 2013
<!DOCTYPE html><html><head> <title>Testing JQuery Mobile</title>
<meta name="viewport" content="width=devicewidth, initialscale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.css" /> <script src="http://code.jquery.com/jquery1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.js"></script></head> <body> <body> <div datarole="page" id="home">
<div datarole="header"> <h1>Testing...</h1> </div>
<div datarole="content"> <p>This is just some basic writing. This page is being written as I experiment with JQuery Mobile.</p> <ul datarole="listview" datainset="true"> <li><a href="#moreinfo">More Information</a></li> <li><a href="#contact">Contact</a></li> </ul> </div>
<div datarole="footer"> <h4>The end (home)...</h4> </div></div><div datarole="page" id="moreinfo">
<div datarole="header"> <h1>Testing the second page...</h1> </div>
<div datarole="content"> <p>I am putting a second page in the basic code so as you can see above there is a page with an id of home and there is a page with an id of moreinfo. I am showing you an experiment about how this works. Note that to see this second page, you can type #moreinfo after the address. Notice that when you do that and view the second page, the back button appears.</p> </div>
<div datarole="footer"> <h4>The end (moreinfo) ...</h4> </div></div><div datarole="page" id="contact">
<div datarole="header"> <h1>Testing the third page</h1> </div>
<div datarole="content"> <p>This is testing the third page in the basic code. This will show content so it will give the address of my web site which is www.pgrocer.net. Note that the page has an id of contact in this page. To see this page, you would enter #contact after the address of the page.</p> </div>
<div datarole="footer"> <h4>The end (contact)...</h4> </div></div></body></html>
This gives me the links to the second and third pages.
<!DOCTYPE html><html><head> <title>Testing JQuery Mobile</title><!DOCTYPE html><html><head> <title>Testing JQuery Mobile</title> <meta name="viewport" content="width=devicewidth, initialscale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.css" /> <script src="http://code.jquery.com/jquery1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.js"></script></head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.css" /> <script src="http://code.jquery.com/jquery1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile1.0a1.min.js"></script></head>
Insert the meta line for clarity.
![Page 8: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/8.jpg)
basicsSmartboard.notebook
8
August 30, 2013
Now I have links to the other pages frompage one. I clicked on the links to bring upthe second and third pages.
![Page 9: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/9.jpg)
basicsSmartboard.notebook
9
August 30, 2013
Note the useof datatheme to change the look.Experiment with a, b, c, d and e for your datatheme.
![Page 10: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/10.jpg)
basicsSmartboard.notebook
10
August 30, 2013
This uses datarole of button.
![Page 11: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/11.jpg)
basicsSmartboard.notebook
11
August 30, 2013
It is recommended you use rel="external"for external pages.
![Page 12: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/12.jpg)
basicsSmartboard.notebook
12
August 30, 2013
See pages you arelinking to on followup Smartboard pages.
![Page 13: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/13.jpg)
basicsSmartboard.notebook
13
August 30, 2013
![Page 14: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/14.jpg)
basicsSmartboard.notebook
14
August 30, 2013
Note just the division is shown here.
![Page 15: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/15.jpg)
basicsSmartboard.notebook
15
August 30, 2013
![Page 16: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/16.jpg)
basicsSmartboard.notebook
16
August 30, 2013
![Page 17: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/17.jpg)
basicsSmartboard.notebook
17
August 30, 2013
Now I am bringingstyle to the page andlinking to an external image.
![Page 18: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/18.jpg)
basicsSmartboard.notebook
18
August 30, 2013
![Page 19: August 30, 2013cisweb.bristolcc.edu/~pgrocer/JQueryMobile/basics.pdfto the stylesheet and the JQuery libraries that set up JQuery Mobile for use. Note that we are using standard HTML5](https://reader030.fdocuments.us/reader030/viewer/2022040601/5e8f0a8d33d1c0664b1af1d0/html5/thumbnails/19.jpg)
basicsSmartboard.notebook
19
August 30, 2013
Note the table structure using scope.