इसे व्यक्त

Carousels, वहाँ से बाहर के रूप में अच्छी तरह से MooTools के लिए कई की एक किस्म के साथ, मैं अभी भी मेरे खुद हिंडोला क्लास लिखने के कुछ अच्छे कारणों के लिए, का फैसला किया
1. पेजिंग (सुविधा के लिए एक विशेष / हिंडोला में स्लाइड कदम कूद करने में सक्षम हो) करना चाहता था.
2. बाएँ और दाएँ बटन / लिंक के स्थान के साथ स्वतंत्रता चाहते थे, जहां कभी मैं कृपया.
3. स्लाइड कदम पर अधिक नियंत्रण.

मैं ऊपर सुविधाओं के साथ एक नया हिंडोला, बनाने का प्रबंधन किया ... नीचे के रूप में किसी भी संशोधनों आप की आवश्यकता होती है! सुझाव के लिए स्वतंत्र महसूस करो!!

मेरे उदाहरण ... [इस तरह दिखता है देखें डेमो ]

डेमो देखें | पृष्ठन संस्करण 1.0 के साथ डाउनलोड MooTools हिंडोला (1994 बार डाउनलोड)

1. हिंडोला पृष्ठन

आप आसानी से अपने हिंडोला पृष्ठन जोड़ सकते हैं, पृष्ठन झंडा, जो आखरी पारित कर दिया जबकि सच करने के लिए MooCarousel के उदाहरण बनाने parater है (पृष्ठन करना चाहते हैं) या झूठी (donot पृष्ठन चाहते हैं) की स्थापना के द्वारा बस.

carousel1 var = नई MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, सच); / / एन एस = स्लाइड्स की संख्या, एसएसएस स्लाइड = कदम आकार

और आप बिल्कुल अपने सीएसएस संशोधित करके देखो इन पृष्ठन achors के पता लग रहा है के रूप में आप बदल सकते हैं.

. Carousel_paging {पाठ संरेखित: सही; मार्जिन: 10px 5px 0 0;}
Carousel_paging वर्तमान carousel_paging {पृष्ठ रूपरेखा: चौड़ाई: कोई नहीं;. 15px; ऊँचाई: 15px; रेखा से ऊँचाई: 15px; पाठ संरेखित: केंद्र; प्रदर्शन: ब्लॉक; फ्लोट: छोड़ दिया; पृष्ठभूमि: D8D8EB # मार्जिन: 0 1px 0 0, पाठ - सजावट: कोई नहीं;}

एक carousel_paging: मंडराना, carousel_paging वर्तमान {पृष्ठभूमि # 4D4D9B:, रंग: # FFFFFF ;).

अच्छी तरह से! वहाँ एक छोटा सा मुद्दा है, हालांकि है, पृष्ठन एंकर अगर सेट है, तो यह हिंडोला घटक के बाद हमेशा उत्पन्न हो जाएगा. मैं यह गतिशील रूप में अच्छी तरह से करना चाहता था, लेकिन तब सिर्फ अनुपात से बाहर उड़ा के लिए स्क्रिप्ट रखने के लिए, मैं इसे छोड़ करने का निर्णय लिया.
लेकिन आप एक छोटे जावास्क्रिप्ट जानते हैं, तो आप आसानी से MooCarousel कक्षा में पृष्ठन पीढ़ी कोड को संशोधित कर सकता है अपनी आवश्यकताओं को खुश करने के लिए.

2. वाम और सही प्रतीक Customising

तुम बस सीएसएस के साथ खेलने के आसपास प्लेसमेंट, इमेजेज या वामपंथियों और सही बटन के किसी भी displat संपत्ति बदल सकते हैं. बाएँ और दाएँ buttoms की नियुक्तियों को बदलने में सक्षम होना सही मेरे हमारे हिंडोला कक्षा मेरे लिए वास्तविक कारण था.
चूंकि इस MooCarousel क्लास, स्वीकार आईडी इन बटनों में से है, तो आप वास्तव में ये बटन कहीं भी जगह कर सकते हैं पृष्ठ पर, अगर आप कृपया ... यह तत्व पदानुक्रम में होना जरूरी नहीं है, मेरे उदाहरण के रूप में.

var carousel1 = नई MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, सच);

सीएसएस
Carousel_container_l, carousel_container_r {मार्जिन: 50px 0 0 0; स्थिति: रिश्तेदार, चौड़ाई: 23px; ऊँचाई: 20px; फ्लोट: छोड़ा; कर्सर: सूचक;}

Carousel_container_r {पृष्ठभूमि - स्थिति: 0-38px;}

{पृष्ठभूमि - स्थिति: 0-58px;} carousel_container_l

3. स्लाइड कदम Customising

मैं क्या मेरा CUSTOMISING स्लाइड क्रम मतलब है?
हाल Carousels दिखाई खिड़की के साथ पूर्ण स्लाइड. तो कहना है कि आप चार वस्तुओं (जैसे मेरे ऊपर नमूना में) था, यह सभी चार आइटम स्लाइड होगा. इस हिंडोला घटक के साथ, आप स्लाइड्स की संख्या और अपनी पसंद के कदम आकार गुजरती हैं.

var carousel1 = नई MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, सच);
c_ns = स्लाइड्स की संख्या, c_sss स्लाइड = कदम आकार

इसके अलावा, मेरे example1 में मैं स्लाइड कदम आकार calcuted जहां तर्क के आधार पर, मैं आइटम्स की संख्या, प्रत्येक आइटम पर चौड़ाई और हाशिये कि मेरे सीएसएस में प्रत्येक आइटम के बाद दिया है पता है.

/ 1 सुरापानोत्सव के लिए * /

var = c1_w 92, / / ​​सुरापानोत्सव आइटम चौड़ाई

var c1_n = 10; तुलना सुरापानोत्सव आइटम की / / कुल संख्या

var c1_pp = तुलना सुरापानोत्सव आइटम perpage की संख्या 4 / /

var c1_marginFactor 51 =;

/ / एसएसएस स्लाइड कदम आकार =; var c1_sss = c1_w * c1_pp

var c1_ns = parseInt (((c1_w *) c1_n / c1_sss) + 0.5); / / एन एस = की संख्या स्लाइड

c1_sss + = c1_marginFactor, / / ​​एसएसएस = स्लाइड कदम आकार, हाशिये के लिए 51

आवश्यकताएँ: 1.2 MooTools

डेमो देखें | पृष्ठन संस्करण 1.0 के साथ डाउनलोड MooTools हिंडोला (1994 बार डाउनलोड)

MooRating पाठ्यक्रम के एक सरल (पार ब्राउज़र, के रूप में यह MooTools पुस्तकालय की शक्ति का उपयोग करता है) हल्के, और उत्कृष्ट MooTools दर्ज़ा समाधान आधारित. यह 'स्टार रेटिंग' के रूप में नहीं करार दिया जाता है, सिर्फ इसलिए कि, रेटिंग छवि के रूप में आप चुनते हो सकता है (मैं सितारे, बार्स और दिल डाउनलोड के साथ उपलब्ध कराई है, लेकिन आप अपने खुद के विभिन्न प्रकार बनाने के लिए और सिर्फ यह में ड्रॉप कर सकते हैं).

यह कैसे की तरह लग रहा है:

	अलग छवियों के साथ MooTools रेटिंग डेमो देखें
	प्रतिशत मान के साथ MooTools रेटिंग डेमो देखें
	भिन्नात्मक मूल्यों के साथ MooTools रेटिंग डेमो देखें

डाउनलोड Mootols सितारा रेटिंग स्क्रिप्ट (718 बार डाउनलोड)

रेटिंग डेटा पूरी संख्या, दशमलव या प्रतिशत:
वर्तमान में स्क्रिप्ट के लिए पूरे (1,2,3,4,5) दशमलव में, मान (1.24, 3.45, आदि) के रूप में या प्रतिशत में दर्ज़ा डेटा (12%, 55% आदि) को दिखाने के लिए डिज़ाइन किया गया है. उल्लेख स्वरूपों में से किसी में डेटा दिखाने के लिए पसंद जावास्क्रिप्ट भीतर कुछ ध्वज मान (moorating.js) बदलकर बस सेट कर सकते हैं
असल में वहाँ दो ई के साथ अपनी पसंद के स्वरूप में मान प्रदर्शित करने के लिए, खेलने दो झंडे कर रहे हैं ...

var inpercent = झूठी; / / सच यह ध्वज सेट है, अगर आप प्रतिशत मूल्यों को प्रदर्शित करने की आवश्यकता है
var isFractional झूठी = / / इसे सही पर सेट है, यदि आप 1.24, 1.25 के बजाय 4.56 1,2 तरह भिन्नात्मक मूल्यों ... 5 चाहते हैं

और मुझे लगता है कि वहाँ किसी भी स्पष्टीकरण के लिए यह आवश्यक है. इसके अलावा. स्क्रिप्ट बहुत सरल है. यदि आप एक छोटे से javascripting पता है, आप स्क्रिप्ट को संशोधित करने के लिए प्रदर्शित मान के किसी भी प्रकार मिल सकता है. उदाहरण के लिए अगर आप तीन दशमलव स्थानों को प्रदर्शित किया चाहता था ... बस स्क्रिप्ट के रूप में नीचे tweak के ...

अगर 3 / / 2 बदल जाता है; (isFractional) {moostartval मैं innerHTML = (एक्स, 3) formatNumber अगर (= 0 x <| x = 5>)}
और {moostartval [मैं] innerHTML = Math.round (x).

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

समारोह updateRating (आईडी, दर्ज़ा) {
/ / चेतावनी (आईडी "," दर्ज़ा +);
/ / रेटिंग के साथ जो कुछ भी
}

जावास्क्रिप्ट में समारोह updateRating "कहा जाता है. इस समारोह रेटिंग डिव के आईडी पारित किया गया है, के रूप में पहचान रहा है जो (यदि वहाँ अधिक है कि पृष्ठ पर एक रेटिंग) अद्यतन किया गया था और रेटिंग के मूल्य [updateRating (आईडी, दर्ज़ा)] आप जो कुछ भी आप इन मूल्यों के साथ करना चाहते करने के लिए चुनते हैं, जैसा कि मैंने पहले उल्लेख किया है.

रेटिंग छवि: सितारे, दिल, बार्स, या कुछ भी आप कृपया
(तारे, आदि दिल) उपरोक्त प्रकार के किसी भी रेटिंग बदलना बहुत आसान है. सिर्फ एक प्रदान करने के लिए इसी तरह की छवि बना सकते हैं और अंदर ड्रॉप करने के लिए याद रखें, यदि आप छवि का नाम बदलने, सीएसएस फ़ाइल में आवश्यक परिवर्तन करने के लिए, नीचे देखें.

Moostar {मार्जिन: 0px; गद्दी: 0px; अतिप्रवाह: छुपा, चौड़ाई: 84px; ऊँचाई: 20px; फ्लोट: छोड़ा; पृष्ठभूमि: ('stars.gif') यूआरएल दोहराने - x;}.
. Moostar अवधि {फ्लोट: छोड़ा; मार्जिन: 0px; गद्दी: 0px; प्रदर्शन: ब्लॉक; चौड़ाई: 84px; ऊंचाई: 20px; पाठ सजावट: कोई नहीं; पाठ इंडेंट: 9000px, z-सूचकांक: 20;}
. Moostar curr {पृष्ठभूमि: यूआरएल ('stars.gif) 25px छोड़ दिया;}

अधिकांश मूल्यांकन विजेट प्रत्येक स्टार पर घटनाओं पर माउस के साथ स्टार और आधे स्टार छवियों का उपयोग करें. मू मूल्यांकन के लिए एक बहुत कम भूमि के ऊपर के साथ आवश्यक दृश्य प्रभाव को प्राप्त करने के लिए एक पृष्ठभूमि छवि के रूप में एक सरल प्रेत छवि का उपयोग करता है.

आवश्यकताएँ: 1.2 MooTools
डाउनलोड Mootols सितारा रेटिंग स्क्रिप्ट (718 बार डाउनलोड)

मैं एक डबल टिकी दो knobs, न्यूनतम और अधिकतम के साथ स्लाइडर स्लाइडर MooTools का उपयोग कर के लिए देख रहा था. हालांकि, मैं के MooTools मंच में कुछ अच्छी तरह से किया डबल टिकी स्लाइडर मिला, केवल समस्या यह थी कि इन सभी स्लाइडर्स सहारे चयनित श्रेणी मार्कर है. अंत में! मैं अपने खुद के बनाने का फैसला किया. अच्छी तरह से! मैं मूल कोड का उपयोग करें और इसे संशोधित करने के लिए एक स्लाइडर पृष्ठभूमि संकेत दिया कि सीमा नेत्रहीन मेरे उदाहरण में नीचे के रूप में चयनित किया. ब्लू क्षेत्रों चुना मूल्य की सीमा को इंगित करता है.

संस्करण 2.2 डेमो देखें | डाउनलोड MooTools डबल स्लाइडर संस्करण 2.2 टिकी (11,795 बार डाउनलोड)

तुम बहुत आसानी से देखो बदल सकते हैं और के रूप में आवश्यक slider.css संशोधित द्वारा श्रेणी (ऊपर के उदाहरण में नीले रंग में) सूचक, स्लाइडर घुंडी, स्लाइडर ट्रैक का लग रहा है.

क्या मुझे एक टिप्पणी छोड़ अगर आप इसे उपयोगी पाते हैं.