edUI Conference: jQuery Mobile, Christine McClure

Thursday, October 13, 11



m.library.iit.eduThursday, October 13, 11

jQTouchiOSAndroid

iOSAndroid

RIM (BlackBerry)

Symbian

Windows Mobile

SamsungKindle

jQuery Mobile

...


<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>



<ul>


<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>


<ul>


http://code.jquery.com/jquery-1.6.2.min.js




<ul>






<div data-role="page"> <ul data-role="listview">

</div>






<div data-role="page"> <ul data-role="listview">

</div>





<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>


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.


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;


Under the Covers

$(function() { window.scrollTo( 0, 1 );


// 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


<li>

<a href="#hours">Hours & Location</a>

</li>

Under the Covers


<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


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>

<div data-role="page" id="hours"> <div data-role="content"> <p>This page will have all my hours information.</p> </div></div>

<div data-role="page" id="textbooks"> <div data-role="content"> <p>Search for textbooks here.</p> </div></div>


Https://www

Https://www

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>

<div data-role="page" id="hours"> <div data-role="content"> <p>This page will have all my hours information.</p> </div></div>

<div data-role="page" id="textbooks"> <div data-role="content"> <p>Search for textbooks here.</p> </div></div>


Https://www

Https://www

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>


http://m.library.iit.edu




https://m.carli.illinois.edu/vf-iit/

https://m.carli.illinois.edu/vf-iit/

https://m.carli.illinois.edu/vf-iit/MyResearch/CheckedOut




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>


<div data-role="page" id="feedback"> <div data-role="content">

</div></div>

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>


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>


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”;


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”;


Using Themes

content blocks

header and footer bars buttons


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>


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>


/* 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



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;}



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>



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;}


//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...


TAPClick

TAPHOLD

VCLICK(one event to rule them all)

Custom Events

Same as jQuery, but...

SWIPE


Testing . . . Testing . . .








Argh!


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';


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


Help is Available<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>


Help is Available

http://eisabainyo.net


http://eisabainyo.net/

http://eisabainyo.net/

By The Way...


By The Way...

TAPClick

TAPHOLD

VCLICK(one event to rule them all)

SWIPE


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();


Is JQM for You?

IIT’s McCormick Tribune Campus Center


Is JQM for You?


Is JQM for You?

51%

49%

Web AccessNo Web Access

88%

12%

SmartphoneNon-smartphone


Christine McClureDigital Services Librarian

[email protected]/camcclure


mailto:[email protected]

Education

edUI Conference: jQuery Mobile, Christine McClure