परिचय
पहले से ही
चौथा अल्फा jQuery मोबाइल जारी किया है, जिसने रूपरेखा को कम या ज्यादा स्थिर और उपयोग में आसान बना दिया है। केवल एक चीज जो अभी भी कमी है वह है अच्छा प्रलेखन। उदाहरण के लिए, अब JQM पृष्ठों में परिवर्तन दिखाने वाले केवल मानक वर्कफ़्लो का वर्णन किया गया है। लेकिन क्या होगा यदि आप गतिशील रूप से डेटा लोड करना चाहते हैं?
लेख मानता है कि आपके पास कम से कम एक छोटा सा आइडिया है कि जावास्क्रिप्ट क्या है, jQuery और JQM कैसे काम करते हैं।उपकरण
इसलिए, कार्य सरल है: XHR का उपयोग करके डेटा एकत्र करें और इसे उपयोगकर्ता को दिखाएं। पहले, आइए देखें कि हमारे निपटान में क्या है। ये
jQuery और
jQuery मोबाइल हैं , जो अनिवार्य रूप से एक jQuery एक्सटेंशन है जो मोबाइल उपकरणों के लिए सामग्री को अनुकूलित करता है। सबसे सरल विकल्प कुछ इस तरह दिखेगा:
$। get ( '/ data / url' , function ( data ) {
के लिए ( डेटा में var आइटम ) {
$ ( "# कॉन्टेंट" ) । परिशिष्ट ( "<p>" + आइटम + "</ p>" ) ;
}
} ;
और हालांकि इस उदाहरण में सब कुछ सरल है, वास्तव में इस दृष्टिकोण को बहुत प्रयास, कोड की रेखाओं की आवश्यकता होगी, और इसलिए सबसे अच्छा विकल्प नहीं है। यह बहुत सरल होगा यदि हम प्राप्त डेटा को किसी फ़ंक्शन में दे सकते हैं, टेम्पलेट दिखा सकते हैं और सुंदर HTML प्राप्त कर सकते हैं। और यहाँ
jQuery टेम्पलेट हमारी सहायता के लिए आते हैं, क्योंकि यही वे करते हैं।
कोशिश
तो, चलिए एक पेज लिखने की कोशिश करते हैं जो गतिशील रूप से कुछ डेटा प्राप्त करेगा और हमें JQM का उपयोग करके दिखाएगा। हमारे सर्वर-फ़ंक्शन-एपीआई को लिखने के लिए नहीं, हम $ .getJSON () फ़ंक्शन के लिए प्रलेखन से एक उदाहरण लेते हैं, जो फ़्लिकर से डेटा लेता है और इस तरह दिखता है:
$। getJSON ( " api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" )
{
टैग : "बिल्ली" ,
टैगमोड : "कोई भी" ,
प्रारूप : "json"
} ,
फ़ंक्शन ( डेटा ) {
$। प्रत्येक ( डेटा। आइटम , फ़ंक्शन ( i , आइटम ) {
$ ( "<img />" ) । attr ( "src" , आइटम । मीडिया । m ) । appendTo ( "#images" ) ;
अगर ( i == 3 ) गलत है ;
} ;
} ;
बेशक, हमें
फ़ंक्शन (डेटा) {} के अंदर सब कुछ की आवश्यकता नहीं है, हम इसे टेम्प्लेट में बदल देंगे।
खाना पकाने का पैड
सबसे पहले, देखते हैं कि कंसोल (डेटा) का उपयोग करके सेवा से क्या आता है। नीचे उस भाग की संक्षिप्त सूची दी गई है जिसमें हम रुचि रखते हैं।
वस्तु
जनरेटर: "http://www.flickr.com/"
आइटम: ऐरे [20]
0: वस्तु
लेखक: "none@flickr.com (e m i m i)"
विवरण: "<p> <a href="http://www.flickr.com/people/emimi/"> emimi </a> ने एक तस्वीर पोस्ट की: </ p> <p> <a href =" http ... "
लिंक: "http://www.flickr.com/photos/emimi/5587960723/"
मीडिया: वस्तु
m: "http://farm6.static.flickr.com/5307/5587960723_7d9c0a7a25_m.jpg"
टैग: "कैट रोमियो eo eo" 歐 eo "
यह पता चला है कि
वस्तुओं की एक सरणी है जिसमें डेटा जो हमारे हित में है। मान लीजिए कि हम चित्रों के थंबनेल के साथ एक सूची बनाना चाहते हैं। फिर एरे से प्रत्येक तत्व को <li> टैग के अंदर होना होगा और टेम्प्लेट कुछ ऐसा दिखेगा जैसा नीचे दी गई सूची में दिखाया गया है।
< script id = "dataTemplate" प्रकार = "text / x-jquery-tmpl" >
< li भूमिका = "विकल्प" >
<a href = "#">
< img src = "$ {media.m}" >
< h3 > $ {$ (विवरण) .text ()} < / h3 >
< p > $ {टैग} < / p >
< / a >
< / li >
< / script >
यह टेम्पलेट फ़्लिकर से छवि का एक पूर्वावलोकन प्रदर्शित करेगा, मुख्य पाठ के रूप में विवरण और सबटेक्स्ट के रूप में टैग। यह ध्यान देने योग्य है कि jQuery के टेम्प्लेट एक बहुत शक्तिशाली पुस्तकालय है जो आपको अपने टेम्प्लेट के भीतर jQuery पर स्वयं प्रयास करने की अनुमति देता है, उदाहरण के लिए, विवरणों से स्पष्ट टैग, जैसा कि पिछली सूची में किया गया था।
मुख्य जोड़ें
अब हमें पृष्ठ पर एक बटन जोड़ने की आवश्यकता है, जिस पर क्लिक करके सभी जादू हो जाएंगे, और हमारी खाली सूची, जो डेटा से भर जाएगी। यह कुछ इस तरह दिखेगा:
< div data-role = "content" >
<a href = "#" data-role = "button" data-theme = "b" id = "load-data"> डेटा लोड करें < / a >
< ul data-role = "listview " data-inset = "true" id = "data-listholder" > < / data >
< / div >
और इसके लिए काम करने के लिए, जावास्क्रिप्ट का एक सा जोड़ें। यह कैसे काम करता है इसका स्पष्टीकरण नीचे दिया गया है।
- // तैयार दस्तावेज़ पर सभी सामान
- $ ( दस्तावेज ) । तैयार ( फ़ंक्शन ) {
- $ ( "# लोड-डेटा" ) । क्लिक करें ( फ़ंक्शन ( ) {
- // लोडिंग संकेतक दिखाएं
- $। मोबाइल । पेजलोडिंग ( ) ;
- $। getJSON ( " api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" )
- {
- टैग : "बिल्ली" ,
- टैगमोड : "कोई भी" ,
- प्रारूप : "json"
- } ,
- फ़ंक्शन ( डेटा ) {
- // टेम्प्लेट में डेटा रेंडर करें और सूची में जोड़ें
- $ ( "#dataTemplate" ) । tmpl ( डेटा। आइटम ) । appendTo ( "# data-listholder" ) ;
- // ताज़ा सूची दृश्य
- $ ( "# डेटा-लिस्फ़ोल्डर" ) । सूची ( "ताज़ा" ) ;
- // लोडिंग इंडिकेटर छिपाएं
- $। मोबाइल । पेजलोडिंग ( सच ) ;
- } ;
- } ;
- } ;
लाइन्स 1-3 पहले से ही आपको परिचित होना चाहिए - पृष्ठ लोड करने के बाद, हम क्लिक पर हमारे बटन पर एक ईवेंट श्रोता को लटकाते हैं। जब दबाया जाता है, तो निम्न होता है: पहला,
पेजलोडिंग () फ़ंक्शन एक सुंदर लोडिंग संकेतक दिखाता है। फिर फ़्लिकर के लिए एक अनुरोध है, जो हमारा डेटा प्राप्त करता है। डेटा प्राप्त करने के बाद, jQuery का उपयोग करके, हम अपने टेम्पलेट वाले DOM तत्व का चयन करते हैं और
tmpl () फ़ंक्शन का उपयोग करते हैं, जो इस टेम्पलेट का उपयोग करके प्राप्त डेटा से आइटम सरणी के आधार पर HTML बनाता है। एपेंड () का उपयोग करके उत्पन्न HTML को हमारी खाली सूची में जोड़ा जाता है। यदि आप केवल सूची में डेटा जोड़ते हैं, तो हमें सुंदर बदसूरत HTML मिलती है (आप js कोड में लाइन 17 पर टिप्पणी करने का प्रयास कर सकते हैं और डेटा का अनुरोध कर सकते हैं), क्योंकि jQuery के मोबाइल पेज लोड होने के बाद या स्क्रिप्ट के अनुरोध पर सब कुछ प्रदान करता है। इसलिए, हमें यह कहना होगा कि हम सूची
('रिफ्रेश') के साथ अपनी सूची को अपडेट करना चाहते हैं। उसके बाद,
पेजलोडिंग (ट्रू) फ़ंक्शन का उपयोग करते हुए, लोडिंग इंडिकेटर छिपा हुआ है। और हम देखते हैं (इस मामले में, काफी नहीं) एक साफ सूची।
यह सब है, हमने jQuery मोबाइल का उपयोग करके डेटा को गतिशील रूप से डाउनलोड और प्रदर्शित किया है
निष्कर्ष
पूरा स्रोत कोड
GitHub पर पाया जा सकता
है । JQuery के टेम्प्लेट का विस्तृत विवरण
उपयुक्त अनुभाग में jQuery की वेबसाइट पर पाया जा सकता है। प्रश्न पूछे जा सकते हैं और पूछे जाने चाहिए, मैं हर चीज का जवाब देने की कोशिश करूंगा।