jquery网页日历显示控件calendar3.1使用详解


Posted in Javascript onNovember 24, 2016

关于日历控件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历。Calendar 3.1是我初步满意的一个作品。

日历的常用场景有两种,一种是用在日期选择器里面,比如某个位置需要输入日期,点一下输入框会弹出一个日历以供选择日期;另一种是单纯的显示作用,在页面某个地方显示日历,一般起装饰作用,很多博客首页都会有这种日历。我前面的随笔介绍的都是第一种日历,而今天要介绍的Calendar 3.1是第二种日历。有兴趣的朋友可以去我的github主页上查看,https://github.com/dige1993/calendar.git

首先当然要看的是效果,先看一张素颜:

 jquery网页日历显示控件calendar3.1使用详解

然后在调用过程中指定若干参数,可以定义出比较漂亮的日历,这里仅仅是演示,上一张红绿配的丑照:

jquery网页日历显示控件calendar3.1使用详解

在区域宽度小于200px的时候,会提示无法正常显示日历:

jquery网页日历显示控件calendar3.1使用详解

接下来看下这款控件的用法。

首先照例是引用jquery库和calendar-3.1-js,然后准备一个width>=200px的div,高度最好自适应内容,如果这个div的id为test,则只要一句calendar_init($("#test"));就能在div内显示日历了。代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar 3.1</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/calendar-3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
  calendar_init($("#test"));//在id=test的DIV中显示日历
});
</script>

<style>
#test {
  width:200px;
  height:auto;
  overflow:hidden;
  border:solid 1px;
  margin-bottom:20px;
}
</style>
</head>

<body>
  <div id="test"></div>
</body>
</html>

以上就是素颜效果的代码,如果还想自定义UI,可以在调用calendar_init()时加上第二个参数。浓妆照的代码如下:

calendar_init($("#test"),{
    title_color:"yellow",
    title_bg_color:"red",
    day_color:"brown",
    day_bg_color:"green",
    date_bg_color:"pink",
    date_color:"blue",
    date_active_color:"red"
  });

calendar_init函数的第二个参数是可选项,类型是包含键值对的对象,下面用表格介绍下这个参数的每个键的含义及其取值:

jquery网页日历显示控件calendar3.1使用详解

calendar_init函数的第一个参数是必需项,用于指示在哪个容器里面显示日历。如果容器的宽度小于200px, 还会出现上面第3张图里面的错误提示。更多内容呢,请访问我的github主页:https://github.com/dige1993/calendar.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
canvas轨迹回放功能实现
Dec 20 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
VUE动态生成word的实现
Jul 26 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
如何判断出一个js对象是否一个dom对象
Nov 24 #Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 #Javascript
纯javascript版日历控件
Nov 24 #Javascript
js通过classname来获取元素的方法
Nov 24 #Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 #Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
You might like
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
Vue精简版风格概述
2018/01/30 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python验证码识别实例代码
2018/02/03 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
什么是.net
2015/08/03 面试题
家居设计专业个人自荐信范文
2013/11/26 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
小学生家长寄语
2014/04/02 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
党支部综合考察意见
2015/06/01 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
大学体育课感想
2015/08/10 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android