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