मेरे नियमित एचटीएमएल में jQuery यूआई थीम कैसे लागू करें?

Question

मैं विभिन्न विजेट्स जैसे संवाद, बटन इत्यादि के लिए jQuery UI का उपयोग करता हूं। मैं अपने अन्य वेबपृष्ठ तत्वों जैसे त्रुटि/चेतावनी नोटिस और हाइलाइट शैलियों के लिए थीम का उपयोग करना जारी रखना चाहता हूं। तो मैं देखने के लिए क्या वे चारों ओर एक चेतावनी नोटिस सीएसएस के लिए उपयोग करते हैं, उदाहरण के लिए, ThemeRoller पेज के लिए चला गया:

<div class="ui-widget"> 
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
     <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> Sample ui-state-error style.</p> 
    </div> 
</div> 

वहाँ एक आवरण div, पृष्ठभूमि आइकन के साथ अवधि, आदि मैं सिर्फ इन या क्या करता है नकल है है jQuery यूआई जावास्क्रिप्ट मेरे लिए कुछ बनाते हैं? गैर-विजेट एचटीएमएल पर थीम लागू करने का सही तरीका क्या है?

Answer 1

बस इसे अपने स्वयं के HTML पर लागू करें। कोई जावास्क्रिप्ट आवश्यक नहीं है (होवर राज्य को छोड़कर)।

जब आप jQueryUI के विजेट का उपयोग कर रहे हैं, तो जावास्क्रिप्ट उन सभी वर्गों के साथ उस HTML को बनाता है।

यदि आपको होवर स्थिति की आवश्यकता है, तो आपको ui-state-hover कक्षा को टॉगल करना होगा। उसके लिए आपको जावास्क्रिप्ट की आवश्यकता होगी:

$('.ui-state-error').hover(function(){ 
    $(this).toggleClass('ui-state-hover'); 
}); 

Answer 2

आप कर सकते हैं डिफ़ॉल्ट रूप से केवल का उपयोग ThemeRoller अपनी साइट पर पूर्व-निर्धारित-तत्वों: बटन, आइकन शीर्षक पट्टियों आदि और datepicker, संवाद की तरह सभी jQuery विजेट, हाइलाइट/त्रुटि - http://jqueryui.com/themeroller/#themeGallery पर आप देखे गए सभी ग्यारह लोग।

इसे संग्रहीत करने के लिए आपको HTML टैग्स के लिए HTML और उचित कक्षाओं की प्रतिलिपि बनाना है, और ब्राउज़र आपके शामिल themeroller.css से शैलियों को लागू करेगा।

हालांकि, इसका मतलब यह भी है कि आप अपने लेआउट से थोड़ा सीमित हैं। जब तक आप अपने सीटीएम कक्षाओं (.ui-state-default, .ui-state-hover, .ui-state-disabled, icons इत्यादि) को अपने एचटीएमएल में लागू करते हैं, तब तक आप अन्य, गैर-विषम तत्वों को तब भी शामिल कर सकते हैं थीमविचर का उपयोग करने में सक्षम - लागू कक्षाओं की पूरी सूची के लिए http://jqueryui.com/docs/Theming/API देखें।