jquery网页日历显示控件calendar3.1使用详解
关于日历插件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历。Calendar 3.1是我初步满意的一个作品。
日历的常用场景有两种,一种是用在日期选择器里面,比如某个位置需要输入日期,点一下输入框会弹出一个日历以供选择日期;另一种是单纯的显示作用,在页面某个地方显示日历,一般起装饰作用,很多博客首页都会有这种日历。我前面的随笔介绍的都是第一种日历,而今天要介绍的Calendar 3.1是第二种日历。有兴趣的朋友可以去我的github主页上查看,https://github.com/dige1993/calendar.git
首先当然要看的是效果,先看一张素颜:
然后在调用过程中指定若干参数,可以定义出比较漂亮的日历,这里仅仅是演示,上一张红绿配的丑照:
在区域宽度小于200px的时候,会提示无法正常显示日历:
css3 radius 接下来看下这款控件的用法。
首先照例是引用jquery库和calendar-3.1-js,然后准备一个width>=200px的div,高度最好自适应内容,如果这个div的id为test,则只要一句calendar_init($("#test"));就能在div内显示日历了。代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!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()时加上第二个参数。浓妆照的代码如下:
1
2
3
4
5
6
7
8
9
|
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"
});
|
jquery插件 calendar_init函数的第二个参数是可选项,类型是包含键值对的对象,下面用表格介绍下这个参数的每个键的含义及其取值:
calendar_init函数的第一个参数是必需项,用于指示在哪个容器里面显示日历。如果容器的宽度小于200px, 还会出现上面第3张图里面的错误提示。更多内容呢,请访问我的github主页:https://github.com/dige1993/calendar.git
转载于:https://www.cnblogs.com/good10000/p/10587431.html
jquery网页日历显示控件calendar3.1使用详解相关推荐
- android禁止下拉刷新,Android开发之无痕过渡下拉刷新控件的实现思路详解
相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下 ...
- ASP中利用OWC控件实现图表功能详解[zz]
ASP中利用OWC控件实现图表功能详解 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图, ...
- wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
- android组件用法说明,Android第三方控件PhotoView使用方法详解
Android第三方控件PhotoView使用方法详解 发布时间:2020-10-21 15:06:09 来源:脚本之家 阅读:74 作者:zhaihaohao1 PhotoView的简介: 这是一个 ...
- ASP中利用OWC控件实现图表功能详解
在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图,簇状柱型图,折线图的使用方法.OWC的更 ...
- jquery网页刷新后控件失效_jquery动态增减控件如何才能不刷新页面
已结贴√ 问题点数:20 回复次数:9 jquery动态增减控件如何才能不刷新页面 用jquery动态管理控件,可是每一次增减控件都会刷新页面,然后控件里面原来输入的值就都不在了,可以怎么来实现在动态 ...
- html 任务控件,Html基础知识详解-DbManager-WinFrom控件库|.net开源控件库|HZHControls官网...
一定要做的符合客户要求,不是自己认为对的. 一.基础标签 1.1 大小颜色位置 Html和CSS的关系 Hello World! 1.2 强调 如在网上商城中,某产品的打折后的价格是需要强调的.如下图 ...
- SpreadJS 类Excel表格控件 - V12 新特性详解
我们很高兴的宣布:纯前端类Excel表格控件 - SpreadJS 正式推出了 V12 新版本,此次的新版本中包含了诸多重量级的功能和来自客户的新需求,如对形状和富文本的支持,也有新增的图表类型,还有 ...
- 树形控件CTreeCtrl的使用详解(一)
树型视的三个结构TVINSERTSTRUCT.TVITEM.NMTREEVIEW TVINSERTSTRUCT 包含添加新项到树形视控件所使用的信息.这个结构被TVM_INSERTITEM消息使用.这 ...
最新文章
- hive load data inpath 空目录_走近大数据之Hive进阶(一、Hive数据的导入)
- macOS下使用anaconda相关系列
- go http 处理w.write 错误_Go语言中的异常和错误处理简介
- CentOS下系统时间同步和时区的修改和设置(用的这个)
- 贪心(数据结构):COGS 468. [NOI2010]超级钢琴
- GIS热词:AR、VR、MR辨析
- Windows Phone 7 利用计时器DispatcherTimer创建时钟
- 设计灵感合集|拟人化创意合成小动物,治愈可爱风插画作品
- 应用FileInputStream类,编写应用程序,从磁盘上读取一个Java程序,并将源程序代码显示在屏幕上
- logistics regression 线性不可分转换成线性可分
- matlab 半方差分析,地统计学半方差分析几个名词含义说明
- VS2013 密钥 – 所有版本
- 常用Gis通用符号库大全
- Linux 之 常用端口
- java 微软雅黑_网站能使用微软雅黑字体吗?是否会构成侵权?微软雅黑有版本吗? - 飞天奔月的java博客 - ITeye博客...
- C# 利用winrar解压带密码的压缩包
- TexWorks 拼写检查
- SpringMVC-狂神笔记
- python绝技运用python成为顶级pdf_python绝技:运用python成为顶级黑客 中文pdf完整版[42MB]...
- [高数][高昆轮][高等数学上][第一章-函数与极限]09.连续函数的运算和函数的连续性...