-1
我需要在JqueryUI滑块中添加6个点子。 PIPS的范围从2000年,2010年,2020年,2030年,2040年,2050年。我无法得到添加这些点的理解功能。而且,当前滑块已经被编码以用于步进滑动效果。这里是我使用的代码:如何在jqueryUI滑块中添加PIPS滑块
<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) {
您需要正确地使用该插件,请参考文档:http://simeydotme.github.io/jQuery-ui-Slider-Pips/ :) –