博客

EasyUI jQuery 单选按钮部件

  • Post category:jquery

接下来我为大家详细讲解一下使用 EasyUI jQuery 单选按钮部件的完整攻略。

概述

EasyUI 是一款快速开发 Web 应用程序的 UI 库，其中包含了丰富的 UI 组件和插件，方便开发者快速搭建美观、易用的 Web 应用程序。其中，单选按钮部件是 EasyUI 提供的一个非常实用的UI组件，它可用于在前端页面中配置单选按钮选项，支持多种 UI 风格，并且完全可定制化。

安装

使用 EasyUI 单选按钮部件前，需要在页面中引入 EasyUI 库和 jQuery 库，可通过以下方式进行引入：

<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 EasyUI 库 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/bootstrap/easyui.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>

基本用法

EasyUI 单选按钮部件的基本用法非常简单，只需要在 HTML 页面中添加一个 <input> 标签，并设置 type 属性为 "radio"，再通过 name 和 value 属性来定义单选按钮的名称和值，如下所示：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

以上代码将会创建两个单选按钮，用户只能选择其中一个按钮，根据用户的选择，name 和 value 属性将会提交到服务器端进行处理。

高级用法

EasyUI 单选按钮部件除了基本用法之外，还支持多种 UI 风格和高级用法，下面我们将一一介绍。

1. 修改样式

EasyUI 单选按钮默认使用 EasyUI 库提供的 UI 样式，我们可以通过 class 属性来修改单选按钮的样式。例如，修改单选按钮的边框颜色：

<input class="my-radio" type="radio" name="gender" value="male"> Male<br>
<input class="my-radio" type="radio" name="gender" value="female"> Female<br>

<style>
.my-radio {
    border: 2px solid red;
}
</style>

2. 设置默认选项

EasyUI 单选按钮可以通过 checked 属性来设置默认选项，例如：

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

以上代码中，默认选中的是 Male。

3. 指定选中值

EasyUI 单选按钮可以通过 jQuery 插件的 $('input[name="gender"]').prop('checked', true) 方法来设置选中值。例如：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<script>
$(function() {
    $('input[name="gender"][value="female"]').prop('checked', true);
});
</script>

以上代码中，将默认选中 Female。

4. 响应事件

EasyUI 单选按钮支持多种事件，例如 onchange 事件，可以在用户选择单选按钮时触发。例如：

<input type="radio" name="gender" value="male" onchange="genderChanged()"> Male<br>
<input type="radio" name="gender" value="female" onchange="genderChanged()"> Female<br>

<script>
function genderChanged() {
    console.log($('input[name="gender"]:checked').val());
}
</script>

以上代码中，当用户选择单选按钮时，会触发 genderChanged 函数并打印当前选中的值。

示例

下面我们将通过两个示例来展示 EasyUI 单选按钮部件的用法。

示例一：带图标的单选按钮

在这个示例中，我们将演示如何在单选按钮中添加图标。

<input type="radio" name="icon" value="icon-ok" class="icon-radio" checked>
<span class="icon-ok"/> Option 1<br>
<input type="radio" name="icon" value="icon-remove" class="icon-radio">
<span class="icon-remove"/> Option 2<br>
<input type="radio" name="icon" value="icon-search" class="icon-radio">
<span class="icon-search"/> Option 3<br>

<style>
.icon-radio {
    padding-left: 30px;
}

.icon-ok:before {
    content: '\e601'; /* 对号图标编码，需要使用 EasyUI 的字体库 */
    font-family: 'Glyphicons Halflings'; /* EasyUI 的字体库 */
    font-size: 24px;
    color: green;
    position: absolute;
    left: 6px;
    top: 2px;
}

.icon-remove:before {
    content: '\e602'; /* 叉号图标编码，需要使用 EasyUI 的字体库 */
    font-family: 'Glyphicons Halflings'; /* EasyUI 的字体库 */
    font-size: 24px;
    color: red;
    position: absolute;
    left: 6px;
    top: 2px;
}

.icon-search:before {
    content: '\e003'; /* 搜索图标编码，需要使用 EasyUI 的字体库 */
    font-family: 'Glyphicons Halflings'; /* EasyUI 的字体库 */
    font-size: 24px;
    color: blue;
    position: absolute;
    left: 6px;
    top: 2px;
}
</style>

以上代码将创建三个带图标的单选按钮。

示例二：支持禁用状态

在这个示例中，我们将演示如何设置单选按钮的禁用状态。

<input type="radio" name="disable" value="true" class="disable-radio"> Yes<br>
<input type="radio" name="disable" value="false" class="disable-radio" checked> No<br>

<style>
.disable-radio {
    margin-right: 20px;
}

.disable-radio:disabled {
    color: #b8b8b8;
    cursor: not-allowed;
}
</style>

<script>
$(function() {
    // 设置第一个单选按钮禁用
    $('input[name="disable"][value="true"]').prop('disabled', true);
});
</script>

以上代码中，我们创建了两个单选按钮，并且设置了第一个单选按钮为禁用状态。

总结

EasyUI 单选按钮部件是一款非常实用的 UI 组件，能够方便地实现单选按钮的配置功能。本文详细讲解了如何使用 EasyUI 单选按钮部件的基本用法和高级用法，包括修改样式、设置默认选项、指定选中值、响应事件等，还提供了两个示例供读者参考。希望读者能够根据本文提供的信息，快速掌握 EasyUI 单选按钮部件的用法。

Tags: