मैं विषय के आधार पर बॉक्स के बाहर jQuery UI लाइब्रेरी का उपयोग कर रहा हूं।jQuery यूआई बटन: मैं एक बटन के लिए उपयोग की जाने वाली कक्षाओं को ओवरराइड कैसे करूं?
बटन के रूप में प्रदान किए गए लिंक बहुत अच्छे हैं, हालांकि मुझे अलग-अलग रंगों के साथ कुछ बटन ओवरराइड करने की आवश्यकता है।
मैं किसी विशेष बटन का उपयोग करने के लिए एक विशिष्ट श्रेणी कैसे निर्दिष्ट करूं?
मैं, कह सकते हैं कि विशेष बटन या बटन एक आईडी देते हैं, और:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
आप हैं:
$("#buttonId").removeClass().addClass("myClass");
आप एकाधिक बटन करने के लिए इसे लागू करना चाहते हैं अपनी ही आईडी के साथ प्रत्येक बस विशेष बटन के लिए कुछ अतिरिक्त/अलग होना चाहते हैं, बस बटन को कुछ वर्ग जैसे वर्ग = "mybuttonclass otherbuttonclass" दें - एकाधिक वर्गों की अनुमति है। तब, केवल अपने वर्ग (ते)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
के लिए सीएसएस नियम जोड़ने के इस प्रकार पृष्ठभूमि सफेद पाठ के साथ लाल है - या जो कुछ भी संयोजन आप चाहते हैं, जो इसे ऊपर झरना (सीएसएस) में वस्तुओं के ऊपर आ जाएगा। (धारणा यह है कि आपकी सीएसएस फ़ाइल jquery UI css फ़ाइल के बाद जुड़ी हुई है, या पेज पर ऑनलाइन है, दोनों jQuery UI UI को ओवरराइड करेंगे।
आपको चयनकर्ताओं की विशिष्टता पर भी विचार करने की आवश्यकता है। मैंने नवीनतम यूआई सीएसएस पर गहराई से नहीं देखा है, लेकिन 1.7 के साथ मेरा अनुभव यह है कि आपको यूआई चयनकर्ता संरचना को दोहराने की आवश्यकता है ताकि यह सुनिश्चित किया जा सके कि आपके ओवरराइड सभी परिस्थितियों में लागू होंगे। – tvanfosson
@ tvanfosson, अच्छी बात यह है कि संभवतः ग़लत धारणा है कि सीएसएस चयनकर्ता जैसे बटन.मेबटनटन क्लास मेरे हिस्से पर सार्वभौमिक ज्ञान इतना अद्भुत नहीं है :)। –
मैं jQuery के लिए सीएसएस को देखने की अनुशंसा करता हूं यूआई बटन और सीएसएस की संरचना को डुप्लिकेट करना जो बटन निर्दिष्ट करता है, लेकिन jQuery UI कक्षाओं के बजाए अपनी कक्षा के साथ। इस सीएसएस में आपको ओवरराइड बनाएं और इसे jQuery UI सीएसएस के बाद शामिल करें। सीएसएस एक संयोजन का उपयोग करता है सबसे विशिष्ट चयनकर्ता और क्रम निर्धारित करने के जो लागू करने के लिए महत्व देता है। ऐसा करने से आप वाकई सीएसएस jQuery के द्वारा प्रयोग किया चयनकर्ताओं से प्रत्येक के लिए एक ही विशिष्टता ताकि आपके सीएसएस आदेश के आधार पर पूर्वता लेता है कि कर देगा।
मैगाज को तोड़ना ine में article है जो विशिष्टता समस्या के बारे में जानने की आपकी अपेक्षा से अधिक जानकारी है।
@tvanfosson: यह काम करता है और बढ़िया है, अब जो मैंने अपने प्रश्न में शामिल नहीं किया है, जो मेरे पास होना चाहिए, यह है कि इसे स्विच करने योग्य होना चाहिए। उदाहरण: किसी अन्य क्रियाओं के आधार पर अगला या सहेजने वाले बटन को हाइलाइट करना। मुझे लगता है कि कुछ कोड (jquery) की आवश्यकता है। –
@ मार्क - यदि परिवर्तन केवल बटन पर होवर करने के कारण नहीं हैं, जिसे आप सीएसएस के साथ संभाल सकते हैं, तो हाँ, @ करीम के उत्तर पर नज़र डालें और अपने jQuery में हटाए गए वर्ग को अपडेट करने के लिए अपने jQuery में निकालें/addClass का उपयोग करें उपयोगकर्ता के व्यवहार के आधार पर तत्व। – tvanfosson
मुझे यह पाया गया कि यह मेरे लिए काम करता है: $ ("। BtnSave")। RemoveClass ("ui-state-default")। AddClass ("SaveButtonStyling");
मूल रूप से ui-राज्य डिफ़ॉल्ट वर्ग निकालें और फिर पृष्ठभूमि रंग के लिए अपने खुद के जोड़ने आदि
thsi का मतलब है कि गोल कोने वर्ग आदि डाल रुके थे और मैं आदि पृष्ठभूमि रंग में संशोधन करने में सक्षम था की जरूरत ।
धन्यवाद, कुछ बिंदु पर भी कोशिश करेंगे .. –
होवर ओवर के लिए थोड़ा और काम करने की ज़रूरत है क्योंकि यह प्रारंभिक शैली में वापस आती है लेकिन शायद इसे किसी अन्य वर्ग के साथ लिखने पर हो सकती है: होवर – Simon
यदि संभव हो तो यह बेहतर है सीएसएस का उपयोग करने के लिए। जावास्क्रिप्ट में समय निष्पादित होता है, इसलिए जब तक आपकी जावास्क्रिप्ट नहीं आती तब तक आपको पुरानी स्टाइल दिखाई देगी। यह बहुत सुंदर नहीं लगेगा। –
मुझे लगता है कि बटन एपीआई इस जहां से गुजर मानकों
$("button").button({background:"FFFFFF",hover:"FFFFF"});
यह सिर्फ एक विचार है, जहां आप अपने दृश्य विशेषताओं में से कुछ बदल सकते हैं द्वारा रंग आदि को बदल सकते हैं की तरह एक विन्यास शामिल होना चाहिए।
तुम भी कर सकते हैं:
उदाहरण के लिए, जब मुझे jQuery UI स्पिनर नियंत्रण को ओवरराइड करने और सीमाओं को हटाने की आवश्यकता होती है, तो मुझे क्लास देव उपकरण का उपयोग करके सीमाओं को परिभाषित करने वाली कक्षा मिली। फिर सीएसएस में: मैं ऐसा ही कुछ कहा:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
महान काम करता है!
हालांकि यह आमतौर पर काम करेगा, मैं जितना संभव हो सके व्यवहार के लिए देखो और महसूस और जावास्क्रिप्ट के लिए सीएसएस का उपयोग करना पसंद करता हूं। अकेले सीएसएस के साथ व्यक्तिगत तत्वों के पहलुओं को फिर से स्थापित करना संभव होना चाहिए। जावास्क्रिप्ट का उपयोग करने के लिए अनावश्यक रूप से पृष्ठ को जावास्क्रिप्ट, आईएमओ के उपयोग के लिए जोड़ते हैं। – tvanfosson
मैं इसे यूई-बटन-टेक्स्ट क्लास को ओवरराइड करके कोशिश करता हूं: $ ("# SaveButton")। RemoveClass ("ui-button-text")। AddClass ("ui-button-text-save"); लेकिन यह काम नहीं करता है। removeClass() में कुछ भी नहीं होने के कारण मुझे लगता है कि अधिक सीएसएस हटा देता है? –
ठीक है, मैं एक वर्ग को स्वैप करने में कामयाब रहा (एक सीएसएस ऑर्डरिंग मुद्दा था) –