版权声明：一个苦逼初学者的原创小博客。 https://blog.csdn.net/SenZendao/article/details/82708545
jqueryUI也是一个库，就有很多属性和方法，简单写几个常用的吧。
目录二十
jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
jqueryUI 网址
http://jqueryui.com/
http://www.jqueryui.org.cn/
jqueryUI拖拽
<head>
<meta charset="UTF-8">
<title>04_jqueryui.html</title>
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').draggable({
// 约束元素在父级内拖动
containment:'parent',
//限制在x轴向拖动
axis:'x',
//拖动是透明度变为0.6
opacity:0.6,
drag:function(ev,ui){
//console.log('ev='+ev);
console.log(ui.position);
}
});
})
</script>
<style type="text/css">
.con{
width:300px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
}
.box{
width:40px;
height:40px;
background-color:gold;
cursor:pointer;
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>jquery滑动条
<head>
<meta charset="UTF-8">
<title>05_jqueryui滑动条.html</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('.dragbar').draggable({
axis:'x',
containment:'parent',
//containment:[0,0,600,0]
opacity:0.6,
drag:function(ev,ui){
//console.log(ui.position.left);
var nowleft = ui.position.left;
$('.progress').css({width:nowleft});
$('.slide_count').val(parseInt(nowleft*100/570));
}
});
})
</script>
<style type="text/css">
.slidebar_con{
width:650px;
height:32px;
margin:50px auto 0;
}
.slidebar{
width:600px;
height:30px;
border:1px solid #ccc;
float:left;
position:relative;
}
.slidebar .dragbar{
width:30px;
height:30px;
background-color:gold;
cursor:pointer;
position:absolute;
left:0;
top:0;
}
.slidebar .progress{
width:0px;
height:30px;
background-color:#f0f0f0;
position:absolute;
left:0;
top:0;
}
.slide_count{
padding:0;
float:right;
width:40px;
height:30px;
border:1px solid #ccc;
text-align:center;
font-size:16px;
}
</style>
</head>
<body>
<div class="slidebar_con">
<div class="slidebar">
<div class="progress"></div>
<div class="dragbar"></div>
</div>
<input type="text" name="" value="0" class="slide_count">
</div>
</body>jquery日期
<head>
<meta charset="UTF-8">
<title>06_jqueryui日期.html</title>
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<link rel="stylesheet" href="./css/jquery-ui.css">
<script type="text/javascript">
$(function(){
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd");
})
</script>
</head>
<body>
<div>
<p>日期：<input type="text" id="datepicker" readonly="readonly"></p>
</div>
</body>