प्रोग्रामिंग, सवालों के जवाब में मदद करें / जावास्क्रिप्ट / कैसे jqueryUI स्लाइडर में PIPS जोड़ने के लिए - जावास्क्रिप्ट, jquery, jquery-ui, jquery-ui- स्लाइडर

jqueryUI स्लाइडर में PIPS जोड़ने के लिए कैसे - जावास्क्रिप्ट, jquery, jquery-ui, jquery-ui-slider

मुझे JqueryUI स्लाइडर में 6 पिप्स जोड़ने की आवश्यकता है। PIPS wopuld की सीमा 2000, 2010, 2020, 2030, 2040, 2050 तक है। मैं इन पिप्स को जोड़ने की समझ कार्यक्षमता प्राप्त करने में असमर्थ हूं। इसके अलावा, वर्तमान में स्लाइडर को स्टेप स्लाइडिंग प्रभाव पर काम करने के लिए कोडित किया गया है। मैं उपयोग कर रहा हूँ:

    <div id="slider"></div>
<script>
$(function() {

var extensionMethods = {

pips: function( settings ) {

options = {

first:  "number",   // "pip" , false
last:   "number",   // "pip" , false
rest:   "pip"       // "number" , false

};

$.extend( options, settings );

// get rid of all pips that might already exist.
this.element.addClass("ui-slider-pips").find( ".ui-slider-pip" ).remove();

// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;

// for every stop in the slider, we create a pip.
for( i=0; i<=pips; i++ ) {

// hold a span element for the pip
var s = $("<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">"+i+"</span></span>");

// add a class so css can handle the display
// we"ll hide numbers by default in CSS, and show them if set.
// we"ll also use CSS to hide the pip altogether.
if( 0 == i ) {
s.addClass("ui-slider-pip-first");
if( "number" == options.first ) { s.addClass("ui-slider-pip-number"); }
if( false == options.first ) { s.addClass("ui-slider-pip-hide"); }
} else if ( pips == i ) {
s.addClass("ui-slider-pip-last");
if( "number" == options.last ) { s.addClass("ui-slider-pip-number"); }
if( false == options.last ) { s.addClass("ui-slider-pip-hide"); }
} else {
if( "number" == options.rest ) { s.addClass("ui-slider-pip-number"); }
if( false == options.rest ) { s.addClass("ui-slider-pip-hide"); }
}


// if it"s a horizontal slider we"ll set the left offset,
// and the top if it"s vertical.
if( this.options.orientation == "horizontal" )
s.css({ left: "" + (100/pips)*i + "%"  });
else
s.css({ top: "" + (100/pips)*i + "%"  });


// append the span to the slider.
this.element.append( s );

}

}


};

$.extend(true, $["ui"]["slider"].prototype, extensionMethods);


$("#slider").slider({
min: 0,
max: 600,
step: 100,


// on slide adjust width of all rects
slide: function(event, ui) {

svg.selectAll("rect")
.attr("width", function (d) {