Codepal

डाक टैग की गईं 'रूपों'

अपने फार्म के लिए एक नियॉन पलक प्रभाव CSS3 और jQuery का उपयोग कर बनाना

शनिवार, जुलाई 17th, 2010

खैर ब्लॉक, CSS3, jQuery के एक बिट के साथ सफाई करवाई पर उज्ज्वल नए बच्चे के लिए धन्यवाद, मैं तुम्हें दिखाने के लिए कैसे अपने रूपों को बढ़ाने के लिए एक गंधा प्रभाव बनाने के लिए होगा.

यकीन है कि रूपों में इस शांत नियॉन झपकी प्रभाव के लिए उपयोगी हो प्रयोजनों के लिए एक बहुत कुछ इतने पर मेरा ट्यूटोरियल नहीं याद करते जा रहे हैं हूँ 1stWebDesigner.com .

इस ट्यूटोरियल में, हम @ वेबकिट - keyframes के जो क्रोम और सफारी जैसे Webkit लेआउट इंजन का उपयोग कर ब्राउज़रों में ही काम करता है का उपयोग किया है. फ़ायरफ़ॉक्स और ओपेरा, जहां कोई विकल्प नहीं है जैसे ब्राउज़रों के लिए, हम इनायत प्रभाव नीचा है, जो इस मामले में सिर्फ एक बॉक्स - छाया पर ध्यान केंद्रित किया जाएगा. इंटरनेट एक्सप्लोरर (संस्करण 8 तक) हम यहाँ क्या सीखना होगा सबसे रेंडर नहीं है, लेकिन 9 आईई के लिए क्या मैं हाल ही में मंच पूर्वावलोकन में देखा है बहुत आशाजनक लगता है सकते हैं.

टैग: सीएसएस 3 , विकास , रूपों , कैसे करने के लिए , jQuery
में पोस्ट ट्यूटोरियल | 4 टिप्पणियाँ »

JqTransform और इसके समाधान का उपयोग करने के बाद समस्या 'चुनें'

गुरुवार, 18 फरवरी, 2010

परियोजना

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

समस्या

html फार्म का नियंत्रण सूची ड्रॉप डाउन 'चुनें' टैग जो विभिन्न 'विकल्प' टैग संलग्न हैं. यहाँ एक फार्म है जो मैं इस ट्यूटोरियल में का उपयोग कर रहा हूँ समस्या की व्याख्या करने के लिए है:

 <form>
	 <h4> jqTransform </ h4> बिना बॉक्स का चयन करें
	 <div id="box-city" class="select-menus">
		 <label> सिटी <लेबल />
		 <br/>
		 <select name="select-country">
  		         <option> गोथम </ विकल्प>
			 <option> न्यूयॉर्क शहर </ विकल्प>
			 <option> Smallville </ विकल्प>
		 </ चयन करें>
		 class="clear"> <div </ div>
	 </ Div>
 <फार्म />

JqTransform क्या करता है, यह पूरी 'चुनें' टैग स्कैन और एक unordered सूची ड्रॉप - डाउन सूची में विकल्पों के हाइपर - लिंक युक्त बनाता है. यह तो मूल 'का चयन करें' टैग और उसकी सामग्री को छुपाता है.

 <form class="jqtransform jqtransformdone">
	 <h4> jqTransform और सामान्य का चयन करें परिवर्तन विधि के साथ बॉक्स का चयन करें </ h4>
	 <div class="select-menus" id="box-name">
		 <Label style="cursor: pointer;"> नाम </ लेबल>
		 <div style="z-index: class="jqTransformSelectWrapper" 10; width: 150px;">
			 <div>
				 <span style="width: 119px;"> बैटमैन </ span>
				 <a class="jqTransformSelectOpen" href="#"> </ a>
			 </ Div>
                         <ul style="width: 148px; display: none; visibility: height: visible; 100px; overflow: hidden;">
				 <li> <a index="0" href="#" class="selected"> बैटमैन </ a> </ li>
				 <li> <a index="1" href="#"> रॉबिन </ a> </ li>
				 <li> <a index="2" href="#"> सुपरमैन </ a> </ li>
				 <li> <a index="3" href="#"> स्पाइडरमैन </ a> </ li>
			 </ Ul>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <option> बैटमैन </ विकल्प>
					 <option> रॉबिन </ विकल्प>
					 <option> सुपरमैन </ विकल्प>
					 <option> स्पाइडरमैन </ विकल्प>
			 </ चयन करें>
		 </ Div>
		 class="clear"> <div </ div>
	 </ Div>
 <फार्म />

यह एक समस्या नहीं बना है जब हम 'का चयन करें टैग' आम तौर पर एक विशेष मूल्य का चयन करने के लिए और का उपयोग करें तो एक बटन सबमिट का उपयोग करके प्रपत्र सबमिशन प्रदर्शन करता है. यह एक समस्या है जब हम कुछ समारोह में प्रदर्शन करने के लिए जब ड्रॉप डाउन सूची के मूल्य बदल रहा है चाहता हूँ बनाता है.

यह सामान्य रूप से चयन नियंत्रण के 'परिवर्तन' विधि का उपयोग करके जावास्क्रिप्ट में हासिल की. 'परिवर्तन' विधि मूल्य परिवर्तन घटना कब्जा है और हम निम्नलिखित तरीके में उपयोगकर्ता द्वारा चयनित मूल्य का उपयोग कर सकते हैं.

 / / गैर रूपांतरित का चयन करें बॉक्स के परिवर्तन घटना पर कब्जा.
 परिवर्तन ("# बॉक्स शहर चुनें") $ (function () {
	 var मान = $ (यह) (वैल).
     चेतावनी ("चयनित मूल्य =" मूल्य +);
 });

लेकिन का उपयोग करने के बाद jqTransform प्लगइन, 'चुनें' टैग नहीं है पर परिवर्तन करने की पद्धति लागू.

समाधान

इस के लिए हल, एक बहुत ही सरल है. हम jqTransformed ड्रॉप डाउन सूची के लिए unordered सूची के भीतर अति लिंक तत्व के लिए एक क्लिक समारोह को लागू करने के द्वारा परिवर्तन घटना अनुकरण कर सकते हैं. तो फिर हम जहां चयनित तत्व सेट या प्रदर्शित अवधि टैग के पाठ तक पहुँचने के द्वारा चयनित मूल्य है सकते हैं.

 / / रूपांतरित का चयन करें बॉक्स मूल्य परिवर्तन घटना पर कब्जा करने का संशोधित विधि का उपयोग कर परिवर्तन घटना पर कब्जा.
 क्लिक करें $ ("# बॉक्स उम्र div.jqTransformSelectWrapper उल ली एक") (function () {
	 var मान = $ ("# div.jqTransformSelectWrapper बॉक्स उम्र अवधि") (पाठ)
	 चेतावनी ("चयनित मूल्य =" मूल्य +);
	 वापसी झूठी; / / डिफ़ॉल्ट ब्राउज़र कार्रवाई को रोकने के
 });

निष्कर्ष

यह jqTransform का उपयोग कर उन्हें अनुकूलित करने के बाद ड्रॉप - डाउन सूची बक्सों के लिए परिवर्तन समारोह अनुकरण के एक तरीका है. दूसरे विकल्प के लिए jqTransform प्लगइन ही संशोधित करने के लिए ठीक से 'चुनें' बक्से के onchange घटना का उपयोग है. मुझे आशा है कि jqTransform प्लग में डेवलपर्स अपने प्लग - इन की अगली रिलीज में इस समस्या को ठीक कर सकते हैं. हालांकि यह एक बहुत ही महत्वपूर्ण है या आम बग नहीं है, लेकिन मुझे आशा है कि यह कुछ मदद की थी.

टैग: सीएसएस , रूपों , jqTransform , jQuery
में पोस्ट ट्यूटोरियल | 71 टिप्पणियाँ »