JQuery UI是功能非常强大的JQuery插件,小可在本专题将会逐一介绍JQuery UI的一些小技巧,首先下载JQuery UI,小可下的最新版本http://jqueryui.com/download/all/
开篇先介绍进度条
一.创建进度条
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<script type="text/javascript">
$(function(){
$("#progressDiv").progressbar({
value:21
});
});
</script>
<body>
<div id="progressDiv"></div>
</body>
</html>
将会得到:
二.进度条方法
- progressbar(“destory”):恢复div初始状态
- progressbar(“disable”):禁用进度条
- progressbar(“enable”):启动进度条
- progressbar(“option”):设置多个选项
- progressbar(“value”, value):获取或设置进度条进度
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<script type="text/javascript">
$(function(){
$("#progressDiv").progressbar({
value:21
});
$("button").click(function(e){
var divElem = $("#progressDiv");
if(this.id == "mode"){
divElem.progressbar("value",false);
}else{
var currentProgress = divElem.progressbar("value");
if(!currentProgress){
divElem.progressbar("value",21);
}else{
divElem.progressbar("value",this.id == "decr"?currentProgress-10 : currentProgress + 10)
}
}
});
});
</script>
<body>
<div id="progressDiv"></div>
<button id="decr">Decrease</button>
<button id="incr">Increase</button>
<button id="mode">Indeterminate</button>
</body>
</html>
效果可以设置如下:
三.进度条事件
- create:在进度条组件创建时完成
- change:在进度条组件发生变化时完成
- complete:在进度条组件到达100%时完成
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<script type="text/javascript">
$(function(){
$("button").button();
$("#progressDiv").progressbar({
value:21,
create:function(e){
$("#progVal").text($("#progressDiv").progressbar("value"));
},
complete:function(e){
$("#incr").button("disable")
},
change:function(e){
var currentValue = $("#progressDiv").progressbar("value");
if(!currentValue){
$("#progWrapper").hide();
}else{
if($(this).progressbar("value") < 100){
$("#incr").button("enable")
}
$("#progVal").text(currentValue);
$("#progWrapper").show();
}
}
});
#("button").click(function(e){
var divElem = $("#progressDiv");
if(this.id == "mode"){
divElem.progressbar("value",false);
}else{
var currentProgress = divElem.progressbar("value");
if(!currentProgress){
divElem.progressbar("value",21);
}else{
divElem.progressbar("value",this.id=="decr"?currentProgress-10:currentProgress+10)
}
}
});
});
</script>
<body>
<div id="progressDiv"></div>
<button id="decr">Decrease</button>
<button id="incr">Increase</button>
<button id="mode">Indeterminate</button>
<span id="progWrapper">Progress:<span id="progVal"></span>%</span>
</body>
</html>