🚙 😵 🥙 सितारों की रेटिंग प्रदर्शित करने के लिए JQuery प्लगइन 🌀 ♏️ 💾

यह सब इस तथ्य से शुरू हुआ कि मैंने अपने ब्लॉग पर नोट्स के लिए रेटिंग बदलने का फैसला किया।

रेटिंग बदलने का मुख्य कारण यह था कि रेटिंग "पूर्णांक" सितारों द्वारा कटौती की गई थी, ठीक है, स्टार का आधा हिस्सा भी प्राप्त किया जा सकता है। यही है, यदि लेख के लिए रेटिंग 4.75 थी, तो 4.5 सितारों या 5 को प्रदर्शित करना आवश्यक था, जो मुझे बहुत पसंद नहीं आया।

इसलिए, सितारों के रूप में रेटिंग बनाने के लिए अपना खुद का jQuery प्लगइन लिखने का निर्णय लिया गया।

बुनियादी प्लगइन आवश्यकताओं:

रेटिंग को सही ढंग से प्रदर्शित किया जाना चाहिए था, अर्थात, यदि मेरी रेटिंग 4.78 थी, तो छायांकित तारों की संख्या उचित होनी चाहिए।
जब आप किसी स्टार पर होवर करते हैं तो प्रभाव का चयन करने की क्षमता। इसका मतलब है कि उपयोगकर्ता किस ग्रेड को डाल सकेगा। यानी, जब आप तारों के ऊपर माउस पॉइंटर को घुमाते हैं, तो उन्हें या तो पूरे सितारों के साथ, या स्टार के फर्श पर, या माउस पॉइंटर के बाद निरपेक्ष मानों में चित्रित किया जाना चाहिए।
अपने सितारों को स्थापित करने की क्षमता
वह URL निर्दिष्ट करने की क्षमता जिसमें मतदान परिणाम भेजा जाएगा
रैंकिंग में प्रदर्शित सितारों की संख्या निर्दिष्ट करने की क्षमता
मतदान के परिणामों में स्वत: गिरावट। (उदाहरण के लिए: 1 वोट, 2 वोट, 5 वोट)
मतदान के परिणामों के लिए अपनी खुद की संज्ञाएं निर्धारित करने की क्षमता
न्यूनतम रेटिंग मान सेट करने की क्षमता जिसके तहत उपयोगकर्ता मतदान नहीं कर सकेगा
जब आप किसी स्टार पर क्लिक करते हैं, तो कस्टम फ़ंक्शन करने की क्षमता

प्लगइन आवश्यकताओं के विकसित होने के बाद, मैंने प्रोग्रामिंग शुरू कर दी। नतीजतन, मुझे एक बहुत अच्छा मिला, यह मुझे लगता है, सितारों के रूप में रेटिंग नोट्स के लिए jQuery प्लगइन, जिसे मैं ख़ुशी से आपके साथ साझा करूंगा।

अपनी साइट पर इस प्लगइन का उपयोग करने के लिए, पहली चीज जो आपको करने की आवश्यकता है वह है jQuery लाइब्रेरी और स्वयं प्लगइन। हम सामान्य तरीके से jQuery लाइब्रेरी को कनेक्ट नहीं करेंगे, लेकिन Google रिपॉजिटरी से।

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>'); </script> <script type="text/javascript" src="js/jquery.rating.js"></script>

इस कोड को आपकी साइट पर <head> </ head> टैग के बीच रखा जाना चाहिए।

आप यहाँ पढ़ सकते हैं कि jQuery को Google रिपॉजिटरी से क्यों जोड़ा जाना चाहिए।

इसके अलावा, प्लगइन सही ढंग से काम करने के लिए, आपको निम्नलिखित शैलियों को जोड़ना होगा:

 <link href="styles/jquery.rating.css" rel="stylesheet" type="text/css" />

यह सब आपको सोर्स कोड में मिलेगा।

सभी आवश्यक शैलियों और पुस्तकालयों से जुड़े होने के बाद, आप स्वयं प्लगइन को कॉल कर सकते हैं। ऐसा करने के लिए, अपने पृष्ठ पर सही जगह पर div डालें, उदाहरण के लिए, रेटिंग वर्ग के साथ:

 <div class="rating"></div>

अब आप इस तत्व पर प्लगइन को निम्नानुसार कॉल कर सकते हैं:

 $('div.rating').rating();

इस मामले में, डिफ़ॉल्ट सेटिंग्स वाला प्लगइन कहा जाएगा, जिसके परिणामस्वरूप 5 अनचाहे सितारे बनाए जाएंगे।

एक निश्चित संख्या में छायांकित तारों को सेट करने के लिए, हमारे तत्व के अंदर क्लास वैल के साथ एक छिपे हुए इनपुट फ़ील्ड को सम्मिलित करना आवश्यक है, जिसमें आपकी रेटिंग का मूल्य होगा:

 <div class="rating"> <input type="hidden" class="val" value="2.75"/> </div>

हमारे तत्व के अंदर, रेटिंग के बगल में वोटों की संख्या प्रदर्शित करने के लिए, आपको वोट वर्ग के साथ एक और छिपा इनपुट फ़ील्ड जोड़ने की आवश्यकता है:

 <div class="rating"> <input type="hidden" class="val" value="2.75"/> <input type="hidden" class="votes" value="2"/> </div>

यदि आप अब प्लगइन कहते हैं, तो निम्न रेटिंग बनाई जाएगी:

उपयोगकर्ता द्वारा स्टार पर क्लिक करने के बाद, रेटिंग स्वचालित रूप से पुनर्गणित हो जाएगी (छायांकित तारों की संख्या बदल जाएगी) पसंद को ध्यान में रखते हुए, और वोटों की संख्या भी बदल जाएगी।

यदि कई रेटिंग्स एक पृष्ठ पर रखी जाती हैं और आपको सर्वर पर डेटा भेजने की आवश्यकता होती है, तो रेटिंग पहचानने के लिए वोट आईडी के साथ एक अन्य छिपे हुए इनपुट फ़ील्ड का उपयोग किया जाता है:

 <div class="rating"> <input type="hidden" class="val" value="2.75"/> <input type="hidden" class="votes" value="2"/> <input type="hidden" class="vote-id" value="voteID"/> </div>

इस क्षेत्र का मान मतदान परिणाम के साथ सर्वर पर प्रेषित किया जाएगा। इस प्रकार, आप रेटिंग की पहचान कर सकते हैं और उस रेटिंग का मूल्य अपडेट कर सकते हैं जिसकी आपको ज़रूरत है!

अब बात करते हैं कि प्लगइन में क्या सेटिंग्स हैं और उन्हें कैसे बदला जा सकता है!

fx	नाव	एक तारे पर माउस का प्रभाव। फ्लोट - जब आप माउस पर मंडराते हैं, तो माउस पॉइंटर के बाद तारों को धीरे-धीरे चित्रित किया जाएगा आधा - जब आप माउस पर मंडराते हैं, तो तारों को धीरे-धीरे तारे के तल पर चित्रित किया जाएगा पूर्ण - जब आप माउस पर मँडराते हैं, तो पूरा तारा ऊपर चित्रित किया जाएगा
छवि		सितारों की छवि के लिए रास्ता। यह ध्यान दिया जाना चाहिए कि चित्र को स्प्राइट के रूप में बनाया जाना चाहिए, अर्थात। छवि के शीर्ष पर एक सितारा है जो अप्रकाशित सितारों के लिए प्रदर्शित किया जाएगा। नीचे यह एक तारा है जो माउस पर मंडराने पर दिखाई देता है। और सबसे नीचे एक तारा है जो छायांकित तारों के लिए प्रदर्शित होता है। यदि आप तारों को बदलने का फैसला करते हैं, तो इस क्रम को बचाया जाना चाहिए। मैं इस तथ्य पर भी आपका ध्यान आकर्षित करता हूं कि एक स्टार की ऊंचाई और चौड़ाई बराबर होनी चाहिए । अन्यथा, रेटिंग सही ढंग से प्रदर्शित नहीं होगी।
चौड़ाई	32	एक तारे की चौड़ाई
सितारों	5	रैंकिंग में प्रदर्शित सितारों की संख्या
खिताब	[ 'आवाज' 'वॉयस' 'आवाज़ें' ]	संज्ञाओं की एक सरणी जिसे वोटों के लिए प्रदर्शित किया जाएगा
केवल पढ़ने के लिए	झूठा	संचालन की रेटिंग मोड। चूक झूठी है। अगर यह सच है, तो वोट देने का कोई तरीका नहीं होगा
कम से कम	0	न्यूनतम रेटिंग मूल्य जिसके नीचे उपयोगकर्ता वोट नहीं दे सकेगा
यूआरएल		पेज का पता जिस पर वोट के परिणाम के साथ AJAX का अनुरोध भेजा जाएगा
टाइप	पद	AJAX अनुरोध प्रकार। डिफ़ॉल्ट पोस्ट है। यदि आपको सर्वर को GET अनुरोध भेजने की आवश्यकता है, तो यह मान सेट करें - प्राप्त करें
लोडर		छवि का पथ जो उस समय प्रदर्शित होगा जब सर्वर के लिए AJAX अनुरोध करता है
क्लिक		एक कस्टम फ़ंक्शन जिसे उपयोगकर्ता किसी स्टार पर क्लिक करने पर कहा जाता है। फ़ंक्शन का पहला पैरामीटर रेटिंग ऑब्जेक्ट ही होगा, और दूसरा उपयोगकर्ता के वोट का परिणाम है

कस्टम संदेश आउटपुट स्वरूप

यदि रेटिंग डेटा सर्वर पर प्रेषित किया जाता है, तो इस ऑपरेशन का परिणाम उपयोगकर्ता को प्रदर्शित किया जा सकता है।

मान लें कि जिस सर्वर पर आप एक अनुरोध संसाधित कर रहे हैं और एक नोट की रेटिंग को अपडेट कर रहे हैं। इस मामले में, संदेश "धन्यवाद। आपका वोट गिना गया है ”, सितारों की रेटिंग का पुनर्निर्माण करें और उपयोगकर्ता के ब्राउज़र में मतदाताओं की संख्या को अपडेट करें।

लेकिन सबसे अधिक, रेटिंग को अपडेट करने से पहले, यह जांचना आवश्यक है कि इस व्यक्ति ने इस लेख के लिए मतदान किया या नहीं। और इस घटना में कि किसी व्यक्ति ने पहले से ही इस नोट के लिए मतदान किया है, तो उपयोगकर्ता के ब्राउज़र में चेतावनी प्रदर्शित करना आवश्यक है और रेटिंग मूल्य और मतदाताओं की संख्या को अपडेट नहीं करना चाहिए।

इसलिए, प्लगइन को सही ढंग से काम करने के लिए, सर्वर को निम्न फॉर्म का एक json ऑब्जेक्ट वापस करना होगा:

 {'status': 'OK','msg': '.   '}

या

 {'status': 'ERR','msg': '     '}

यदि स्थिति मान के बराबर है - ठीक है, तो सितारों की रेटिंग को अपडेट किया जाएगा और मतदाताओं की संख्या को फिर से जोड़ा जाएगा, अन्यथा एक चेतावनी संदेश बस प्रदर्शित किया जाएगा।

तारों के रूप में नोट्स की रेटिंग प्रदर्शित करने के लिए इस तरह का एक सार्वभौमिक प्लग-इन है, मैंने इसे किया।

आप यहां डेमो देख सकते हैं।

सूत्रों को यहां डाउनलोड किया जा सकता है।

यदि यह प्लगइन काम आया, तो आप मुझे नीचे टिप्पणी में धन्यवाद दे सकते हैं। तो मुझे पता चल जाएगा कि मेरा काम व्यर्थ नहीं है।

यदि इस प्लगइन या प्रश्नों को बेहतर बनाने के लिए सुझाव हैं, तो कृपया टिप्पणियों में लिखें।

मुझे आशा है कि आप इसे अपने लिए उपयोगी पाएंगे!

UPD: टिप्पणियों में टिप्पणियों को ध्यान में रखते हुए, मैंने नीचे की न्यूनतम रेटिंग मान सेट करने के लिए प्लगइन सेटिंग्स में एक विकल्प जोड़ा, जिसके लिए उपयोगकर्ता वोट नहीं कर पाएगा। मैंने प्लगइन के परिणामी HTML-कोड को भी फिर से तैयार किया, जिसके परिणामस्वरूप, अब आप स्वतंत्र रूप से 0 और 5 दोनों की रेटिंग सेट कर सकते हैं

सितारों की रेटिंग प्रदर्शित करने के लिए JQuery प्लगइन

More articles: