HTML5 and jQuery Mobile Shortcut and Tip Sheet

This entry was posted Saturday, 19 January, 2013 at 5:33 pm by Mario Lurig

jQuery MobileI’ve been exploring jQuery Mobile lately and consequently, HTML5 and mobile HTML design. What I’ve come to realize is that the framework is incredibly powerful and looks fantastic! I first looked at it almost 2 years ago and was overwhelmed, so either it has gotten that much better, or I have. Either way, I’m incredibly satisfied.

While developing an inventory management system for wholesalers (including myself and Dice Candies), I also decided to build a web-app for NovelRank’s Pro accounts. Through all of this development I made some notes about the most common HTML5 code I used that saved me a lot of time from going back to the documentation. This also included the headers I use specifically for mobile design. Without further adieu, here are my shortcut tips for jQuery Mobile and HTML5:

<!-- ***  Written in HTML5 *** -->
 
<!-- Button - dialog - slidedown - inline + mini w/ checkmark -->
<span><a href='#' data-rel='dialog' data-transition='slidedown' data-role='button' data-icon='check' data-inline='true' data-mini='true' data-theme='b'>TEXT</a></span>
<!-- Button (blue) - inline (not the full width) -->
<span><a href='#' data-role='button' data-inline='true' data-theme='b'>TEXT</a></span>
<!--  Start a Listview -->
<ul data-role='listview' data-theme='c'>
<!--  List element as pseudo BACK button -->
<li data-theme='a'><a href='#'>Back</a></li>
<!--  List element with COUNT present -->
<li>TEXT<span class='ui-li-count'>VALUEGOESHERE</span></li>
<!--  List DIVIDER -->
<li data-role='list-divider'>Inventory</li>
<!--  Disable AJAX processing on FORM -->
<form data-ajax='false' method='post' action='#' id='form_name' name='form_name'>
<!--  Fixed FOOTER with ACTIVE links for NAVigation -->
<div data-role='footer' data-position='fixed' data-id='fixed-footer'>
	<div data-role='navbar'>
		<ul>
			<li><a href='#' class='ui-btn-active ui-state-persist'>TEXT</a></li>
			<li><a href='#'>TEXT</a></li>
		</ul>
	</div>
</div><!-- /footer -->
<!--  List with SEARCH and custom keyword: Search -->
<ul data-role='listview' data-filter='true' data-filter-placeholder='Search' data-theme='c'>
<!--  List element with extra keywords for searching -->
<li data-filtertext='KEYWORDS'><a href='#'>TEXT</a></li>
<!--  Hidden LABEL for input -->
<label for='input_name' class='ui-hidden-accessible'>TEXT</label>
<!--   -->
 
<!-- Common Header Info for HTML5 Mobile Web App -->
<!doctype html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-us" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta NAME="robots" CONTENT="noindex, nofollow">
	<title>TEXT</title>
	<meta name="author" content="Mario Lurig - http://mariolurig.com/" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" /><!-- 129x129 -->
	<link rel="apple-touch-startup-image" href="/startup.png"><!-- 320x460 -->
</head> 
 
<!--  Input TYPEs for differing keyboards -->
<input type='date' name='date' id='date' value='2012-01-01' />
<input type='time' name='time' id='time' value='12:00:00' />
<input type='text' name='text' id='text' value='readonly' readonly /><!-- readonly can't be edited, MAYBE the same as disabled='disabled' -->
<input type='datetime-local' name='datetime-local' id='datetime-local' value='2012-01-01 12:00:00' />
<input type='url' name='url' id='url' placeholder='Enter URL' /><!-- placeholder automatically disappears when input begins or default value is present -->
<input type='email' name='email' id='email' autofocus /><!-- autofocus only added as an example; not required -->
<input type='tel' name='tel' id='tel' /> <!-- Keypad for integers only -->
<input type='number' name='number' id='number' /> <!-- numbers and symbols -->
<input type='range' name='range' id='range' min='0' max='50' /><!-- HTML5 slider, not as nice as jQueryMobile version -->
Share and Enjoy:
  • Facebook
  • Twitter
  • Reddit
  • StumbleUpon
  • Digg
  • del.icio.us
  • Tumblr
  • PDF

No comments yet.

Leave a comment