jQuery学习笔记(五) jQuery UI按钮，进度条以及滑动条

最新推荐文章于 2022-06-07 08:42:33 发布

有理叔

最新推荐文章于 2022-06-07 08:42:33 发布

阅读量2.4k

点赞数 1

分类专栏： Web前端文章标签： jquery ui

本文链接：https://blog.csdn.net/yjp19871013/article/details/54427828

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

辛苦堆砌，转载请注明出处，谢谢！

前段时间学习了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，展示效果如图：