【原创、开源】几个 JavaScript “类”(Calendar、Ajax、PPLive、Text、ToolTip、Xml 等)

    某次工作需要,回顾了一下过去做的某个项目,突然发现自制的 javascrip Calendar(日历控件),一时遐想无限,勾起不少有关当年(当月?)那些雄心壮志的回忆。

    从少不更事,到处变不惊,人少了很多冲劲,却多了几分稳重;现在自己看这些个“类”,实用的可能已不多,因为新技术早已把它们甩在了身后。但最终决定“开源”并写这篇文章,是考虑到还有很多朋友和我一样,对 javascript 不大懂,甚至有些朋友紧需个把诸如日历控件这样的小玩意应急。是为了和朋友们共同学习也好、让别人应急应用也罢,它总还有些存在的意义。

    这些“类”通过运用 javascript 基本类型,包装了一些简单的应用逻辑,使得代码更好的被复用,并力求代码犹如 c# 般优雅。源码包中完整的“类”名明细为:Calendar(日历控件)、Ajax(异步控件)、PPLive(播放控件)、Text(字符串处理)、ToolTip(提示框)、Xml(Xml文本处理) 、Cookie(Cookie操作)、QueryString(QueryString操作)、Thread(线程)、Timer(定时器),并同时提供了对应各类的 XXXDemon 若干。通过编辑运行 JsTest.htm 可以观看各演示的运行效果。

    很抱歉,宿舍上网不便,因此,这篇文章将拆解成几篇,利用下班后还在公司的时间,逐一介绍这些“类”;我会根据大家的反馈增述或简述、甚至免述相关内容。这是整个源码包的目录结构:

3 - 3

    注意:我对 javascript 是一知半解,是在摸索中制作了上述的“类”;里面肯定有大量的漏洞、错误,希望朋友们抱着“批评”的态度验证。

1、Calendar(日历控件)

    打开 JsTest.htm,编辑 <body/> 内容如下(注释无关脚本引用):

3 - 1

    运行 JsTest.htm,点击输入框,然后可以看到该日历控件;选择相应的日期,并可以对输入框进行日期赋值:

3 - 2

    详细使用方法,请大家参考包内 JsDemons/Html/CalendarDemon.js 文件。这里指出的是,类似一行

        var myCalendar = new Calendar('myCalendar', toolTipPannel, _DaySelectedCallback);

的语句就能创建该控件,两行

        myCalendar.Show(myTextBox, currentDay);

        myCalendar.Hidden();

就能操作该控件,给当时的我一种成就感。默认的月份、星期采用英文,但支持本地化(new CalendarMonths(["一月", "二月", "三月", "四月"...);该日历控件支持在单个页面中创建多个实例。

    这个控件的算法参考了 http://web-v.com/article.asp?id=3http://web-v.com/trackback.asp?tbID=3&action=addtb&tbKey=2fefac8959f18cceb46771512eff082b27e97c09 作者介绍的日历控件,但这个日历控件看上去似乎单个页面只能显示一个。

    (下载源码包(20080704))

posted @ 2008-07-03 20:22  陛下  阅读(2890)  评论(10编辑  收藏  举报