बदलते स्लाइडर हैंडल छवि

Question

मैं JQueryUI स्लाइडर को कस्टमाइज़ करना चाहता था लेकिन स्लाइडर हैंडल छवियों को बदलने के लिए कोई रास्ता नहीं ढूंढ पा रहा हूं। JQuery Themeroller भी हैंडल छवियों के परिवर्तन की अनुमति नहीं प्रतीत होता है। क्या कोई जानता है कि यह कैसे करें?

Answer 1

jQuery UI docs से :

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

अनुकूलन के एक गहरे स्तर की जरूरत है, तो विजेट विशेष ui.slider.css स्टाइलशीट संशोधित किया जा सकता है के भीतर संदर्भित वर्ग हैं। इन वर्गों को नीचे बोल्ड में हाइलाइज्ड किया गया है।

इस विशेष मामले में, आप classname ui-slider-handle साथ तत्व पर एक नज़र लेना चाहते हैं।

डिफ़ॉल्ट स्लाइडर संभाल तत्व निम्नलिखित classnames इसे करने के लिए आवेदन किया है:

• ui-स्लाइडर-संभाल
• ui-राज्य डिफ़ॉल्ट
• ui-कोने-सब

इन क्लासनामों से संबंधित सीएसएस पर एक नज़र डालें और आप जितनी भी जरूरत हो उसे संपादित करने में सक्षम होंगे।

इसके अलावा, मेरा सुझाव है कि आप Firebug इंस्टॉल करें। यह फ़ायरफ़ॉक्स प्लगइन आपके जैसे कार्यों को आपके लिए बहुत आसान बना देगा।

Answer 2

#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 डालना सुनिश्चित करें।