JQuery Mobile Kya Hai




JQuery Mobile in Hindi Introduction

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 Features

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 बदलाव का उपयोग करता है .

Advantages of jQuery Mobile

  • इसको learn और develop करना बहुत आसान है अगर आपको HTML5, CSS3 की knowledge है .

  • यह cross-platform के साथ-साथ cross-browser के अनुकूल भी है . इसलिए आपको हर device resolution के लिए अलग code लिखने के बारे में concern करने की आवश्यकता नहीं है .

  • इसमें आप code को line में लिखने के बजाए ThemeRoller का उपयोग कर custom theme को बना सकते हैं .

  • यह web applications के को आसान develop करने के लिए javascript के साथ HTML5 का उपयोग करता है .

Disadvantages of jQuery Mobile

  • Mobile फोन से jQuery Mobile का उपयोग करके develop किए गए applications धीमी speed से काम करते हैं .

  • जब किसी अन्य mobile frameworks के साथ jQuery को मिलाया जाता है तो किसी applications को चलाने के लिए अधिक समय की आवश्यकता होती है .

  • संपूर्ण रूप से visual design को बनाने में थोड़ी सी मुश्किल होती है .

  • किसी भी browser में javascript द्वारा सभी device की विशेषताओं का उपयोग नहीं किया जा सकता है .

JQuery Mobile Versions

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

JQuery Mobile in Hindi Pages

Web page बनाने के लिए jQuery Mobile में built-in attribute और data-role का उपयोग किया जाता है . jQuery Mobile में jQuery और CSS विषयों की libraries को <head> tag के अंदर रखा जाता है .

और <Body> tag के अंदर सभी screen या मोबाइल डिवाइस पर page <div> element के साथ नीचे identify किया जाता है .

Syntax

<div data-role=”page”>
Hello Tutorialsroot .........
</div>

container page में HTML markups को जो कि valid हो उसको उपयोग किया जा सकता है .

Single Page Application

किसी भी standard format को बिना बदले बहुत से pages को बनाने के लिए उपयोग किया जाता है . Standard format का उपयोग jQuery mobile में एक page को बनाने के लिए उपयोग किया जाता है .

Multi Page Application

एक HTML document में एक से अधिक pages को सम्मिलित किया जा सकता है जो एक साथ बहुत से div tag को जोड़कर loaded किए जाते हैं .

JQuery Mobile in Hindi Transitions

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 का उपयोग करते है .

jQuery Mobile Data Transition Effects

jQuery Mobile में data-transition attribute का उपयोग किसी दिए गए element के अन्दर link के transition को configure करने के लिए किया जाता है और किसी दूसरे links के लिए transition effects से unaffected रहते हैं .

JQuery Mobile in Hindi Buttons

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 के रूप में किया जाता है .

jQuery Mobile Handling Button Events

जब हम button पर click करते है तो उस समय एक default action होता है और button click होने पर फौरन default action पर performed करता है .

JQuery Mobile in Hindi Icons

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 Set

Icon के लिए position को specifying करने के लिए आप ui-icon class और ui-btn-icon-pos_name class का उपयोग करके icon में icon set कर सकते हो .

Icon Positioning

आप ui-btn-icon-[value] class का उपयोग करके icon को (top, right, left, bottom) की position को define कर सकते हो .

Icon Only

आप ui-btn-icon-notext class का उपयोग करके button में केवल एक icon को define कर सकते हो .

Icon Shadow

इसमें आप ui-shadow-icon class का उपयोग करके अपने button में एक icon shadow को जोड़ सकते हो .

Removing Circle

इसमें आप ui-nodisc-icon class का उपयोग करके icon के चारों और grey circle को निकाल सकते हो .

Black or White Icons

आप इसमें IU-alt-icon class का उपयोग करके किसी भी icon का color black सकते हैं . और default रूप से, सभी icon white होते हैं .

JQuery Mobile in Hindi Popup

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

jQuery Mobile में popup widget को एक div container के अन्दर attribute data-role="popup" का उपयोग करके बनाया जाता है . यह एक popup को बनाता है और उसमें content को display करता है .

PopUp Widget with Menus

Checkbox का उपयोग करके एक default standard flip switch को बनाया गया है और या input में rounded corners करके लेकिन users के पास यह option data-corners="false" होता है .

JQuery Mobile in Hindi Toolbar

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 और आदि शामिल हैं .

Header Bars

Page के top पर header को रखा जाता है और header में Logo, Home, Services आदि जैसे button होते हैं और इसमें 3 या 5 buttons होते है लेकिन footer में buttons को रखने की कोई limit नहीं होती है .

Footer Bars

Page के bottom पर footer को रखा जाता है. Footer बहुत ही ज्यादा flexible होता है . इसलिए इसकी आवश्यकता के अनुसार आप इसमें बहुत से buttons रख सकते हो .

JQuery Mobile in Hindi Panels

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 किया जाता है .

Opening Panel

Panels को खोलने के लिए हम शुरू में एक link को बनाते है जो <div> panel की Id को referenced करता है और link पर click करते ही panel open हो जाता है.

<a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>

Closing Panel

Panel को close करने के लिए सिर्फ panel के बाहर click करते है और या swipe करते है या “Esc” key को दबाते है.

और यह <div> panel के अंदर स्थित link के साथ एक button का उपयोग करके भी किया जा सकता है जो कि data-rel="close" एक attribute है.

Panel id को referenced करने के लिए href के characteristic को भी indicated करते है जिससे panel को close करते समय प्रदर्शित किया जाता है .

Disable Panel

Panel को click और swipe करने वाले features को disabled करने के लिए केवल panel में data-dismissible और data-swipe-close attribute को panel <div> से जोड़ते है .

Positioning Panels

Panels default रूप से screen के left में दिखाई देते हैं इसको screen के right में दिखाने के लिये data-position="right" attribute को specify करते है .

JQuery Mobile in Hindi Collapsible

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 करता है

Nested Collapsible Blocks

एक collapsible block को एक collapsible block में अंदर Put कर दिया जा सकता है जिसको “Nested Collapsible Blocks कहते है . और इन blocks कई बार nested किया जा सकता है .

Collapsible Sets

collapsible blocks को एक साथ classified किया जाता है जिसको aprodian के रूप में referenced किया जाता है फिर इसको “Collapsible Set” कहा जाता है.

अगर आप नया block को open करते हो तो अन्य सभी block close हैं तो starting में दो या अधिक collapsible content blocks को बनाया जाता है और उसके बाद एक नए container को rugged block के चारों ओर data-role="collapsibleset के साथ wrap करते है .

JQuery Mobile in Hindi Tables

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

Reflow responsive table को बनाने के लिये table element में एक data-role="table" के साथ एक table की आवश्यकता होती है. आप अपनी table में thead और tbody elements को add कर सकते हो क्योंकि reflow default होने के कारण data-mode attribute को set करने की कोई आवश्यकता नहीं होती है .

Column Toggle Table

जब हम data displaying करने के लिए उसकी width minimum होती है तब mode column toggle को hide करता है .

jQuery Mobile columns को hide करता है table के right side से .

Table को बनाने के लिये एक column toggle में data-mode="columntoggle" <table> element को जोड़ते है .

JQuery Mobile in Hindi Buttons

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 के रूप में किया जाता है .

jQuery Mobile Handling Button Events

जब हम button पर click करते है तो उस समय एक default action होता है और button click होने पर फौरन default action पर performed करता है .

JQuery Mobile in Hindi Grids

Multiple column layouts का उपयोग mobile device पर आम तौर narrow screen की width वजह से नहीं किया जा सकता है लेकिन आपको उस समय small elements को एक साथ जैसे buttons और navigation को रखना पड़ सकता है

jQuery Mobile में हम css classes का उपयोग करके grid form में layouts को create करते है .

Layout को बनाने के लिये आप css styles का उपयोग कर सकते हो लेकिन ये library के अंदर उपयोग नहीं होता है .

Two Column Grid

Two column grid को बनाने के लिये class ui-grid-a को <div> में add करते है और two column layout को बनाने के लिए class ui-block-a और ui-block-b में two child container को add करते है .

JQuery Mobile in Hindi ListView

jQuery Mobile में ListView items को एक vertical scrollable list में managed कर सकते है क्योंकि jQuery mobile ऐसा करने की अनुमति देता है .

jQuery Mobile में standard HTML lists होती है . जैसे की ordered list <ol> और unordered <ul> lists.

jQuery Mobile Numbered List

Numbered List को बनाने के लिये एक unordered list मे ol element के inside मे attribute data-role="listview" का उपयोग करके बनाया जाता है .

JQuery Mobile in Hindi Filters

jQuery Mobile filter में दी गई list और element के दिए गए set में items को कैसे filter करें ये explains करता है.

jQuery Mobile में data-filter="true" को अच्छे से set करके किसी भी element के children को filter किया जा सकता है .

Basic Filter

Basic filter पुरे widget पर based होते है और यह listview filter extension को बदल देता है .

इसलिए आप listview पर list filter के लिए एक list को बनाने के लिए data-filter="true" को set कर सकते हो .

Filter Reveal

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 किया जा सकता है.

JQuery Mobile in Hindi Forms Basics

jQuery mobile form के लिये एक बहुत आसान और एक बहुत strong versatile layout system प्रदान करता है . जो form styles को input button और slider support आपस में जोड़ता है .

jQuery Mobile मे HTML forms को automatic रूप से किया जाता है जिससे form को बहुत attractive और अनुकूल उपयोग में लाया जा सके .

Form Structure

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

Form Buttons

jQuery Mobile button style को supports करता है आप इनको अपनी आवश्यकताओं के अनुसार use कर सकता हो . jQuery Mobile में <Input> element code button के लिए उपयोग किया जाता है .

Form Field Container

Form मे ui-field-contain class का उपयोग form मे label और input को Involution करने के लिए किया जाता है .

JQuery Mobile in Hindi Forms Select

JQuery Mobile आपको ये बताता है की forms मे <Select> element मे कई options के साथ एक drop-down list को कैसे बनाते है .

JQuery Mobile मे <Select> element के अंदर <options> element list में बहुत से उपलब्ध options को define करता है .

Select Menus

Selection list को define करने के लिये <Select> </Select> elements का उपयोग किया जाता है . और select menus मे <option> </option> tags का उपयोग selection list में किसी item को define करने के लिए किया जाता है .

Custom Select Menus

JQuery Mobile मे select menu को show करने के लिये सभी मोबाइल devices पर समान attribute को data-native-menu="false" के साथ अपने स्वयं के custom select menu का उपयोग करते है .

Multiple Selection

Select menu मे बहुत से options को select करने के लिये <Select> element के अंदर एक से अधिक attribute का उपयोग करते है .

JQuery Mobile in Hindi Forms Inputs

<input> tag एक command है जो हमको users से input लेने की permission देता है .

Input fields और elements को styling करने के लिए और mobile device के लिए responsive बनाने के लिए और ज्यादा से ज्यादा attractive बनाने के लिए forms मे jQuery mobile का उपयोग करता है.

JQuery Mobile in Hindi Forms Slider

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 देता है .

Form Slider Controls

Slider आपको value की एक range को और एक numeric value को select करने की permission देता है .

JQuery Mobile में slider आपको slide के लिए एक value provide करता है जिससे आप एक और value को select कर सकते हो .

Flip Toggle Switch

Form Slider मे flip toggle switch का उपयोग true/false और on/off buttons के लिये किया जाता है .

Flip switch &l&;input type="checkbox"> का उपयोग करके बनाया गया है और इसलिए ये attribute data-role="flipswitch" को specify कर रहा है.

JQuery Mobile in Hindi Themes

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 का उपयोग किया जाता है .