UI练习
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。
利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
Eg:
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<input type="button" value="我是按钮">
<br/><br/>
<a href="#" onclick="return false">我是a标签</a>
<br/><br/>
<span id="pan1">我是span元素</span>
<br/><br/>
<input type="text" id="qi" title="日期选择"/>
<br/><br/>
<input type="button" value="弹出" onclick="test1( )">
<br/><br/>
<div id="div1" style="display: none">我是弹出的信息内容</div>
<br/><br/>
<input type="text" id="mytext"/>
<script>
//autocomplete：自动完成。根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表（source：[...]）中选择
$("#mytext").autocomplete({source:["吃饭","打游戏","吃肉","吃素","打豆豆"]
});
function test1( ){
$("#div1").dialog({ //dialog：对话框
modal:true , // 遮罩
show:{
effect : " blind " , //遮罩层上的弹出框的出现效果
duration:1000 //等待时间1000毫秒
},
hide:{
effect : " explode " , //遮罩层上的弹出框的消失效果
duration:1000 //等待时间1000毫秒
}
})
}
$("#pan1,a").button( );
$("#qi").datepicker({
dateFormat : " yy年mm月dd日 " , //日期格式化处理
changeMonth : true , //让月份可以下拉选择
changeYear : true , //让年份可以下拉选择，默认为当前选择年份前后10年
//完整月份名称替换为中文
monthNames : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
//下拉选择的月份缩写替换为中文
monthNamesShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
//星期几提示替换为中文
//星期几浮动提示替换为中文
dayNames : ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
maxDate : " ", //设置能够选择的最大日期，如果为当前日期写“0”，同时可以+1也可以-1（单位w/m/y）
minDate : " " //设置能够选择的最小日期
});
$("#ui-datepicker-div").css("font-size","10px") ; //将jQuery的日期选择的文字变小
$("#txtdate").tooltip( ) ; //tooltip：提示文本
</script>
</html>
网址：www.css88.com。查看jquery ui的中文帮助手册