हम रेटिंग सितारों को कैसे विभाजित करते हैं। सीएसएस पर स्टार रेटिंग, एचटीएमएल रेटिंग को सितारों के रूप में आउटपुट करना

स्टार को प्रदर्शित करने के लिए, हम HTML में स्टार प्रतीक के लिए दशमलव कोड का उपयोग करेंगे, अर्थात्: ☆।

एचटीएमएल ☆☆☆☆☆

जब आप संबंधित तारे पर माउस घुमाते हैं, तो हमें एक ठोस पीले तारे को "खोखले" तारे में धकेलने की आवश्यकता होती है। आसान: बस खोखले तारे के ऊपर छद्म तत्व का उपयोग करके एक ठोस तारा रखें।

सीएसएस .रेटिंग > स्पैन: होवर: पहले (सामग्री: "\2605"; स्थिति: निरपेक्ष; )

हम ठोस तारे को बिल्कुल सही स्थिति में रखते हैं और इस प्रकार, हमारा तारा खोखले तारे को ढक देगा।

लेकिन अभी तक हमारे लिए सब कुछ केवल प्रत्येक विशिष्ट सितारे के लिए ही काम करता है। और हमारा कार्य, बेहतर उपयोगकर्ता अनुभव के लिए, सभी सितारों को भरना है (यह इस पर आधारित है कि माउस किस तारे की ओर इशारा करता है)। उदाहरण के लिए, यदि उपयोगकर्ता 4वें तारे पर माउस घुमाता है, तो 4 तारे प्रदर्शित करना आवश्यक है, यदि 5वें पर है, तो 5, आदि।

सीएसएस के माध्यम से पिछले आसन्न तत्व का चयन करने का कोई तरीका नहीं है। हालाँकि, अगले चाइल्ड तत्वों का चयन करने का एक तरीका है।

यदि हम वस्तुतः वर्णों को उलट देते हैं (स्निपेट हमें इसमें मदद करेगा -), तो हम संबंधित कॉम्बिनेटर का उपयोग करके उन सभी सितारों का चयन कर सकते हैं जो माउस-ओवर स्टार से पहले दिखाई देते हैं, लेकिन HTML में बाद में।

सीएसएस .रेटिंग (यूनिकोड-बीड़ी: बीड़ी-ओवरराइड; दिशा: आरटीएल; ) .रेटिंग > स्पैन: होवर: पहले, .रेटिंग >

इसलिए हमने छोटे कोड का उपयोग करके एक उपयोगकर्ता-अनुकूल स्टार रेटिंग टेम्पलेट बनाया है। रेटिंग के काम करने के लिए पूरा सीएसएस कोड नीचे दिया गया है:

सीएसएस .रेटिंग (यूनिकोड-बीड़ी: बीड़ी-ओवरराइड; दिशा: आरटीएल; ) .रेटिंग > स्पैन (डिस्प्ले: इनलाइन-ब्लॉक; स्थिति: सापेक्ष; चौड़ाई: 1.1em; ) .रेटिंग > स्पैन: होवर: पहले, .रेटिंग > स्पैन: होवर ~ स्पैन: पहले (सामग्री: "\2605"; स्थिति: निरपेक्ष; ) वास्तविक उपयोग

सबसे अधिक संभावना है, जावास्क्रिप्ट की भागीदारी के बिना ऐसा करना संभव नहीं होगा। जब उपयोगकर्ता किसी स्टार पर क्लिक करता है, तो सर्वर पर एक AJAX अनुरोध भेजा जाता है और विजेट को एक क्लास प्राप्त होती है जिसके माध्यम से सितारों की चयनित संख्या प्रदर्शित होती है। क्या ऐसे स्टार सिस्टम को लागू करने के लिए जावास्क्रिप्ट पर भरोसा करना वास्तव में असंभव है, अगर इसका उपयोग साइट पर हर जगह किया जाता है? यदि आपका एप्लिकेशन पूरी तरह से जावास्क्रिप्ट पर निर्भर है, तो यह विकल्प निश्चित रूप से उपयुक्त है। लेकिन, यदि आपकी साइट को जावास्क्रिप्ट के बिना काम करने की आवश्यकता है, तो उस स्टार रेटिंग को प्राप्त करने के लिए बहुत अधिक काम की आवश्यकता होगी। आप ली वेरस का उदाहरण देख सकते हैं, जो एक फॉर्म के हिस्से के रूप में रेडियो बटन का उपयोग करता है और जावास्क्रिप्ट का उपयोग नहीं करता है।

इस ट्यूटोरियल में, हम सीएसएस की प्रभावशाली शक्ति के बारे में जानेंगे और शुद्ध सीएसएस का उपयोग करके एक स्टार रेटिंग बनाएंगे। दुर्भाग्य से, भाई-बहन और पड़ोसी चयनकर्ताओं की गलत हैंडलिंग के कारण यह रैंकिंग कुछ पुराने वेबकिट-संचालित ब्राउज़रों में काम नहीं करेगी। लेकिन यह सभी आधुनिक ब्राउज़रों में ठीक काम करता है।

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

रेडियो बटन का उपयोग अक्सर स्टार रेटिंग बनाने के लिए किया जाता है, इसलिए मार्कअप आपको असामान्य नहीं लग सकता है। एकमात्र चीज जिसे अलग ढंग से करने की आवश्यकता है वह है सितारों का उलटा क्रम: CSS3 चयनकर्ताओं के काम करने के तरीके के कारण उच्चतम रेटिंग पहले आनी चाहिए, CSS4 में इस सीमा को हटाया जा सकता है, लेकिन यह अभी भी बहुत दूर है।

बेशक, यदि वोटिंग परिणामों को AJAX का उपयोग करके पंजीकृत करने की आवश्यकता है, तो इवेंट हैंडलर निर्दिष्ट करने के लिए जावास्क्रिप्ट की आवश्यकता होगी, लेकिन यह रेटिंग पर ही लागू नहीं होता है, जो एक नियमित फॉर्म के हिस्से के रूप में काम कर सकता है।

उन ब्राउज़रों में जो :checked छद्म-वर्ग (checked) का समर्थन नहीं करते हैं, विशेष रूप से संस्करण 9 से नीचे के इंटरनेट एक्सप्लोरर में, रेटिंग रेडियो बटन के रूप में दिखाई देनी चाहिए, लेकिन हमने परीक्षण नहीं किया है।

तो, यहाँ क्या होता है:

HTML कोड

कृपया रेटिंग दें: 5 स्टार 4 स्टार 3 स्टार 2 स्टार 1 स्टार

सीएसएस कोड

रेटिंग (फ्लोट:बाएं ; ) /* :not(:checked) निर्माण उन ब्राउज़रों को रोकने के लिए एक फिल्टर के रूप में कार्य करता है जो इन गुणों को लागू करने से :checked छद्म वर्ग का समर्थन नहीं करते हैं। सभी ब्राउज़र जो :चेक किए गए छद्म-वर्ग का समर्थन करते हैं, वे :not() छद्म-वर्ग का भी समर्थन करते हैं, इसलिए फ़िल्टर को सही ढंग से काम करना चाहिए। */ .रेटिंग :नहीं (:चेक किया गया ) > इनपुट (स्थिति:पूर्ण ; शीर्ष:-9999पीएक्स ; क्लिप:रेक्ट (0 ,0 ,0 ,0 ) ; ) .रेटिंग :नॉट (:चेक ) > लेबल (फ्लोट:राइट) ; चौड़ाई:1em ; पैडिंग:0 .1em ; अतिप्रवाह:छिपा हुआ ; श्वेत-स्थान:अब्रैप ; कर्सर:सूचक ; फ़ॉन्ट-आकार:200%; रेखा-ऊंचाई:1 .2 ; रंग :#ddd ; पाठ-छाया:1px 1px #bbb , 2px 2px #666 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .रेटिंग :नहीं (:चेक किया गया ) > लेबल:पहले ( सामग्री : "★ " ; ) .रेटिंग > इनपुट: चेक किया गया ~ लेबल (रंग: #f70; टेक्स्ट-छाया:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0 ,0 ,0 ,.5 ); ) .रेटिंग:नहीं ( :चेक किया गया) > लेबल:होवर, .रेटिंग:नहीं (:चेक किया गया) > लेबल:होवर ~ लेबल (रंग: सोना; टेक्स्ट-छाया:1px .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ); ) .रेटिंग > इनपुट:चेक किया गया + लेबल:होवर, .रेटिंग > इनपुट:चेक किया गया + लेबल:होवर ~ लेबल, .रेटिंग > इनपुट:चेक किया गया ~ लेबल:होवर, .रेटिंग > इनपुट:चेक किया हुआ ~ लेबल:होवर ~ लेबल,। रेटिंग > लेबल: होवर ~ इनपुट: चेक ~ लेबल (रंग: #ea0 ; टेक्स्ट-छाया:1px 1px गोल्डनरोड, 2px 2px #B57340 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .रेटिंग > लेबल:सक्रिय (स्थिति:सापेक्ष; शीर्ष:2पीएक्स; बाएँ:2पीएक्स; )

इस लेख में हम देखेंगे कि साइट लेखों में स्टार रेटिंग कैसे जोड़ें।

इस कार्यक्षमता को CMS MODX Revolution सिस्टम में फाइवस्टाररेटिंग ऐड-ऑन का उपयोग करके जोड़ा जा सकता है।

फाइवस्टाररेटिंग ऐड-ऑन

फाइवस्टाररेटिंग एक ऐड-ऑन है जो MODX रिवोल्यूशन सिस्टम में तत्व जोड़ता है जिसके साथ आप सितारों का उपयोग करके संसाधनों की फ्रंट-एंड रेटिंग कर सकते हैं।

फाइवस्टाररेटिंग ऐड-ऑन इंस्टॉल करना

फाइवस्टाररेटिंग ऐड-ऑन modx.com रिपॉजिटरी में स्थित है।

इसे MODX Revolution सिस्टम पर "पैकेज प्रबंधित करें" पृष्ठ पर स्थापित किया जा सकता है।

फाइवस्टाररेटिंग ऐड-ऑन का उपयोग करना

किसी स्टार रेटिंग सिस्टम को किसी संसाधन से कनेक्ट करना संसाधन के टेम्पलेट या सामग्री में SimpleRating स्निपेट पर कॉल करके किया जाता है।

[[!सिंपलरेटिंग]]

SimpleRating स्निपेट पैरामीटर:

• &id - उस संसाधन की आईडी जिसके लिए आप रेटिंग प्रदर्शित करना चाहते हैं (डिफ़ॉल्ट रूप से वर्तमान)।
• &tpl - HTML स्टार रेटिंग मार्कअप वाला हिस्सा (डिफ़ॉल्ट tplSimpleRating)।

संसाधन आईडी दर्शाने वाले SimpleRating स्निपेट को कॉल करने का एक उदाहरण:

[[!सिंपलरेटिंग? &आईडी = `3` ]]

खंड नाम दर्शाने वाले SimpleRating स्निपेट को कॉल करने का एक उदाहरण:

[[!सिंपलरेटिंग? &tpl = `tplSimpleRating1` ]]

SimpleRating स्निपेट निम्नलिखित कार्य करता है:

• फ्रंट एंड पर आवश्यक शैलियों और स्क्रिप्ट को पंजीकृत करता है;
• वर्तमान या निर्दिष्ट संसाधन की रेटिंग प्राप्त करता है और इसे पृष्ठ पर प्रदर्शित करता है;
• रेटिंग सक्रिय है या नहीं, यह इस पर निर्भर करता है कि उपयोगकर्ता ने पहले ही इस संसाधन को रेटिंग दे दी है या नहीं।

मूल्यांकन अजाक्स के माध्यम से भेजा जाता है। Ajax अनुरोध को सर्वर पर Action.php फ़ाइल द्वारा संसाधित किया जाता है। यह फ़ाइल किसी दिए गए उपयोगकर्ता द्वारा किसी संसाधन को रेटिंग देने की संभावना की जाँच करती है, रेटिंग सेट करती है (डेटाबेस में आवश्यक जानकारी लिखना) और परिणाम लौटाती है। Action.php से परिणाम प्राप्त करने के बाद, जावास्क्रिप्ट स्क्रिप्ट इसे पृष्ठ पर प्रदर्शित करती है।

रेटिंग धोखाधड़ी के विरुद्ध सुरक्षा लोकलस्टोरेज और आईपी पते के माध्यम से की जाती है।

यदि आवश्यक हो, तो आईपी एड्रेस सुरक्षा को अक्षम किया जा सकता है। यह सिस्टम पैरामीटर सिंपलरेटिंग_आईपी को "नहीं" पर सेट करके किया जाता है।

उच्चतम रेटिंग वाले संसाधन प्रदर्शित करना

निष्कर्ष के रूप में, आइए देखें कि आप किसी पृष्ठ पर 10 उच्चतम-रेटेड संसाधनों को कैसे प्रदर्शित कर सकते हैं। इस कार्य को करने के लिए, हम pdoTools पैकेज से pdoResources स्निपेट का उपयोग करेंगे।

[[!pdoResources? &loadModels=`simplating` &parents=`0` &innerJoin=`( "SimpleRating": ("class":"SimpleRating", "on": "modResource.id = SimpleRating.resource") )` &sortby = `("SimpleRating. रेटिंग_वैल्यू":"DESC")` &select=`( "modResource":"id,pagetitle", "SimpleRating":"रेटिंग_वैल्यू")` &tpl=`@INLINE

[[+आईडी]]। [[+पृष्ठशीर्षक]] - [[+रेटिंग_मूल्य]]

` ]]

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

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

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

प्लगइन के लिए बुनियादी आवश्यकताएँ:

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

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

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

window.jQuery || दस्तावेज़.लिखें("");

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

आप इस बारे में पढ़ सकते हैं कि आपको Google रिपॉजिटरी से jQuery को कनेक्ट करने की आवश्यकता क्यों है।

साथ ही, प्लगइन के सही ढंग से काम करने के लिए, आपको निम्नलिखित शैलियों को कनेक्ट करना होगा:

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

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

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

$('div.रेटिंग').रेटिंग();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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