一、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顶部年份后边加上后缀
-
});
十三、
转载：https://blog.csdn.net/xiaozhuangyumaotao/article/details/116702177