jQuery Mobile Checkboxradio Widget 完整参考

介绍

jQuery Mobile Checkboxradio Widget 是一款基于 jQuery Mobile 框架的复选框和单选框插件。它可以帮助开发者快速制作出功能丰富的复选和单选框，同时也能够自定义样式和形状。

安装

CDN

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

下载

您也可以从 jQuery Mobile 官网 https://jquerymobile.com/download/ 下载最新的 jQuery Mobile。

使用

在 HTML 中，您可以使用 <input> 标签创建复选框和单选框。在加入 jQuery Mobile 插件后，您可以在标签上添加 data-role="checkbox" 或 data-role="radio" 属性来启用 Checkboxradio Widget。

复选框

<fieldset data-role="controlgroup">
    <legend>Select your favorite US cities:</legend>
    <label for="new-york">New York</label>
    <input type="checkbox" name="cities" id="new-york" value="NY" data-mini="true">
    <label for="san-francisco">San Francisco</label>
    <input type="checkbox" name="cities" id="san-francisco" value="SF" data-mini="true">
    <label for="los-angeles">Los Angeles</label>
    <input type="checkbox" name="cities" id="los-angeles" value="LA" data-mini="true">
    <label for="chicago">Chicago</label>
    <input type="checkbox" name="cities" id="chicago" value="CH" data-mini="true">
</fieldset>

单选框

<fieldset data-role="controlgroup">
    <legend>Select your gender:</legend>
    <label for="gender-male">Male</label>
    <input type="radio" name="gender" id="gender-male" value="male" data-mini="true">
    <label for="gender-female">Female</label>
    <input type="radio" name="gender" id="gender-female" value="female" data-mini="true">
</fieldset>

属性

Checkboxradio Widget 定义了一些与复选框和单选框相关的属性。

General

| 属性 | 描述 | | --------------- | ------------------------------------- | | data-mini | 将 Checkboxradio Widget 缩放为较小的尺寸。 | | data-theme | 指定复选框和单选框的主题样式。 | | data-wrapper | 指定外部容器的标记类型。 | | data-iconpos | 指定图标的位置。 | | data-corners | 是否添加圆角。 | | data-shadow | 是否添加阴影。 | | data-iconshadow | 是否在图标上添加阴影。 |

复选框

| 属性 | 描述 | | ----------- | ----------------------------------- | | data-icon | 添加显示在复选框左侧的图标。 | | data-iconpos | 指定图标位置，选项有："left"、"right"。 |

单选框

| 属性 | 描述 | | ----------- | ----------------------------------- | | data-icon | 添加显示在单选框左侧的图标。 | | data-iconpos | 指定图标位置，选项有："left"、"right"。 |

方法

Checkboxradio Widget 定义了一些方法可以用于相应的事件或修改 Checkboxradio Widget 的属性。

General

| 方法 | 描述 | | ------------------- | ---------------- | | refresh() | 当修改了 Checkboxradio Widget 的属性后，需要调用此方法进行更新。 | | disable() | 禁用 Checkboxradio Widget。 | | enable() | 启用 Checkboxradio Widget。 | | option(optionName) | 获取 Checkboxradio Widget 的属性值。 | | option(optionName, value) | 设置 Checkboxradio Widget 的属性值。 |

复选框

| 方法 | 描述 | | ------------------- | ------------------ | | click() | 触发复选框的单击事件。 |

单选框

| 方法 | 描述 | | ------------------- | ------------------- | | click() | 触发单选框的单击事件。 |

事件

Checkboxradio Widget 通过一些事件来响应用户的操作。

General

| 事件 | 描述 | | --------------- | -------------------- | | create | Checkboxradio Widget 创建完成后触发。 | | init | Checkboxradio Widget 初始化时触发。 | | startcreate | Checkboxradio Widget 创建提示显示之前触发。 |

复选框

| 事件 | 描述 | | ------------------ | ---------------------------------------- | | change | 复选框的选中状态发生改变时触发。 | | click | 当用户点击复选框时触发。 | | vmouseover | 当用户将鼠标悬停在复选框上时触发。 | | vmouseout | 当用户把鼠标从复选框上移开时触发。 | | vmousedown | 当用户按下鼠标左键时触发。 | | vmouseup | 当用户松开鼠标左键时触发。 | | focus | 当用户把鼠标移动到复选框上并聚焦时触发。 | | blur | 当用户把鼠标从复选框上移开并失去焦点时触发。 | | keyup | 当用户在复选框上按键后松开时触发。 | | refresh | 复选框刷新时触发。 | | destroy | 复选框被销毁时触发。 |

单选框

| 事件 | 描述 | | ---------------------- | ------------------------------------------ | | change | 单选框的选中状态发生改变时触发。 | | click | 当用户点击单选框时触发。 | | vmouseover | 当用户将鼠标悬停在单选框上时触发。 | | vmouseout | 当用户把鼠标从单选框上移开时触发。 | | vmousedown | 当用户按下鼠标左键时触发。 | | vmouseup | 当用户松开鼠标左键时触发。 | | focus | 当用户把鼠标移动到单选框上并聚焦时触发。 | | blur | 当用户把鼠标从单选框上移开并失去焦点时触发。 | | keyup | 当用户在单选框上按键后松开时触发。 | | refresh | 单选框刷新时触发。 | | destroy | 单选框被销毁时触发。 |

示例

您可以在 jQuery Mobile 官网 https://demos.jquerymobile.com/1.4.5/checkboxradio-radio/ 查看更多示例。

结论

jQuery Mobile Checkboxradio Widget 是一款实用而强大的插件，可以快速制作复选框和单选框，并通过自定义属性来满足不同需求。