jquery UI的用法

第一步:

 

1.jquery UI是构建在jquery的基础上的,提供很多漂亮的插件.使用jquery UI首先要去jquery的官网去下载它,下载地址为:

http://jqueryui.com/

 

2.下载的时候可以选择适合自己项目的主题下载.

 

第二步:

 

1.解压下载好的包,将js包中的jquery-1.7.2.min.js和jquery-ui-1.8.22.custom.min.js文件和css包中的css文件和image文件添加到你的项目中去.

 

2.在你需要的页面中添加上面的文件.如下图所示:

 

3.下面我用时间插件举例用法:

html代码:

<span>起止时间:</span><input type="text" name="startDate" id="startDate"/>
<span>结束时间:</span><input type="text" name="endDate" id="endDate"/>

js代码:

$("#startDate").datepicker({  
	    onSelect:function(dateText,inst){  
	       $("#endDate").datepicker("option","minDate",dateText);  
	    },
	    showButtonPanel:true,
	    dateFormat:"yy-mm-dd"
	});
$("#endDate").datepicker({  
	    onSelect:function(dateText,inst){  
	        $("#startDate").datepicker("option","maxDate",dateText);  
	    },
	    showButtonPanel:true,
	    dateFormat:"yy-mm-dd"
	});

 

4. 浏览页面,可以看到如下效果: