easyui源码翻译1.32--Calendar(日历)
前言
前几天加班比较忙 未能及时更新翻译的 今天多发布几篇。。下载该插件翻译源码
日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：qq 1364386878
*/
(function ($) {
//调整日历大小
function _resize(jq) {
var opts = $.data(jq, "calendar").options;
var t = $(jq);
if (opts.fit == true) {
var p = t.parent();
opts.width = p.width();
opts.height = p.height();
}
var header = t.find(".calendar-header");
t._outerWidth(opts.width);
t._outerHeight(opts.height);
t.find(".calendar-body")._outerHeight(t.height() - header._outerHeight());
};
// 包裹日历
function wrapCalendar(jq) {
//wrapInner()方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
//详情参考http://www.w3school.com.cn/jquery/manipulation_wrapinner.asp
$(jq).addClass("calendar").wrapInner("<div class=\"calendar-header\">"
+ "<div class=\"calendar-prevmonth\"></div>"
+ "<div class=\"calendar-nextmonth\"></div>"
+ "<div class=\"calendar-prevyear\"></div>"
+ "<div class=\"calendar-nextyear\"></div>"
+ "<div class=\"calendar-title\">"
+ "<span>Aprial 2010</span>"
+ "</div>"
+ "</div>"
+ "<div class=\"calendar-body\">"
+ "<div class=\"calendar-menu\">"
+ "<div class=\"calendar-menu-year-inner\">"
+ "<span class=\"calendar-menu-prev\"></span>"
+ "<span><input class=\"calendar-menu-year\" type=\"text\"></input></span>"
+ "<span class=\"calendar-menu-next\"></span>"
+ "</div>"
+ "<div class=\"calendar-menu-month-inner\">"
+ "</div>"
+ "</div>"
+ "</div>");
//日历头部“年月”hover、click事件
$(jq).find(".calendar-title span").hover(function () {
$(this).addClass("calendar-menu-hover");
}, function () {
$(this).removeClass("calendar-menu-hover");
}).click(function () {
var menu = $(jq).find(".calendar-menu");
if (menu.is(":visible")) {
menu.hide();
} else {
showMenu(jq);//显示年份和月份选择的菜单
}
});
//日历头部四个按钮hover、click事件
$(".calendar-prevmonth,.calendar-nextmonth,.calendar-prevyear,.calendar-nextyear", jq).hover(function () {
$(this).addClass("calendar-nav-hover");
}, function () {
$(this).removeClass("calendar-nav-hover");
});
$(jq).find(".calendar-nextmonth").click(function () {
toMonth(jq, 1);//下月
});
$(jq).find(".calendar-prevmonth").click(function () {
toMonth(jq, -1);//上月
});
$(jq).find(".calendar-nextyear").click(function () {
toYear(jq, 1);//下年
});
$(jq).find(".calendar-prevyear").click(function () {
toYear(jq, -1);//上年
});
$(jq).bind("_resize", function () {
var options = $.data(jq, "calendar").options;
if (options.fit == true) {
_resize(jq);
}
return false;
});
};
//上一月、下一月选择按钮处理方法 1：表示下月；-1：表示上月
function toMonth(jq, tag) {
var opts = $.data(jq, "calendar").options;
opts.month += tag;
if (opts.month > 12) {
opts.year++;
opts.month = 1;
} else {
if (opts.month < 1) {
opts.year--;
opts.month = 12;
}
}
renderCalendar(jq);
//日历头部月份更改
var inner = $(jq).find(".calendar-menu-month-inner");
inner.find("td.calendar-selected").removeClass("calendar-selected");
inner.find("td:eq(" + (opts.month - 1) + ")").addClass("calendar-selected");
};
//上一年、下一年选择按钮处理方法 (1：表示下年；-1：表示上年)
function toYear(jq, tag) {
var options = $.data(jq, "calendar").options;
options.year += tag;
renderCalendar(jq);
////日历头部年份更改
var year = $(jq).find(".calendar-menu-year");
year.val(options.year);
};
//显示年份和月份选择的菜单
function showMenu(jq) {
var opts = $.data(jq, "calendar").options;
$(jq).find(".calendar-menu").show();
if ($(jq).find(".calendar-menu-month-inner").is(":empty")) {
$(jq).find(".calendar-menu-month-inner").empty();
////表格布局月份选择菜单
var t = $("<table></table>").appendTo($(jq).find(".calendar-menu-month-inner"));
var idx = 0;
for (var i = 0; i < 3; i++) {
var tr = $("<tr></tr>").appendTo(t);
for (var j = 0; j < 4; j++) {
$("<td class=\"calendar-menu-month\"></td>").html(opts.months[idx++]).attr("abbr", idx).appendTo(tr);
}
}
$(jq).find(".calendar-menu-prev,.calendar-menu-next").hover(function () {
$(this).addClass("calendar-menu-hover");
}, function () {
$(this).removeClass("calendar-menu-hover");
});
//下年按钮click事件 $(jq).find(".calendar-menu-next").click(function () {
var y = $(jq).find(".calendar-menu-year");
if (!isNaN(y.val())) {
y.val(parseInt(y.val()) + 1);
}
});
//上年按钮click事件
$(jq).find(".calendar-menu-prev").click(function () {
var y = $(jq).find(".calendar-menu-year");
if (!isNaN(y.val())) {
y.val(parseInt(y.val() - 1));
}
});
//菜单年份输入框keypress事件
$(jq).find(".calendar-menu-year").keypress(function (e) {
if (e.keyCode == 13) {
hideMenu();
}
});
//菜单月份hover、click事件
$(jq).find(".calendar-menu-month").hover(function () {
$(this).addClass("calendar-menu-hover");
}, function () {
$(this).removeClass("calendar-menu-hover");
}).click(function () {
var menu = $(jq).find(".calendar-menu");
menu.find(".calendar-selected").removeClass("calendar-selected");
$(this).addClass("calendar-selected");
hideMenu();
});
}
//隐藏菜单
function hideMenu() {
var menu = $(jq).find(".calendar-menu");
var year = menu.find(".calendar-menu-year").val();//获取菜单年份输入框值
var _1b = menu.find(".calendar-selected").attr("abbr");//获取菜单选择的月份值
if (!isNaN(year)) {
opts.year = parseInt(year);
opts.month = parseInt(_1b);
renderCalendar(jq);
}
menu.hide();
}; var body = $(jq).find(".calendar-body");
var menu = $(jq).find(".calendar-menu");
var yearInner = menu.find(".calendar-menu-year-inner");
var monthInner = menu.find(".calendar-menu-month-inner");
yearInner.find("input").val(opts.year).focus();//默认年份输入框获得焦点
monthInner.find("td.calendar-selected").removeClass("calendar-selected");
monthInner.find("td:eq(" + (opts.month - 1) + ")").addClass("calendar-selected");
menu._outerWidth(body._outerWidth());
menu._outerHeight(body._outerHeight());
monthInner._outerHeight(menu.height() - yearInner._outerHeight());
};
//根据年月获取日历所要显示的日期数组
function getDateArray(jq, year, month) {
var opts = $.data(jq, "calendar").options;
var dateArray = [];
var date = new Date(year, month, 0).getDate();
for (var i = 1; i <= date; i++) {
dateArray.push([year, month, i]);
}
//dates是存放星期六-星期天的日期的二维数组
//result是存放dates的数组
//result格式：[[[year,month,day],...,[]],...,[]]
var result = [], dates = [];
var _29 = -1;
while (dateArray.length > 0) {
//shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var date = dateArray.shift();
dates.push(date);
var day = new Date(date[0], date[1] - 1, date[2]).getDay();
if (_29 == day) {
day = 0;
} else {
if (day == (opts.firstDay == 0 ? 7 : opts.firstDay) - 1) {
result.push(dates);
dates = [];
}
}
_29 = day;
}
if (dates.length) {
result.push(dates);
}
var firstWeek = result[0];//获取第一个星期
//若不足7天，取前面日期补足
if (firstWeek.length < 7) {
while (firstWeek.length < 7) {
var firstDate = firstWeek[0];
var date = new Date(firstDate[0], firstDate[1] - 1, firstDate[2] - 1);
firstWeek.unshift([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
}
} else {
var firstDate = firstWeek[0];
var dates = [];
for (var i = 1; i <= 7; i++) {
var date = new Date(firstDate[0], firstDate[1] - 1, firstDate[2] - i);
dates.unshift([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
}
//unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。
result.unshift(dates);
}
var lastWeek = result[result.length - 1];//获取最后一个星期
//若不足7天，取后面日期补足
while (lastWeek.length < 7) {
var lastDate = lastWeek[lastWeek.length - 1];
var date = new Date(lastDate[0], lastDate[1] - 1, lastDate[2] + 1);
lastWeek.push([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
}
if (result.length < 6) {
var lastDate = lastWeek[lastWeek.length - 1];
var dates = [];
for (var i = 1; i <= 7; i++) {
var date = new Date(lastDate[0], lastDate[1] - 1, lastDate[2] + i);
dates.push([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
}
result.push(dates);
}
return result;
};
// 渲染日历
function renderCalendar(jq) {
var opts = $.data(jq, "calendar").options;
$(jq).find(".calendar-title span").html(opts.months[opts.month - 1] + " " + opts.year);//设置日历头部年月值
var body = $(jq).find("div.calendar-body");
body.find(">table").remove();//清空日历body
//table布局日历body
var t = $("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><thead></thead><tbody></tbody></table>").prependTo(body);
var tr = $("<tr></tr>").appendTo(t.find("thead")); for (var i = opts.firstDay; i < opts.weeks.length; i++) {
tr.append("<th>" + opts.weeks[i] + "</th>");
}
for (var i = 0; i < opts.firstDay; i++) {
tr.append("<th>" + opts.weeks[i] + "</th>");
}
var _32 = getDateArray(jq, opts.year, opts.month);
for (var i = 0; i < _32.length; i++) {
var _33 = _32[i];
var tr = $("<tr></tr>").appendTo(t.find("tbody"));
for (var j = 0; j < _33.length; j++) {
var day = _33[j];
$("<td class=\"calendar-day calendar-other-month\"></td>").attr("abbr", day[0] + "," + day[1] + "," + day[2]).html(day[2]).appendTo(tr);
}
}
t.find("td[abbr^=\"" + opts.year + "," + opts.month + "\"]").removeClass("calendar-other-month");
var now = new Date();
var _34 = now.getFullYear() + "," + (now.getMonth() + 1) + "," + now.getDate();
t.find("td[abbr=\"" + _34 + "\"]").addClass("calendar-today");
if (opts.current) {
t.find(".calendar-selected").removeClass("calendar-selected");
var _35 = opts.current.getFullYear() + "," + (opts.current.getMonth() + 1) + "," + opts.current.getDate();
t.find("td[abbr=\"" + _35 + "\"]").addClass("calendar-selected");
}
var _36 = 6 - opts.firstDay;
var _37 = _36 + 1;
if (_36 >= 7) {
_36 -= 7;
}
if (_37 >= 7) {
_37 -= 7;
}
t.find("tr").find("td:eq(" + _36 + ")").addClass("calendar-saturday");
t.find("tr").find("td:eq(" + _37 + ")").addClass("calendar-sunday");
t.find("td").hover(function () {
$(this).addClass("calendar-hover");
}, function () {
$(this).removeClass("calendar-hover");
}).click(function () {
t.find(".calendar-selected").removeClass("calendar-selected");
$(this).addClass("calendar-selected");
var _38 = $(this).attr("abbr").split(",");
opts.current = new Date(_38[0], parseInt(_38[1]) - 1, _38[2]);
opts.onSelect.call(jq, opts.current);
});
};
//初始化日历
$.fn.calendar = function (options, parm) {
if (typeof options == "string") {
return $.fn.calendar.methods[options](this, parm);
}
options = options || {};
return this.each(function () {
var calendar = $.data(this, "calendar");
if (calendar) {
$.extend(calendar.options, options);
} else {
calendar = $.data(this, "calendar",
{ options: $.extend({}, $.fn.calendar.defaults, $.fn.calendar.parseOptions(this), options) });
wrapCalendar(this);
}
if (calendar.options.border == false) {
$(this).addClass("calendar-noborder");
}
_resize(this);
renderCalendar(this);
$(this).find("div.calendar-menu").hide();
});
};
//日历默认方法
$.fn.calendar.methods = {
//返回参数对象。
options: function (jq) {
return $.data(jq[0], "calendar").options;
},
//调整日历大小
resize: function (jq) {
return jq.each(function () {
_resize(this);
});
},
//移动日历到指定日期
moveTo: function (jq, date) {
return jq.each(function () {
$(this).calendar({ year: date.getFullYear(), month: date.getMonth() + 1, current: date });
});
}
};
//解析器配置
$.fn.calendar.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, ["width", "height", { firstDay: "number", fit: "boolean", border: "boolean" }]));
};
//日历默认 属性和事件
$.fn.calendar.defaults = {
//日历控件宽度
width: 180,
//日历控件高度
height: 180,
//当设置为true的时候，将设置日历控件大小自适应父容器
fit: false,
//定义是否显示边框
border: true,
//定义一周的第一天是星期几。0=星期日、1=星期一 等
firstDay: 0,
//显示的周列表内容
weeks: ["S", "M", "T", "W", "T", "F", "S"],
//显示的月列表内容
months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
//年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历
year: new Date().getFullYear(),
//月日历。
month: new Date().getMonth() + 1,
//当前日期
current: new Date(),
//在用户选择一天的时候触发
onSelect: function (_3e) {
}
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Calendar - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.calendar.js"></script>
</head>
<body>
<h2>Basic Calendar</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Click to select date.</div>
</div> <div class="easyui-calendar" style="width:180px;height:180px;"></div> </body>
</html>
插件效果
easyui源码翻译1.32--Calendar(日历)的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--datagrid(数据表格)
前言 此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34 1.33开始支持css3 算是又一个转折 但是 ...
- easyui源码翻译1.32--DateBox（日期输入框）
前言 扩展自$.fn.combo.defaults.使用$.fn.datebox.defaults重写默认值对象.下载该插件翻译源码 日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历 ...
- easyui源码翻译1.32--EasyLoader（简单加载）
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--DateTimeBox（日期时间输入框）
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 和日期输入框类似,日期时间输入框允许用户选择日期和指定 ...
- easyui源码翻译1.32--Draggable（拖动）
前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...
- easyui源码翻译1.32--Droppable（放置）
前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...
- easyui源码翻译1.32--Resizable（调整大小）
前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...
- easyui源码翻译1.32--Pagination（分页）
前言 使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码 该分页控件允许用户导航页面的数据.它支持页面导航和页面长度选择的选项设置.用户可以在分页控件上添加自定义按钮 ...
随机推荐
- JDBC与ODBC的区别与应用
jdbc是使用通过JAVA的数据库驱动直接和数据库相连,而jdbc-odbc连接的是ODBC的数据源,真正与数据库建立连接的是ODBC! 建议使用JDBC直接连接,同时最好使用连接池! JDBC 是 ...
- Asp.Net Cookie的清除
背景 最近做到一个asp.net项目,项目中保存用户信息用到了cookie,因此,在注销身份的时候,就需要清除掉cookie. 探索过程 我先是试验了这种代码,在没有特殊声明前,代码都是写在Page_ ...
- 页面动态加载js文件
function loadJS(url, onload) { var domscript = document.createElement('script'); domscript.src = url ...
- HTML招聘简历解析
使用 jsoup 对 HTML 文档进行解析和操作 Jsoup解析html简历与dom4j解析xml是一个道理:首先必须知道html的格式,不知道格式,无法解析.根据格式,再将需要的内容通过下面的方法 ...
- Android系统简介(上):历史渊源
上个月,看到微信的一系列文章,讲到Linux的鼻祖-李纳斯的传记<Just for Fun>, 其人神乎其能, 其人生过程非常有趣,值得每个程序员细细品味. 而实际上,对我而已,虽然做软件 ...
- 轮子来袭 vJine.Core Orm 之 01_快速体验
vJine.Core 是.Net环境下C#类库,在其包含的众多功能中ORM功能尤为突出,现简介如下. 一.支持的数据库: SQLite, MySQL, MS SQL, Oracle. 二.使用方法: ...
- IOS上iframe的滚动条失效的解决办法
#iframe-wrap { position: fixed; top: 100px; bottom: 0px; left: 0px; right: 0px; -webkit-overflow-scr ...
- SVN: revert all command
If you accidentally marked all your files as "delete" (your file/folder has a red x on it) ...
- Java如何获得平台相关的行分隔符、路径分隔符?
我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3550194.html ,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体 ...
- OpenJudge/Poj 1723 SOLDIERS
1.链接地址: http://bailian.openjudge.cn/practice/1723/ http://poj.org/problem?id=1723 2.题目: 总时间限制: 1000m ...