当前位置: 首页 > 工具软件 > lhgCalendar > 使用案例 >

小巧、高效、美观的弹出日历组件 ——lhgcalendar

郗奇玮
2023-12-01

http://www.cnblogs.com/lhgstudio/archive/2009/02/13/1390381.html

没法上传附件,请到以上地址下载

下载地址:http://files.cnblogs.com/lhgstudio/lhgcalendar.rar

 

一、组件简介

lhgcalendar 是一款小巧、高效、美观的弹出日历组件。它的功能虽然不多,但使用非常简单。它是一个非常小巧的组件,代码只有一个文件,大小6K,因此使得它在功能小也 就简单了一些(但个人认为只要在满足使用的情况下,使用更简洁的组件不仅减少了文件的大小,还可提高网页加载的速度,提高组件的运行效率。当然如果你想使 用功能强大的日历组件,网上有很多这样的组件您尽可以去使用。但我认为功能多的组件肯定就有你用不到的功能,这样肯定就浪费了一些宝贵的有限的资源。所以 本组件适用于那些功能要求不多,但要求小巧,高效率的组件的人,个人认为效率还是第一位的)。

它的主要特点有:

  1. 小巧:整个组件代码只有一个文件lhgcalendar.js,大小为5.4K。
  2. 调用简单:你只需要在相应位置添加一个事件来调用主函数即可(参考下面有示列)。
  3. 效率高:你试下就知道了:-)。
  4. 外观还看得过去:呵呵,这个算不上特点,本人界面设计能力差,不过提供的这2种样式还算过得去。
  5. 支持的浏览器:IE6+,Firefox2.0+,Chrome(谷歌浏览器),Opera9.5+,Safari3.0+等。

如果使用上有任何问题可与我共同探讨。我的QQ:463214570 ,blog:http://www.cnblogs.com/lhgstudio

二、组件结构

  1. lhgcalendar.js:组件核心文件,其实也就这一个文件:-)。
  2. skin:包含组件图片文件和样式表文件的文件夹。
  3. skin/default.css:组件默认式表文件。
  4. skin/gray.css:灰以样式的样式表文件。

三、调用方法及参数说明

  1. 在需要调用的页面引入lhgcalendar.js,例如:<script type="text/javascript" src="lhgcalenar.js"></script>
  2. 然后在要调用的位置上引发的事件中加入调用代码,例如:<input type="text" οnclick="lhgcalendar();"/>
  3. 参数说明:只有一个参数,就是接收日期的控件的ID,用法见下面的示例

    还 有就是在lhgcalendar.js里有个组件的配置对象:var config = { dir : '', skin : 'default' } 中的dir指的是日历显示在控件的下面还右面, 默认是下面,写成'right'就是在右面;skin指的就是皮肤名称。

  4. 注:日期的格式为 M-Y-D

四、功能及示例

1. 常规调用

调用代码:<input id="date1" type="text" οnclick="lhgcalendar();"/>

2. 图标触发

 

调用代码:<input type="text" id="date2" /> <img align="absmiddle" src="date.gif" οnclick="lhgcalendar('date2');" />;

注:date2为输入框的id

 

【转自:http://yiilin2008.blog.163.com/blog/static/8866204200951753234526/】

转载于:https://www.cnblogs.com/lechenging/p/4073242.html

 类似资料: