如何以编程方式选择jQuery滑块?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何以编程方式选择jQuery滑块?相关的知识,希望对你有一定的参考价值。

我试图在jQuery mobile中预先选择一个滑块。

<select name="box" id="box" data-role="slider" data-mini="true">
    <option value="off" selected></option>
    <option value="on" >mit</option>
</select>

这在某种程度上是行不通的:$("#box").val("on").flipswitch( "refresh" ) ;

因此我通过php创建了这个框并预选:

<select name="box" id="box" data-role="slider" data-mini="true">
        <?php
        $box['on'] = 'mit'; 
        $box['off'] = '';   
        foreach ($box as $key => $value) {
                ($key == $_GET['box']) ? $isselected = ' selected=""' : $isselected = false;
            echo '<option value="'.$key.'" '.$isselected .'>'.$value.'</option>';
        } 
    ?>
</select>

导致:

<select name="box" id="box" data-role="slider" data-mini="true">
    <option value="on"  selected="">mit</option>
    <option value="off" ></option>
</select>

但在这种情况下,开关看起来像这样(缺少蓝色):

enter image description here

如何选择一个值,特别是使用jQuery?

答案

JQM文档在这里有些令人困惑。有两种flipswitch

  1. 构造在select元素之上的翻转开关
  2. 构造在checkbox元素之上的翻转开关

(不知道为什么还有一个slider翻转开关)

两者都像移动flippswitches皮肤,你可以根据自己的需要自由使用selectcheckbox,与标准的html非移动元素完全相同:如果你需要从PHP构建你的页面然后使用selectedchecked属性预先选择一个选项/值。

以下是从代码初始化的示例:

$(document).on("flipswitchcreate", "#flip-checkbox", function(e) {
  $(this).prop("checked", true).flipswitch("refresh");
});

$(document).on("flipswitchcreate", "#flip-select", function(e) {
  $(this).val("on").flipswitch("refresh");
});

$(document).on("slidecreate", "#flip-slider", function(e) {
  $(this).val("on").slider("refresh");
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <label for="flip-checkbox">Flip toggle switch checkbox:</label>
      <input type="checkbox" data-role="flipswitch" id="flip-checkbox" name="flip-checkbox">
      <label for="flip-select">Flip toggle switch select:</label>
      <select data-role="flipswitch" id="flip-select" name="flip-select">
        <option value="off" selected="">Off</option>
        <option value="on">On</option>
      </select>
      <label for="flip-slider">Flip toggle switch slider:</label>
      <select data-role="slider" id="flip-slider" name="flip-slider">
        <option selected="" value="off">Off</option>
        <option value="on">On</option>
      </select>
    </div>
  </div>
</body>
</html>

以上是关于如何以编程方式选择jQuery滑块?的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式创建默认滑块值?

以编程方式快速添加不同数量的标签和滑块

如何在android中以编程方式在片段之间导航?

如何始终使用 IE 和 FF 让 jQuery 以编程方式在此选择列表中的项目?

ViewPager2:以编程方式选择特定片段

当我以编程方式制作滑块时,为啥滑块不更新标签?