【阅读】《head first jquery》（第十章）——jquery UI

来源：互联网发布：桌面定时提醒软件编辑：程序博客网时间：2024/06/05 16:33

说在前头：如果你所希望的效果没有显示出来，刷新（或者重启服务器）试试把~好几次我就是遇到这样的情况
下载jquery UI：http://jqueryui.com，下载好了之后就像jquery那样用就好了，之后在页面上加
```
<span style="font-size:14px;"><script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script></span>
```
（依名字的不同而不同）

用jquery UI建立一个快速选择日期的工具

<span style="font-size:14px;"><body><input type="text" id="chooseDate"></body><script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script><script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script><script type="text/javascript">$(document).ready(function(e) {   $("#chooseDate").datepicker();});</script></span>

如果需要自定义一些参数可以这样写（还有其他的我就不写了）

$("#chooseDate").datepicker({stepMonths: 3,//每按一个下一页就跳三个月changeMonth: true//显示月份下拉菜单});

用jquery UI创建一个漂亮的单选按钮

<body><div id="radio"><input type="radio" name="radio" id="radio1"><label for="radio1">选项一</label><!--用label把文字框起来，并用for进行绑定是为了当用户点击这个文字的时候就相当于选择了选项--><input type="radio" name="radio" id="radio2"><label for="radio2">选项二</label><input type="radio" name="radio" id="radio3"><label for="radio3">选项三</label></div></body><script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script><script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script><script type="text/javascript">$(document).ready(function(e) {   $("#radio").buttonset();//这是一次弄多个的});</script>

$(document).ready(function(e) {   $("#radio1").button();$("#radio2").button();$("#radio3").button();});

上面的是一个一个弄按钮的，效果类似

加入滑动条

<body><input type="text" id="showSlider" readonly><hr><div id="slider"></div></body><script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script><script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script><script type="text/javascript">$(document).ready(function(e) {$("#slider").slider({value: 20,//默认显示max: 100,//你懂的min: -100,//最小值step: 0.01,//每一步滑动多少值orientation: 'vertical',//横向还是纵向，vertical(纵向), horizontalslide:function(event, ui){//当这个滑动条滚动(slide)的时候触发次函数//与之相类似的还有:create/start/change/stop//注意哈，change感觉和slide是差不多的，都是在值发生改变//的时候触发，但是change是你放鼠标的时候才触发的，//在拖动过程中不会触发$("#showSlider").val(ui.value);//将文本框中的内容改一改，这两个搭配使用挺常见的}});});</script>

创建由一个滑动条组成的色彩选择器

<body><div id="showColor" style="width:100px; background-image:none;height:100px;  border:1px solid"></div><!--注意：把background-image:弄成none（想想看为什么，其实不这样弄也差不多）--><hr><div id="slider_red"></div><hr><div id="slider_green"></div><hr><div id="slider_blue"></div><hr></body><script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script><script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.js"></script><script type="text/javascript">$(document).ready(function(e) {$("#slider_red").slider({value: 127,min: 0,max: 255,step: 1,slide:refreshColor,});$("#slider_green").slider({value: 127,min: 0,max: 255,step: 1,slide:refreshColor,});$("#slider_blue").slider({value: 127,min: 0,max: 255,step: 1,slide:refreshColor,});function refreshColor() {$("#showColor").css("background-color", "rgb("+$("#slider_red").slider("value")+","+$("#slider_green").slider("value")+","+$("#slider_blue").slider("value")+")");//slider的值原来是这样获得的哇}});

顺便说一句：不要把button写成botton哦
Droppable部件可以作为一个可拖动的部件的目标，Draggable部件可以把元素变成可以拖动的组件（这两个最好一起用），Resizable部件将元素变成一个可以拓展的对象，可以拖动它的四角或边框改变它的大小，Selectable部分可以将元素变为可选择的组件。访问网站的人可以在这些元素上拖动鼠标来选择这些元素，就像选择桌面上的文件一样
如果我要找所有input标签中的所有type为text对象，就可以这样写$("input:text")
jQuery UI：这是一个官方的jquery库，主要为jquery核心库提供三类插件：效果、交互和部件
部件：这是一个自包含的组件，可以为web应用增加功能。能够为你节省大量的

0 0