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日期转换 时间戳转日期格式
Nov 05 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 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
php 前一天或后一天的日期
2008/06/28 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
php构造函数的继承方法
2015/02/09 PHP
一段实用的php验证码函数
2016/05/19 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
关于Django外键赋值问题详解
2017/08/13 Python
详解python中的json和字典dict
2018/06/22 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
python如何建立全零数组
2020/07/19 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
大型活动策划方案
2014/01/12 职场文书
倡导文明标语
2014/06/16 职场文书
学生检讨书范文
2015/01/27 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
这样写python注释让代码更加的优雅
2021/06/02 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
Python闭包的定义和使用方法
2022/04/11 Python
Android实现图片九宫格
2022/06/28 Java/Android