इसे व्यक्त

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

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

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

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

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 हिंडोला (1989 बार डाउनलोड)

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,662 बार डाउनलोड)

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

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

इससे पहले कि हम करने के लिए सीएसएस के साथ सौदा करने के लिए हमारे पृष्ठ लेआउट बनाने के लिए, किसी तालिका कक्ष के अंदर कुछ सामग्री aligning के बस बच्चों का खेल लग रहा था. बस "संरेखित करें या अपनी पसंद के संरेखण, केक का टुकड़ा है करने के लिए तालिका के" valign "के संपत्ति सेट!
सीएसएस लेआउट के साथ, यद्यपि हम तत्वों के लिए संपत्ति खड़ी संरेखित ", यह" संरेखित करें "या" valign "के गुण के रूप में सरल रूप में हो नहीं लगता है. अधिक specifiic "ऊर्ध्वाधर पंक्ति में" लगता है, अपनी समस्याओं का कोई हल नहीं खासकर अगर पार ब्राउज़र सीएसएस का एक टुकड़ा लिख रहे हैं.

HTML टेबल्स के उपयोग के बिना, वस्तु पर केंद्रित की समस्या, यह एक छवि या एक से युक्त विभाजन के भीतर कुछ पाठ है, शायद हर यूआई / कुछ बिंदु पर सीएसएस डेवलपर्स दुःस्वप्न किया गया हो. यह समस्या आगे aligning, अगर केन्द्रित किया वस्तु प्रकृति में गतिशील है, यानी जब इसकी ऊंचाई चर रहा है की अपनी चिंताओं extrapolates (अज्ञात ऊंचाई).

हालांकि वहाँ कोई ज्ञात सीधे आगे समाधान है कि ब्राउज़र के साथ हम सौदा है की सीमा के पार काम है, समाधान है कि मैं करता पर आने की कोशिश की है कि मैं इसे में करने की कोशिश की है कुछ ब्राउज़रों में काम करने लगते हैं (IE6, IE 7 , एफएफ).

हल:
मोज़िला, ओपेरा और सफारी जैसे ब्राउज़रों में अजीब "ऊर्ध्वाधर पंक्ति में" संपत्ति अपने होश में लाया जा सकता है बस, "टेबल सेल (प्रदर्शन: टेबल सेल) युक्त विभाजन के" प्रदर्शन "संपत्ति की स्थापना द्वारा व्यवहार .

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

सीएसएस और HTML इस तरह दिखता है
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

एचटीएमएल: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> देखा गया में करें <br/> हैं: 3456 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

डेमो यहाँ देखने के लिए | डाउनलोड स्रोत फ़ाइलें (451 बार डाउनलोड)

शीर्ष सीएसएस संरेखित करें
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

एचटीएमएल: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> देखा गया करें <br/>: 1234 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

नीचे सीएसएस संरेखित करें
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
एचटीएमएल: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> देखा गया करें <br/>: 1234 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

डेमो यहाँ देखने के लिए यहाँ डाउनलोड करें |

उम्र की तरह लगता है, जब से मैं इस संरेखण समस्या के लिए एक उचित समाधान खोजने की कोशिश कर रहा था. लेकिन अब इस समाधान के साथ, मैं थोड़ा शांति में लग रहा है.

एक है कि किसी दिन आशा के साथ

• ऊर्ध्वाधर संरेखण सीएसएस में संपत्ति झाड़ी के आसपास बहुत से हरा करने के लिए बिना, यह किसी तालिका कक्ष के अंदर की तरह काम करेंगे
• कम से कम, मार्जिन टॉप स्थापित ऑटो और मार्जिन नीचे: ऑटो, साथ मार्जिन छोड़ दिया और मार्जिन - सही सेट करने के लिए ऑटो के रूप में एक ही परिणाम के रूप में दे देंगे
• ब्राउज़र युद्धों कुछ दिन खत्म हो जाएगा.
• बस सभी के लिए एक ब्राउज़र होगा.

सीएसएस और ऊपर यहाँ समाधान के HTML understandability के लिए (451 बार करें) .., सीएसएस अनुकूलित किया गया है नहीं है

पुनश्च: और वैसे भी, उन कुछ तस्वीरें मैं क्लिक किया है के थंबनेल हैं ...

ऐसा नहीं है कि वहाँ केवल कुछ है Lightbox है कि आप पा सकते हैं जब आप गूगल कर रहे हैं. lightboxes है कि मैंने पाया की अधिकांश के साथ मुद्दा था कि वे सभी एक या अन्य JQuery, प्रोटोटाइप, MooTools और पसंद की तरह भारी वजन जावास्क्रिप्ट frameworks का उपयोग करने के लिए लग रहा था. वे सब शांत और ठाठ देख रहे हैं. लेकिन यदि आपकी आवश्यकता है "लेकिन मैं अपनी साइट के लिए एक सरल और हल्के lightbox स्क्रिप्ट चाहते हैं", तो यहाँ यह है;

इस lightbox की कुछ अच्छी सुविधाएँ

1. बहुत हल्का
   . 4kb लिपियों जब पैक (केबी unpacked किया 8)
   ख. 2 सीएसएस का केबी
   ग. Lightbox कंटेनर के लिए HTML की कुछ पंक्तियाँ
2. सरल समझने के लिए और लागू
3. एक ही पृष्ठ पर एकाधिक Lightboxes हो सकता है.
4. वही lightbox कंटेनर को दिखाने के लिए, विभिन्न सामग्री (जो अलग - अलग पृष्ठ में छिपा डिवीजनों के रूप में शामिल है), लिंक / विकल्प है कि क्लिक किए जाने पर निर्भर करता है प्रयोग किया जाता है.
5. स्वतः ही केंद्र है, जैसे, विंडो ऊंचाई और चौड़ाई (स्क्रीन संकल्प), पृष्ठ स्क्रॉल राशि और lightbox की सामग्री की ऊंचाई सभी कारकों को ध्यान में ले
6. IE 7 एंड स्मूथरिंग में परीक्षण

डेमो देखें |
डाउनलोड Lightbox स्रोत ज़िप (1801 बार डाउनलोड)

jo.js, jo_pack.js [पैक संस्करण]: जावास्क्रिप्ट वस्तुओं का एक सरल सेट [जो], जो तत्व खिड़की, और दस्तावेज़ पोजीशनिंग स्क्रिप्ट शामिल हैं. आप JO.JS खुला अगर आप कुछ उन्नत Javascripting, सार कार्यों बनाने के साथ अपने हाथ गंदे हो सकते हैं, तत्व गुण और इस तरह के विस्तार. यदि आप Javascripting में भी ज्यादा नहीं है, यह अकेला छोड़ दो.

lightbox.js, lightbox_pack.js [पैक संस्करण: प्रकाश बॉक्स प्रबंधक लिपियों होते. यदि आप पेज डिजाइनर पृष्ठ पर lightbox को लागू करने के साथ भी जिम्मेदार हैं, तो आप LightBoxManager समझने की जरूरत है. LightBoxManager मूल रूप से सिर्फ दो कार्यों showLightBox और closeLightBox शामिल हैं.

lightbox.css: - यदि आप सीएसएस पता है, आप आसपास lightbox.css के साथ खेलने के लिए देखो lightbox.css पता लग रहा है अनुकूलित कर सकते हैं

index.html: दो अलग अलग सामग्री के साथ lightbox का नमूना कार्यान्वयन

lb_underlay_bkg.png: - यह प्रकाश / सिमी पारदर्शी छवि lightbox बुनियाद के लिए पृष्ठभूमि में प्रयोग किया जाता है [बुनियाद lighbox नीचे परत है, जो पृष्ठ पर किसी अन्य संस्था को क्लिक करने से उपयोगकर्ता को रोकता है, जबकि lightbox खुला है]. आप इस उद्देश्य के लिए किसी भी छवि या यहाँ तक कि एक ठोस रंग का उपयोग करें, पृष्ठ डिजाइन और आवश्यकता के आधार पर कर सकते हैं.

icon_lb_close.gif: प्रकाश बॉक्स के ऊपरी दाएँ भाग पर करीब lightbox संभाल के लिए छवि. डिजाइन के अनुसार किसी भी छवि का उपयोग कर सकते हैं

डेमो देखें |
डाउनलोड Lightbox स्रोत ज़िप (1801 बार डाउनलोड)

कृपया हमें अपनी टिप्पणियाँ और प्रतिक्रिया ...