在 jQuery
EasyUI 中，按钮的
图标是通过 `
iconCls` 属性来设置的。
EasyUI 提供了一套内置的
图标类（icon classes），你可以通过指定不同的 `
iconCls` 值来显示对
应的
图标。
###
EasyUI 的停止按钮使用什么
图标？
如果你想要一个“停止”按钮（例如用于停止某个操作或进程），通常推荐使用：
```html
<a href="#" class="
easyui-linkbutton"
iconCls="icon
-cancel" plain="true">停止</a>
```
或者你也可以使用：
```html
<a href="#" class="
easyui-linkbutton"
iconCls="icon
-no" plain="true">停止</a>
```
---
### ✅ 推荐
图标说明：
|
图标类名 | 含义说明 | 是否适合“停止” |
|
----------------|
------------------------------|
----------------|
| `icon
-cancel` | 表示取消、中断、关闭操作 | ✅ 强烈推荐 |
| `icon
-no` | 表示否定、拒绝、错误 | ✅ 推荐 |
| `icon
-stop` | **
EasyUI 默认不提供**此
图标 | ❌ 不可用 |
| `icon
-close` | 关闭窗口或对话框 | ✅ 可用，语义接近 |
> ⚠️ 注意：
EasyUI 官方
图标集中**没有 `icon
-stop`** 这个
图标类，所以不能直接使用。
---
### 示例代码：创建一个带
图标的“停止”按钮
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF
-8">
<title>
EasyUI Stop Button Example</title>
<!
-- 引入
EasyUI 样式
-->
<link rel="stylesheet" type="text/css" href="https://www.j
easyui.com/
easyui/themes/default/
easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.j
easyui.com/
easyui/themes/icon.css">
<script src="https://code.jquery.com/jquery
-1.12.4.min.js"></script>
<script src="https://www.j
easyui.com/
easyui/jquery.
easyui.min.js"></script>
</head>
<body>
<!
-- 使用 icon
-cancel 作为“停止”按钮
图标 -->
<a href="javascript:void(0)" class="
easyui-linkbutton"
data
-options="
iconCls:'icon
-cancel', plain:true"
onclick="alert('停止操作')">停止</a>
<!
-- 或者使用 icon
-no
-->
<a href="javascript:void(0)" class="
easyui-linkbutton"
data
-options="
iconCls:'icon
-no', plain:true"
onclick="alert('已终止')">终止</a>
</body>
</html>
```
---
###
图标解释：
- `icon
-cancel`: 通常是红色的 × 或“取消”标志，广泛用于表示中断或取消操作。
- `plain="true"`: 让按钮看起来更简洁（扁平化）。
- `onclick`: 绑定点击事件处理逻辑。
---
### 如何查看所有可用
图标？
你可以访问
EasyUI 的官方
图标页面查看所有支持的
图标类：
👉 [https://www.j
easyui.com/documentation/icons.php](https://www.j
easyui.com/documentation/icons.php)
该页面列出了所有内置
图标及其对
应的 `
iconCls` 名称。
---
### 自定义
图标（可选）
如果内置
图标不够用，你也可以自定义
图标：
```html
<a href="#" class="
easyui-linkbutton"
data
-options="
iconCls:'my
-stop
-icon'"
plain="true">停止</a>
```
然后在 CSS 中定义：
```css
.my
-stop
-icon {
background: url('images/stop.png') no
-repeat center center;
}
```
---
### 总结
✅ **最佳实践：**
使用 `icon
-cancel` 是
EasyUI 中表示“停止”按钮最常见且语义清晰的
图标选择。
---
博客围绕Easyui-iconCls的对应图标展开，但具体内容缺失。推测可能会介绍Easyui-iconCls相关图标样式、使用方法等信息技术方面内容。
扫一扫
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
