Jquery UI स्लाइडर हैंडल को कैसे बदलें

मैं स्टॉक JQuery UI स्लाइडर को संशोधित करना चाहता हूं ताकि हैंडल को स्क्वायर होने के बजाय उस पर एक तीर हो। यानी मैं एक कस्टम छवि का उपयोग हैंडल के रूप में करना चाहता हूं।Jquery UI स्लाइडर हैंडल को कैसे बदलें

कुछ ट्यूटोरियल है कि यह कर रहे हैं:

लेकिन मैं इसे काम करने के लिए नहीं मिल सकता है। एक स्थिर संभाल छवि में निम्न कोड परिणाम:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider({handle: '#myhandle'}); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"><div id="myhandle"></div></div> 
</body> 
</html>

यह है के रूप में यदि JQuery लेने यह नहीं है कि मैं संभाल के लिए myhandle आईडी का उपयोग करना चाहते हैं। मैं सोच रहा हूं: क्या मुझे को विकल्प को संभालने के लिए JQuery के लिए प्लगइन चाहिए? (यह http://docs.jquery.com/UI/Slider में प्रलेखित नहीं है)। या शायद यह केवल JQuery के पुराने संस्करण में काम किया?

कोई विचार?

स्रोत

2009-07-30 Tom

इसका उत्तर पहले दिया गया है: http://stackoverflow.com/questions/1170596/changing-slider-handle-image – karim79

प्रश्न में सभी तीन ट्यूटोरियल लिंक अब मर चुके हैं। :( –

सीएसएस क्लास जिसे JQuery स्लाइडर हैंडल में एक छवि जोड़ने के लिए बदला जा सकता है उसे ""ui-slider-क्षैतिज .ui-slider-handle" कहा जाता है।

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider(); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"></div> 
</body> 
</html>

मैं एक संभाल विकल्प यह ऐसा करने का पुराना तरीका है और अब JQuery ui को 1.7.2 में समर्थित दर्ज की लगता था:

निम्नलिखित कोड एक डेमो पता चलता है?

स्रोत

2009-07-30 16:05:12 Tom

वाह .. मुझे भी एक ही समस्या का सामना करना पड़ रहा था और यह आपके समाधान से हल हो गया .. धन्यवाद दोस्त –

मैंने डीडब्ल्यू में इस सटीक कोड की प्रतिलिपि बनाई और चिपकाया और कोशिश की। मैंने छवि को अपने साथ बदल दिया। स्लाइडर नहीं और न ही छवि प्रदर्शन बिल्कुल। मैंने इस विषय से संबंधित प्रत्येक समाधान की कोशिश की है और छवियों को बदलने के लिए कुछ भी काम नहीं किया है।मैं अपना कोड अपने धागे के नीचे पोस्ट करूंगा और यदि SO पर कोई समाधान समाधान है, तो उम्मीद है कि कोई SO पर यूआरएल सूचीबद्ध कर सकता है। – Chris22

पीएनजी का लिंक टूटा हुआ है। –

आपको उस सीएसएस कक्षा में border:none भी सेट करना चाहिए।

स्रोत

2010-06-08 02:36:28

.ui-slider .ui-slider-handle{ 
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute; 
    top: -10px; 
    border-style:none; 
}

स्रोत

2010-08-04 02:07:40

आप केवल यह restyling से, कोई अन्य विषय कुछ के साथ संभाल प्रतिस्थापित करने की आवश्यकता चाहिए:

You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization.

Working Example

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>'); 
 

 
$('.slider').slider({ 
 
    range: "min", 
 
    value: 10 
 
});

.slider .ui-state-default { 
 
    background: none; 
 
} 
 
.slider.ui-slider .ui-slider-handle { 
 
    width: 14px; 
 
    height: 18px; 
 
    margin-left: -5px; 
 
    top: -4px; 
 
    border: none; 
 
    background: none; 
 
} 
 
.slider { 
 
    height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<div class="slider"></div>

स्रोत

2014-02-11 18:31:15 apaul

यह पूर्णता और कामकाजी उदाहरण के लिए स्वीकार्य उत्तर होना चाहिए। आपके साथ एक पूर्व-मौजूदा तत्व क्यों शैली को इंजेक्ट कर सकता है? –

यह परिवर्तन केवल मल्टीहैंडल स्लाइडर में पहला संभालता है। ApiDoc में आप देख सकते हैं: "उदाहरण के लिए, यदि आप मान निर्दिष्ट करते हैं: [1, 5, 18] और एक कस्टम हैंडल बनाएं, प्लगइन दूसरे दो बनाएगा।"

स्रोत

2016-02-09 08:30:31 anatoli

कृपया अपने समाधान के बारे में कुछ टिप्पणियां जोड़ें कि यह समस्या क्यों हल करती है –

Jquery UI स्लाइडर हैंडल को कैसे बदलें

उत्तर

संबंधित मुद्दे