[英]Rails 4 - bootstrap slider
我正在尝试设置引导程序滑块以在我的Rails 4应用程序中工作。
过去一年的大部分时间里,我一直在努力寻找如何使它工作的方法。
我在此页面中尝试了html / js的每种组合: http : //seiyria.com/bootstrap-slider/
我无法让他们中的任何一个工作。 我没有任何控制台错误,并且可以在chrome inspector元素窗口中看到div id。 当我尝试使用此视图时,呈现的视图只是一个空白容器。
我有:
宝石文件
gem 'bootstrap-slider-rails'
Application.js
//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
// require slider
//= require bootstrap-slider
//= require_tree .
我还尝试过将boots-slider移到tree之后的最后一个位置。
应用/资产/javascripts/slider.js
jQuery(document).ready(function() {
$("#ex8").slider({
tooltip: 'always'
});
app / views / projects / _trl.html.erb
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
谁能告诉我在哪里可以找到有关如何进行此工作的指导。 我不明白为什么其他人这么容易,而我却如此复杂。
控制台不会显示js错误。
采用:
//= require slider
并更新slider.js
:
jQuery(document).ready(function() {
$("#ex8").slider({
tooltip: 'always'
});
});
在结合使用bootstrap-slider和jQuery UI建议的基础上,我将slider.js
文件更改为:
jQuery(document).ready(function() {
$("#ex8").bootstrapSlider({
tooltip: 'always'
});
});
如果您使用的是Turbolinks,请使用:
<script type="text/javascript">
$(document).on('turbolinks:load',function(){
// With JQuery
$("#slider").slider();
$("#slider").on("slide", function(slideEvt) {
$("#sliderSliderVal").text(slideEvt.value);
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.