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

来源：互联网发布：nginx server log配置编辑：程序博客网时间：2024/05/22 14:44

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

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

1 0