如何在工具提示滑块中显示字符串?
问题描述:
我想显示在tooldtip几个月名不是数字,我做:如何在工具提示滑块中显示字符串?
<div class="container">
<div class="row" id="time" >
<div class="col-xs-4">
Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b>
</div>
<div class="col-xs-4">
Months: <b>January</b> <input id="months" type="text"
data-provide="slider"
data-slider-ticks-labels='["January", "February", "March, "April", "May", "June", "July", "August", "September", "October", "November", "December"]'
data-slider-min="1"
data-slider-max="12"
data-slider-step="1"
data-slider-value=""
data-slider-tooltip="show" /> <b>December</b>
</div>
<div class="col-xs-4">
Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b>
</div>
</div>
</div>
,我把它叫做:
$("#days, #years, #months").slider({
tooltip: 'always'
});
滑块工作正常,但工具提示不显示月份名称,但数字。
答
为此,你将不得不使用格式化功能。你可以在这里看到例子(例23)。
你的情况:
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$("#days, #years").slider({
tooltip: 'always'
});
$("#months").slider({
tooltip: 'always',
value: [0, 12],
tooltip: 'always',
formatter: function(values) {
return months[values[0]-1] + ' : ' + months[values[1]-1];
},
});
这里是小提琴: https://jsfiddle.net/1qcqLadd/
这是完美的,非常感谢。最后一个问题是,如果我想有一个月的范围,我会如何对待?天和年是一个范围,例如 –
只需通过添加'value'编辑您的#months滑块,然后像上面编辑的那样编辑'formatter' – TalGabay