jQuery mobile cheat sheet

Posted on April 23, 2011 by brooky

上一篇文章介紹了如何用 jQuery Mobile 快速開發 mobile 網站，但 jQuery Mobile 提供的元件實在是不少，這篇文章主要是整理一個簡單的 cheat sheet, 讓使用 jQuery Mobile 開發的人可以方便地使用。（This article is greatly inspired by the great jQuery Mobile tutorial by C. Enrique Ortiz）

jQuery Mobile UI Cheat Sheet

jQuery Mobile Basic Syntax

Component

Sample

HTML5 data-* attribute

Empty page (mhtml)

<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">header</div>
<div data-role="content">content</div>
<div data-role="footer">footer</div>
</div>
</body>
</html>

Header, content, footer

jQuery mobile with header content footer

<div data-role="header">header</div>
<div data-role="content">content</div>
<div data-role="footer">footer</div>

Buttons

Component	Sample	HTML5 data-* attribute
styling links as buttons (linkbtn)		code <a href="index.html" data-role="button">Link button</a>
icon buttons (iconbtn)	For a detailed list of available icon name, please check full icon name list.	code <div data-role="controlgroup" data-type="horizontal" > <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> <a href="index.html" data-role="button" data-icon="delete">Delete</a> </div>
grouped buttons (groupbtn)		code <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
inline buttons (inlinebtn)		code <div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a> </div>
horizontal buttons (hrbtn)		code <div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
form buttons	input with a type of submit, reset, button, or image will be convert to buttons automatically	code <input type="submit" />

Form Elements

Component	Sample	HTML5 data-* attribute
Select menu (mselect)		code <div data-role="fieldcontain"> <label for="name" class="select">Choose:</label> <select id="name" name="select" data-native-menu="false"> <option value="value1">option1</option> <option value="value2">option2</option> <option value="value3">option3</option> </select> </div>
Flip toggle switches (mflip)		code <div data-role="fieldcontain"> <label for="slider">Select slider:</label> <select name="slider" id="slider" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div>
Slider (mslider)		code <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div>
Search (msearch)		code <div data-role="fieldcontain"> <label for="search">Search Input:</label> <input type="search" name="password" id="search" value="" /> </div>
Text input (mtext)		code <div data-role="fieldcontain"> <label for="text">Text Input:</label> <input type="text" id="text" name="name" value="" /> </div>
Text area		code <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"> </textarea> </div>
HTML5 input types such as email, tel, number, url, … (memail, mtel, mnumber, murl)		code <div data-role="fieldcontain"> <label for="email">Text Input:</label> <input type="email" id="email" name="email" value="" /> </div>
Vertical grouped radio buttons (mradio)		code <fieldset data-role="controlgroup"> <legend>Choose:</legend> <input type="radio" name="radio" id="radio1" value="1" checked="checked" /> <label for="radio1">option 1</label> <input type="radio" name="radio" id="radio2" id="radio2" value="2" /> <label for="radio2">option 3</label> <input type="radio" name="radio" id="radio3" id="radio3" value="3" /> <label for="radio3">option 4</label> </fieldset>
Horizontal radio button (mhrradio)		code <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Choose:</legend> <input type="radio" name="radio" id="radio1" value="1" checked="checked" /> <label for="radio1">option 1</label> <input type="radio" name="radio" id="radio2" id="radio2" value="2" /> <label for="radio2">option 3</label> <input type="radio" name="radio" id="radio3" id="radio3" value="3" /> <label for="radio3">option 4</label> </fieldset> </div>
Checkbox (mcheckbox)		code <fieldset data-role="controlgroup"> <legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">I agree</label> </fieldset>
Native form element & buttons		code <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" data-role="none" /> <label for="checkbox-1">I agree</label> </fieldset> </div>
form with ajax off (mform)		code <form method="" action="test.php" data-ajax="false"> <button type="submit" data-theme="a" name="submit" value="submit-value">Submit</button> </form>

List views

Component	Sample	HTML5 data-* attribute
Basic list views (listview)		code <ul data-role="listview" data-theme="a"> <li><a href="item1.html">item1</a></li> <li><a href="item1.html">item1</a></li> <li><a href="item1.html">item1</a></li> </ul>
List view with thumbnail (listthumb)		code <ul data-role="listview"> <li><a href="index.html"> <img src="images/sample.jpg" title="sample"/> <h3>Sample image</h3> <p>Sample</p> </a></li> <li><a href="index.html"> <img src="images/sample.jpg" title="sample"/> <h3>Sample image</h3> <p>Sample 2</p> </a></li> </ul>
List view with icon (listicon)		code <ul data-role="listview" data-inset="true"> <li> <a href="index.html"> <img src="images/icon1.png" alt="icon1" class="ui-li-icon">icon1 <span class="ui-li-count">4</span> </a> </li> <li> <a href="index.html"> <img src="images/icon2.png" alt="icon2" class="ui-li-icon">icon2 <span class="ui-li-count">4</span> </a> </li> </ul>
List view with bubble (listbubble)		code <ul data-role="listview"> <li> <a href="index.html">Index<span class="ui-li-count">10</span></a> </li> <li> <a href="index.html">Index<span class="ui-li-count">10</span></a> </li> <li> <a href="index.html">Index<span class="ui-li-count">10</span></a> </li> </ul>
List view with divider (listdivider)		code <ul data-role="listview" data-filter="true"> <li data-role="list-divider">A</li> <li><a href="index.html">Adam Kinkaid</a></li> <li><a href="index.html">Alex Wickerham</a></li> <li data-role="list-divider">B</li> <li><a href="index.html">Bob Cabot</a></li> <li><a href="index.html">Bob Cabot</a></li> </ul>
Inset list view (listinset)		code <ul data-role="listview" data-theme="b" data-inset="true"> <li><a href="item1.html">item1</a></li> <li><a href="item1.html">item1</a></li> <li><a href="item1.html">item1</a></li> </ul>

Dialog

Component	Sample	HTML5 data-* attribute
Open dialog (dialog)		code <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
Close dialog		code <a href="#" data-rel="back">Back</a> or $('.ui-dialog').dialog('close')

Toolbars

Component	Sample	HTML5 data-* attribute
Navigation bar (navbar)		code <div data-role="navbar"> <ul> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> </ul> </div><!-- /navbar -->
Navigation bar in header (navheader)		code <div data-role="header" data-position="fixed"> <h1>I'm a header</h1> <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a> <div data-role="navbar"> <ul> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> </ul> </div><!-- /navbar --> </div><!-- /header -->
Icons in navigation bars (navicon)		code <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li> <li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top">Favs</a></li> <li><a href="#" data-icon="gear" data-iconpos="top">Setup</a></li> </ul> </div><!-- /navbar --> </div>
Fixed navigation bar (navfixed)		code <div data-role="footer" data-id="foo1" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-state-persist">Friends</a></li> <li><a href="#">Albums</a></li> <li><a href="#">Emails</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->
Persistent navigation bar (navpers)		code <div data-role="footer" data-id="foo1" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-state-persist">Friends</a></li> <li><a href="#">Albums</a></li> <li><a href="#">Emails</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->
Full screen with home icon		code <div data-role="page" data-fullscreen="true"> <div data-role="header" data-position="fixed"> <h1>Fullscreen fixed header</h1> <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a> </div> <div data-role="content"> Lorem ipsum utamur vocibus an vel, ea vix oportere torquatos, dolor intellegam efficiantur no mea. Elitr recusabo vis in. Id tale novum euismod vim. Mediocrem conclusionemque sit ei, eu has modo saepe quaerendum. Iusto omnium sit in, omittam accusata sit et. Eam ut tale atqui disputationi. Usu i n antiopam delicatissimi, nam et dolore perpetua. </div> <div data-role="footer" data-position="fixed"> <h1>Fullscreen fixed footer</h1> </div> </div>
Using 3rd party icon sets		code <style type="text/css"> .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; } .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; } #chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; } #email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; } #login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; } #beer .ui-icon { background: url(glyphish-icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; } #coffee .ui-icon { background: url(glyphish-icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; } #skull .ui-icon { background: url(glyphish-icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; } </style> <div data-role="footer" class="nav-glyphish-example"> <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> <ul> <li><a href="#" id="chat" data-icon="custom">Chat</a></li> <li><a href="#" id="email" data-icon="custom">Email</a></li> <li><a href="#" id="skull" data-icon="custom">Danger</a></li> <li><a href="#" id="beer" data-icon="custom">Beer</a></li> <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li> </ul> </div> </div>

Layout

Component

Sample

HTML5 data-* attribute

2 columns layout (3col)

jQuery mobile content layout - 2 column

<div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

3 columns layout (3col)

jQuery Mobile content layout - 3column

<div class="ui-grid-b">
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Collapsible

jQuery Mobile collapsible content

 <div data-role="collapsible" data-collapsed="true">
     <h3>I'm a header</h3>
     <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
 </div>

This entry was posted in Mobile, Programming and tagged jquery mobile, mobile, programming. Bookmark the permalink.

28 Responses to jQuery mobile cheat sheet

Matanza Facil says:

April 27, 2011 at 4:20 am

This is an excellent summary. Because jQuery Mobile modifies the DOM and changes the generated code so much, the code samples you provided are excellent.

Reply
steve says:

May 8, 2011 at 1:24 am

This is great! Thanks for putting this together. I like the simplicity of the layout, and the code samples that you provide are excellent!

Reply
Forrest says:

May 8, 2011 at 2:12 am

Thanks for the resource!

Reply
ppshein says:

May 12, 2011 at 3:32 pm

Good cheat sheet for jQueryMobile. But pdf version will be useful for offline purpose.

Reply
Pingback: Friday Links #152 | Blue Onion Software *
J says:

May 14, 2011 at 2:35 pm

an excellent resource. as above, the jquery mobile docs/examples aren’t always easy to follow as they don’t show examples of the plain markup!

thank you for sharing!

Reply
Pingback: Interesting jQuery Mobile Tutorials
sylvain says:

June 10, 2011 at 1:39 am

Super job great work!!!!!!!!!!!!!!!!!!!!!!

Reply
Michael Horne says:

July 25, 2011 at 4:58 pm

Thanks for this – took me ages to find something like this! Linked from my blog

Reply
Rhett says:

August 7, 2011 at 4:12 pm

Thanks a lot, this will save an enormous amount of effort as the actual doco is reasonably difficult to obtain source from.

Reply
Carl says:

August 11, 2011 at 2:58 am

Great Reference I wish Jquery Mobile Official Site was outlines Like This!!!!!!

Reply
Pingback: jQuery Mobile Example Sites | Greg Stephens Blog
asp.net, c#,javascript says:

September 30, 2011 at 12:42 pm

Hi, Neat post. There’s an issue with your site in internet explorer, would test this? IE still is the marketplace chief and a good component of folks will miss your fantastic writing due to this problem.

Reply
Anwar says:

October 4, 2011 at 4:46 pm

This is excellent ! Thanks.

Reply
Pingback: jQuery Mobile Framework | Musings of a 21st Century Renaissance Man
sofian says:

October 25, 2011 at 8:19 pm

Excellent work….. Thank you very much…. it makes me so much excited…

Reply
Pingback: jQuery Mobile Cheat Sheet « Jquery For Mobile « Jquery Platforms
FatherStorm says:

January 27, 2012 at 2:42 am

If you’re like me, you found that it’s a pain to recreate the css for the glyphish styles. so if you’re me, you write a script to do it for you. here’s my rendered css

.icon-refresh { background: url(/jquerymobile/glyphish/01-refresh.png) 50% 50% no-repeat; background-size: 24px 26px; } .icon-redo { background: url(/jquerymobile/glyphish/02-redo.png) 50% 50% no-repeat; background-size: 30px 26px; } .icon-loopback { background: url(/jquerymobile/glyphish/03-loopback.png) 50% 50% no-repeat; background-size: 32px 22px; } .icon-squiggle { background: url(/jquerymobile/glyphish/04-squiggle.png) 50% 50% no-repeat; background-size: 33px 16px; } .icon-shuffle { background: url(/jquerymobile/glyphish/05-shuffle.png) 50% 50% no-repeat; background-size: 28px 20px; } .icon-magnify { background: url(/jquerymobile/glyphish/06-magnify.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-map-marker { background: url(/jquerymobile/glyphish/07-map-marker.png) 50% 50% no-repeat; background-size: 16px 26px; } .icon-chat { background: url(/jquerymobile/glyphish/08-chat.png) 50% 50% no-repeat; background-size: 24px 22px; } .icon-chat-2 { background: url(/jquerymobile/glyphish/09-chat-2.png) 50% 50% no-repeat; background-size: 24px 22px; } .icon-medical { background: url(/jquerymobile/glyphish/10-medical.png) 50% 50% no-repeat; background-size: 22px 22px; } .icon-coffee { background: url(/jquerymobile/glyphish/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; } .icon-gameplan { background: url(/jquerymobile/glyphish/101-gameplan.png) 50% 50% no-repeat; background-size: 28px 28px; } .icon-walk { background: url(/jquerymobile/glyphish/102-walk.png) 50% 50% no-repeat; background-size: 14px 27px; } .icon-map { background: url(/jquerymobile/glyphish/103-map.png) 50% 50% no-repeat; background-size: 26px 21px; } .icon-index-cards { background: url(/jquerymobile/glyphish/104-index-cards.png) 50% 50% no-repeat; background-size: 26px 17px; } .icon-piano { background: url(/jquerymobile/glyphish/105-piano.png) 50% 50% no-repeat; background-size: 23px 22px; } .icon-sliders { background: url(/jquerymobile/glyphish/106-sliders.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-widescreen { background: url(/jquerymobile/glyphish/107-widescreen.png) 50% 50% no-repeat; background-size: 30px 19px; } .icon-badge { background: url(/jquerymobile/glyphish/108-badge.png) 50% 50% no-repeat; background-size: 21px 26px; } .icon-chicken { background: url(/jquerymobile/glyphish/109-chicken.png) 50% 50% no-repeat; background-size: 28px 12px; } .icon-clock { background: url(/jquerymobile/glyphish/11-clock.png) 50% 50% no-repeat; background-size: 25px 25px; } .icon-bug { background: url(/jquerymobile/glyphish/110-bug.png) 50% 50% no-repeat; background-size: 22px 23px; } .icon-user { background: url(/jquerymobile/glyphish/111-user.png) 50% 50% no-repeat; background-size: 24px 21px; } .icon-group { background: url(/jquerymobile/glyphish/112-group.png) 50% 50% no-repeat; background-size: 32px 21px; } .icon-navigation { background: url(/jquerymobile/glyphish/113-navigation.png) 50% 50% no-repeat; background-size: 28px 28px; } .icon-balloon { background: url(/jquerymobile/glyphish/114-balloon.png) 50% 50% no-repeat; background-size: 20px 26px; } .icon-bow-and-arrow { background: url(/jquerymobile/glyphish/115-bow-and-arrow.png) 50% 50% no-repeat; background-size: 23px 29px; } .icon-controller { background: url(/jquerymobile/glyphish/116-controller.png) 50% 50% no-repeat; background-size: 30px 20px; } .icon-todo { background: url(/jquerymobile/glyphish/117-todo.png) 50% 50% no-repeat; background-size: 18px 19px; } .icon-coat-hanger { background: url(/jquerymobile/glyphish/118-coat-hanger.png) 50% 50% no-repeat; background-size: 32px 20px; } .icon-piggy-bank { background: url(/jquerymobile/glyphish/119-piggy-bank.png) 50% 50% no-repeat; background-size: 27px 20px; } .icon-eye { background: url(/jquerymobile/glyphish/12-eye.png) 50% 50% no-repeat; background-size: 24px 16px; } .icon-headphones { background: url(/jquerymobile/glyphish/120-headphones.png) 50% 50% no-repeat; background-size: 22px 21px; } .icon-landscape { background: url(/jquerymobile/glyphish/121-landscape.png) 50% 50% no-repeat; background-size: 24px 18px; } .icon-stats { background: url(/jquerymobile/glyphish/122-stats.png) 50% 50% no-repeat; background-size: 27px 19px; } .icon-id-card { background: url(/jquerymobile/glyphish/123-id-card.png) 50% 50% no-repeat; background-size: 24px 17px; } .icon-bullhorn { background: url(/jquerymobile/glyphish/124-bullhorn.png) 50% 50% no-repeat; background-size: 24px 17px; } .icon-food { background: url(/jquerymobile/glyphish/125-food.png) 50% 50% no-repeat; background-size: 29px 23px; } .icon-moon { background: url(/jquerymobile/glyphish/126-moon.png) 50% 50% no-repeat; background-size: 19px 22px; } .icon-sock { background: url(/jquerymobile/glyphish/127-sock.png) 50% 50% no-repeat; background-size: 17px 24px; } .icon-bone { background: url(/jquerymobile/glyphish/128-bone.png) 50% 50% no-repeat; background-size: 30px 13px; } .icon-golf { background: url(/jquerymobile/glyphish/129-golf.png) 50% 50% no-repeat; background-size: 29px 26px; } .icon-target { background: url(/jquerymobile/glyphish/13-target.png) 50% 50% no-repeat; background-size: 28px 28px; } .icon-dice { background: url(/jquerymobile/glyphish/130-dice.png) 50% 50% no-repeat; background-size: 35px 28px; } .icon-tower { background: url(/jquerymobile/glyphish/131-tower.png) 50% 50% no-repeat; background-size: 15px 24px; } .icon-ghost { background: url(/jquerymobile/glyphish/132-ghost.png) 50% 50% no-repeat; background-size: 20px 24px; } .icon-ufo { background: url(/jquerymobile/glyphish/133-ufo.png) 50% 50% no-repeat; background-size: 24px 26px; } .icon-viking { background: url(/jquerymobile/glyphish/134-viking.png) 50% 50% no-repeat; background-size: 26px 17px; } .icon-hockeymask { background: url(/jquerymobile/glyphish/135-hockeymask.png) 50% 50% no-repeat; background-size: 20px 26px; } .icon-tractor { background: url(/jquerymobile/glyphish/136-tractor.png) 50% 50% no-repeat; background-size: 35px 25px; } .icon-presentation { background: url(/jquerymobile/glyphish/137-presentation.png) 50% 50% no-repeat; background-size: 28px 26px; } .icon-scales { background: url(/jquerymobile/glyphish/138-scales.png) 50% 50% no-repeat; background-size: 26px 20px; } .icon-flags { background: url(/jquerymobile/glyphish/139-flags.png) 50% 50% no-repeat; background-size: 42px 21px; } .icon-tag { background: url(/jquerymobile/glyphish/14-tag.png) 50% 50% no-repeat; background-size: 22px 22px; } .icon-gradhat { background: url(/jquerymobile/glyphish/140-gradhat.png) 50% 50% no-repeat; background-size: 30px 23px; } .icon-lamp { background: url(/jquerymobile/glyphish/141-lamp.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-wine-bottle { background: url(/jquerymobile/glyphish/142-wine-bottle.png) 50% 50% no-repeat; background-size: 10px 28px; } .icon-liquor-bottle { background: url(/jquerymobile/glyphish/143-liquor-bottle.png) 50% 50% no-repeat; background-size: 16px 24px; } .icon-martini { background: url(/jquerymobile/glyphish/144-martini.png) 50% 50% no-repeat; background-size: 22px 24px; } .icon-persondot { background: url(/jquerymobile/glyphish/145-persondot.png) 50% 50% no-repeat; background-size: 24px 26px; } .icon-gavel { background: url(/jquerymobile/glyphish/146-gavel.png) 50% 50% no-repeat; background-size: 23px 23px; } .icon-popsicle { background: url(/jquerymobile/glyphish/147-popsicle.png) 50% 50% no-repeat; background-size: 16px 27px; } .icon-doghouse { background: url(/jquerymobile/glyphish/148-doghouse.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-windmill { background: url(/jquerymobile/glyphish/149-windmill.png) 50% 50% no-repeat; background-size: 24px 30px; } .icon-tags { background: url(/jquerymobile/glyphish/15-tags.png) 50% 50% no-repeat; background-size: 24px 25px; } .icon-sailboat { background: url(/jquerymobile/glyphish/150-sailboat.png) 50% 50% no-repeat; background-size: 26px 24px; } .icon-telescope { background: url(/jquerymobile/glyphish/151-telescope.png) 50% 50% no-repeat; background-size: 23px 24px; } .icon-rolodex { background: url(/jquerymobile/glyphish/152-rolodex.png) 50% 50% no-repeat; background-size: 26px 18px; } .icon-guitar { background: url(/jquerymobile/glyphish/153-guitar.png) 50% 50% no-repeat; background-size: 26px 26px; } .icon-necktie { background: url(/jquerymobile/glyphish/154-necktie.png) 50% 50% no-repeat; background-size: 8px 27px; } .icon-bowtie { background: url(/jquerymobile/glyphish/155-bowtie.png) 50% 50% no-repeat; background-size: 30px 15px; } .icon-controlpad { background: url(/jquerymobile/glyphish/156-controlpad.png) 50% 50% no-repeat; background-size: 30px 23px; } .icon-wrench { background: url(/jquerymobile/glyphish/157-wrench.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-wrench-2 { background: url(/jquerymobile/glyphish/158-wrench-2.png) 50% 50% no-repeat; background-size: 22px 22px; } .icon-voicemail { background: url(/jquerymobile/glyphish/159-voicemail.png) 50% 50% no-repeat; background-size: 32px 14px; } .icon-line-chart { background: url(/jquerymobile/glyphish/16-line-chart.png) 50% 50% no-repeat; background-size: 30px 24px; } .icon-voicemail-2 { background: url(/jquerymobile/glyphish/160-voicemail-2.png) 50% 50% no-repeat; background-size: 26px 18px; } .icon-calculator { background: url(/jquerymobile/glyphish/161-calculator.png) 50% 50% no-repeat; background-size: 22px 28px; } .icon-receipt { background: url(/jquerymobile/glyphish/162-receipt.png) 50% 50% no-repeat; background-size: 17px 23px; } .icon-glasses-1 { background: url(/jquerymobile/glyphish/163-glasses-1.png) 50% 50% no-repeat; background-size: 30px 23px; } .icon-glasses-2 { background: url(/jquerymobile/glyphish/164-glasses-2.png) 50% 50% no-repeat; background-size: 30px 22px; } .icon-glasses-3 { background: url(/jquerymobile/glyphish/165-glasses-3.png) 50% 50% no-repeat; background-size: 32px 12px; } .icon-newspaper { background: url(/jquerymobile/glyphish/166-newspaper.png) 50% 50% no-repeat; background-size: 28px 23px; } .icon-upload-photo { background: url(/jquerymobile/glyphish/167-upload-photo.png) 50% 50% no-repeat; background-size: 24px 17px; } .icon-upload-photo-2 { background: url(/jquerymobile/glyphish/168-upload-photo-2.png) 50% 50% no-repeat; background-size: 22px 25px; } .icon-8ball { background: url(/jquerymobile/glyphish/169-8ball.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-bar-chart { background: url(/jquerymobile/glyphish/17-bar-chart.png) 50% 50% no-repeat; background-size: 29px 24px; } .icon-butterfly { background: url(/jquerymobile/glyphish/170-butterfly.png) 50% 50% no-repeat; background-size: 26px 24px; } .icon-sun { background: url(/jquerymobile/glyphish/171-sun.png) 50% 50% no-repeat; background-size: 28px 28px; } .icon-pricetag { background: url(/jquerymobile/glyphish/172-pricetag.png) 50% 50% no-repeat; background-size: 28px 23px; } .icon-eyedropper { background: url(/jquerymobile/glyphish/173-eyedropper.png) 50% 50% no-repeat; background-size: 12px 28px; } .icon-imac { background: url(/jquerymobile/glyphish/174-imac.png) 50% 50% no-repeat; background-size: 26px 24px; } .icon-macbook { background: url(/jquerymobile/glyphish/175-macbook.png) 50% 50% no-repeat; background-size: 26px 21px; } .icon-ipad { background: url(/jquerymobile/glyphish/176-ipad.png) 50% 50% no-repeat; background-size: 22px 28px; } .icon-building { background: url(/jquerymobile/glyphish/177-building.png) 50% 50% no-repeat; background-size: 14px 24px; } .icon-city { background: url(/jquerymobile/glyphish/178-city.png) 50% 50% no-repeat; background-size: 23px 27px; } .icon-notepad { background: url(/jquerymobile/glyphish/179-notepad.png) 50% 50% no-repeat; background-size: 22px 28px; } .icon-envelope { background: url(/jquerymobile/glyphish/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; } .icon-stickynote { background: url(/jquerymobile/glyphish/180-stickynote.png) 50% 50% no-repeat; background-size: 22px 22px; } .icon-hammer { background: url(/jquerymobile/glyphish/181-hammer.png) 50% 50% no-repeat; background-size: 14px 26px; } .icon-messenger-bag { background: url(/jquerymobile/glyphish/182-messenger-bag.png) 50% 50% no-repeat; background-size: 34px 18px; } .icon-genie-lamp { background: url(/jquerymobile/glyphish/183-genie-lamp.png) 50% 50% no-repeat; background-size: 33px 20px; } .icon-warning { background: url(/jquerymobile/glyphish/184-warning.png) 50% 50% no-repeat; background-size: 24px 19px; } .icon-printer { background: url(/jquerymobile/glyphish/185-printer.png) 50% 50% no-repeat; background-size: 24px 21px; } .icon-ruler { background: url(/jquerymobile/glyphish/186-ruler.png) 50% 50% no-repeat; background-size: 23px 23px; } .icon-pencil { background: url(/jquerymobile/glyphish/187-pencil.png) 50% 50% no-repeat; background-size: 23px 23px; } .icon-paint-roller { background: url(/jquerymobile/glyphish/188-paint-roller.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-plant { background: url(/jquerymobile/glyphish/189-plant.png) 50% 50% no-repeat; background-size: 26px 25px; } .icon-gear { background: url(/jquerymobile/glyphish/19-gear.png) 50% 50% no-repeat; background-size: 26px 26px; } .icon-bank { background: url(/jquerymobile/glyphish/190-bank.png) 50% 50% no-repeat; background-size: 26px 22px; } .icon-collection { background: url(/jquerymobile/glyphish/191-collection.png) 50% 50% no-repeat; background-size: 26px 20px; } .icon-credit-card { background: url(/jquerymobile/glyphish/192-credit-card.png) 50% 50% no-repeat; background-size: 28px 18px; } .icon-location-arrow { background: url(/jquerymobile/glyphish/193-location-arrow.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-note-2 { background: url(/jquerymobile/glyphish/194-note-2.png) 50% 50% no-repeat; background-size: 23px 23px; } .icon-barcode { background: url(/jquerymobile/glyphish/195-barcode.png) 50% 50% no-repeat; background-size: 24px 18px; } .icon-radiation { background: url(/jquerymobile/glyphish/196-radiation.png) 50% 50% no-repeat; background-size: 24px 22px; } .icon-card-diamonds { background: url(/jquerymobile/glyphish/197-card-diamonds.png) 50% 50% no-repeat; background-size: 16px 24px; } .icon-card-spades { background: url(/jquerymobile/glyphish/198-card-spades.png) 50% 50% no-repeat; background-size: 16px 24px; } .icon-card-hearts { background: url(/jquerymobile/glyphish/199-card-hearts.png) 50% 50% no-repeat; background-size: 16px 24px; } .icon-gear2 { background: url(/jquerymobile/glyphish/20-gear2.png) 50% 50% no-repeat; background-size: 26px 28px; } .icon-card-clubs { background: url(/jquerymobile/glyphish/200-card-clubs.png) 50% 50% no-repeat; background-size: 16px 24px; } .icon-skull { background: url(/jquerymobile/glyphish/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; } .icon-skull-n-bones { background: url(/jquerymobile/glyphish/22-skull-n-bones.png) 50% 50% no-repeat; background-size: 30px 32px; } .icon-bird { background: url(/jquerymobile/glyphish/23-bird.png) 50% 50% no-repeat; background-size: 25px 24px; } .icon-gift { background: url(/jquerymobile/glyphish/24-gift.png) 50% 50% no-repeat; background-size: 22px 26px; } .icon-weather { background: url(/jquerymobile/glyphish/25-weather.png) 50% 50% no-repeat; background-size: 24px 26px; } .icon-bandaid { background: url(/jquerymobile/glyphish/26-bandaid.png) 50% 50% no-repeat; background-size: 26px 26px; } .icon-planet { background: url(/jquerymobile/glyphish/27-planet.png) 50% 50% no-repeat; background-size: 29px 18px; } .icon-star { background: url(/jquerymobile/glyphish/28-star.png) 50% 50% no-repeat; background-size: 26px 26px; } .icon-heart { background: url(/jquerymobile/glyphish/29-heart.png) 50% 50% no-repeat; background-size: 24px 21px; } .icon-key { background: url(/jquerymobile/glyphish/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; } .icon-ipod { background: url(/jquerymobile/glyphish/31-ipod.png) 50% 50% no-repeat; background-size: 17px 29px; } .icon-iphone { background: url(/jquerymobile/glyphish/32-iphone.png) 50% 50% no-repeat; background-size: 16px 28px; } .icon-cabinet { background: url(/jquerymobile/glyphish/33-cabinet.png) 50% 50% no-repeat; background-size: 20px 26px; } .icon-coffee { background: url(/jquerymobile/glyphish/34-coffee.png) 50% 50% no-repeat; background-size: 24px 26px; } .icon-shopping { background: url(/jquerymobile/glyphish/35-shopping.png) 50% 50% no-repeat; background-size: 24px 22px; } .icon-toolbox { background: url(/jquerymobile/glyphish/36-toolbox.png) 50% 50% no-repeat; background-size: 26px 20px; } .icon-suitcase { background: url(/jquerymobile/glyphish/37-suitcase.png) 50% 50% no-repeat; background-size: 26px 22px; } .icon-airplane { background: url(/jquerymobile/glyphish/38-airplane.png) 50% 50% no-repeat; background-size: 22px 24px; } .icon-spraycan { background: url(/jquerymobile/glyphish/39-spraycan.png) 50% 50% no-repeat; background-size: 16px 24px; } .icon-inbox { background: url(/jquerymobile/glyphish/40-inbox.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-picture-frame { background: url(/jquerymobile/glyphish/41-picture-frame.png) 50% 50% no-repeat; background-size: 24px 26px; } .icon-photos { background: url(/jquerymobile/glyphish/42-photos.png) 50% 50% no-repeat; background-size: 22px 24px; } .icon-film-roll { background: url(/jquerymobile/glyphish/43-film-roll.png) 50% 50% no-repeat; background-size: 26px 22px; } .icon-shoebox { background: url(/jquerymobile/glyphish/44-shoebox.png) 50% 50% no-repeat; background-size: 24px 22px; } .icon-movie-1 { background: url(/jquerymobile/glyphish/45-movie-1.png) 50% 50% no-repeat; background-size: 19px 25px; } .icon-movie-2 { background: url(/jquerymobile/glyphish/46-movie-2.png) 50% 50% no-repeat; background-size: 20px 25px; } .icon-fuel { background: url(/jquerymobile/glyphish/47-fuel.png) 50% 50% no-repeat; background-size: 28px 24px; } .icon-fork-and-knife { background: url(/jquerymobile/glyphish/48-fork-and-knife.png) 50% 50% no-repeat; background-size: 18px 26px; } .icon-battery { background: url(/jquerymobile/glyphish/49-battery.png) 50% 50% no-repeat; background-size: 26px 14px; } .icon-beaker { background: url(/jquerymobile/glyphish/50-beaker.png) 50% 50% no-repeat; background-size: 18px 22px; } .icon-outlet { background: url(/jquerymobile/glyphish/51-outlet.png) 50% 50% no-repeat; background-size: 24px 20px; } .icon-pine-tree { background: url(/jquerymobile/glyphish/52-pine-tree.png) 50% 50% no-repeat; background-size: 18px 24px; } .icon-house { background: url(/jquerymobile/glyphish/53-house.png) 50% 50% no-repeat; background-size: 22px 22px; } .icon-lock { background: url(/jquerymobile/glyphish/54-lock.png) 50% 50% no-repeat; background-size: 20px 24px; } .icon-network { background: url(/jquerymobile/glyphish/55-network.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-cloud { background: url(/jquerymobile/glyphish/56-cloud.png) 50% 50% no-repeat; background-size: 24px 16px; } .icon-download { background: url(/jquerymobile/glyphish/57-download.png) 50% 50% no-repeat; background-size: 19px 24px; } .icon-bookmark { background: url(/jquerymobile/glyphish/58-bookmark.png) 50% 50% no-repeat; background-size: 10px 26px; } .icon-flag { background: url(/jquerymobile/glyphish/59-flag.png) 50% 50% no-repeat; background-size: 18px 26px; } .icon-signpost { background: url(/jquerymobile/glyphish/60-signpost.png) 50% 50% no-repeat; background-size: 22px 28px; } .icon-brightness { background: url(/jquerymobile/glyphish/61-brightness.png) 50% 50% no-repeat; background-size: 20px 20px; } .icon-contrast { background: url(/jquerymobile/glyphish/62-contrast.png) 50% 50% no-repeat; background-size: 20px 20px; } .icon-runner { background: url(/jquerymobile/glyphish/63-runner.png) 50% 50% no-repeat; background-size: 18px 25px; } .icon-zap { background: url(/jquerymobile/glyphish/64-zap.png) 50% 50% no-repeat; background-size: 12px 24px; } .icon-note { background: url(/jquerymobile/glyphish/65-note.png) 50% 50% no-repeat; background-size: 15px 24px; } .icon-microphone { background: url(/jquerymobile/glyphish/66-microphone.png) 50% 50% no-repeat; background-size: 12px 24px; } .icon-tshirt { background: url(/jquerymobile/glyphish/67-tshirt.png) 50% 50% no-repeat; background-size: 26px 18px; } .icon-paperclip { background: url(/jquerymobile/glyphish/68-paperclip.png) 50% 50% no-repeat; background-size: 14px 26px; } .icon-display { background: url(/jquerymobile/glyphish/69-display.png) 50% 50% no-repeat; background-size: 22px 20px; } .icon-tv { background: url(/jquerymobile/glyphish/70-tv.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-compass { background: url(/jquerymobile/glyphish/71-compass.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-pin { background: url(/jquerymobile/glyphish/72-pin.png) 50% 50% no-repeat; background-size: 10px 20px; } .icon-radar { background: url(/jquerymobile/glyphish/73-radar.png) 50% 50% no-repeat; background-size: 27px 27px; } .icon-location { background: url(/jquerymobile/glyphish/74-location.png) 50% 50% no-repeat; background-size: 20px 20px; } .icon-phone { background: url(/jquerymobile/glyphish/75-phone.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-baby { background: url(/jquerymobile/glyphish/76-baby.png) 50% 50% no-repeat; background-size: 18px 26px; } .icon-ekg { background: url(/jquerymobile/glyphish/77-ekg.png) 50% 50% no-repeat; background-size: 26px 22px; } .icon-stopwatch { background: url(/jquerymobile/glyphish/78-stopwatch.png) 50% 50% no-repeat; background-size: 22px 26px; } .icon-medical-bag { background: url(/jquerymobile/glyphish/79-medical-bag.png) 50% 50% no-repeat; background-size: 24px 20px; } .icon-shopping-cart { background: url(/jquerymobile/glyphish/80-shopping-cart.png) 50% 50% no-repeat; background-size: 26px 19px; } .icon-dashboard { background: url(/jquerymobile/glyphish/81-dashboard.png) 50% 50% no-repeat; background-size: 28px 28px; } .icon-dog-paw { background: url(/jquerymobile/glyphish/82-dog-paw.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-calendar { background: url(/jquerymobile/glyphish/83-calendar.png) 50% 50% no-repeat; background-size: 23px 25px; } .icon-lightbulb { background: url(/jquerymobile/glyphish/84-lightbulb.png) 50% 50% no-repeat; background-size: 14px 21px; } .icon-trophy { background: url(/jquerymobile/glyphish/85-trophy.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-camera { background: url(/jquerymobile/glyphish/86-camera.png) 50% 50% no-repeat; background-size: 24px 18px; } .icon-wine-glass { background: url(/jquerymobile/glyphish/87-wine-glass.png) 50% 50% no-repeat; background-size: 14px 24px; } .icon-beer-mug { background: url(/jquerymobile/glyphish/88-beer-mug.png) 50% 50% no-repeat; background-size: 22px 27px; } .icon-dumbell { background: url(/jquerymobile/glyphish/89-dumbell.png) 50% 50% no-repeat; background-size: 28px 10px; } .icon-life-buoy { background: url(/jquerymobile/glyphish/90-life-buoy.png) 50% 50% no-repeat; background-size: 24px 24px; } .icon-beaker-2 { background: url(/jquerymobile/glyphish/91-beaker-2.png) 50% 50% no-repeat; background-size: 20px 24px; } .icon-test-tube { background: url(/jquerymobile/glyphish/92-test-tube.png) 50% 50% no-repeat; background-size: 12px 26px; } .icon-thermometer { background: url(/jquerymobile/glyphish/93-thermometer.png) 50% 50% no-repeat; background-size: 12px 28px; } .icon-pill { background: url(/jquerymobile/glyphish/94-pill.png) 50% 50% no-repeat; background-size: 30px 12px; } .icon-equalizer { background: url(/jquerymobile/glyphish/95-equalizer.png) 50% 50% no-repeat; background-size: 26px 24px; } .icon-book { background: url(/jquerymobile/glyphish/96-book.png) 50% 50% no-repeat; background-size: 18px 26px; } .icon-puzzle { background: url(/jquerymobile/glyphish/97-puzzle.png) 50% 50% no-repeat; background-size: 28px 25px; } .icon-palette { background: url(/jquerymobile/glyphish/98-palette.png) 50% 50% no-repeat; background-size: 24px 20px; } .icon-umbrella { background: url(/jquerymobile/glyphish/99-umbrella.png) 50% 50% no-repeat; background-size: 24px 26px; }

Reply
Fernando says:

February 10, 2012 at 5:12 am

Hi, I’m trying to use custom icons with sprite slicing but it doesn’t seems to work.
It works fine in a stand alone page, but not working in a jQuery Mobile page.
Here’s my code, if anybody can help me I’ll appreciate it:

.ui-icon-vin-ok,.ui-icon-vin-del {background:url(“images/indicadores.png”)}
.ui-icon-vin-ok {background-position: 0px 0;}
.ui-icon-vin-del {background-position: -18px 0;}

Test

Thanks.

Reply
- Fernando says:
  
  February 10, 2012 at 9:35 pm
  
  Solved! The !important sentence must be set on the custom CSS declarations! Here the code working:
  .ui-icon-vin-ok,.ui-icon-vin-del {background:url(“images/indicadores.png”) no-repeat rgba(0, 0, 0, 0.4) !important;} .ui-icon-vin-ok {background-position: 0px 0 !important;} .ui-icon-vin-del {background-position: -18px 0 !important;}
  
  Cheers!
  
  Reply
ShweRoom says:

February 16, 2012 at 9:29 pm

It’s really great and useful…
where can i get offline version??

Reply
Michael says:

February 18, 2012 at 5:50 am

There is also the data-icon=”false” for no icon in listviews.

Reply
- brooky says:
  
  February 18, 2012 at 5:56 am
  
  @Michael, thanks for the info
  
  Reply
Pingback: jquerymobile cheat sheet | omarlearning
Pingback: Creare app per cellulari con Jquery mobile: tutorial, link utili e guide | gratis
ranjith kumar says:

October 18, 2012 at 2:52 pm

i applied this listview thumbnail source to my file….its coming 2 arrows in listview rightside……can u solve dis problm.& send code to my mail id….

Reply
Andreas@Mediafire Download says:

October 21, 2012 at 2:56 am

What’s up, after reading this amazing article i am too glad to share my familiarity here with mates.

Reply
Mohamed Arif says:

October 30, 2012 at 10:24 pm

Really, very good post. i appreciate you work.

Reply

Leave a Reply Cancel reply