- Jquery ui插件中的自动补全组件的关键字是(autocomplete).
- 自动补全中的事件有哪些(change,close,focus,open,response,search,select)
- 自动补全的属性有哪些(source,delay,minLength,disabled,position)
- 自动补全的(source)属性是用来定义数据源的,对应的属性值格式为(数组)。
- 自动补全的delay属性用来设置(延迟)出现的,默认值是(300)毫秒。
- 自动补全的minLength属性用来设置提示出现的(长度),默认值是(1)。
- 自动补全插件(需要)先引入jquery源文件
- Jquery-ui日期组件的关键字是(datepicker).
- 日期组件的(changeMonth)属性,可以控制月份下拉框的是否可用。
- 日期组件的(changeYear)属性,可以控制年份下拉框的是否可用。
- 日期组件的(yearSuffix)属性,可以设置年份的后缀显示内容。
- 日期组件的(monthNames)属性,可以设置月份不可变时显示样式值。
- 日期组件的(monthNamesShort)属性,可以设置月份可变时显示样式值。
- 日期组件的showMonthAfterYear属性是用来控制月份在年份后面显示,默认值为(false)
- 如果设置日期组件的dateFormat属性值为“yy-mm-dd”,则2017年8月20显示样式为(2017-08-20)。
- 在js中如何获取当前系统时间(new Date())。
- 在js中获取完整年份的方法是(getFullYear())。
- 在js中获取月份的方法是(getMonth()+1)。
- 在js中获取日期的方法是(getDate())。
自动补全 :autocomplete
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式。
主要参数/属性:
Source:数据源,类型为String、Array、Function,其中String为ajax请求的服务器端地址,返回Array/JSON格式,Array即为数组,静态定义到页面中的数据,
Function(request,response):通过request.term获得输入的值,response(Array)来呈现数据(JSONP是这种方式);
minLength:当输入框内字符串长度达到minLength时,激活Autocomplete
autoFocus:当autocomplete选择菜单弹出时,自动选中第一个。
delay:即延迟多少毫秒autocomplete
disabled:是否禁用自动完成功能,默认false
jQuery ui提供的常用方法:
close():关闭智能提示框
destory():销毁智能提示框,将其所产生的元素完全删除,使其恢复至初始状态
disable():禁用自动完成功能
enable():开启自动完成功能
主要事件:
change(event,ul):当值改变时发生,ui.item为选中项
close(event,ui):当智能提示框关闭时发生
create(event,ui):当智能提示框创建时发生,可以在此事件中,对外观进行控制
focus(event,ui):当智能提示列表任意一项获得焦点时发生,ui.item为获得焦点的项
open(event,ui):当智能提示框打开或更新时发生
response(event,ui):在搜索完成之后智能提示框显示前发生,可以在此时间中对显示项进行处理
search(event,ui):在开始请求之前发生,可以在此事件中返回false来取消请求
select(event,ui):当智能提示框中任意一项被选中时发生,ui.item为选中项
案例
<link rel="stylesheet" href="js/jquery-ui.css" type="text/css"></link>
<link rel="stylesheet" href="js/jquery-ui.theme.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
$(document).ready(function(){
$( "#autocomplete" ).autocomplete({
//disable: true, //设为true自动提示就不显示了
delay: 200, //延迟200毫秒出现
minLength: 1, //出现提示的最小字符数
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], //数据源
select: function(event){ //当选中某一个下拉条目时,触发执行该函数
alert(event.target.value);
},
});
});
<input id="autocomplete" type="text">
source:也可以是 ajax提交
source: function(request, response){
$.ajax({
url: "TestAjax/ajax.do",
success: function(data){
response(eval("("+data+")"));
}
});
}
也可以是:source: [{ label: "C# Language", value: "C#" },
{ label: "C++ Language", value: "C++" },
{ label: "Java Language", value: "Java" },
{ label: "JavaScript Language", value: "JavaScript" }]
jQueryUI中Datepicker(日历)插件的介绍和使用
案例
$(function(){
$("#borndate").datepicker({
/* 是否可以使用下拉列表更改月份 */
changeMonth: true,
/* 是否可以使用下拉列表更改年份 */
changeYear: true,
/*可以设置年份的后缀显示内容。*/
yearSuffix: '年',
/** 是否把月放在年的后面 */
showMonthAfterYear:true,
/** 日期控件的星期显示 */
dayNamesMin: ['日','一', '二', '三', '四', '五', '六'],
/** 日期控件的月份显示 可以设置月份可变时显示样式值 */
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
/** 点击某个日期,填充输入框的月份值 可以设置月份不可变时显示样式值 */
monthNames: ['01','02','03','04','05','06','07','08','09','10','11','12'],
/** 格式化日期内容 */
dateFormat: "yy-MM-dd",
/** 输入框后面是否显示日期控件的图标 */
showOn: "button",
onSelect: function(selectedDate) {//选择日期后执行的操作
//alert(selectedDate);
}
})
});
<input id="borndate" name="borndate" />
Datepicker插件:
属性
changeMonth,是否可以使用下拉列表更改月份
changeYear,是否可以使用下拉列表更改年份
yearSuffix,可以设置年份的后缀显示内容
showMonthAfterYear,是否把月放在年的后面
dayNamesMin,日期控件的星期显示
monthNamesShort,日期控件的月份显示 可以设置月份可变时显示样式值
monthNames,点击某个日期,填充输入框的月份值 可以设置月份不可变时显示样式值
dateFormat,格式化日期内容
showOn 输入框后面是否显示日期控件的图标
事件
beforeShow : 在日期控件显示面板之前,触发此事件,并返回当前