Thursday, October 13, 11
Thursday, October 13, 11
Thursday, October 13, 11
m.library.iit.eduThursday, October 13, 11
jQTouchiOSAndroid
iOSAndroid
RIM (BlackBerry)
Symbian
Windows Mobile
SamsungKindle
jQuery Mobile
...
Thursday, October 13, 11
<li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul>
<ul>
Thursday, October 13, 11
<li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul>
<ul>
Thursday, October 13, 11
<link rel="stylesheet" href="css/ jquery.mobile-1.0b3.css" /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><script src="js/ jquery.mobile-1.0b3.js"></script>
<li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul>
<ul>
Thursday, October 13, 11
<link rel="stylesheet" href="css/ jquery.mobile-1.0b3.css" /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><script src="js/ jquery.mobile-1.0b3.js"></script>
<li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul>
<ul>
Thursday, October 13, 11
<link rel="stylesheet" href="css/ jquery.mobile-1.0b3.css" /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><script src="js/ jquery.mobile-1.0b3.js"></script>
<li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul>
<div data-role="page"> <ul data-role="listview">
</div>
Thursday, October 13, 11
<link rel="stylesheet" href="css/ jquery.mobile-1.0b3.css" /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><script src="js/ jquery.mobile-1.0b3.js"></script>
<li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul>
<div data-role="page"> <ul data-role="listview">
</div>
Thursday, October 13, 11
Thursday, October 13, 11
<div data-role="page"> <ul data-role="listview"> <li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="#" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul></div>
Thursday, October 13, 11
Under the Covers// also handles swipeleft, swiperight$.event.special.swipe = { scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling. durationThreshold: 1000, // More time than this, and it isn't a swipe.
Thursday, October 13, 11
Under the Covers$.mobile.ajaxBlacklist = // BlackBerry browsers, pre-webkit window.blackberry && !window.WebKitPoint || // Opera Mini window.operamini && Object.prototype.toString.call( window.operamini ) === "[object OperaMini]" || // Symbian webkits pre 7.3 nokiaLTE7_3;
Thursday, October 13, 11
Under the Covers
$(function() { window.scrollTo( 0, 1 );
Thursday, October 13, 11
// create listview markup t.element.addClass(function( i, orig ) { return orig + " ui-listview " + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" ); });
.ui-listview { margin: 0; counter-reset: listnumbering; }
.ui-content .ui-listview { margin: -15px; }
.ui-content .ui-listview-inset { margin: 1em 0; }
.ui-listview, .ui-li { list-style:none; padding:0; }
.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
JavaScript
CSS
Under the Covers
Thursday, October 13, 11
<li>
<a href="#hours">Hours & Location</a>
</li>
Under the Covers
Thursday, October 13, 11
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"> <div class="ui-btn-inner ui-li"> <div class="ui-btn-text"> <a href="#hours" class="ui-link-inherit">Hours & Location</a> </div> <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span> </div></li>
Under the Covers
Thursday, October 13, 11
Adding More Pages<div data-role="page" id="home"> <ul data-role="listview"> <li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="https://www...">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul></div><!-- /page -->
<div data-role="page" id="hours"> <div data-role="content"> <p>This page will have all my hours information.</p> </div></div><!-- /page -->
<div data-role="page" id="textbooks"> <div data-role="content"> <p>Search for textbooks here.</p> </div></div><!-- /page -->
Thursday, October 13, 11
Adding More Pages<div data-role="page" id="home"> <ul data-role="listview"> <li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="https://www...">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul></div><!-- /page -->
<div data-role="page" id="hours"> <div data-role="content"> <p>This page will have all my hours information.</p> </div></div><!-- /page -->
<div data-role="page" id="textbooks"> <div data-role="content"> <p>Search for textbooks here.</p> </div></div><!-- /page -->
Thursday, October 13, 11
External pages
http://m.library.iit.edu#homehttp://m.library.iit.edu#https://m.carli.illinois.edu/vf-iit/
<div data-role="page" id="home"> <ul data-role="listview"> <li><a href="#hours">Hours & Location</a></li> <li><a href="#textbooks">Find Textbooks</a></li> <li><a href="https://m.carli.illinois.edu/vf-iit/CheckedOut" rel="external">Renew a Book</a></li> <li><a href="#search">Search</a></li> <li><a href="#news">Latest News</a></li> <li><a href="#contact">Contact</a></li> </ul></div><!-- /page -->
Thursday, October 13, 11
Elements
jquerymobile.com
<h1>Feedback</h1> <p id='feedbackText'>Have a comment about our new mobile site? We'd love to hear it!</p> <div id="formWrapper"> <form action="" method="post" id="contact_form" name="emailform"> <label for="name">Name:</label><input type="text" name="name" id="name" value="" /> <label for="email">Email:</label><input type="text" name="email" id="email" value="" /> <label for="message">Message:*</label><textarea cols="40" rows="8" name="message" id="message"></textarea> <p>* Required field</p> <button type="submit" id="feedback-button" data-theme="g" name="submit" value="submit">Send</button> </form> </div>
Thursday, October 13, 11
<div data-role="page" id="feedback"> <div data-role="content">
</div></div><!-- /page -->
Elements
jquerymobile.com
<h1>Feedback</h1> <p id='feedbackText'>Have a comment about our new mobile site? We'd love to hear it!</p> <div id="formWrapper"> <form action="" method="post" id="contact_form" name="emailform"> <label for="name">Name:</label><input type="text" name="name" id="name" value="" /> <label for="email">Email:</label><input type="text" name="email" id="email" value="" /> <label for="message">Message:*</label><textarea cols="40" rows="8" name="message" id="message"></textarea> <p>* Required field</p> <button type="submit" id="feedback-button" data-theme="g" name="submit" value="submit">Send</button> </form> </div>
Thursday, October 13, 11
Headers and Footers
<body> <header>" <h1>Hours & Location</h1> </header> <p>This page will have all my hours information.</p> <footer>" <a href="feedback.html">Feedback</a> </footer></body>
Thursday, October 13, 11
Headers and Footers
<div data-role="page" id="hours"> <div data-role="header"> <h1>Hours & Location</h1> </div> <div data-role="content"> <p>This page will have all my hours information.</p> </div> <div data-role="footer"> <a href="feedback.html">Feedback</a> </div> </div>
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = “Home”;
Thursday, October 13, 11
Headers and Footers
<div data-role="page" id="hours"> <div data-role="header"> <h1>Hours & Location</h1> </div> <div data-role="content"> <p>This page will have all my hours information.</p> </div> <div data-role="footer"> <a href="feedback.html">Feedback</a> </div> </div>
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = “Home”;
Thursday, October 13, 11
Using Themes
content blocks
header and footer bars buttons
Thursday, October 13, 11
Using Themes<div data-role="page" id="hours" data-theme="a"> <div data-role="header" data-theme="c"> <h1>Hours & Location</h1> </div> <div data-role="content" data-theme="e"> <p>This page will have all my hours information.</p> </div> <div data-role="footer" data-theme="b"> <a href="feedback.html">Feedback</a> </div> </div>
Thursday, October 13, 11
Using Themes<div data-role="page" id="hours" data-theme="a"> <div data-role="header" data-theme="c"> <h1>Hours & Location</h1> </div> <div data-role="content" data-theme="e"> <p>This page will have all my hours information.</p> </div> <div data-role="footer" data-theme="b"> <a href="feedback.html">Feedback</a> </div> </div>
Thursday, October 13, 11
/* A-----------------------------------------------------------------------------------------------------------*/ .ui-bar-a { border: 1px solid #2A2A2A; background: #111111; color: #ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */ background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */ background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */ background-image: linear-gradient(top, #3c3c3c, #111);}.ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a textarea,.ui-bar-a button { font-family: Helvetica, Arial, sans-serif;}
Creating a Custom Theme
1. Select and copy
Thursday, October 13, 11
Creating a Custom Theme
1. Select and copy
2. Rename
/* G - Custom theme for Galvin Library -----------------------------------------------------------------------------------------------------------*/ .ui-bar-g { border: 1px solid #2A2A2A; background: #111111; color: #ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */ background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */ background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */ background-image: linear-gradient(top, #3c3c3c, #111);}.ui-bar-g,.ui-bar-g input,.ui-bar-g select,.ui-bar-g textarea,.ui-bar-g button { font-family: Helvetica, Arial, sans-serif;}
Thursday, October 13, 11
Creating a Custom Theme
1. Select and copy
2. Rename
3. Use in HTML (when needed)
<div data-role="page" id="hours" data-theme="g"> <div data-role="header" data-theme="g"> <h1>Hours & Location</h1> </div> <div data-role="content"> <p>This page will have all my hours information.</p> </div> <div data-role="footer"> <a href="feedback.html">Feedback</a> </div> </div>
Thursday, October 13, 11
Creating a Custom Theme
1. Select and copy
2. Rename
3. Use in HTML (when needed)
4. Change CSS.ui-body-g { border: 1px solid #2A2A2A; /*lines inbetween list items*/ background: #1F1E1E; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal;}
Thursday, October 13, 11
//When filter by professor/e-resources is selected $('#filters').delegate('a', 'click',function(){ var filter = $(this).attr('id'); $('#listInfo').html('Refreshing list...'); if (filter.indexOf("Prof") !== -1 ) { ajax_filter_professor(courseNum); $('#showItems').removeClass('books courses booksProf eitems').addClass('profs'); }
Custom Events
Same as jQuery, but...
Thursday, October 13, 11
TAPClick
TAPHOLD
VCLICK(one event to rule them all)
Custom Events
Same as jQuery, but...
SWIPE
Thursday, October 13, 11
Testing . . . Testing . . .
Thursday, October 13, 11
Testing . . . Testing . . .
Thursday, October 13, 11
Testing . . . Testing . . .
Thursday, October 13, 11
Testing . . . Testing . . .
Thursday, October 13, 11
Argh!
Thursday, October 13, 11
Alone in the Wild West
OverlapStrange Clicks
$.mobile. defaultTransition = 'slide';
Changing Standards
Analytics Broken Home page: 50 hitsHours: 0 hitsTextbooks: 0 hits
$.mobile. defaultPageTransition = 'slide';
Thursday, October 13, 11
Help is Available
“Multiple click events causing navigation and form element issue – In certain situations, when tapping an element, tap/click events
seem to fire twice on links and is due to edge cases where the target of the touch event and mouse event don’t match due to how the browsers calculate tolerances for these events. This is most pronounced on Android 2.1”
--jQuery Mobile blog: June 27th, 2011
Thursday, October 13, 11
Help is Available<!-- Google Analytics for JQM, part 2 --><script type="text/javascript"> $('[data-role=page]').live('pageshow', function (event, ui) { try { var pageTracker = _gat._getTracker("UA-7129730-11"); pageTracker._trackPageview(event.target.id); } catch(err) { } });</script>
Thursday, October 13, 11
Help is Available
http://eisabainyo.net
Thursday, October 13, 11
By The Way...
Thursday, October 13, 11
By The Way...
TAPClick
TAPHOLD
VCLICK(one event to rule them all)
SWIPE
Thursday, October 13, 11
By The Way...
//When a list item is selected $('#showItems').delegate('li', 'click', function () { $('#searchTermField').html(searchBefore); if ($('#showItems').hasClass("courses")){ courseNum = (this).find('.course').text(); var profArr=new Array();
Thursday, October 13, 11
Is JQM for You?
IIT’s McCormick Tribune Campus Center
Thursday, October 13, 11
Is JQM for You?
Thursday, October 13, 11
Is JQM for You?
51%
49%
Web AccessNo Web Access
88%
12%
SmartphoneNon-smartphone
Thursday, October 13, 11