bootstrap-slider插件使用方法

bootstrap-slider例子地址：https://seiyria.com/bootstrap-slider/

bootstrap-slider github地址：https://github.com/seiyria/bootstrap-slider

這個插件的使用方法並不難，我們可以在它的例子頁面看到很多種情況的使用方法，都給了相應的代碼。我就簡述一下在使用過程中遇到的一些坑及解決辦法。

我們需要實現的功能如下圖所示：

 

簡而言之就是，選擇之后實時將你選中的數據返回到文本框里面。

 

解決思路：

1.點擊文本框 顯示 浮層（這里有個坑，我后面會講到）；

2.實例化 拖動 插件；

3.將 選中的值 實時返回到文本框（這里也有個坑）。

 

解決方案：

解決問題1——點擊文本框 顯示 浮層

因為項目是基於bootstrap,所以我直接用的是 bootstrap 的下拉菜單插件，具體代碼如下：

<div class="form-group btn-group">
   <div class="input-icon right dropdown-toggle " data-toggle="dropdown">
       <i class="fa fa-angle-down font-blue"></i>
       <input type="text" class="form-control input-small" placeholder="請選擇年齡段" id="ageValue">
   </div>
    <div class="dropdown-menu dropdown-content" role="menu">
            <input id="ageSlider" type="text" data-stopPropagation="true"
                   data-slider-min="0"
                   data-slider-max="50"
                   data-slider-step="0.5"
                   data-slider-value="[2,5]"
                   data-slider-tooltip="hide"/>
    </div>
</div>

其中里面的data-slider-XXX 是針對於bootstrap-slider插件定義的一些屬性，具體可以查看它的github地址，上面都有詳細的說明。如下圖：

 

 解決問題2——實例化 拖動 插件

var ageSlider = $("#ageSlider").bootstrapSlider()

這里要說明一下的就是，如果你不是依賴於bootstrap開發的話，需要寫成下面這個：

//引用了jquery的時候
var ageSlider = $("#ageSlider").slider({})

//沒有引用jquery的時候
var ageSlider = new Slider('#ageSlider', {});

 

解決問題3——將 選中的值 實時返回到文本框

解決思路就是在值改變的時候，返回一個函數，函數的作用是把值寫入到文本框里面。

我們如何捕獲到它的值改變了呢？我們可以看到插件提供了一個change事件：

 

我們怎么獲取到slider的值呢？插件提供了一個 getValue 的方法：

接下來就好辦了，直接把值寫入到文本框里面就可以了。具體代碼如下：

var ageChange = function() {
    var ageArr = ageSlider.bootstrapSlider('getValue');
    $('#ageValue').val(ageArr[0]+'歲' + '~' + ageArr[1]+'歲');
};
var ageSlider = $("#ageSlider").bootstrapSlider().on('change',ageChange);

 

功能實現基本就到這里了。

 

-------我是天堂與地獄之間的分隔線了-------

 

接下來說下我遇到的坑。。。各位看官有興趣也可以繼續看下去。。畢竟這也是一條充滿血與淚的路哇。能夠讓你少走彎路。

坑一：解決問題一的時候，發現一個問題，就是你在拖動結束之后浮層就會隱藏掉。如下圖：

解決方法就是點擊浮層的時候，阻止它的隱藏事件。代碼如下：

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

.dropdown-menu 是那個浮層：

解決方案來自於：Keep Bootstrap dropdown open on click

 

坑二：解決問題3時，報錯：getValue is not a function。

一開始，我是按照官方的案例getValue()來寫的。如下圖：

我開始是這么寫的，如下圖：

然后就報錯了。。。

后面看它的官方文檔，才知道要按照下圖這么寫：

 

 好了，該交待的都已交待完畢啦~~感覺自己棒棒噠~

最后來份代碼全家福壓壓驚~