博客

EasyUI jQuery开关按钮小部件

  • Post category:jquery

下面是详细讲解“EasyUI jQuery开关按钮小部件”的完整攻略。

什么是EasyUI jQuery开关按钮小部件

EasyUI jQuery开关按钮小部件（SwitchButton）是一种类似于开关的交互控件，该控件可以在打开或关闭时，只需单击滑块即可完成轻松的转换，并在控件右侧或左侧的标签上显示相应的状态文本。

如何使用EasyUI jQuery开关按钮小部件

要使用EasyUI jQuery开关按钮小部件，需要先加载EasyUI库和相关样式表，可以在HTML头部使用以下代码加载：

<link rel="stylesheet" href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css">
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.bootcss.com/jeasyui/1.5.2/jquery.easyui.min.js"></script>

加载完成后，可以在HTML中加入下面的代码块来创建EasyUI jQuery开关按钮小部件：

<input id="switchbutton" class="easyui-switchbutton" data-options="onText:'是',offText:'否'">

其中，id 为设置控件的ID，可以通过该ID获取该控件；class 为设置控件的样式，可以通过样式表自定义该控件的样式；data-options 为设置控件的属性，可以通过该属性设置开启和关闭的文本。

如果需要获取该控件的状态，可以使用以下代码：

var isChecked = $("#switchbutton").switchbutton("options").checked;

EasyUI jQuery开关按钮小部件实例

下面给出两个EasyUI jQuery开关按钮小部件的使用示例。

实例1：控制显示的DIV

以下HTML代码将创建两个EasyUI jQuery开关按钮小部件，每次切换开关状态时，将根据相应的状态切换显示/隐藏某个DIV。

<input id="switchbutton1" class="easyui-switchbutton" data-options="onText:'显示',offText:'隐藏'">
<input id="switchbutton2" class="easyui-switchbutton" data-options="onText:'显示',offText:'隐藏'">
<div id="div1" style="display:none;">这里是显示/隐藏的DIV1</div>
<div id="div2" style="display:none;">这里是显示/隐藏的DIV2</div>
<script>
  $(function(){
    // 第1个控件事件
    $('#switchbutton1').switchbutton({
      onChange:function(checked){
        if (checked){
          $('#div1').show();
        } else {
          $('#div1').hide();
        }
      }
    });
    // 第2个控件事件
    $('#switchbutton2').switchbutton({
      onChange:function(checked){
        if (checked){
          $('#div2').show();
        } else {
          $('#div2').hide();
        }
      }
    });
  });
</script>

以上代码将创建两个EasyUI jQuery开关按钮小部件，每个控件有一个 onChange 事件，每次开关状态发生变化时将执行这个事件，根据相应的状态切换显示/隐藏某个DIV。

实例2：提交表单的开关

以下HTML代码将创建一个EasyUI jQuery开关按钮小部件和一个表单，在表单中设置一个隐藏的文本字段，当开关切换状态时，将根据相应的状态更改文本字段的值，以便在提交表单时使用。

<form id="form1" method="post" action="submit.php">
  <input id="switchbutton" class="easyui-switchbutton" data-options="onText:'启用',offText:'禁用'">
  <input id="hidden" type="hidden" name="status" value="0">
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
</form>
<script>
  $(function(){
    // 第1个控件事件
    $('#switchbutton').switchbutton({
      onChange:function(checked){
        if (checked){
          $('#hidden').val('1');
        } else {
          $('#hidden').val('0');
        }
      }
    });
  });
  function submitForm(){
    $('#form1').form('submit');
  }
</script>

以上代码将创建一个EasyUI jQuery开关按钮小部件，当开关状态发生变化时，将执行一个 onChange 事件，根据相应的状态更改文本字段的值，以便在提交表单时使用。当用户单击“提交”按钮时，将提交表单数据，并将处理结果显示在其它页面。

以上就是EasyUI jQuery开关按钮小部件的详细攻略，希望对您有所帮助。

Tags: