一、jquery插件机制介绍
jquery插件机制的介绍
jquery因为他的开源特性,大家都愿意聚集在它的周围,这也直接导致了jquery丰富的插件,据不完全统计,其插件个数已经超过千种,大致可以归为ui类(如jquery ui)、验证类(如表单验证插件jquery-validate.js)、特效类(如eayui等各种组件)、工具类(如json操作工具JSON2.js)等。
jquery插件分为哪几种?
一、自定义插件(可以提高系统的封装性):
基于dom元素的局部插件的定义格式:$.fn.myPlugin=function (){}
二、全局插件的定义格式:$.myPlugin=function(){}
jquery插件一般的命名方法?
jquery插件有着约定的方法来命名,命名一般以jquery-自定义名字.js来命名,避免冲突,使用匿名函数传递jQuery对象的方式,我们之后会举例子的,这里大致介绍下插件的概念与分类。
二、jquery ui 之datepicker
jquery ui 之datepicker是jquery ui里面的日期插件,注意:这个插件只能精确到天,并不能选择时分秒哦,如果你想使用到选择时分秒的功能,下面的就不要看了,举个例子,效果如图,通过这个例子我们来看看jquery-ui-datepicker怎么使用的:
例子一:datepicker常用属性介绍
页面html引入下载好的jquery ui:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>datepicker-jquery-ui日期选择器</title>
<link href="./jquery-ui.min.css" rel="stylesheet"/>
<script src="./external/jquery/jquery.js"></script>
<script src="./jquery-ui.min.js"></script>
</head>
<body >
<p>日期:<input type="text" id="datepicker"></p>
</body>
</html>
注意,目录结构是这样的:
位置不要乱了,不然css等下找不到图片的。
javascript代码:
<script>
$( "#datepicker" ).datepicker({
showAnim:"slideDown", //日期框出现时使用的特效
showOtherMonths: true, //datepicker默认只显示当前月
selectOtherMonths: true, //true:可以选择其他月份的日期
showButtonPanel: true,//默认在底部没有“today”和“done”,配置此项显示这两个按钮
changeMonth: true,//默认月份只能通过向左或向右的按钮来改变,这里配置为true之后就出现了月份的下拉框
changeYear: true,//类似changeMonth
numberOfMonths: 1,//显示几个datepicker面板,一般就一个就可以了,有时候选择日期范围的时候可能用到多个
dateFormat:"yy-mm-dd",//y:表示两位格式的年,yy表示四位格式的年,mm表示两位格式的月份,dd表示两位格式的天
showOn: "button",
buttonImage: "calendar.png",//这个图标当然是自己准备的了
buttonImageOnly: false,//true:表示只能点击图标才能触发日历的显示
//默认显示[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ],表示周日到周六,这里使用 dayNamesMin属性汉化
dayNamesMin:["日", "一", "二", "三", "四", "五", "六"],
//默认显示["January","February","March","April","May","June","July","August","September",
//"October","November","December" ]
//表示十二个月,这里通过指定汉字实现月份的汉化
monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
});
</script>
上面的例子列出了常用的datepicker的属性,以及对它们的解释,另外:showAnim:是showAnimation的缩写,显示动画的意思,可用值有:show(默认),slideDown(滑下),fadeIn(淡入),blind(百叶窗特效),bounce(反弹特效),clip(剪辑特效),drop(降落特效),fold(折叠特效),slide(滑动特效)。
例子二:实现开始日期和结束日期的选择
如上所示:当开始日期选择了“2018-04-10”之后,结束日期能够选择的日期只能是大于等于这个日期的,反之亦然。要实现的效果就是这样,怎么做的呢?
先来看html部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>datepicker-jquery-ui日期选择器</title>
<link href="./jquery-ui.min.css" rel="stylesheet"/>
<script src="./external/jquery/jquery.js"></script>
<script src="./jquery-ui.min.js"></script>
<style>
</style>
</head>
<body >
<label for="from">从</label>
<input type="text" id="from" name="from">
<label for="to">到</label>
<input type="text" id="to" name="to">
</body>
</html>
下面就是实现这个功能的javascript代码:
<script>
$( "#from" ).datepicker({
showAnim:"slideDown",
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd",
dayNamesMin:[ "日", "一", "二", "三", "四", "五", "六"],
monthNamesShort:[ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
showAnim:"slideDown",
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd",
dayNamesMin:[ "日", "一", "二", "三", "四", "五", "六"],
monthNamesShort:[ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
</script>
三、汉化
jquery ui datepicker默认都是英文的,要想显示中文需要汉化,上面给大家说了汉化,但是并没有着重的去说汉化的问题,这次一次性说明白,最终效果如下:
$("#datepicker").datepicker({
showButtonPanel: true,
dateFormat: 'yy-mm-dd',
firstDay: 1,//默认是周日显示在最左边,这里设置显示顺序为周一到周日,0:日,1:周一....6:周六
changeMonth: true,
changeYear: true,
closeText: '关闭',//默认done
prevText: '<上月',//默认提示prev
nextText: '下月>',//默认提示next
currentText: '今天',//默认today
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
weekHeader: '周',
isRTL: false,//设置为false表示文字从左到右,true表示从右到左
showMonthAfterYear: true,//datepicker顶部默认显示格式是"四月 2018"这里配置显示为"2018年四月"
yearSuffix: '年' //在datepicker顶部年份后边加上后缀
});
十三、