【阅读】《head first jquery》(第十章)——jquery UI

Web前端 专栏收录该内容
94 篇文章 0 订阅
  • 说在前头:如果你所希望的效果没有显示出来,刷新(或者重启服务器)试试把~好几次我就是遇到这样的情况
  • 下载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(纵向), horizontal
    		slide: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
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值