jQuery mobile cheat sheet

上一篇文章介紹了如何用 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) code 

<!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 code 

Buttons

Component Sample HTML5 data-* attribute

styling links as buttons (linkbtn)

jQuery Mobile link button code 

icon buttons (iconbtn)

jQuery Mobile icon bottonFor 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)

jQuery Mobile group bottons 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)

jQuery Mobile Inline buttons 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)

jQuery Mobile horizontal buttons 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)

jQuery Mobile flip swith 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)

jQuery Mobile slider 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)

jQuery mobile search code 

Text input (mtext)

jQuery Mobile text input code 

<div data-role="fieldcontain">
    <label for="text">Text Input:</label>
    <input type="text" id="text" name="name" value=""  />
</div>

Text area

jQuery Mobile 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)

jQuery Mobile email input 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)

jQuery Mobile radio 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)

jQuery horizontal radio 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)

jQuery Mobile check box 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

jQuery Mobile using native form element 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)

jQuery Mobile list view 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)

jQuery Mobile list view with thumbnail  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)

jQuery mobile list view with icon 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)

jQuery Mobile list view with bubble 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)

jQuery Mobile list view with divider 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)

jQuery Mobile list view inset 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)

jQuery Mobile navigation bar code 

Navigation bar in header (navheader)

jQuery Mobile navigation bar in header code 

Icons in navigation bars (navicon)

jQuery Mobile navigation bar with icon code 

Fixed navigation bar (navfixed)

jQuery Mobile persistent navigation bar code 

Persistent navigation bar (navpers)

jQuery Mobile persistent navigation bar code 

Full screen with home icon

jQuery Mobile full screen navigation bar code 

Using 3rd party icon sets

jQuery mobile custom icons 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 code 

<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 code 

<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 code 

 <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 , , . Bookmark the permalink.

28 Responses to jQuery mobile cheat sheet

  1. Matanza Facil says:

    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.

  2. steve says:

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

  3. Forrest says:

    Thanks for the resource!

  4. ppshein says:

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

  5. Pingback: Friday Links #152 | Blue Onion Software *

  6. J says:

    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!

  7. Pingback: Interesting jQuery Mobile Tutorials

  8. sylvain says:

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

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

  10. Rhett says:

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

  11. Carl says:

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

  12. Pingback: jQuery Mobile Example Sites | Greg Stephens Blog

  13. 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.

  14. Anwar says:

    This is excellent ! Thanks.

  15. Pingback: jQuery Mobile Framework | Musings of a 21st Century Renaissance Man

  16. sofian says:

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

  17. Pingback: jQuery Mobile Cheat Sheet « Jquery For Mobile « Jquery Platforms

  18. FatherStorm says:

    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; }

  19. Fernando says:

    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.

    • Fernando says:

      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!

  20. ShweRoom says:

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

  21. Michael says:

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

  22. Pingback: jquerymobile cheat sheet | omarlearning

  23. Pingback: Creare app per cellulari con Jquery mobile: tutorial, link utili e guide | gratis

  24. ranjith kumar says:

    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….

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

  26. Mohamed Arif says:

    Really, very good post. i appreciate you work.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>