辛苦堆砌,转载请注明出处,谢谢!
前段时间学习了jQuery的基本内容,做了一些整理,然后还看了ajax,不过感觉jQuery的ajax接口真的是不错,也不算太多,真心不需要什么笔记了,直接开始jQuery UI吧,把学到的几个控件简单记录一下,学习时候看的教材是1.10版本,实际使用的是1.12版本,有不少接口发生了变化,最后还是看着官方文档写了个Demo,练练手,后续使用的话深入了解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Example</title>
<style type="text/css">
div.slider {
width: 200px;
}
td.sliderTd {
padding-left: 15px;
padding-right: 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui.structure.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui.theme.css"/>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".button").eq(0).button().end()
.eq(1).button({
disabled: true
}).end()
.eq(2).button({
icon: "ui-icon-gear",
icon: "ui-icon-gear",
iconPosition: "end"
}).end()
.eq(3).button().end();
$("#buttonset").buttonset();
$(".progressbar").eq(0).progressbar({
value: 25
}).end()
.eq(1).progressbar({
value: false
}).end()
.eq(2).progressbar({
value:25,
disabled: true
});
$(".slider").eq(0).slider({
slide: function(event, ui) {
$("#firstSlider").text(ui.value)
}
}).end()
.eq(1).slider({
animate: "fast",
slide: function(event, ui) {
$("#secondSlider").text(ui.value)
}
}).end()
.eq(2).slider({
values: [0, 100],
range: true,
slide: function(event, ui) {
$("#thirdSlider").text(ui.values[0] + "~" + ui.values[1])
}
}).end()
.eq(3).slider({
disabled: true
});
});
</script
</head>
<body>
<h2>按钮</h2>
<a class="button" href="http://www.baidu.com">普通的按钮</a>
<a class="button" href="http://www.baidu.com">未使能的按钮</a>
<a class="button" href="http://www.baidu.com">添加图标的按钮</a>
<label for="toggleBtn">切换按钮</label>
<input type="checkbox" id="toggleBtn", class="button"/>
<h2>按钮组</h2>
<div id="buttonset">
<label for="button1">按钮1</label>
<input type="radio" name="button" id="button1"/>
<label for="button2">按钮2</label>
<input type="radio" name="button" id="button2"/>
<label for="button3">按钮3</label>
<input type="radio" name="button" id="button3"/>
</div>
<h2>进度条</h2>
<table>
<tr>
<td>普通进度条</td>
<td><div class="progressbar" style="width: 200px"/></td>
</tr>
<tr>
<td>与数值无关的进度条</td>
<td><div class="progressbar" style="width: 200px"/></td>
</tr>
<tr>
<td>未使能的进度条</td>
<td><div class="progressbar" style="width: 200px"/></td>
</tr>
</table>
<h2>滑动条</h2>
<table>
<thead style="text-align:center">
<td>类型</td>
<td>示例</td>
<td>数值</td>
</thead>
<tbody>
<tr>
<td>普通滑动条</td>
<td class="sliderTd"><div class="slider"/></td>
<td id="firstSlider">0</td>
</tr>
<tr>
<td>有动画的进度条</td>
<td class="sliderTd"><div class="slider"/></td>
<td id="secondSlider">0</td>
</tr>
<tr>
<td>范围选择器</td>
<td class="sliderTd"><div class="slider"/></td>
<td id="thirdSlider">0~100</td>
</tr>
<tr>
<td>未使能的滑动条</td>
<td class="sliderTd"><div class="slider"/></td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>
我用的theme是Eggplant,展示效果如图: