[英]Rails 4 - Bootstrap Slider - dynamically populating tooltips on data ticks?
我正在尝试在我的Rails 4应用程序中使用引导滑块。
我试图使用的功能在bootstrap-slider-rails gem文档中的示例中显示。
我正在尝试根据数据滑块值动态填充工具提示文本。
在我看来,我有:
<input id="ex13" type="text" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>
然后在我的js文件中,我有:
jQuery(document).ready(function(){
$("#ex13").bootstrapSlider({
ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
ticks_snap_bounds: 30,
orientation: 'vertical',
tooltip_position: 'left',
enabled: false
});
});
我有一个名为TRL的模型。 该表具有称为级别(整数)和描述(文本)的属性。
数据滑块值现在显示trl.level。 这部分工作正常,但我无法弄清楚如何使格式化程序功能工作。
我可以从文档中看到,formatter参数不能作为数据属性传递。
我尝试将它添加到js方法,
$("#ex13").bootstrapSlider({
ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
ticks_snap_bounds: 30,
orientation: 'vertical',
tooltip_position: 'left',
enabled: false,
formatter: "<%= @project.trl.description%>"
});
那不起作用。 如何在滑块中使用格式化程序功能?
采取ASHITAKA的建议
我试着修改我的js:
jQuery(document).ready(function() {
$("#ex13").bootstrapSlider({
ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
ticks_snap_bounds: 30,
orientation: 'vertical',
tooltip_position: 'left',
enabled: false,
// formatter: "<%= @project.trl.description%>"
formatter: function(value) {
return "<%= @project.trl.description%>";
}
});
});
该尝试打印出<%= @ project.trl.description%>,而不是获取该属性的内容并将其打印出来。 因此,实现此概念的下一步是如何将保存在数据库中的数据传递给js工具提示?
您不能将Ruby方法(在本例中为@project.trl.description
)传递给JavaScript库(在本例中为bootstrap-slider
)。
我不知道@project.trl.description
的方法是什么,但你必须在JavaScript中重新实现该方法并将其传递给它:
$('#ex13').slider({
... // other options
formatter: function(value) {
return 'Current value: ' + value;
}
});
尝试将描述值添加到input元素中的data属性,因此当输入在html中呈现时,值就在那里。 我在您的输入中添加了数据描述属性
<input id="ex13" type="text" data-description="<%= @project.trl.description%>" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>
然后在您的formatter函数中,使用jquery从数据描述中获取值
formatter: function(value) {
var description = $('#ex13').attr("data-description")
return value+' '+description;
}
如果你的jquery版本是> 1.4.3那么你应该使用$('#ex13').data("description")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.