JQuery और jQuery मोबाइल के बीच अंतर?


92

मैं मोबाइल वेब विकास के लिए नया हूं, और मैंने अभी-अभी PhoneGap के साथ एक मोबाइल-ऐप बनाया है, जो कि jQuery के लगातार उपयोग को रोजगार देता है।

लेकिन स्वाभाविक रूप से इस बात से संबंधित कुछ गड़बड़ियां थीं कि मैंने चीजों को कैसे प्रारूपित किया और जिस तरह से वे वास्तव में मोबाइल डिवाइस स्क्रीन पर दिखाई दे रहे थे, जिनके साथ मैं काम कर रहा था और इन कामों को करने के लिए मैंने कई सुझावों को पार करके चीजों का उपयोग करके खुद को आसान बनाने का प्रयास किया। jQuery मोबाइल।

अब यह मुझे भ्रमित करता है - स्वरूपण में jQuery का कोई रोल नहीं था। यह मोबाइल सीएसएस के मेरे शुरुआती स्तर का ज्ञान था जिसने समस्याओं का कारण बना।

तो वास्तव में jQuery मोबाइल क्या करता है, और यह साधारण jQuery से कैसे अलग है? अगर मुझे jQuery पहले से पता है, तो मेरे लिए क्या नया होने वाला है?


2
"मैं विश्वास नहीं कर सकता कि किसी ने इससे पहले नहीं पूछा था।" वास्तव में उन्होंने किया: stackoverflow.com/q/6636388/368167
Tamer Shlash

मोबाइल css क्या है?
महापुरूष

जवाबों:


94

jQuery को विशुद्ध रूप से ब्राउज़र में स्क्रिप्टिंग को सरल और मानकीकृत करने के लिए डिज़ाइन किया गया है। यह निम्न-स्तरीय सामान पर केंद्रित है: तत्व बनाना, DOM में हेरफेर करना, विशेषताओं को प्रबंधित करना, HTTP अनुरोधों को पूरा करना, आदि।

jQueryUI , jQuery के शीर्ष पर निर्मित उपयोगकर्ता इंटरफ़ेस घटकों और सुविधाओं का एक सेट है (यानी इसे काम करने के लिए jQuery की आवश्यकता है): बटन, डायलॉग बॉक्स, स्लाइडर्स, टैब, अधिक उन्नत एनिमेशन, ड्रैग / ड्रॉप कार्यक्षमता।

jQuery और jQueryUI दोनों को आपकी साइट (डेस्कटॉप या मोबाइल) में 'जोड़ा' जाने के लिए डिज़ाइन किया गया है - यदि आप किसी विशेष सुविधा को जोड़ना चाहते हैं, तो jQuery या jQueryUI मदद करने में सक्षम हो सकते हैं।

jQuery मोबाइल , हालांकि, एक पूर्ण ढांचा है। यह एक मोबाइल साइट के लिए आपका शुरुआती बिंदु है। इसके लिए jQuery की आवश्यकता है और मोबाइल-फ्रेंडली साइटों के निर्माण के लिए UI घटक और API दोनों सुविधाएँ प्रदान करने के लिए jQuery और jQueryUI दोनों की सुविधाओं का उपयोग करता है। आप अभी भी इसे जितना चाहें उतना कम या कम उपयोग कर सकते हैं, लेकिन jQuery मोबाइल पूरे व्यूपोर्ट को मोबाइल के अनुकूल तरीके से नियंत्रित कर सकता है यदि आप इसे करते हैं।

एक और बड़ा अंतर यह है कि jQuery और jQueryUI का उद्देश्य आपके HTML और CSS के ऊपर एक परत होना है। आपको केवल अपना मार्कअप छोड़ने और jQuery के साथ इसे बढ़ाने में सक्षम होना चाहिए। हालाँकि, jQuery मोबाइल यह परिभाषित करने के लिए तरीके प्रदान करता है कि आप घटकों को HTML का उपयोग करके कहाँ प्रदर्शित करना चाहते हैं - जैसे (jQuery मोबाइल साइट से):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

data-roleविशेषता एक मोबाइल के अनुकूल यूआई घटक में यह सूची चालू करने के लिए jQuery मोबाइल बताता है और data-insetऔर data-filterके उस समूह के गुण के गुण - जावास्क्रिप्ट की एक पंक्ति लिख बिना। दूसरी ओर, jQueryUI घटक, सामान्य रूप से DOM में घटक को तुरंत लिखने के लिए जावास्क्रिप्ट की कुछ पंक्तियाँ लिखकर बनाए जाते हैं।


जैसा कि अभी-अभी ब्राउज़र आधारित वेबसाइटों पर jQuery + UI से 'चलती' है मोबाइल उपकरणों के लिए jQuery मोबाइल को समझने के लिए, मेरा कहना है कि मैं यह देखने के लिए संघर्ष कर रहा हूं कि इस विशेष उत्तर को 41 अपवोट्स मिले हैं, लेकिन कोई टिप्पणी नहीं। यह विशेष रूप से अपने प्राथमिक जोर में इंगित करता है कि jQueryUI के विपरीत जो "jQuery के शीर्ष पर बनाया गया है", jQuery मोबाइल "हालांकि, एक पूर्ण रूपरेखा" है। यह पूरी तरह से नीचे दिए गए अन्य उत्तरों के साथ है, जो कि राज्य (काफी सटीक रूप से - मुझे लगता है!) कि jQuery मोबाइल को भी चलाने के लिए jQuery की आवश्यकता होती है, और बस .js और .css के बारे में मेरी व्यक्तिगत उलझन में मुझे आवश्यकता होती है।
एंडी लोरेंज

3
क्षमा करें, आप सही हैं मैंने यह स्पष्ट नहीं किया है कि यह jQuery मोबाइल को jQuery की भी आवश्यकता है - मैं इसे अपडेट करूंगा। यद्यपि ध्यान दें कि मेरा उत्तर वास्तव में आपको यह बताने के लिए डिज़ाइन नहीं किया गया है कि jQuery मोबाइल के साथ कैसे उठना और चलना है (यह मूल प्रश्न क्या है), बस वैचारिक मतभेदों का व्यापक अवलोकन करने के लिए।
स्टु कॉक्स

महान सामान स्टु, आपके उत्तर को ट्विक करने के लिए धन्यवाद जो अब बहुत अधिक समझ में आता है। आप आश्चर्यचकित हो सकते हैं कि mobile jquery mobile newbies ’के लिए यह शुरू करना कितना मुश्किल है - यहां तक ​​कि jquerymobile वेबसाइट भी इसे स्पष्ट नहीं करती है! यह अपने आप में एक और भ्रामक बिंदु की ओर ले जाता है - सिर्फ jquerymobile को किस संस्करण की आवश्यकता होती है? Jquerymobile.com लिखने के समय का अर्थ केवल यह है कि 1.4.2 jQuery 1.8 - 1.10 / 2.0 के साथ संगत है - लेकिन मुझे कहीं भी नहीं मिल रहा है जहाँ संस्करण और js / css निर्भरताएँ विशेष रूप से बताई गई हैं!
एंडी लॉरेंज

28

JQuery मोबाइल क्या है

JQM (jQuery मोबाइल) मोबाइल फोन के लिए एक यूजर इंटरफेस सिस्टम है जो jQuery के शीर्ष पर बनाया गया है। JQM को काम करने के लिए jQuery की आवश्यकता होती है। अन्य समान मोबाइल फोन फ्रेमवर्क के विपरीत, JQM सभी प्रमुख मोबाइल, टैबलेट, ई-रीडर और डेस्कटॉप प्लेटफॉर्म और न केवल मोबाइल वेबकिट ब्राउज़रों के लिए समर्थन को लक्षित करता है। फ्रेमवर्क की सबसे उल्लेखनीय विशेषताओं में से एक अजाक्स नेविगेशन प्रणाली है जो एनिमेटेड पेज संक्रमण (बहुत अच्छा) का उपयोग करती है।

आपके लिए क्या नया हो सकता है

JQM के बारे में एक बात जो नए उपयोगकर्ताओं पर एक वक्र गेंद फेंकता है, अजाक्स नेविगेशन है। Jquery से आने वाले आप शायद हर पेज में अपनी जावास्क्रिप्ट को शामिल करने के लिए उपयोग किए जाते हैं और फिर डोम तैयार ( $(function(){ ... }या $(document).ready(function(){ .... }) का उपयोग करके अपने सभी मज़ेदार जावास्क्रिप्ट गतिविधियों को आग लगाते हैं। लेकिन क्योंकि JQM ajax नेवीगेशन का उपयोग करता है इसलिए सिस्टम दूसरे पेज को पहले पेज की तरह ही डोम में खींच लेगा और इसमें मौजूद आपकी स्क्रिप्ट को लोड नहीं करेगा <head>। जब अगले पृष्ठ को अजाक्स के माध्यम से लोड किया जाता है, तो आप देखेंगे कि आपका सामान $(function(){ ...}दूसरे पृष्ठ पर काम नहीं करेगा। इसका समाधान पेजनेट घटना के लिए बाध्यकारी है। ये निम्नलिखित उदाहरण आपकी यात्रा की शुरुआत में मदद करेंगे:

$(document).on('pageinit', function(){ // this fires for each new page

});

किसी निश्चित पृष्ठ को लक्षित करने के लिए आप पृष्ठ की आईडी जोड़ते हैं:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

नए पृष्ठ की घटनाओं को समझना आपको JQM से शुरू करने में मदद करेगा। http://jquerymobile.com/demos/1.1.0/docs/api/events.html शुभकामनाएँ!


5

jQuery एक डोम हेरफेर / ट्रैवर्सिंग और AJAX जावास्क्रिप्ट फ्रेमवर्क है। यह स्वचालित रूप से अलग-अलग ब्राउज़रों के बीच बहुत अधिक जटिलता को समाप्त कर देता है। अनगिनत jQuery प्लगइन्स हैं जो कई कार्य को सरल बनाते हैं।

jQuery मोबाइल, मोबाइल अनुप्रयोगों के लिए यूआई फ्रेमवर्क है जो कि jQuery पर बनाया गया है। इसमें थीमिंग और UI घटक हैं।

सभी में, वे मानार्थ हैं। आपको jQuery का उपयोग करने के लिए jQuery मोबाइल का उपयोग करने की आवश्यकता नहीं है। लेकिन jQuery Mobile का उपयोग करने के लिए, आपको jQuery का उपयोग करना होगा।


तो क्या आप कह सकते हैं कि jQuery Mobileइसका मोबाइल संस्करण क्या है jQuery UI?
जेफ हिंस

@JeffHines - कुछ हद तक। वे अलग-अलग कोड आधार हैं, लेकिन वे अलग-अलग तरीकों से समान लक्ष्य प्राप्त करते हैं।
डैनियल ए। व्हाइट

एक्सेलेंट कॉमेंट्स, डैनियल ए। व्हाइट। आपको jQuery का उपयोग करने के लिए jQuery मोबाइल का उपयोग करने की आवश्यकता नहीं है। लेकिन jQuery Mobile का उपयोग करने के लिए, आपको jQuery का उपयोग करना होगा।
user3174782

एक अल्फा संस्करण अब काम करता है। jquerymobile.com/changelog/1.5.0-alpha1
जैक्सन Ng

2

एंडी की निर्भरता के दूसरे प्रश्न का उत्तर देने के लिए थ्रेड को जोड़ने के लिए ऊपर टिप्पणी करने के लिए पर्याप्त बिंदु नहीं हैं।

मेरा मानना ​​है कि आप जो खोज रहे हैं वह यहां है: jQuery मोबाइल डेमो

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.