2011-10-17 9 views
9

शायद मुझे कुछ याद आ रहा है, लेकिन jQuery UI दस्तावेज़ों को पढ़ने के बाद, मुझे सामान्य विजेट्स जैसे इनपुट शैलियों को लागू करने और टैग का चयन करने के बारे में कुछ भी दिखाई नहीं देता है। इनपुट टैग पर button() बटन और datepicker() पर कॉल करने के बाद, जो तारीखों को चुनते हैं, क्या मुझे लगातार दिखने वाली शैली देने के लिए <div class="ui-widget"> में सामान्य टेक्स्टरेरा और इनपुट लपेटना चाहिए, या उन्हें एक निश्चित सीएसएस क्लास दें, या दस्तावेज़ लोड पर फ़ंक्शन कॉल करें वह सब कुछ शैलियों?मैं इनपुट फॉर्म और इनपुट टैग जैसे सामान्य फॉर्म तत्वों के लिए jQuery UI शैलियों को कैसे लागू करूं?

उत्तर

4

jQuery UI थीम किसी अन्य सीएसएस दस्तावेज़ की तरह काम करते हैं जो आप उपयोग करेंगे। यदि शैलियों का एक सेट है जो आप किसी विशेष तत्व के बाद होते हैं, तो अक्सर आपको केवल उन वर्गों को जोड़ना होता है जो शैलियों को परिभाषित करते हैं जिन्हें आप तत्व में चाहते हैं।

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

कई मामलों में, jQuery UI विजेट्स क्या करते हैं, डिफ़ॉल्ट रूप तत्वों को छुपाते हैं और फिर उन्हें <div> एस की संरचना की तरह अधिक स्टाइल करने योग्य तत्वों के साथ प्रतिस्थापित करते हैं, जिन्हें वास्तविक रूप तत्वों की नकल करने के लिए स्टाइल किया जा सकता है। इन नकली संरचनाओं में जावास्क्रिप्ट इवेंट हैंडलर भी इनपुट कैप्चर करने के लिए संलग्न होते हैं और इसे वास्तविक रूप तत्वों पर वापस लाते हैं, साथ ही साथ इसे स्वयं में प्रस्तुत करते हैं।

तो, संक्षेप में, तत्व बनाने के लिए jQuery UI शैलियों को लागू करने से कभी-कभी थीम कक्षाओं को लागू करने के रूप में सरल हो सकता है, या कभी-कभी वास्तविक रूप तत्वों की नकल करने के रूप में दर्दनाक हो सकता है। यह सब आपके लक्षित ब्राउज़र और शैलियों पर निर्भर करता है जिन्हें आप लागू करना चाहते हैं।

4

Jquery का उपयोग करने वाले कुछ उदाहरण।

$("input:text").addClass("ui-corner-all"); 

$("#Submit").button(); 
संबंधित मुद्दे