网页日历显示控件calendar3.1
关于日历控件，我做了好多次尝试，一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后，用一行js代码就能做出一个日历，若在加点参数，就能自定义外观和功能丰富多彩的日历。Calendar 3.1是我初步满意的一个作品。
日历的常用场景有两种，一种是用在日期选择器里面，比如某个位置需要输入日期，点一下输入框会弹出一个日历以供选择日期；另一种是单纯的显示作用，在页面某个地方显示日历，一般起装饰作用，很多博客首页都会有这种日历。我前面的随笔介绍的都是第一种日历，而今天要介绍的Calendar 3.1是第二种日历。有兴趣的朋友可以去我的github主页上查看，https://github.com/dige1993/calendar.git
首先当然要看的是效果，先看一张素颜：
然后在调用过程中指定若干参数，可以定义出比较漂亮的日历，这里仅仅是演示，上一张红绿配的丑照：
在区域宽度小于200px的时候，会提示无法正常显示日历：
接下来看下这款控件的用法。
首先照例是引用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函数的第二个参数是可选项，类型是包含键值对的对象，下面用表格介绍下这个参数的每个键的含义及其取值：
| 参数 | 含义及取值 |
| title_bg_color | 年月区域的背景颜色，取值遵循web色彩取值规范，默认透明 |
| title_color | 年月区域的字体颜色，包括那几个按钮的前景色，取值遵循web色彩取值规范，默认透明 |
| line_style | 年月区域与星期区域的分隔线的style，取值遵循css边框取值规范，默认值：solid 1px |
| day_bg_color | 星期区域的背景颜色，取值遵循web色彩取值规范，默认透明 |
| day_color | 星期区域的字体颜色，取值遵循web色彩取值规范，默认透明 |
| date_bg_color | 日期区域的背景颜色，取值遵循web色彩取值规范，默认透明 |
| date_color | 日期区域的字体颜色，取值遵循web色彩取值规范，默认透明 |
| date_active_color | 当前日期的背景颜色，取值遵循web色彩取值规范，默认透明 |
| line_height | 行高，默认30px |
calendar_init函数的第一个参数是必需项，用于指示在哪个容器里面显示日历。如果容器的宽度小于200px, 还会出现上面第3张图里面的错误提示。更多内容呢，请访问我的github主页：https://github.com/dige1993/calendar.git
网页日历显示控件calendar3.1的更多相关文章
- jquery网页日历显示控件calendar3.1使用详解
关于日历插件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件.我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历.Calendar ...
- ASP.NET MVC显示WebForm网页或UserControl控件
ASP.NET MVC显示WebForm网页或UserControl控件 学习与使用ASP.NET MVC这样久,还是对asp.net念念不忘.能否在asp.net mvc去显示aspx或是user ...
- 日历时间选择控件---3(支持ie、火狐)
效果展示: 源代码: <script language=javascript ><!--/* 调用方法:不能用onfocus,要用onclick <input onclic ...
- Ti IPNC Web网页之ActiveX控件
Ti IPNC Web网页之ActiveX控件 本篇介绍关于TI IPNC网页中播放器相关的东西. gStudio工程中添加播放器并控制播放器 打开IPNC网页时首先会自动下载ActiveX控件并安装 ...
- [习题]输入自己的生日（年/月/日）#2 -- 日历(Calendar)控件的时光跳跃，一次跳回五年、十年前？--TodaysDate属性、VisibleDate属性
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/10/calendar_visibledate_birthday_dropdow ...
- 移动端日历选择控件（支持Zepto和JQuery）
移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 《手把手教你》系列技巧篇（三十七）-java+ selenium自动化测试-日历时间控件-上篇（详解教程）
1.简介 我们在实际工作中,有可能遇到有些web产品,网页上有一些时间选择,然后支持按照不同时间段范围去筛选数据.网页上日历控件一般,是一个文本输入框,鼠标点击,就会弹出日历界面,可以选择具体日期.这 ...
- 《手把手教你》系列技巧篇（三十八）-java+ selenium自动化测试-日历时间控件-下篇（详解教程）
1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...
- 转网页WB.ExecWB控件打印方法
网页WB.ExecWB控件打印方法 2010-02-01 12:48 代码: <table width="100%" cellpadding="1" on ...
随机推荐
- Oozie分布式任务的工作流——邮件篇
在大数据的当下,各种spark和hadoop的框架层出不穷.各种高端的计算框架,分布式任务如乱花般迷眼.你是否有这种困惑!--有了许多的分布式任务,但是每天需要固定时间跑任务,自己写个调度,既不稳定, ...
- 二、Redis基本操作——String(实战篇)
小喵万万没想到,上一篇博客,居然已经被阅读600次了!!!让小喵感觉压力颇大.万一有写错的地方,岂不是会误导很多筒子们.所以,恳请大家,如果看到小喵的博客有什么不对的地方,请尽快指正!谢谢! 小喵的唠 ...
- JavaScript权威设计--JavaScript类型,值,变量(简要学习笔记三)
1.负号是一元求反运算 如果直接给数字直接量前面添加负号可以得到他们的负值 2.JavaScript中的运算超出了最大能表示的值不会报错,会显示Infinity. 超出最小也不报错,会显示-I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（30）-本地化(多语言)
系列目录 我们的系统有时要扩展到其他国家,或者地区,需要更多的语言环境,微软提供了一些解决方案,原始我们是用js来控制的,现在不需要了. 我们只要创建简单的资源文件,通过MVC的路由设置就可以轻松的进 ...
- clipChildren和clipToPadding
clipChildren 和 clipToPadding clipChild 用于定义子控件是否在父控件边界内进行绘制.clipChild 默认为 true.也就是不允许进行扩展绘制. clipToP ...
- AFNetworking 3.0 源码解读（一）之 AFNetworkReachabilityManager
做ios开发,AFNetworking 这个网络框架肯定都非常熟悉,也许我们平时只使用了它的部分功能,而且我们对它的实现原理并不是很清楚,就好像总是有一团迷雾在眼前一样. 接下来我们就非常详细的来读一 ...
- JavaScript中尺寸、坐标
测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '&l ...
- Linux平台 Oracle 11gR2 RAC安装Part3：DB安装
四.DB(Database)安装 4.1 解压DB的安装包 4.2 DB软件安装 4.3 ASMCA创建磁盘组 4.4 DBCA建库 4.5 验证crsctl的状态 Linux平台 Oracle 11 ...
- WCF学习系列汇总
最近在学习WCF,打算把一整个系列的文章都”写“出来,包括理论和实践,这里的“写”是翻译,是国外的大牛写好的,我只是搬运工外加翻译.翻译的不好,大家请指正,谢谢了.如果觉得不错的话,也可以给我点赞,这 ...
- Ionic2系列——Ionic 2 Guide 官方文档中文版
最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...