EasyUI jQuery 开关按钮小部件

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

在本文中，我们将学习如何使用 jQuery EasyUI 设计开关按钮。开关按钮有两个部分：“开”“关”。用户可以单击或点击来切换开关

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

句法：

特性：

• width：开关按钮的宽度
• height：开关按钮的高度
• handleWidth：开关按钮中心手柄的宽度
• 选中：定义按钮是否被选中
• disabled：定义是否禁用按钮
• readonly：定义按钮是否只读
• reversed:设置为 true onText 值和 offText 值将切换它们的位置
• onText：左侧的文本值。
• offText：右侧的文本值
• handleText：中心句柄的文本值。
• value：绑定到按钮的默认值。

事件：

• onchange：在已选中的值更改时触发

方法：

• 选项：返回选项对象
• 调整大小：调整开关按钮的大小
• disable：禁用开关按钮
• enable：启用开关按钮
• readonly：启用/禁用只读模式
• 检查：检查开关按钮
• 取消选中：取消选中开关按钮
• clear：清除开关按钮的“选中”值
• 重置：重置开关按钮的“选中”值
• setValue：设置开关按钮值

CDN 链接：首先，添加项目所需的 jQuery Easy UI 脚本。

 
 
 
 

 

示例 1：

HTML

 

    
    
             
    
    
 
    
 
    
 
    
    
    
 
    
    
    
     
    
    
    
 
    
      $(document).ready(function (){
        $('#gfg').switchbutton({
          disabled: true
        });
      });
    

 

 
    GeeksforGeeks
    EasyUI jQuery switchbutton widget
    
 

输出：

参考： http://www.jeasyui.com/documentation/