jQuery Mobile एक Javascript की लाइब्रेरी है जो बहुत लोकप्रिय jQuery लाइब्रेरी के शिखर पर बनाता है. यह उन Web Applications को बनाने की अनुमति देता है जो Patch Interfaces के साथ काम करता है.
jQuery को Core पर बनाया गया है. इसका उपयोग Responsive Websites और Applications को Develop करने के लिये किया जाता है जो Mobile, Tablet, Desktop Devices पर बहुत Accessible हैं.
jQuery Mobile एक Mobile Web Applications के लिए API Features को उपलब्ध कराने के लिए jQuery और jQuery UI दोनों की सुविधाओं का उपयोग करता है.
jQuery Mobile को सीखना बहुत आसान है क्योंकि यह jQuery के पुस्तकालय के शिखर पर बनाया गया है. jQuery mobile Chrome, Firefox, Opera and Internet Explorer आदि Desktop Browsers को Supports करता है और यह Minimum Scripting वाले Pages को बनाने के लिए HTML5, CSS3, JavaScript और AJAX का उपयोग करता है.
jQuery Mobile को Core पर बनाया गया है और यह “Write Less and Do More“ को Immediate करता है. यह Web Page को Automatically Designed और Attractive Friendly बनाने और Mobile Devices के योग्य बनाने के लिए उपयोग किया जाता है.
यह एक Open Source Framework है और Cross Platform के साथ-साथ Cross- Browser के अनुकूल भी है.
इसको javascript में लिखा गया है और mobile friendly websites को बनाने के लिये jQuery और jQuery UI दोनों का उपयोग किया गया है.
JQuery Mobile जो की HTML5, CCS3, jQuery और jQuery UI को Minimum Scripting के साथ Web Page बनाने के लिए एक framework में integrated करता है.
इसमें ajax navigation शामिल होते है जो की animated page बदलाव का उपयोग करता है.
इसको Learn और Develop करना बहुत आसान है अगर आपको HTML5, CSS3 की Knowledge है.
यह Cross Platform के साथ-साथ cross-browser के अनुकूल भी है . इसलिए आपको हर device resolution के लिए अलग Code लिखने के बारे में Concern करने की आवश्यकता नहीं है.
इसमें आप Code को Line में लिखने के बजाए ThemeRoller का उपयोग कर Custom Theme को बना सकते हैं.
यह Web Applications के को आसान Develop करने के लिए Javascript के साथ HTML5 का उपयोग करता है.
Mobile फोन से jQuery Mobile का उपयोग करके Develop किए गए Applications धीमी Speed से काम करते हैं.
जब किसी अन्य Mobile Frameworks के साथ jQuery को मिलाया जाता है तो किसी Applications को चलाने के लिए अधिक समय की आवश्यकता होती है.
संपूर्ण रूप से Visual Design को बनाने में थोड़ी सी मुश्किल होती है .
किसी भी Browser में Javascript द्वारा सभी Device की विशेषताओं का उपयोग नहीं किया जा सकता है.
| Year | Version |
|---|---|
| 2014 | 1.4.1-1.4.5 |
| 2013 | 1.4.0 ,1.4.0 RC 1,1.4.0 Beta 1,1.4.0 Alpha 1-2,1.3.0-1.3.2,1.3.0 RC 1,1.3.0 Beta 1,1.2.1,1.1.2 |
| 2012 | 1.2.0,1.2.0 RC1-2,1.2.0 Beta 1,1.2.0 Alpha 1,1.2.0,1.1.1 ,1.1.1 RC 1,1.1.0,1.1.0 RC 1- 2,1.0.1 |
| 2011 | 1.0 Alpha 3-4.1,1.0 Beta 1-3,1.0 RC 1- 3,1.0 |
| 2010 | 1.0 Alpha 1-2 |
Web page बनाने के लिए jQuery Mobile में built-in Attribute और data-role का उपयोग किया जाता है. jQuery Mobile में jQuery और CSS विषयों की Libraries को <head> Tag के अंदर रखा जाता है.
<Body> Tag के अंदर सभी Screen या मोबाइल डिवाइस पर Page <div> Element के साथ नीचे Identify किया जाता है.
<div data-role=”page”>
Hello Tutorialsroot .........
</div>
Container Page में HTML Markups को जो कि Valid हो उसको उपयोग किया जा सकता है.
किसी भी Standard Format को बिना बदले बहुत से Pages को बनाने के लिए उपयोग किया जाता है. Standard Format का उपयोग jQuery Mobile में एक Page को बनाने के लिए उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Single Page Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This is First Page</h1>
</div>
<div data-role="content">
<h1>Hello Tutorialsroot</h1>
<p>Welcome to Tutorialsroot</p>
</div>
<div data-role="footer">
<h2>Copyright 2017. All Rights Reserved</h2>
</div>
</div>
</body>
</html>
एक HTML Document में एक से अधिक Pages को सम्मिलित किया जा सकता है जो एक साथ बहुत से Div Tag को जोड़कर Loaded किए जाते हैं.
<!DOCTYPE html>
<html>
<head>
<title>Multi Page Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>This is First Page</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Hello Tutorialsroot!!!</h1>
<p>This is first page</p>
<p> For more information <a href="#page2">click here</a></p>
</div>
<div data-role="footer">
<h2>©Copyright 2017. All Rights Reserved</h2>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>This is second page</h1>
</div>
<div data-role="main" class="ui-content">
<h1>jQuery Mobile Tutorial</h1>
<p>This is second page</p>
<p><a href="#page1">Back to a previous page</a></p>
</div>
<div data-role="footer">
<h2>© Copyright 2017. All Rights Reserved</h2>
</div>
</div>
</body>
</html>
jQuery Mobile का उपयोग करके हम एक Page से दूसरे Place पर Transition बनाते है और इससे हम एक Page से दूसरे Navigation Page पर आसानी से जा सकते है.
इस transition Effects को User द्वारा भी Configure किया जा सकता है और यह Property की Values को बदलने की अनुमति देता है जो Specified Duration पर होती है.
jQuery Mobile के एक Framework के साथ बहुत से Page Transitions का इस्तेमाल किया जा सकता है सभी Page Transitions CSS पर आधारित है.
जब हम इसमें Ajax Navigation का उपयोग करते है उस समय Page Transitions से लिंक किए गए Pages और Form के Submissions के बीच काम करते हैं.
| Transition | Description |
|---|---|
| Fade | Fade का असर Default Transition पर प्रभाव पड़ता है जो की Next Page पर Fade हो. |
| Pop | Popup Next Page पर एक Window की तरह चलती है. |
| Flip | हम Next Page पर वापस आने के लिए सामने से Flip करते है. |
| Turn | Next Page पर जाने के लिए हम Turn का उपयोग करते है. |
| Flow | Flow से हम Current Page को Avoid करके Next Page पर दिखाई देता है. |
| Slidefade | Slidefade में हम Next Page से Right से Left को Slidefade करते है. |
| Slide | Slides में हम Next Page से Right से Left को Slidefade करते है. |
| Slideup | Next Page पर नीचे की ओर Slide करें. |
| Slidedown | ऊपर से नीचे तक की और Next Page पर Slide करें. |
Transition Effects जो की Reverse/Backward कार्यों का समर्थन करती हैं. अगर आप Page को Left से Right से Instead के Right से Left Slide करना पड़ता है और इस के लिए हम Value Reverse के साथ data-direction Attribute का उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Website</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect
(slides to the next page from right to left).</p>
<a href="#pagetwo" data-transition="slide">Slide to Page Two</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Website</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect REVERSED
(slides to the previous page from left to right).</p>
<a href="#pageone" data-transition="slide"
data-direction="reverse">Slide to Page One (reversed)</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
jQuery Mobile में data-transition Attribute का उपयोग किसी दिए गए Element के अन्दर Link के Transition को Configure करने के लिए किया जाता है और किसी दूसरे Links के लिए Transition Effects से Unaffected रहते हैं.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Data Transition Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>jQuery Mobile Tutorial</h1>
</div>
<div data-role="content">
jQuery Mobile Tutorials (page1)
<p><a href="#page2" data-transition="flip">Visit Page 2</a></p>
<!-- flip transition -->
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h1>jQuery Mobile Tutorial</h1>
</div>
<div data-role="content">
jQuery Mobile Tutorials (page2)
<p><a href="#page1">Visit page 1</a></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Page Transitions Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>jQuery Mobile Tutorial</h1>
</div>
<div role="main" class="ui-content">
<a href="demoPage.html" data-role="button"
data-transition="pop"data-inline="true">pop</a>
<a href="demoPage.html" data-role="button"
data-transition="turn" data-inline="true">turn</a>
<a href="demoPage.html" data-role="button"
data-transition="slide" data-inline="true">slide</a>
<a href="demoPage.html" data-role="button"
data-transition="slideup" data-inline="true">slideup</a>
<a href="demoPage.html" data-role="button"
data-transition="slidedown" data-inline="true">slidedown</a>
<a href="demoPage.html" data-role="button"
data-transition="slidefade" data-inline="true">slidefade</a>
<a href="demoPage.html" data-role="button"
data-transition="flip" data-inline="true">flip</a>
<a href="demoPage.html" data-role="button"
data-transition="flow" data-inline="true">flow</a>
</div>
</div>
</body>
</html>
jQuery Mobile Automatically Button पर Click करता है और Button Type के Elements के साथ Document या किसी भी अन्य Input Element के साथ Submitted करता है.
jQuery Mobile में Buttons एक Core Widgets है और अन्य Plugins की एक Spacious Range के अन्दर उपयोग किया जाता है.
Buttons एक Markup Flexible होते है और इनको Links या Form Buttons से बनाया जा सकता है.
JQuery Mobile में Buttons का उपयोग Document को Submit, Reset, Button और Image के रूप में किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Button Widgets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>Jquery Mobile Tutorial</h1>
</div>
<div data-role="content">
<button>Normal Button</button>
<input type="submit" value="Submit Button" />
<input type="reset" value=" Reset Button" />
<input type="button" value="Input Button" />
</div>
</div>
</body>
</html>
जब हम Button पर Click करते है तो उस समय एक Default Action होता है और Button Click होने पर फौरन Default Action पर Performed करता है.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Handling Button Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", function() {
$('button, #btn1').bind("tap", function() {
$.mobile.changePage("#mypage2");
})
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile Tutorial</h1>
</div>
<div data-role="content">
<button>Demo Button</button>
<button id="btn1" data-role="button">Click Here to Navigate to Page 2</button>
</div>
</div>
<div id="mypage2" data-role="page" data-theme="b">
<div data-role="header">
<h1>jQuery Mobile Tutorial</h1>
</div>
<div data-role="content">
This is Page 2
<a href="#" data-role="button" data-rel="back">Back to Original Page</a>
</div>
</div>
</body>
</html>
jQuery Mobile हमको built-in Icons का एक Set Supply करता है. जिनका उपयोग Buttons के साथ किया जा सकता है.
jQuery Mobile में Listview Buttons जो की Buttons को और अधिक Attractive बनाते हैं.
| Sr.No. | Icon Area & Description |
|---|---|
| 1 | Icon Set यह button में Icon को Set करने के लिए उपयोग किया जाता है. |
| 2 | Positioning Icons Positioning Icons का उपयोग Button में Icons की Position को Specifies करने के लिए किया जाता है. |
| 3 | Icon-only यह केवल Button में एक Icon को दिखाता है. |
| 4 | Icon shadow Icon Shadow का उपयोग Button में Icon Shadow को Add करने के लिए किया जाता है. |
| 5 | Removing Circle Removing Circle Icon के चारों ओर Grey Circle को निकालता है. |
| 6 | Black or White Icons इसका उपयोग Icons के Colors को Black और White करने के लिए किया जाता है. |
| 7 | Combining alt and nodisc यह Icon में alt और nodisc Classes को जोड़ता है. |
Icon के लिए Position को Specifying करने के लिए आप ui-icon Class और ui-btn-icon-pos_name Class का उपयोग करके Icon में Icon Set कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Icon Set Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-btn-icon-left ui-icon-grid">Grid Button</a>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-r">arrow-r</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u">arrow-u</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-audio">audio</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-calendar">calendar</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-camera">camera</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-carat-l">carat-l</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-carat-r">carat-r</button>
<button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left
ui-icon-check">check</button>
<button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left
ui-icon-clock">clock</button>
<button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-eye">
eye</button>
</div>
</body>
</html>
आप ui-btn-icon-[value] Class का उपयोग करके Icon को (Top, Right, Left, Bottom) की Position को Define कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Icon Positioning Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "main" class = "ui-content">
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-left">Left</a>
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-right">Right</a>
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-top">Top</a>
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</a>
</div>
</body>
</html>
आप ui-btn-icon-notext Class का उपयोग करके Button में केवल एक Icon को Define कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Displaying only Icon Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<h2>Header Tutorialsroot</h2>
<div data-role = "header">
</div>
<div data-role = "main" class = "ui-content">
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-notext">Delete</a>
</div>
<div data-role = "footer">
<h2>Footer Tutorialsroot</h2>
</div>
</div>
</body>
</html>
इसमें आप ui-shadow-icon Class का उपयोग करके अपने Button में एक Icon Shadow को जोड़ सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Icon Shadow Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header Tutorialsroot</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "" class = "ui-btn ui-shadow-icon ui-shadow ui-corner-all
ui-icon-home ui-btn-icon-notext">Delete</a>
</div>
<div data-role = "footer">
<h2>Footer Tutorialsroot</h2>
</div>
</div>
</body>
</html>
इसमें आप ui-nodisc-icon Class का उपयोग करके Icon के चारों और Grey Circle को निकाल सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Removing Circle Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header Tutorialsroot</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "" class = "ui-nodisc-icon ui-btn ui-shadow ui-corner-all
ui-btn-inline ui-icon-delete ui-btn-icon-left">Without Grey Circle</a>
</div>
<div data-role = "footer">
<h2>Footer Tutorialsroot</h2>
</div>
</div>
</body>
</html>
आप इसमें IU-alt-icon Class का उपयोग करके किसी भी Icon का Color Black सकते हैं और Default रूप से, सभी Icon White होते हैं.
<!DOCTYPE html>
<html>
<head>
<title>Black and White Icons Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header Tutorialsroot</h2>
</div>
<div data-role = "main" class = "ui-content">
<a href = "" class = "ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left
ui-corner-all">White icon</a>
<a href = "" class = "ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left
ui-corner-all ui-alt-icon">Black icon</a>
</div>
<div data-role = "footer">
<h2>Footer Tutorialsroot</h2>
</div>
</div>
</body>
</html>
Popup को Create करने के लिये हम Popup Contents के साथ एक Div में data-role="popup" के Attribute को जोड़ते है.
फिर Popup Div में Id को Set करने के लिये Href Set के साथ एक Link बनाते है और Link को Tap किए जाने पर Popup को Open करने के लिए और Framework को बताने के लिए Attribute data-rel="popup" को Add करते है.
jQuery Mobile में Popup पर एक छोटी सी Window है जो Foreground में अचानक से आती है. इसका उपयोग Text, Images और Data को Display करने के लिये किया जाता है.
jQuery Mobile में Popup Widget को एक Div Container के अन्दर Attribute data-role="popup" का उपयोग करके बनाया जाता है. यह एक Popup को बनाता है और उसमें Content को Display करता है.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PopUp Widget Example</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="demoPage">
<div data-role="header">
<h1>jQuery Mobile PopUp Widget</h1>
</div>
<div data-role="content">
<div role="main" class="ui-content">
<a href="#demoPopUp" data-rel="popup" data-role="button"
data-inline="true">Click to Open Popup</a>
<div data-role="popup" id="demoPopUp">
<p>A Basic Popup with No Enhancement</p>
</div>
</div>
<small>Click on the Button to Open Popup </small>
</div>
<div data-role="footer">
<h3>jQuery Mobile PopUp Widget</h3>
</div>
</div>
</body>
</html>
Checkbox का उपयोग करके एक Default Standard Flip Switch को बनाया गया है और या Input में Rounded Corners करके लेकिन Users के पास यह Option data-corners="false" होता है.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PopUp Widget Menus and Nested Menu</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="demoPage">
<div data-role="header">
<h1>jQuery Mobile PopUp</h1>
</div>
<div data-role="content">
<div role="main" class="ui-content">
<a href="#simpleMenu" data-rel="popup" data-role="button"
data-inline="true">Simple Menu</a> <!-- Menu 1 Button-->
<a href="#nestedMenu" data-rel="popup" data-role="button"
data-inline="true">Nested menu</a> <!-- Menu 2 Button-->
<!-- Simple PopUp Menu -->
<div data-role="popup" id="simpleMenu" data-theme="a">
<ul data-role="listview" data-inset="true"
style="width:220px;" data-theme="b">
<li data-role="divider" data-theme="a">EDIT</li>
<li><a href="#">Cut</a></li>
<li><a href="#">Copy</a></li>
<li><a href="#">Paste</a></li>
</ul>
</div>
<!-- Nested Popup Menu-->
<div data-role="popup" id="nestedMenu" data-theme="none">
<div data-role="collapsible-set" data-collapsed-icon="plus"
data-expanded-icon="minus" style="width:200px;">
<div data-role="collapsible" data-inset="false">
<h2>Planets</h2>
<ul data-role="listview">
<li><a href="#">Earth</a></li>
<li><a href="#">Mars</a></li>
<li><a href="#">Jupiter</a></li>
<li><a href="#">Saturn</a></li>
</ul>
</div><
<div data-role="collapsible" data-inset="false">
<h2>Countries</h2>
<ul data-role="listview">
<li><a href="../dialog.html" data-rel="dialog">USA</a></li>
<li><a href="../dialog.html" data-rel="dialog">India</a></li>
<li><a href="../dialog.html" data-rel="dialog">Russia</a></li>
<li><a href="../dialog.html" data-rel="dialog">Germany</a></li>
</ul>
</div><
</div><
</div><
</div>
<small>Click on the Button to Open Popup </small>
</div>
<div data-role="footer">
<h3>PopUp Widget Menus and Nested Menu</h3>
</div>
</div>
</body>
</html>
Header और Footers को Page में कुछ अलग ही तरीके से Set किया जा सकता है. लेकिन Default रूप से Toolbar "Inline" Positioning का उपयोग करता है.
Header और Footers जो कि Natural Document को Flow करता है और Default HTML में Set बैठता है और यह सुनिश्चित करता है कि वे सभी Devices पर Ostensible है चाहे वह JavaScript और CSS की Position को Support करता है.
एक Fixed Position Toolbars को Browsers के Top और Bottom को या तो Bottom करता है जो कि CSS Fixed Position को Support करता है. जिसमें ज्यादातर Desktop Browsers, iOS5+, Android 2.2+, BlackBerry 6 और आदि शामिल हैं.
Page के Top पर Header को रखा जाता है और Header में Logo, Home, Services आदि जैसे Button होते हैं और इसमें 3 या 5 Buttons होते है लेकिन Footer में Buttons को रखने की कोई Limit नहीं होती है.
Page के Bottom पर Footer को रखा जाता है. Footer बहुत ही ज्यादा Flexible होता है. इसलिए इसकी आवश्यकता के अनुसार आप इसमें बहुत से Buttons रख सकते हो.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ToolBar Header and Footers Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Home</h1>
<a href="#anylink" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Search</a>
</div>
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
<div data-role="footer" data-position="fixed" style="text-align:center;" data-fullscreen="true">
<div data-role="controlgroup" data-type="horizontal">
<a href="#fb" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="slide">Facebook</a>
<a href="#go" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Google+</a>
<a href="#in" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="pop">Instagram</a>
<a href="#tw" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Twitter</a>
</div>
</div>
</div>
<!-- facebook -->
<div id="fb" data-role="page" data-title="Facebook">
<div data-role="header">
<h1>Facebook</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
</div>
<p>Welcome to Tutorialsroot jQuery Mobile(Facebook)</p>
</div>
<!-- Google+ -->
<div id="go" data-role="page" data-title="Google+">
<div data-role="header">
<h1>Google+</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
</div>
<p>Welcome to Tutorialsroot jQuery Mobile(Google+)</p>
</div>
<!-- Instagram -->
<div id="in" data-role="page" data-title="Instagram">
<div data-role="header">
<h1>Instagram</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
</div>
<p>Welcome to Tutorialsroot jQuery Mobile(Instagram)</p>
</div>
<!-- Twitter -->
<div id="tw" data-role="page" data-title="Twitter">
<div data-role="header">
<h1>Twitter</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
</div>
<p>Welcome to Tutorialsroot jQuery Mobile(Twitter)</p>
</div>
</body>
</html>
jQuery Mobile में Panels Widget आपको एक Flexible Content इकाइयों के लिए अनुमति देता है.
जिसका उपयोग Slide Menus को बनाने के लिये किया जाता है और यह Collapse Columns Inspect Windows आदि का Inspection करता है.
एक Panels Header, Content और Footer के समान Surface पर होना चाहिए.
इन Elements के लिए एक Sibling होती है और एक Panels को इसके बाद या उसके बाद भी जोड़ा जाना चाहिए लेकिन कभी भी Panels इसके बीच में नहीं जोड़ा जाना चाहिए.
jQuery Mobile में Panels बनाने के लिये Id को Specify करने के लिए <div> Elements में data-role="panel" Attribute को जोड़ते है और <div> Tag के अंदर HTML Markups को जोड़ते है जिसको Panels में Displayed किया जाता है.
Panels को खोलने के लिए हम शुरू में एक Link को बनाते है जो <div> Panel की Id को Referenced करता है और Link पर Click करते ही Panel Open हो जाता है.
<a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>
Panel को Close करने के लिए सिर्फ Panel के बाहर Click करते है और या Swipe करते है या “Esc” key को दबाते है.
और यह <div> Panel के अंदर स्थित Link के साथ एक Button का उपयोग करके भी किया जा सकता है जो कि data-rel="close" एक Attribute है.
Panel id को Referenced करने के लिए href के Characteristic को भी Indicated करते है जिससे Panel को Close करते समय प्रदर्शित किया जाता है.
<div data-role="panel" id="panel1">
<h2>Header Tutorialsroot</h2>
<p>Text to display</p>
<a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
</div>
Panel को Click और Swipe करने वाले Features को Disabled करने के लिए केवल Panel में data-dismissible और data-swipe-close Attribute को Panel <div> से जोड़ते है.
से जोड़ते है
<div data-role="panel" id="overlayP1" data-display="overlay">
<div data-role="panel" id="revealp2" data-display="reveal">
<div data-role="panel" id="pushp3" data-display="push">
Panels Default रूप से Screen के Left में दिखाई देते हैं इसको Screen के Right में दिखाने के लिये data-position="right" Attribute को Specify करते है.
<div data-role="panel" id="panel1" data-position="right">
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Panel Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="info">
<div data-role="panel" id="panel1" data-display="reveal" data-position="left" data-position-fixed="true" data-dismissible="false">
<h1>Info</h1>
<p>Welcome to Tutorialsroot jQuery Mobile</p>
<a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
</div>
<div data-role="header">
<h1>Home</h1>
<a href="#panel1" class="ui-btn ui-btn-inline ui-icon-info ui-btn-icon-notext">Open Panel</a>
</div>
<div data-role="main" class="ui-content">
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Copyright 2017. All Rights Reserved</h1>
</div>
</div>
</body>
</html>
jQuery Mobile में Collapsible का उपयोग Openable Content Block बनाने के लिए किया जा सकता है.
Collapsible एक Heading के साथ Content के Block होते हैं जो की Close करने के लिए Toggled किया जा सकता है जिससे केवल Header का भाग दिखाई देता है.
यह Information को Store करने में भी बहुत उपयोगी होता है.
Collapsibles Content की एक Compact Presentation को Provide करता है.
Collapsibles Starting में <div> Container में Attribute data-role="collapsible" को Define करता है.
<div data-role="collapsible">
<h1>Home</h1>
<p>Welcome to Tutorialsroot jQuery Mobile</p>
</div>
एक Collapsible Block को एक Collapsible Block में अंदर Put कर दिया जा सकता है जिसको “Nested Collapsible Blocks कहते है और इन Blocks को कई बार Nasted किया जा सकता है.
<div data-role="collapsible" data-collapsed="false">
<h1>Home</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
<div data-role="collapsible">
<h1>Info</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
</div>
</div>
Collapsible Blocks को एक साथ Classified किया जाता है जिसको Aprodian के रूप में Referenced किया जाता है फिर इसको “Collapsible Set” कहा जाता है.
अगर आप नया Block को Open करते हो तो अन्य सभी Block Close हैं तो Starting में दो या अधिक Collapsible Content Blocks को बनाया जाता है और उसके बाद एक नए Container को Rugged Block के चारों ओर data-role="collapsibleset के साथ Wrap करते है.
<div data-role="collapsibleset">
<div data-role="collapsible">
<h1>Home</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
</div>
<div data-role="collapsible">
<h1>Info</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Collapsible</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h3>Collapsible<h3>
<div data-role="collapsible" data-collapsed="false">
<h1>Home</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
</div>
<h3>Nested Collapsible<h3>
<div data-role="collapsible" data-collapsed="false">
<h1>Home</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
<div data-role="collapsible">
<h1>Info</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
</div>
</div>
<h3>Collapsible Set<h3>
<div data-role="collapsibleset">
<div data-role="collapsible">
<h1>Home</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
</div>
<div data-role="collapsible">
<h1>Info</h1>
<p>Welcome to Tutorialsroot jQuery Mobile(Info)</p>
</div>
</div>
</body>
</html>
jQuery Mobile के सभी Widgets को Developing के दौरान Hand में हुए Devices का छोटा आकार सबसे महत्वपूर्ण Economic हैं. Table Widget के लिए भी यह बहुत सही है.
बड़ी संख्या में Rows और Columns वाले Table के रूप को बदलकर और CSS Media Queries का उपयोग करके Padding और Margin जैसी अन्य CSS Feature को बहुत आच्छे तरह से प्रदर्शित नहीं किया जा सकता है.
jQuery Mobile उपयोगकर्ताओं को Responsive Tables बनाने के लिए दो Options Provide कराता है.
Reflow Responsive Table को बनाने के लिये Table Element में एक data-role="table" के साथ एक Table की आवश्यकता होती है. आप अपनी Table में Thead और Tbody Elements को Add कर सकते हो क्योंकि Reflow Default होने के कारण data-mode Attribute को Set करने की कोई आवश्यकता नहीं होती है.
जब हम Data Displaying करने के लिए उसकी Width Minimum होती है तब Mode Column Toggle को Hide करता है.
jQuery Mobile Columns को Hide करता है Table के Right Side से.
Table को बनाने के लिये एक Column Toggle में data-mode="columntoggle" <table> Element को जोड़ते है.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///D:/SPLessons/SPLessonsUploads/jQueryMobile/12/Tables/styles/style.css">
</head>
<body>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow"
data-column-btn-text="Click here!" id="mytable">
<thead>
<tr>
<th data-priority="6">Employee ID</th>
<th>Employee Name</th>
<th data-priority="1">Employee Email-ID</th>
<th data-priority="3">Employee Phone Number</th>
<th data-priority="4">Employee Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ed01</td>
<td>Johe B</td>
<td>johe@gmail.com</td>
<td>086501792**</td>
<td>US</td>
</tr>
<tr>
<td>Ed02</td>
<td>Lewis</td>
<td>lewis@gmail.com</td>
<td>889981****</td>
<td>Germany</td>
</tr>
<tr>
<td>Ed03</td>
<td>Krish</td>
<td>krishna@gmail.com</td>
<td>08999586*</td>
<td>UK</td>
</tr>
</tbody>
</table>
</body>
</html>
Multiple Column Layouts का उपयोग Mobile Device पर आम तौर Narrow Screen की Width वजह से नहीं किया जा सकता है लेकिन आपको उस समय Small Elements को एक साथ जैसे Buttons और Navigation को रखना पड़ सकता है.
jQuery Mobile में हम CSS Classes का उपयोग करके Grid Form में Layouts को Create करते है.
Layout को बनाने के लिये आप CSS Styles का उपयोग कर सकते हो लेकिन ये Library के अंदर उपयोग नहीं होता है.
<!DOCTYPE html>
<html>
<head>
<title>Creating Grid Layout Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile Tutorialsroot</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a"><button>Grid 1</button></div>
<div class="ui-block-b"><button>Grid 2</button></div>
<div class="ui-block-c"><button>Grid 3</button></div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"><button>Grid 1</button></div>
<div class="ui-block-b"><button>Grid 2</button></div>
</div>
<div><button>Grid 1</button></div>
</div>
</div>
</body>
</html>
Two Column Grid को बनाने के लिये Class ui-grid-a को <div> में Add करते है और Two Column Layout को बनाने के लिए Class ui-block-a और ui-block-b में Two Child Container को Add करते है.
<!DOCTYPE html>
<html>
<head>
<title>Two Column Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale = 1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h2>Two Column Grid Example</h2>
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">First Block</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">Second Block</div>
</div>
</div>
<h2>Two Column Grid button Example</h2>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-a">Button 1</a>
</div>
<div class="ui-block-b">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-b">Button 2</a>
</div>
</fieldset>
</body>
</html>
jQuery Mobile में ListView Items को एक Vertical Scrollable List में Managed कर सकते है क्योंकि jQuery Mobile ऐसा करने की अनुमति देता है.
jQuery Mobile में Standard HTML Lists होती है जैसे की Ordered List <ol> और Unordered <ul> Lists.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Simple List Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile Simple List Example</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview">
<li><a href="#">America</a></li>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Japan</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Germany </a></li>
<li><a href="#">Sweden</a></li>
</ul>
</div>
<div data-role="footer">
<h1>Tutorialsroot.com</h1>
</div>
</div>
</body>
</html>
Numbered List को बनाने के लिये एक Unordered List मे Ol Element के Inside मे Attribute data-role="listview" का उपयोग करके बनाया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Numbered List Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile Numbered List Example</h1>
</div>
<div role="main" class="ui-content">
<ol data-role="listview">
<li><a href="#">America</a></li>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Japan</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Germany </a></li>
<li><a href="#">Sweden</a></li>
</ol>
</div>
<div data-role="footer">
<h1>Tutorialsroot.com</h1>
</div>
</div>
</body>
</html>
jQuery Mobile Filter में दी गई List और Element के दिए गए Set में Items को कैसे Filter करें ये Explains करता है.
jQuery Mobile में data-filter="true" को अच्छे से Set करके किसी भी element के Children को Filter किया जा सकता है.
Basic Filter पुरे Widget पर Based होते है और यह Listview Filter Extension को बदल देता है.
इसलिए आप Listview पर List Filter के लिए एक List को बनाने के लिए data-filter="true" को Set कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Basic Filter Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<input data-type = "search" id = "searchForCollapsibleSetChildren">
</form>
<div data-role = "collapsibleset" data-filter = "true" data-children = "> div,
> div div ul li" data-inset = "true" id = "collapsiblesetForFilterChildren"
data-input = "#searchForCollapsibleSetChildren">
<div data-role = "collapsible"
data-filtertext = "India Bengaluru Chennai Mumbai New Delhi">
<h3>India</h3>
<ul data-role = "listview" data-inset = "false">
<li data-filtertext = "India Bengaluru">Bengaluru</li>
<li data-filtertext = "India Chennai">Chennai</li>
<li data-filtertext = "India Mumbai">Mumbai</li>
<li data-filtertext = "India New Delhi">New Delhi</li>
</ul>
</div>
<div data-role = "collapsible"
data-filtertext = "Australia Canberra Sydney Perth Melbourne">
<h3>Australia</h3>
<ul data-role = "listview" data-inset = "false">
<li data-filtertext = "Australia Canberra">Canberra</li>
<li data-filtertext = "Australia Sydney">Sydney</li>
<li data-filtertext = "Australia Perth">Perth</li>
<li data-filtertext = "Australia Melbourne">Melbourne</li>
</ul>
</div>
<div data-role = "collapsible"
data-filtertext = "United Kingdom London Birmingham Cardiff Glasgow">
<h3>United Kingdom</h3>
<ul data-role = "listview" data-inset = "false">
<li data-filtertext = "United Kingdom Canberra">London</li>
<li data-filtertext = "United Kingdom Birmingham">Birmingham</li>
<li data-filtertext = "United Kingdom Cardiff">Cardiff</li>
<li data-filtertext = "United Kingdom Glasgow">Glasgow</li>
</ul>
</div>
</div>
</body>
</html>
Filter Reveal को Feature के Local Data के साथ एक सामान्य Autocomplete बनाने के लिए बहुत आसान बनाता है.
जब किसी Filter मे data-filter-reveal="true" विशेषता होती है तो उसके Search Field के Blank होने पर भी सभी List Items को Hide करना पड़ता है.
Filter मे Placeholder Text को Specify करने के लिये data-filter-placeholder विशेषता को Add किया जा सकता है.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Filter Reveal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form class="ui-filterable">
<input id="filter1" data-type="search" placeholder="Search">
</form>
<ul data-role="listview" data-filter="true" data-input="#filter1">
<li><a href="http://tutorialsroot.com/">Tutorialsroot</a></li>
<li><a href="http://tutorialsroot.com/">Tutorialsroot .com</a></li>
<li><a href="#">Safari</a></li>
</ul>
<form class="ui-filterable">
<input id="filter2" data-type="search" placeholder="Search">
</form>
<ul data-role="listview" data-filter="true" data-input="#filter2">
<li data-filtertext="browser"><a href="#">Google Chrome</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
</ul>
<form class="ui-filterable">
<input id="filter3" data-type="search" placeholder="Search">
</form>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text="Click here!" id="mytable" data-filter="true" data-input="#filter3">
<thead>
<tr>
<th data-priority="6">Employee ID</th>
<th>Employee Name</th>
<th data-priority="1">Employee Email-ID</th>
<th data-priority="3">Employee Phone Number</th>
<th data-priority="4">Employee Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ed01</td>
<td>John B</td>
<td>john@gmail.com</td>
<td>0895634231</td>
<td>US</td>
</tr>
<tr>
<td>Ed02</td>
<td>Lewis</td>
<td>lewis@gmail.com</td>
<td>0895894231</td>
<td>Germany</td>
</tr>
<tr>
<td>Ed03</td>
<td>Krish</td>
<td>krish@gmail.com</td>
<td>0892394231</td>
<td>UK</td>
</tr>
</tbody>
</table>
<form class="ui-filterable">
<input id="filter4" data-type="search" placeholder="Search Country">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-input="#filter4">
<li><a href="#">India</a></li>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">United States</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">Austrelia</a></li>
</ul>
</body>
</html>
jQuery Mobile Form के लिये एक बहुत आसान और एक बहुत Strong Versatile Layout System प्रदान करता है जो Form Styles को Input Button और Slider Support आपस में जोड़ता है.
jQuery Mobile मे HTML Forms को Automatic रूप से किया जाता है जिससे Form को बहुत Attractive और अनुकूल उपयोग में लाया जा सके.
User Input को Save करने के लिए और एक Form Layout को Design करने के लिए इसका उपयोग करता है.
Form Element में Proceedings और Method का Attribute होना चाहिए जो HTTP POST और GET के माध्यम से जमा कर सकें.
Text Input
Select Input
Checkbox Input
Radio Input
Slider Input
Search Input
<!DOCTYPE html>
<html>
<head>
<title>Form Structure Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page">
<div data-role = "header">
<h2>Form Structure Example</h2>
</div>
<div data-role = "main" class = "ui-content">
<form method = "post" action="demo.php">
<label for = "fname">Name</label>
<input type = "text" name = "fname" id = "fname"
placeholder = "Full Name">
<label for = "date">Date</label>
<input type = "date" name = "date" id = "date">
<label for = "select">Select City</label>
<select name = "select" id = "select">
<option value = "1">Seoul, South Korea</option>
<option value = "2">Ljubljana, Slovenia</option>
<option value = "3">Wroclaw, Poland</option>
<option value = "4">Nashville, USA</option>
<option value = "5">Vancouver, Canada</option>
</select>
Flipswitch
<input type = "checkbox" data-role = "flipswitch"><br/>
Gender
<label for = "radio1">
<input type = "radio" name = "radio-choice-0" id = "radio1">Male</input>
</label>
<label for = "radio2">
<input type = "radio" name = "radio-choice-0" id = "radio2">Female</input>
</label>
<label for = "radio3">
<input type = "radio" name = "radio-choice-0" id = "radio3">Other</input >
</label>
Education Qualification
<label for = "checkbox1">
<input type = "checkbox" id = "checkbox1">B Tech
</label>
<label for = "checkbox2">
<input type = "checkbox" id = "checkbox2">BCA
</label>
<label for = "checkbox3">
<input type = "checkbox" id = "checkbox3">BBA
</label>
<label for = "checkbox4">
<input type = "checkbox" id = "checkbox4">MBA
</label>
<label for = "checkbox5">
<input type = "checkbox" id = "checkbox5">MCA
</label>
</form>
</div>
</div>
</body>
</html>
jQuery Mobile Button Style को Supports करता है आप इनको अपनी आवश्यकताओं के अनुसार Use कर सकता हो. jQuery Mobile में <Input> Element Code Button के लिए उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Form Buttons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Button Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="jquery_mobile/demo.php">
<label for="fname">First Name</label>
<input type="text" name="fname">
<label for="lname">Last Name</label>
<input type="text" name="lname">
<input type="submit" value="Submit Button" data-inline="true"
data-corner="true">
<input type="reset" value="Reset Button" data-inline="true"
data-corner="true">
</form>
</div>
</div>
</body>
</html>
Form मे ui-field-contain Class का उपयोग Form मे Label और Input को Involution करने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Form Field Container Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Field contain Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="jquery_mobile/demo.php">
<div class="ui-field-contain">
<label for="fname">First Name</label>
<input type="text" name="fname">
<label for="lname">Last Name</label>
<input type="text" name=name">
<label for="select">Select City</label>
<select name="select" id="select">
<option value="1">Japan</option>
<option value="2">Germany</option>
<option value="3">United Kingdom</option>
<option value="4">India</option>
<option value="5">France</option>
</select>
<input type="submit" value="Submit" data-inline="true">
</div>
</form>
</div>
</div>
</body>
</html>
JQuery Mobile आपको ये बताता है की Forms मे <Select> Element मे कई Options के साथ एक drop-down List को कैसे बनाते है.
JQuery Mobile मे <Select> Element के अंदर <options> element List में बहुत से उपलब्ध Options को Define करता है.
Selection List को Define करने के लिये <Select> </Select> Elements का उपयोग किया जाता है और Select Menus मे <option> </option> Tags का उपयोग Selection List में किसी Item को Define करने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Form Select Menus Example</title>
<meta name="viewport" content="width=device-width, initial-scale = 1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Select Menus Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="jquery_mobile/demo.php">
<fieldset class="ui-field-contain">
<label for="fname">Select Menu</label>
<select id="select" name="fname">
<option value="Japan.">Japan.</option>
<option value="Germany">Germany</option>
<option value="United Kingdom">United Kingdom</option>
<option value="India">India</option>
</select>
</fieldset>
<input type="submit" value="Submit" data-inline="true">
</form>
</div>
</div>
</body>
</html>
JQuery Mobile मे Select Menu को Show करने के लिये सभी मोबाइल Devices पर समान Attribute को data-native-menu="false" के साथ अपने स्वयं के Custom Select Menu का उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>Form Custom Select Menus Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Custom Select Menus Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="jquery_mobile/demo.php">
<fieldset class="ui-field-contain">
<label for="select-custom">Custom Select</label>
<select id="select-custom" data-native-menu="false" name="fname">
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="United Kingdom">United Kingdom</option>
<option value="India">India</option>
<option value="France">France</option>
</select>
</fieldset>
<input type="submit" value="Submit" data-inline="true">
</form>
</div>
</div>
</body>
</html>
Select Menu मे बहुत से Options को Select करने के लिये <Select> Element के अंदर एक से अधिक Attribute का उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>Form Multiple Selection Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Multiple Selection Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="get" action="jquery_mobile/demo2.php">
<fieldset class="ui-field-contain">
<label for="test">Multiple Select</label>
<select id="test" multiple = "multiple" data-native-menu="false" name="test[]">
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="United Kingdom">United Kingdom</option>
<option value="India">India</option>
<option value="France">France</option>
</select>
</fieldset>
<input type="submit" value="Submit" name="submit" data-inline="true">
</form>
</div>
</div>
</body>
</html>
<input> Tag एक Command है जो हमको Users से Input लेने की Permission देता है.
Input Fields और Elements को Styling करने के लिए और Mobile Device के लिए Responsive बनाने के लिए और ज्यादा से ज्यादा Attractive बनाने के लिए Forms मे jQuery Mobile का उपयोग करता है.
<!DOCTYPE html>
<html>
<head>
<title>Forms Inputs Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Inputs</h2>
<input type="search" name="src">
</div>
<div data-role="main" class="ui-content">
<form method="post" action="jquery_mobile/demo1.php">
<label for="fname">First Name</label>
<input type="text" name="fname">
<label for="email">Email Address</label>
<input type="email" name="email">
<label for="date">Birth Date</label>
<input type="date" name="date">
<label for="file">Upload File</label>
<input type="file" name="file">
Select Bikes
<fieldset data-role="controlgroup" name="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox">Bajaj Pulsar</label>
<input type="checkbox" name="checkbox" id="checkbox1">
<label for="checkbox1">Hero Splendor</label>
<input type="checkbox" name ="checkbox" id="checkbox2">
<label for="checkbox2">Bajaj Discover</label>
</fieldset>
Gender
<fieldset data-role="controlgroup">
<input type="radio" name="radio" id = "radio">
<label for="radio">Male</label>
<input type="radio" name="radio" id = "radio1">
<label for="radio1">Female</label>
</fieldset>
<label for="slider">Range</label>
<input type="range" name="slider" id="slider"
value="30" min="0" max="100" data-highlight="true">
<input type="submit" value="Submit" data-inline="true">
</form>
</div>
</div>
</body>
</html>
JQuery Mobile में हम अपने Page पर एक Slider Widget को Add करने के लिये type="range" Attribute के साथ एक Standard Input का उपयोग करते है.
Forms Slider में Input की Value को Starting Position में Handle करने के लिये Configure का उपयोग किया जाता है और जो कि Value Input Text Input मे Populated है.
JQuery Mobile में Slider आपको Slider के Handle को Slide करके एक Value को Select करने की Permission देता है.
Slider आपको Value की एक Range को और एक Numeric Value को Select करने की Permission देता है.
JQuery Mobile में Slider आपको Slide के लिए एक Value Provide करता है जिससे आप एक और value को Select कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Form Multiple Selection Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Form Multiple Selection Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="POST" action="sliderdemo.php">
<label for="slider1">Simple Slider</label>
<input type="range" name="slider1" id="slider1" min="0" max="100" value="50">
<label for="range-1">Show Value:</label>
<input type="range" name="range-1" id="range-1" min="0" max="100" value="20" data-show-value="true">
<label for="range-2">Popup Value:</label>
<input type="range" name = "range-2" id = "range-2" min="0" max="100" value="50" data-popup-enabled="true">
<label for="range-3">Highlight slider:</label>
<input type="range" name="range-3" id="range-3" min="0" max="100" value="20" data-highlight="true">
<input type="submit" value="Submit" name="submit" data-inline="true">
</form>
</div>
</div>
</body>
</html>
Form Slider मे Flip Toggle Switch का उपयोग true/false और on/off Buttons के लिये किया जाता है.
Flip Switch &l&;input type="checkbox"> का उपयोग करके बनाया गया है और इसलिए ये Attribute data-role="flipswitch" को Specify कर रहा है.
<!DOCTYPE html>
<html>
<head>
<title>Flip Toggle Switch Example</title>
<meta name="viewport" content="width=device-width, initial-scale = 1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Flip Toggle Switch Example</h2>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="switchdemo.php">
<h3>Basic Flipswitch</h3>
<input name="flip" type="checkbox" data-role="flipswitch">
<h3>Basic checkbox switch with custom labels</h3>
<input name="flip1" type="checkbox" data-role="flipswitch"
data-on-text="YES" data-off-text="NO" ><br/>
<input type="submit" value="Submit" name="submit"
data-inline="true">
</form>
</div>
</div>
</body>
</html>
Themes का उपयोग करके Buttons, Navbars, Blocks, Links आदि को बहुत Attractive बना सकते है.
jQuery Mobile मे Theme एक Framework है जो Toolbar, Content और Button Colors के 26 Set को Support करता है जिसको Swatch कहा जाता है.
jQuery Mobile आपको Two Independent Style Themes A और B Provide करता है.
jQuery Mobile Themes के पास Bars, Buttons, Content Blocks आदि के लिए अलग Colors होते है.
किसी भी Applications के लिये Custom Themes को बनाने के लिये Attribute data-theme का उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Mobile Themes Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone" data-theme="a">
<div data-role="panel" id="panel1">
<h2>This is a Header</h2>
<p>You can close this board by squeezing the Esc key or by swiping.</p>
</div>
<div data-role="header">
<h2>Header Tutorialsroot</h>
</div>
<div data-role="main" class="ui-content">
<button class="ui-btn">Button</button>
<p>Click on the button to open Panel.</p>
<a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>
<p>List View:</p>
<ul data-role="listview" data-autodividers="true">
<li><a href="#">United States</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Japan</a></li>
</ul><br>
<a href="#popup_menu" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left ui-btn-a">
Click to see menu items</a>
<div data-role="popup" id = "popup_menu" data-theme="a">
<ul data-role="listview">
<li data-role="list-divider">Select your choice</li>
<li><a href="#">United States</a></li>
<li><a href="#">Japan</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">China</a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h2>Copyright 2017. All Rights Reserved.Tutorialsroot.com</h2>
</div>
</div>
</body>
</html>