如何在jquery或capybara上设置滑块值

时间:2015-11-16 13:23:06

标签: jquery twitter-bootstrap selenium capybara

我正在尝试设置滑块值,但我无法管理它。我正在使用Capybara,selenium驱动程序。 html代码是:

<div class="pslide-container">
    <div class="slider slider-horizontal" id="">
        <div class="slider-track">
            <div class="slider-selection" style="left: 0%; width: 100%;"></div>
            <div class="slider-handle min-slider-handle triangle" tabindex="0" style="left: 0%;"></div>
            <div class="slider-handle max-slider-handle triangle" tabindex="0" style="left: 100%;"></div>
        </div>
        <div class="tooltip tooltip-main top hide" style="left: 50%; margin-left: 0px;">
            <div class="tooltip-arrow"></div>
            <div class="tooltip-inner">9 : 693</div>
        </div>
        <div class="tooltip tooltip-min top hide" style="left: 0%; margin-left: 0px;">
            <div class="tooltip-arrow"></div>
            <div class="tooltip-inner">9</div>
        </div>
        <div class="tooltip tooltip-max hide top" style="top: -30px; left: 100%; margin-left: 0px;">
            <div class="tooltip-arrow"></div>
            <div class="tooltip-inner">693</div>
        </div>
    </div>
    <input id="priceselect" type="text" class="span2 priceslider" value="9,693" data-slider-min="90" data-slider-max="693" data-slider-step="5" data-slider-value="[9,693]" data-slider-handle="triangle" data="value:'9,693'" style="display: none;">
        <b class="pull-left">
            <span id="minvalue">9</span>&nbsp;TL

        </b>
        <b class="pull-right">
            <span id="maxvalue">693</span>&nbsp;TL

        </b>
    </div>
</div>

我尝试了.slider("values", 0, 80),但它不起作用:

$('#priceselect').slider("values", 0, 80)

Bootstrap滑块信息:

/* =========================================================
 * bootstrap-slider.js
 *
 * Maintainers: 
 *      Kyle Kemp 
 *          - Twitter: @seiyria
 *          - Github:  seiyria
 *      Rohit Kalkur
 *          - Twitter: @Rovolutionary
 *          - Github:  rovolution
 *
 * =========================================================

1 个答案:

答案 0 :(得分:2)

由于你正在使用seiyria的bootstrap-slider,你可以看到与jQuery一起使用的说明here

通过略读文档和示例,我认为以下内容应该是您想要的

$('#priceselect').slider('setValue', [0,80])

所以从Capybara做到这一点你会做

page.execute_script("$('#priceselect').slider('setValue', [0,80])")

如果要触发幻灯片和更改事件,可以将true传递给2个可选参数,所以

page.execute_script("$('#priceselect').slider('setValue', [0,80], true, true)")

将在设置新值时触发幻灯片和更改事件