tag:blogger.com,1999:blog-1401929741474591242024-02-06T21:49:27.046-08:00jQuery MobileLibrary.Brookerookhttp://www.blogger.com/profile/15372088258326323764noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-140192974147459124.post-14249427357243382652012-03-15T11:54:00.001-07:002012-03-15T11:54:04.118-07:00Trillian as a Reference HubTrillian is a great service as a reference hub for electronic reference. It allows librarians to answer questions from many different services using a single program.<br />
<br />
<a href="https://docs.google.com/open?id=0B6MhWE1CXnMdN1hPcDdpSUtTVUNxYnByRTJWd2dHdw">Presentation Slides</a><br />
<br />
<a href="http://www.trillian.im/">Trillian on the Web</a>Library.Brookerookhttp://www.blogger.com/profile/15372088258326323764noreply@blogger.com0tag:blogger.com,1999:blog-140192974147459124.post-89575007402737632092012-03-13T08:48:00.004-07:002012-03-13T12:18:38.564-07:00jQuery Mobile: The Basics<span style="font-size: large;">Building a page</span><br />
<div>
<br /></div>
<div>
Building a basic page using jQuery Mobile requires a working knowledge of HTML and CSS, but doesn’t require knowledge of JavaScript or other more advanced coding and markup languages. For some elements, such as forms, some knowledge of PHP is helpful, but creating a basic mobile-enabled site doesn't require it.<br />
<br />
To start off, copy and paste the following into your HTML editor:<br />
<div style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">
<br /></div>
<br />
<div style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">
<script src="https://gist.github.com/2029444.js?file=jQM-Basic">
</script>
</div>
<br />
Open that file in your browser and voila--you've got a working mobile page!<br />
<br />
Within the head you might notice that the file is referencing the jQuery Mobile and jQuery libraries and the jQuery Mobile CSS file:<br />
<br />
<pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; line-height: 18px; margin-bottom: 2px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> </pre>
<span style="background-color: white; font-size: 12px; line-height: 18px;"><script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></span><br />
<br />
You can find the most up-to-date version of these files at the jQuery Mobile website under download: <a href="http://jquerymobile.com/download/">http://jquerymobile.com/download/</a>. There are two ways to access the jQuery mobile library--first is to simply link to the latest stable version of jQuery Mobile. You’ll periodically want to check for more recent versions and test these out with your page. Second is to host the files yourself. It’s possible to make changes to the jQuery Mobile library in order to customize how certain pieces of it behave, in which case you would want to host the file yourself.<br />
<br /></div>
<div>
Also included in the head is a meta viewport tag:<br />
<br />
<span style="background-color: white; font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;"><meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<br />
This tag will help the page adjust the page width to equal the screen size of the device someone is using to access your page. The viewport tag and much of the other code we’ll be looking at today are pieces of code that you can find directly in the jQuery Mobile documentation. http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-anatomy.html<br />
<br />
jQuery Mobile makes use of divs (divisions--I kind of think of them as content “buckets”) with a specified data-role attribute to identify elements of a page and display them in a certain way. Data-role is an HTML5 attribute. Each page is made up of a single “main” div with the data-role of page. Within the main page wrapper, there are three more divs stacked on top of each other, header, content and footer:<br />
<br />
<script src="https://gist.github.com/2030011.js?file=pagesnippet">
</script>
<br />
All of these are technically optional, so you can easily create a page without a header or footer if you would like to do so. You can use HTML pretty freely within each of these divs.<br />
<br /></div>
<div>
<span style="font-size: large;">Themes</span><br />
<br />
A page can also be assigned the attribute data-theme with a value of A-E to give jQuery Mobile a consistent styled look. jQuery Mobile has five default theme "swatches" available, but you can easily create a new theme with your own swatches using <a href="http://jquerymobile.com/themeroller/">jQuery's online themeroller</a>, which will help you create a custom CSS file which you can download and then upload to your own server, and then reference along with the jQuery libraries and CSS.<br />
<br />
<script src="https://gist.github.com/2030026.js?file=gistfile1.txt">
</script></div>
<div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This code will output like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhn5fUds32N_sUVzNDpeWebe7H77IPLD-8tkLXizpjYrtGokW34u5xiNKsi41ntvO-wG7Dz82lSN-g2-Fv-o3xWPMTkRJ6IWd8FFi3IJHpfjUhIqlX3f9pvUexKX6X1hG1jC5REAkaYI/s1600/screen.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhn5fUds32N_sUVzNDpeWebe7H77IPLD-8tkLXizpjYrtGokW34u5xiNKsi41ntvO-wG7Dz82lSN-g2-Fv-o3xWPMTkRJ6IWd8FFi3IJHpfjUhIqlX3f9pvUexKX6X1hG1jC5REAkaYI/s320/screen.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Basic mobile page.</td></tr>
</tbody></table>
<br />
<span style="font-size: large;"> Stacking Pages</span><br />
<br />
There are two ways to organize a website using jQuery Mobile. First, you can create a separate file for each page like you would if you were using just basic HTML to create a website. The second option is to stack multiple page divs inside a single HTML file. If you choose to use a single file, each page must be given a separate ID by giving the page div the attribute page-id with a unique value. This value will be used to link to and identify pages internally. To get to a particular page within a single file, you'll enter the file's URL followed by a number sign (pound sign/hash) and the page's id. For the page below, for instance, the URL would be http://people.cornellcollege.edu/bbergantzel/jquery_mobile/index.html#two.<br />
<br />
<script src="https://gist.github.com/2030109.js?file=twopages">
</script></div>
<div>
<br />
<span style="font-size: large;"> Creating a Listview</span><br />
<br />
One element often seen in mobile design is a linked menu or listview. jQuery Mobile makes these easy to create. You'll created a basic unordered list with list items than are also linked. To give the list the stylized look of a menu, simply add the data-role attribute with a value of "listview". Another attribute associated with the data-role of listview is data-inset, which can have a value of true or false. When set to true, the list is set in from the sides of the screen.<br />
<br />
<script src="https://gist.github.com/2030136.js?file=listview">
</script></div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWdWhWZHcNevwu7__xAdZWJHPxz6OFfu-in4bfuu6RVAW4vmTRTdAgNaZwr4KCoLN6pGaTnZi6U47E1jjR1MzTfS6_MWBNDsFcR7_cLO3YCw0zRBValVnUlbNuo0yOSTPNCr38Stw1vE/s1600/listview.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWdWhWZHcNevwu7__xAdZWJHPxz6OFfu-in4bfuu6RVAW4vmTRTdAgNaZwr4KCoLN6pGaTnZi6U47E1jjR1MzTfS6_MWBNDsFcR7_cLO3YCw0zRBValVnUlbNuo0yOSTPNCr38Stw1vE/s320/listview.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">An inset listview.</td></tr>
</tbody></table>
<br />
<span style="font-size: large;"> Creating a Button</span><br />
<br />
Creating a button is also as simple as giving an element the data-role attribute with a value of "button". In this case, the first button is a link format which will open up any available phone feature of the device with the number already entered, ready for the user to hit send. The second button is similar, but links to the phone's texting app instead.<br />
<br />
<script src="https://gist.github.com/2030237.js?file=buttons">
</script></div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiq1p3UO3PTVFnSnSWfhasEZtgKam1nYh1e5tbuxlPugDCs5-SRTu7-f9l8eQFfiFK5Mrsy5Mzqqc8ZZQmxsXL7H5vhCkRAqsQO1kD75Twi48KvCaAXc-Aw6MLmqChbg24nRCnaR1p1hA/s1600/buttons.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiq1p3UO3PTVFnSnSWfhasEZtgKam1nYh1e5tbuxlPugDCs5-SRTu7-f9l8eQFfiFK5Mrsy5Mzqqc8ZZQmxsXL7H5vhCkRAqsQO1kD75Twi48KvCaAXc-Aw6MLmqChbg24nRCnaR1p1hA/s320/buttons.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Buttons using above code.</td></tr>
</tbody></table>
<br />
<span style="font-size: large;"> Adding Buttons/Icons to the Header</span><br />
<br />
jQuery Mobile allows you to add buttons to the header fairly easily. One option is an automated back button. You can add this to the header by adding an attribute to the PAGE div--data-add-back-btn--and setting it to true. This button is automatically formatted and will point to whatever the previously visited page is.<br />
<br />
<div style="text-align: center;">
<div data-role="page" id="two" data-add-back-btn="true"></div>
<br />
Another useful ability to have is adding an icon to the right side of the header. You can do that by adding a link with data-icon and class attributes after the text in the header. The value for data-icon in this example is home, but there are a <a href="http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html">number of icons included with jQuery Mobile</a>. We're also using a CSS class, ui-btn-right, to place the button where we'd like it to appear.<br />
<br />
<script src="https://gist.github.com/2030867.js?file=homebutton">
</script><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWq3Xiy8J_QYcNe6EKJoQadUlQGcizFcrjaekQxhNvblHAMBIwLQ2PjNaNMNieAx1xIB_4wY7_Qy2VsthUPsYGG85JEsvRDmwqyPSyZr-9p48bxSQHn2jBvhP1V3PZTDxSgwcWi7Jy8E/s1600/headerbuttons.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWq3Xiy8J_QYcNe6EKJoQadUlQGcizFcrjaekQxhNvblHAMBIwLQ2PjNaNMNieAx1xIB_4wY7_Qy2VsthUPsYGG85JEsvRDmwqyPSyZr-9p48bxSQHn2jBvhP1V3PZTDxSgwcWi7Jy8E/s320/headerbuttons.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Back and Home buttons in the header.</td></tr>
</tbody></table>
<br />
<br /></div>
<div>
<span style="font-size: large;">Tutorials/Resources:</span><br />
<br />
Some Great References from jQuery<br />
<a href="http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/data-attributes.html">jQuery Mobile Attribute Reference List</a><br />
<a href="http://jquerymobile.com/resources/">jQuery Mobile Resource Page</a><br />
<a href="http://jquerymobile.com/demos/1.1.0-rc.1/">jQuery Mobile Documentation</a><br />
<br />
<br />
Mobile Guidelines<br />
<a href="http://www.w3.org/standards/webdesign/mobilweb">Mobile Web Design Standards from W3</a><br />
<br />
Mobile Library Websites<br />
<a href="http://musingsaboutlibrarianship.blogspot.com/2010/04/comparison-of-40-mobile-library-sites.html">What are mobile friendly library sites offering? A survey</a>. by Aaron Tay</div>
<div>
<a href="http://www.libsuccess.org/index.php?title=M-Libraries#Libraries_offering_mobile_interfaces_or_applications">Mobile Library Websites at the LibSuccessWiki</a><br />
<br />
More Advanced jQuery/Mobile Tutorials<br />
<a href="http://www.squidoo.com/php-mobile-redirect">PHP Mobile Detect/Redirect and View Full Site</a> at Squidoo<br />
<a href="http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile">Creating and using custom icons</a> in jQuery Mobile by Andy Matthews<br />
<a href="http://www.elijahmanor.com/2011/02/dynamically-appending-elements-to.html">Dynamically appending items to a listview</a> by Elijah Manor<br />
<a href="http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html">Using and Customizing jQuery Mobile Themes</a> by Matthew David<br />
<a href="http://www.giantflyingsaucer.com/blog/?p=2574">Submit a JQuery Mobile form via AJAX with PHP</a> by Chad Lung</div>Library.Brookerookhttp://www.blogger.com/profile/15372088258326323764noreply@blogger.com0