मैं JQueryUI स्लाइडर को कस्टमाइज़ करना चाहता था लेकिन स्लाइडर हैंडल छवियों को बदलने के लिए कोई रास्ता नहीं ढूंढ पा रहा हूं। JQuery Themeroller भी हैंडल छवियों के परिवर्तन की अनुमति नहीं प्रतीत होता है। क्या कोई जानता है कि यह कैसे करें?बदलते स्लाइडर हैंडल छवि
उत्तर
jQuery UI docs से :
jQuery यूआई स्लाइडर प्लगइन अपने नज़र शैली और लगता है, रंग और पृष्ठभूमि बनावट शामिल jQuery यूआई सीएसएस फ्रेमवर्क का उपयोग करता है। हम को बनाने के लिए ThemeRoller टूल का उपयोग करके बनाने और बनाए रखने के लिए आसान कस्टम थीम डाउनलोड करने की सलाह देते हैं।
अनुकूलन के एक गहरे स्तर की जरूरत है, तो विजेट विशेष ui.slider.css स्टाइलशीट संशोधित किया जा सकता है के भीतर संदर्भित वर्ग हैं। इन वर्गों को नीचे बोल्ड में हाइलाइज्ड किया गया है।
इस विशेष मामले में, आप classname ui-slider-handle
साथ तत्व पर एक नज़र लेना चाहते हैं।
डिफ़ॉल्ट स्लाइडर संभाल तत्व निम्नलिखित classnames इसे करने के लिए आवेदन किया है:
- ui-स्लाइडर-संभाल
- ui-राज्य डिफ़ॉल्ट
- ui-कोने-सब
इन क्लासनामों से संबंधित सीएसएस पर एक नज़र डालें और आप जितनी भी जरूरत हो उसे संपादित करने में सक्षम होंगे।
इसके अलावा, मेरा सुझाव है कि आप Firebug इंस्टॉल करें। यह फ़ायरफ़ॉक्स प्लगइन आपके जैसे कार्यों को आपके लिए बहुत आसान बना देगा।
#demo-frame > div.demo {
padding: 10px !important;
float: left;
}
.contentContainer {
float: left;
width: 400px;
height: 500px;
overflow: hidden;
}
.ui-slider-vertical .ui-state-default {
border: none;
width: 28px;
height: 82px;
background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
left: 0;
margin-bottom: -41px;
margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
background: none;
}
#slider-vertical, .ui-slider {
border: none;
width: 50px;
height: 50px;
background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}
किसी इसलिए यहाँ नमूना सीएसएस कोड के लिए टिप्पणी अनुभाग में पूछा एक मैं अपने स्वयं के कस्टम png छवि फ़ाइलों को संभाल और स्क्रॉलबार पृष्ठभूमि छवि बदलने के लिए प्रयोग किया जाता है। हेडर सेक्शन में jquery ui css के बाद css डालना सुनिश्चित करें।
- 1. jQuery यूआई स्लाइडर: हैंडल
- 2. Jquery UI स्लाइडर हैंडल को कैसे बदलें
- 3. मैं प्रत्येक JQuery UI स्लाइडर हैंडल
- 4. jQuery यूआई स्लाइडर और हैंडल-संशोधन
- 5. jQueryUI स्लाइडर हैंडल सीमा को हटाने के लिए कैसे करें
- 6. nivo स्लाइडर छवि आकार बदलें
- 7. रिलीज हैंडल। बिटमैप छवि से छवि स्रोत
- 8. jQuery UI स्लाइडर हैंडल ओवरलैपिंग को कैसे रोकें?
- 9. स्लाइडर अंगूठे छवि को कैसे बदलें?
- 10. स्लाइडर
- 11. jQuery स्लाइडर रेंज
- 12. फ्लेक्स स्लाइडर - दो स्लाइडर
- 13. ऑटो स्लाइडर
- 14. jQuery ui स्लाइडर गलत मान?
- 15. jquery फॉर्म स्लाइडर (इनपुट-स्लाइडर)
- 16. jquery स्लाइडर इसके ऊपर मान के साथ जो स्लाइडर
- 17. JAVAFX 2.0 मैं एक स्लाइडर में स्लाइडर आइकन को छवि में कैसे बदल सकता हूं?
- 18. Jquery स्वचालित छवि स्लाइडर डब्ल्यू/सीएसएस और jQuery
- 19. निवो स्लाइडर प्लगइन में एक छवि को पुनर्स्थापित करना
- 20. jQuery UI स्लाइडर
- 21. जावास्क्रिप्ट सीमा स्लाइडर/दोहरी स्लाइडर एक रूपरेखा
- 22. छवि
- 23. विनजेएस: स्लाइडर
- 24. निवो-स्लाइडर
- 25. jQueryUI स्लाइडर
- 26. Buttondownfcn स्लाइडर
- 27. जावास्क्रिप्ट स्लाइडर
- 28. Jquery स्लाइडर प्लगइन जो "एकाधिक रेंज वाले हैंडल" का समर्थन करता है
- 29. दो यूके स्लाइडर दो हैंडल के साथ दो टेक्स्ट बॉक्स से इनपुट के साथ?
- 30. मैं कैपिबरा और क्रोमड्राइवर के भीतर से एक jQuery स्लाइडर हैंडल कैसे खींचूं?
मुझे स्लाइडर हैंडल के लिए किसी छवि का संदर्भ नहीं मिल रहा है। इससे भी बदतर, मैं/छवि फ़ोल्डर में हैंडल छवि भी नहीं ढूंढ सकता! - वर्तमान में मेरे पास बिल्कुल कोई सुराग नहीं है जहां से हैंडल आ रहे हैं! –
ठीक है, अंततः चौड़ाई/लंबाई/कोने गुणों को वर्तमान हैंडल बनाते हैं। मैं पृष्ठभूमि छवि को बदलने में भी सक्षम हूं। मुझे लगता है कि इसे अभी काम करना चाहिए। –
@ क्रिमसन - यदि आपके पास समय है, तो यह बहुत अच्छा होगा अगर आप सीएसएस डाल सकते हैं जिसे आपने इस प्रश्न के उत्तर में हैंडल छवि को बदलने के लिए उपयोग किया था। मुझे एक ही समस्या है लेकिन कोई सीएसएस काम नहीं कर सकता है। – Tom