edUI Conference: jQuery Mobile, Christine McClure

m.library.iit.edu
Thursday, October 13, 11

jQTouch jQuery Mobile
iOS iOS
Android Android
RIM (BlackBerry)
Symbian
Windows Mobile
Samsung
Kindle
...


<ul>
<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">
<li><a href="#hours">Hours & Location</a></l
<li><a href="#textbooks">Find Textbooks</a><
<li><a href="#" rel="external">Renew a Book<
</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 );


Under the Covers
JavaScript
// create listview markup
t.element.addClass(function( i, orig ) {
return orig + " ui-listview " + ( t.options.inset ? "
ui-listview-inset ui-corner-all ui-shadow " : "" );
});

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


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>


Adding More Pages
<div data-role="page" id="home">
<li><a href="https://www...">Renew a Book</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">
<p>Search for textbooks here.</p>
</div>
</div>

External pages
<div data-role="page" id="home">
<li><a href="https://m.carli.illinois.edu/vf-iit/
CheckedOut" rel="external">Renew a Book</a></li>
</ul>
</div>

http://m.library.iit.edu#home
http://m.library.iit.edu#https://m.carli.illinois.edu/vf-iit/

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

jquerymobile.com

Elements
<div data-role="page" id="feedback">
<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>
</div>

jquerymobile.com

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

header and content
buttons
footer bars blocks


Using Themes
<div data-role="page" id="hours" data-theme="a">
<div data-role="header" data-theme="c">
</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">
</div>
</div>


Creating a Custom Theme
/* A
-------------------------------------------------------------
----------------------------------------------*/

1. Select and copy
.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;
}


/* G - Custom theme for Galvin Library
-------------------------------------------------------------
----------------------------------------------*/

1. Select and copy
.ui-bar-g {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
2. Rename 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 <div data-role="page" id="hours" data-theme="g">
<div data-role="header" data-theme="g">
</div>
3. Use in HTML <div data-role="content">
(when needed) information.</p>
</div>
<div data-role="footer">
</div>
</div>



1. Select and copy

2. Rename

3. Use in HTML
(when needed)
.ui-body-g {
border: 1px solid #2A2A2A; /*lines inbetween list
4. Change CSS items*/
background: #1F1E1E;
color: #fff;
text-shadow: 0 1px 0 #000;
font-weight: normal;
}


Custom Events

Same as jQuery, but...

//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... Click
TAP
TAPHOLD
SWIPE
VCLICK
(one event to rule them all)


Testing . . . Testing . . .


Argh!


Alone in the Wild West

Strange Overlap Clicks

Changing Standards
$.mobile. $.mobile.
defaultTransition = defaultPageTransition
'slide'; = 'slide';

Analytics Broken Home page: 50 hits
Hours: 0 hits
Textbooks: 0 hits


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


By The Way...


By The Way...
Click
TAP
TAPHOLD
SWIPE
VCLICK
(one event to rule them all)


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?
Web Access Smartphone
No Web Access Non-smartphone

12%

51%

49%

88%


Christine McClure
Digital Services Librarian

cmcclur1@iit.edu
slideshare.net/camcclure


edUI Conference: jQuery Mobile, Christine McClure

More Related Content

Viewers also liked

Recently uploaded

edUI Conference: jQuery Mobile, Christine McClure