被逼着写的jquery工作日管理日历插件
因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo。我的天,我面试的可是.net工程师啊。虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上了。写的不好,功能不完善,毕竟只是个小小的demo,不要喷我。
在恶补了不少js知识之后,由于水平有限(其实是一脸懵逼),就找了网上开源的日历插件学习,再貌似看懂了之后,开始了我的创作之旅(抄袭之路)。
先定一个小目标,比如先写一个通用插件写法。 通过看了多篇的博客和视频,终于掌握了jquery插件化的基本写法(对于一点都不懂前端的.net工程师压力好大,其中走了无数的弯路,差点丢了饭碗)。
//闭包限定命名空间 (function ($) { var Calendar= function () { var defaults = { onsuccess: function () { } } function Calendar(el, options)//定义构造函数 { options = $.extend({}, defaults, options || {}); this.init(el, options); } Calendar.prototype = { init: function (el, options) { options.onsuccess; }, } return Calendar }() $.fn.Calendar= function (options) { return this.each(function () { new Calendar($(this), options) }) } })(jQuery);
<script> $(function () { $("#lol").Calendar({ }); }) </script> <div id="lol" class="layout"> </div>
下面的内容是我自己写的,可能很烂,不需要者可以忽略。
接下来就是实现绘制日历,所以就借鉴某篇博客的日历实现思路(其实就是抄袭加稍加修改),终于完成初步绘制。
fill: function (el, options) { var $this = this; var item = $(el).data('calendar'); var cal = $(el); var calendarHtml = '<div class="layout"> <div id="jsc" style="width:110%;height:300px;"><div class="calendar"><div style="width:100%;">' + '<a href="#" class="calendar-btn calendar-btn-l"><span><img src="data:images/07.png"/></span></a>' + '<p class="calendar-year" id="pcalyear">' + options.year + '年'+options.month+'月</p>' + '<a href="#" class="calendar-btn calendar-btn-r"><span><img src="data:images/09.png"/></span></a></div>' + '<div class="calendar-day" ><ul class="week week-b week-hd" ><li style="color:grey;">' + options.weeekday[0] + '</li><li>' + options.weeekday[1] + '</li><li>' + options.weeekday[2] + '</li><li>' + options.weeekday[3] + '</li><li>' + options.weeekday[4] + '</li><li>' + options.weeekday[3] + '</li><li style="color:grey;">' + options.weeekday[6] + '</li></ul>' + '<ul class="week week-b week-day week-day-b" id="caldayli"><li class="1"></li><li class="2"></li><li class="3"></li><li class="4" ></li><li class="5"></li><li class="6"></li><li class="7"></li></ul>' + '</div></div></div>' + '<input type="hidden" value="" id="selectYear"><input type="hidden" value="" id="selectMonth"><input type="hidden" value="" id="selectDay"><input type="hidden" value="3" id="selectMonIndex">' + '<div class="reset">' + ' <label for="checkday1"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg1">周一</label><input type="checkbox" id="checkday1" style="display:none" datanum="day1" value="1" />' + ' <label for="checkday2"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg2">周二</label><input type="checkbox" id="checkday2" style="display:none" datanum="day2" value="2" />' + ' <label for="checkday3"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg3">周三</label><input type="checkbox" id="checkday3" style="display:none" datanum="day3" value="3" />' + ' <label for="checkday4"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg4">周四</label><input type="checkbox" id="checkday4" style="display:none" datanum="day4" value="4" />' + ' <label for="checkday5"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg5">周五</label><input type="checkbox" id="checkday5" style="display:none" datanum="day5" value="5" />' + ' <label for="checkday6"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg6">周六</label><input type="checkbox" id="checkday6" style="display:none" datanum="day6" value="6" />' + ' <label for="checkday0"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg0">周日</label><input type="checkbox" id="checkday0" style="display:none" datanum="day0" value="0" />' + ' <a href="#" class="change">重置</a>' + ' </div>' + ' <div id="gz" class="cc">' + ' <p id="tsgz"><span>特殊工作日</span>(默认是节假日,但是需要上班的日期)</p>' + ' </div>' + '<div id="jj" class="cc">' + ' <p id="tsjj"><span>节假日</span>(默认是上班日期,但是设置为节假日的日期)</p>' + ' </div>' + ' <div style="width:100%;">' + ' <input type="button" value="确认" id="btnsave" class="btn1" />' + '</div></div>'; cal.html(calendarHtml); this.initTime(options) this.SetCheckbox(options) this.setCalendar(options) $(".reset>input:checkbox").click(function () { $this.setOneDay($(this).val()) }) //日期点击事件 cal.on("click", "#caldayli>li", function () { var v = this.firstChild.innerHTML;//获取点击结点日期 $("#selectDay").val(v);//改变当前选择日期 var $selectDay = $("#selectDay").val(); var $selectMonth = parseInt($("#selectMonth").val()) + 1 var year = $("#selectYear").val(); var $monthday =year+"-"+$selectMonth + "-" + $selectDay; if ($(this).hasClass("duty-cur")) {//要么周一到周五,fdgz,特殊gz $(this).removeClass("duty-cur"); if ($.inArray($monthday, options.gonguzoarr) > -1) { options.gonguzoarr.remove($monthday); $this.removeGZ($monthday) } else { options.jiejiaarr.push($monthday) $this.Addtsjjicon($monthday) } } else {//要么是周六周日,fdjj,特殊jj $(this).addClass("duty-cur"); if ($.inArray($monthday, options.jiejiaarr) > -1) {//存在 options.jiejiaarr.remove($monthday); $this.removeJJ($monthday) } else {//不存在,放进特殊工作日 options.gonguzoarr.push($monthday) $this.Addtsgzicon($monthday) } } }) //删除按钮点击事件 cal.on("click", " .tsgzicon", function () {//删除 var item = $(this).parent('div').attr("data-num"); $(this).parent('div').remove(); options.gonguzoarr.remove(item); $this.removeGZ(item); //变为不是工作日,日历上直接修改,removeclass if (true) { $("span[datanum=" + item + "]").parent("li").removeClass("duty-cur"); } }) //删除按钮点击事件 cal.on("click", " .tsjjicon", function () {//删除 var item = $(this).parent('div').attr("data-num"); $(this).parent('div').remove(); options.jiejiaarr.remove(item); $this.removeJJ(item); //变为工作日日历上直接修改,addclass if (true) { $("span[datanum=" + item + "]").parent("li").addClass("duty-cur"); } }) //翻页 cal.on('click', '.calendar-btn-l', function () { $this.setLastMonth(options); }) cal.on('click', '.calendar-btn-r', function () { $this.setNextMonth(options); }) cal.on('click', '.change', function () { $this.Change(options); }) $("#btnsave").click(function () { options.onsuccess; }) }, initTime : function (options) { var selectYear = options.year; $("#selectYear").val(selectYear); $("#selectMonth").val(options.month-1); $("#selectDay").val(1); }, setCalendar: function (options) { this.clearCalendar(); var selectYear = $("#selectYear").val(); var selectMonth = $("#selectMonth").val(); var selectDay = $("#selectDay").val(); var dmonth = selectMonth * 1 + 1;//获取当月最后一天所用月份(下个月的第0天) var dayNum = new Date(selectYear, dmonth, 0);//获取当月的最后一天 dayNum = dayNum.getDate(); var selectMonthDay = new Date(selectYear, selectMonth, 1);//选择月份的第一天 var firstDayWeek = selectMonthDay.getDay();//获取第一天的星期 for (var i = firstDayWeek, j = 1; i <= $(".week-day-b li").length && j <= dayNum; i++, j++) { //法定节假日 var monthday = selectYear + "-" + (parseInt(selectMonth) + 1) + "-" + j; $(".week-day-b li").eq(i).html("<span id='id" + j + "' datanum='" + monthday + "'>" + j + "</span>");//填写日期 //判断公司规定工作日(如周1到周4,周六) var day = $(".week-day-b li").eq(i).attr('class'); if ($.inArray(day, options.mrsb) > -1) { $(".week-day-b li").eq(i).addClass("duty-cur"); } if ($.inArray(monthday, options.fdgz) > -1) { if (!$(".week-day-b li").eq(i).hasClass("duty-cur")) { $(".week-day-b li").eq(i).addClass("duty-cur"); } } if ($.inArray(monthday, options.fdjj) > -1) { if ($(".week-day-b li").eq(i).hasClass("duty-cur")) { $(".week-day-b li").eq(i).removeClass("duty-cur"); } } //判断公司规定的特殊节假日,工作日 if ($.inArray(monthday, options.gonguzoarr) > -1) { if (!$(".week-day-b li").eq(i).hasClass("duty-cur")) { $(".week-day-b li").eq(i).addClass("duty-cur"); } } if ($.inArray(monthday, options.jiejiaarr) > -1) { if ($(".week-day-b li").eq(i).hasClass("duty-cur")) { $(".week-day-b li").eq(i).removeClass("duty-cur"); } } if (i == $(".week-day-b li").length - 1 && j != dayNum) {//如果日历格子不够再画一行 for (var k = 0; k < 7; k++) { $("#caldayli").append("<li class='day" + k + "'></li>"); } } } }, clearCalendar: function () { $("#caldayli").html(""); for (var k = 0; k < 7; k++) { $("#caldayli").append("<li class='day" + k + "'></li>"); } }, setLastMonth : function (options) { this.clearCalendar(); var selectYear = $("#selectYear").val(); var selectMonth = $("#selectMonth").val(); if (selectMonth == 0) { $("#selectYear").val(parseInt(selectYear) - 1); $("#selectMonth").val(11); } else { $("#selectMonth").val(parseInt(selectMonth) - 1); } this.SetYearMonth($("#selectYear").val(), parseInt($("#selectMonth").val()) + 1) this.setCalendar(options); }, setNextMonth : function (options) { this.clearCalendar(); var selectYear = $("#selectYear").val(); var selectMonth = $("#selectMonth").val(); if (selectMonth == 11) { $("#selectYear").val(parseInt(selectYear) + 1); $("#selectMonth").val(0); } else { $("#selectMonth").val(parseInt(selectMonth) + 1); } this.SetYearMonth($("#selectYear").val(), parseInt($("#selectMonth").val()) + 1) this.setCalendar(options); }, SetYearMonth : function (year, month) { $("#pcalyear").html(year + "年" + month + "月");//改变显示年 },
做完了之后,就是做日期管理了,由于不是专业的,只好随便写写,先做了几个关于array辅助js。
function arrayRemove(arr1, arr2) { for (var j = 0 ; j < arr2.length ; j++) { if ($.inArray(arr2[j], arr1) > -1) { arr1.remove(arr2[j]) } } }//去除arr2的 function arrayCombine(arr1, arr2) { var arr3 = [].concat(arr2) for (var i = 0 ; i < arr1.length ; i++) { for (var j = 0 ; j < arr3.length ; j++) { if (arr1[i] === arr3[j]) { arr3.splice(j, 1); //利用splice函数删除元素,从第i个位置,截取长度为1的元素 } } } for (var i = 0; i < arr3.length; i++) { arr1.push(arr3[i]); } return arr1; }//合并 function arrayIntersection(arr1, arr2) { var result = new Array(); for (var i = 0 ; i < arr1.length ; i++) { for (var j = 0 ; j < arr2.length ; j++) { if (arr1[i] === arr2[j]) { result.push(arr1[i]); } } } return result; }//交集 Array.prototype.indexOf = function (val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } };
接下来就是制作功能。
Addtsgzicon : function (item) { $("#tsgz").after("<div class=\"icon\" data-num=\"" + item + "\"><span>" + item + "</span><img class=\"tsgzicon\" src=\"images/03.png\" /></div>") }, Addtsjjicon : function (item) { $("#tsjj").after("<div class=\"icon\" data-num=\"" + item + "\"><span>" + item + "</span><img class=\"tsjjicon\" src=\"images/03.png\" /></div>") }, removeGZ : function (item) { $("#gz").find("div[data-num=" + item + "]").remove(); }, removeJJ : function (item) { $("#jj").find("div[data-num=" + item + "]").remove(); }, removeGZAll : function () { $("#gz").find("div").remove(); }, removeJJAll : function () { $("#jj").find("div").remove(); }, Change : function (options) { options.gonguzoarr = []; options.jiejiaarr = []; options.mrsb = []; this.removeGZAll(); this.removeJJAll(); //获取你重置的checkbox的值放入mrsb $('input:checked').each(function () { options.mrsb.push($(this).attr("datanum")) }) this.setCalendar(options) }, setOneDay: function (num) { if ($("#checkday" + num).is(":checked")) { $("#checkimg" + num).attr('src', 'images/18.png') $("#checkimg" + num).attr('alt', '选中') // $(".day" + num).addClass("duty-cur"); } else { $("#checkimg" + num).attr('src', 'images/19.png') $("#checkimg" + num).attr('alt', '未选') // $(".day" + num).removeClass("duty-cur"); } }, SetCheckbox: function (options) { var $this = this; $.each(options.mrsb, function (index, item) { $("[datanum=" + item + "]:checkbox").attr("checked", true); var checkboxvalue = $("[datanum=" + item + "]:checkbox").val(); $this.setOneDay(checkboxvalue); }) },
链接:https://github.com/hmllk/calendar
被逼着写的jquery工作日管理日历插件的更多相关文章
- Jquery中的日历插件
这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...
- 自己写一个jQuery垂直滚动栏插件(panel)
html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...
- 【UI插件】简单的日历插件(下)—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
- jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)
1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
随机推荐
- Asp.Net WebApi核心对象解析(下篇)
在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...
- SQL Server 数据加密功能解析
SQL Server 数据加密功能解析 转载自: 腾云阁 https://www.qcloud.com/community/article/194 数据加密是数据库被破解.物理介质被盗.备份被窃取的最 ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- XStream将java对象转换为xml时,对象字段中的下划线“_”,转换后变成了两个的解决办法
在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...
- JavaScript Math和Number对象
目录 1. Math 对象:数学对象,提供对数据的数学计算.如:获取绝对值.向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. 2. Number 对象 :Js中提供数字的对象.包含整数.浮 ...
- python程序生成平均脸
简介 项目代码https://github.com/LiuRoy/pokerface 原文链接http://www.cnblogs.com/lrysjtu/p/5492547.html 写这个项目的本 ...
- 算法与数据结构(十五) 归并排序(Swift 3.0版)
上篇博客我们主要聊了堆排序的相关内容,本篇博客,我们就来聊一下归并排序的相关内容.归并排序主要用了分治法的思想,在归并排序中,将我们需要排序的数组进行拆分,将其拆分的足够小.当拆分的数组中只有一个元素 ...
- 张高兴的 UWP 开发笔记:横向 ListView
ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办? Blend for Visua ...
- Nexus(一)环境搭建
昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...
- .NET面试题系列[6] - 反射
反射 - 定义,实例与优化 在面试中,通常会考察反射的定义(操作元数据),可以用反射做什么(获得程序集及其各个部件),反射有什么使用场景(ORM,序列化,反序列化,值类型比较等).如果答得好,还可能会 ...