14. 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
15. 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
16. Under the Covers
$(function() {
window.scrollTo( 0, 1 );
Thursday, October 13, 11
23. 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
Thursday, October 13, 11
24. Elements
<div data-role="page" id="feedback">
<div data-role="content">
<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><!-- /page -->
jquerymobile.com
Thursday, October 13, 11
25. 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
26. 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
27. 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
28. Using Themes
header and content
buttons
footer bars blocks
Thursday, October 13, 11
29. 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
30. 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
33. Creating a Custom Theme
1. Select and copy
2. Rename <div data-role="page" id="hours" data-theme="g">
<div data-role="header" data-theme="g">
<h1>Hours & Location</h1>
</div>
3. Use in HTML <div data-role="content">
<p>This page will have all my hours
(when needed) information.</p>
</div>
<div data-role="footer">
<a href="feedback.html">Feedback</a>
</div>
</div>
Thursday, October 13, 11
34. Creating a Custom Theme
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;
}
Thursday, October 13, 11
35. 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');
}
Thursday, October 13, 11
36. Custom Events
Same as jQuery, but... Click
TAP
TAPHOLD
SWIPE
VCLICK
(one event to rule them all)
Thursday, October 13, 11
42. 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
Thursday, October 13, 11
43. 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
44. 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
47. By The Way...
Click
TAP
TAPHOLD
SWIPE
VCLICK
(one event to rule them all)
Thursday, October 13, 11
48. 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
49. Is JQM for You?
IIT’s McCormick Tribune Campus Center
Thursday, October 13, 11