easyui如何创建一个等待界面,类似于点击一个功能,在等待请求返回的时候页面变成圈圈在旋转
时间: 2024-02-24 21:53:34 浏览: 131
在EasyUI中,可以使用插件 `jQuery EasyUI Progressbar` 来实现创建一个等待界面。
具体步骤如下:
1. 引入必要的JS和CSS文件:
```html
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.1/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.8.1/jquery.easyui.min.js"></script>
```
2. 新建一个 `div` 元素,作为等待界面的容器:
```html
<div id="loading"></div>
```
3. 使用 `progressbar` 方法创建一个进度条,并设置一些属性:
```javascript
$('#loading').progressbar({
text: 'Loading...',
interval: 50
});
```
其中,`text` 属性设置进度条上方显示的文本,`interval` 属性设置进度条刷新的时间间隔。
4. 在需要等待的操作执行前,调用 `show` 方法显示进度条:
```javascript
$('#loading').show();
```
5. 在操作执行完成后,调用 `hide` 方法隐藏进度条:
```javascript
$('#loading').hide();
```
这样就可以创建一个等待界面了,当需要等待的操作执行时,页面会显示一个进度条,等待操作执行完成后,进度条会消失。
阅读全文