jQuery Easy UI ProgressBar（进度条）组件

ProgressBar（进度条）组件，这个还是挺好玩的。我们在自己做点什么的时候常常能用到，比方上传下载文件、导入导出文档啊、加载网页等等。

应用场景非常多，使用起来还非常easy。

演示样例：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>$(function () {//$.fn.progressbar.defaults.value = 30;//想要改动进度条的颜色去css文件里去改动$('#box').progressbar({width : 200,        //设置进度条宽度 默认400height : 15,     //设置进度条高度 默认22value : 0,            //设置进度条值 默认0text : '{value}%',    //设置进度条百分比模板 默认 {value}%//在value改变的时候触发onChange : function (newValue, oldValue) {console.log('新:' + newValue + ',旧:' + oldValue);},});/*setTimeout(function () {$('#box').progressbar('setValue', 70);}, 1000);*/setInterval(function () {//getValue  setValue 各自是返回当前进度值  和 设置一个进度值$('#box').progressbar('setValue', $('#box').progressbar('getValue') + 5);}, 1000);console.log($('#box').progressbar('options'));//$('#box').progressbar('resize', 80);  没啥大用
});
</script>
</head>
<body style="margin:100px;"><!--<div class="easyui-progressbar" data-options="value:60" style="width:400px"></div>--><div id="box"  ></div>
</body>
</html>

运行效果：

点击下载源码

转载于:https://www.cnblogs.com/llguanli/p/7085817.html

jQuery Easy UI ProgressBar（进度条）组件相关推荐

第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
c#进度条刻度_c# ProgressBar进度条方向和美观
protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.Style | ...
UI组件之 ProgressBar及其子类（一）ProgressBar进度条的使用
ProgressBar本身进度条组件,它派生了:SeekBar和RatingBar两个组件,他们的继承关系如下: 1.ProgressBar有两个进度,一个是android:progress,另一个是 ...
7个jquery easy ui 基本组件图解
下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...
Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
Android拖动进度条画面随动,Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
android基础 [超级详细android常用控件解析（ScollView控件,ProgressBar进度条,PopupWindow控件）]
目录 1 章节目录 2 ScollView控件 2.1 ScrollView简介 2.2 ScrollView使用 2.3 常用属性及方法 3 ProgressBar进度条 3.1 简介 3.2 常用 ...

jQuery Easy UI ProgressBar（进度条）组件

jQuery Easy UI ProgressBar（进度条）组件相关推荐

最新文章

热门文章