关于日历控件,我尝试过很多次,一直在努力开发一个好用的日历控件。我的想法是在引用这个控件之后,用一行js代码创建一个日历。如果添加一些参数,可以定制外观和功能丰富的日历。日历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 htmlheartheta charset=' utf-8 ' title calendar 3.1/title script src=' http : js/jquery-2 . 1 . 1 . min . js '/script script src=' http : js/calendar-3.1 . js '/script script type=' text/JavaScript ' $(文档)。ready(函数(e){ calendar _ init($(' # test ')));//在DIV中显示日历,id=test });/script style # test { width :200 px;height:auto飞越:隐藏;border:solid 1px边距-底部:20 px;}/style/head body div id=' test '/div/body/html以上是效果平平的代码。如果要自定义UI,可以在调用calendar_init()时添加第二个参数。浓妆照片代码如下:
calendar_init($('#test '),{ title_color: '黄色'、title_bg_color: '红色'、day_color: '棕色'、day_bg_color: '绿色'、date_bg_color: '粉色'、date_color: '蓝色'、date_active_color: '红色' });calendar_init函数的第二个参数是可选的,它的类型是一个包含键值对的对象。下表介绍了该参数每个键的含义和值:
calendar_init函数的第一个参数是必需的,用于指示日历显示在哪个容器中。如果容器的宽度小于200px,将出现上面图3中的错误消息。更多信息,请访问我的github主页:https://github.com/dige1993/calendar.git
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。