jQuery has successfully reached the world of mobile phones. It’s called jQuery Mobile, It’s incredibly easy to use, you just have to include the jQuery Mobile files in your header and add few data attributes to your markup and you’re all set. All styling is handled by jQuery and the ncluded CSS file, so you can create a complete mobile webpage in just a matter of minutes. In this example, we’re going to create a simple page that loads internal links using transition effects. The first steps will outline the generic usage of jQuery Mobile whereas the rest will take a peek at the specific elements used in the demo.
jQuery Mobile Files in Header
This straightforward; you just have to include the framework files. You can download them from the jQuery Mobile site or load the files from their own site or CDN, which will reduce bandwidth costs and keep your website speedy.
HTML markup attribute
Apply the data attribute tags to your HTML, where n is the feature you want to set.
<div data-role="page" data-theme="b"> <div data-role="header" data-theme="b"> <h1>My Site</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"> <li data-role="list-divider">Transition Effects</li> <li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li> <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li> <li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li> <li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li> <li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li> <li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li> </ul> <br /><br /> <ul data-role="listview" data-dividertheme="e"> <li data-role="list-divider">Seamless List (margin-less)</li> <li><a href="#" data-transition="slide">Example Item 1</a></li> <li><a href="#" data-transition="slide">Example Item 2</a></li> <li><a href="#" data-transition="slide">Example Item 3</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <h1>© Copyright Info or Site URL</h1> </div> </div>
The data-role elements specify which DIV/block should be used in favor of header, footer and content, all of which are in the main page wrapper. Here are the data attributes used in this example.
- Data-role – specifies the nature of the wrapper element that can be set to page, header, content and footer.
- Data-position – specifies whether the element should be fixed that renders at the top or bottom.
- Data-Inset – Specifies whether the element should be inside content margins or outside.
- Data-transition – Specifies which transition to use when new page loads. It can be set to slide, slideup, slidedown, pop, flip or fade.
- Data-theme – specifies which design theme to use for elements.
- Data-dividertheme – specifies the theme for the list dividers that uses same options as the data-theme.
Add content / Publish online
jQuery Mobie renders the same behaviors as the desktop browsers, You don’t really have to provide your smartphone though it could help ironing bugs.
The example above included is split into a header and footer file for the convenience, always feel free to use whatever coding method you prefer.
jQuery definitely begins to be part of our designing world today. So I won’t be surprise if the time came that even the smallest internet device reads jQuery.
Using Redis with Node.js
By Ivaylo Gerchev,
Need fast data interactions in your Node app? Learn how Redis speeds caching, message brokering, sessions, analytics, streaming and more.
Build a Website with React and Tailwind CSS
By Shahed Nasser,
React and Tailwind CSS: a beautiful relationship! Learn how Tailwind frees you from writing CSS so you can focus on your React components.
React Fragments: A Simple Syntax to Improve Performance
By Antonello Zanini,
React fragments provide a simple syntax to group a list of HTML elements without adding unnecessary nodes to the DOM. Here's how.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.