独醉江湖的硅行之秀http://www.guixing.info/dzjh.html 设为首页加入收藏夹RSS订阅推荐给好友 今天是:2019年11月22日星期五
>文章列表[原创]>创建样式可控的javascript日历控件[一]

创建样式可控的javascript日历控件[一]

摘要:在web开发及应用中,日历的踪影随处可见。有功能型的,比如用于辅助用户输入的日期控件,有偏于装饰用途的,如简单的高亮当前日期。日期控件,网上还是很多的,也都基本能满足我们的需求。只是很多控件没有提供很好的样式控制,而我们的网站却是各有自己的配色风格的,这就会导致因为一个控件而破坏了我们页面原有的和谐…

在web开发及应用中,日历的踪影随处可见。有功能型的,比如用于辅助用户输入的日期控件,有偏于装饰用途的,如简单的高亮当前日期。日期控件,网上还是很多的,也都基本能满足我们的需求。只是很多控件没有提供很好的样式控制,而我们的网站却是各有自己的配色风格的,这就会导致因为一个控件而破坏了我们页面原有的和谐。为使用一个控件而改变我们整个的网站配色方案?我想大部分人应该都不会这么做的,呵呵!然而修改别人封装好了控件也不是容易的事,要么改得面目全非,要么根本就无从下手。如果我们知道一个日期控件具体的实现思路,不管是修改别人的还是我们自己全新的实现一个都将会得心应手。

关于web应用的用户体验已经不再是新话题和认识,无论我们是做设计或具体实现或两者集于一身,都应该意识到一个与页面能和谐共生的控件对用户体验的重要性。不要让小控件带来大问题,努力让一切都在我们的掌心之中!

回到具体的一个javascript日历控件的创建,希望看过本文的朋友都能发散思路,写出自己个性化十足的日历应用来。先看一下我实现的日历控件是什么模样:

以上场景是点击文本框之后创建了一个日历,如果文本框中有日期则选中对应日期,如果没有日期则选中当前的系统日期。

从以上的图片中可以看出这就是一个表格,关于这个表格的结构和样式控制及编程思路还是看图说话吧!

控件应用示例以及控件创建出的表格结构图示:

日历控件的表格结构

控件皮肤控制css图示:

日历控件css样式

从“控件应用示例以及控件创建出的表格结构图示”图片中的描述可以想见控件要实现的功能和基本思路:

  1. 本日期控件允许传入一个日期以作为初始选中日期
  2. 本日期控件提供一个设置皮肤的函数setSkin(className)让用户自己通过设置class样式引用来改变配色
  3. 本日期控件提供一个设置日期点击回调函数的函数clickDay(function),点击日期后将日期传入回调函数中,执行回调函数后删除日历表格(对于辅助用户输入的场景算是完成了一个连贯性的动作,使命结束了)
  4. 本日期控件提供一个将日历表格放入何处的函数appendTo(element或string),参数为空则放入页面body中
  5. 本日期控件对以上三个操作实现流行的链式调用,可不分先后,对于不需要获取日期作其它用途的可以忽略clickDay(function)

控件javascript编程实现代码结构图示1:

日历控件代码结构1

为了避免在一个页面上多个实例并存而产生可能的变量感染,所以每次都new一个以杜绝日历之间可能的相互引用。

控件javascript编程实现代码结构图示2:

日历控件代码结构2

 关于上图中的“公开属性”和“私有属性”只是本人的区分理解,可能称之为“成员”更合适一些,因为有些个“属性”其实是方法(动作),呵呵!不过大可以不必纠结于此,所谓面向对象应该只是一种思想,而不是标准,在这里只要知道:javascript中,类似上面的对象实现,通过this关键字定义的变量是可以在外面访问的,而通过var定义的变量是在外面访问不到的。知道这个区别就可以了!

在上图中有几个方法都对this进行了return,这是为了实现链式调用!

既然要写的是日期控件,当然需要用到Date对象以及对平年闰年和月份天数的处理等,之后是根据确定的日期用表格展现出来并绑定相关函数以实现交互!

到这里结束了吧,本文的目的只是对控件的结构和封装做个简单的介绍,下一篇再说主要的几个函数,如根据日期创建表格的函数createTable(date)以及对创建出来的表格绑定点击事件处理的this.table.click(e)

下一篇:创建样式可控的javascript日历控件[二]

《创建样式可控的javascript日历控件[一]》 独醉江湖[原创] 阅读[3200] 评论[2] 标签:日期控件 控件 js javascript 链式调用 封装 js控件
这是留给你的位置,说出你的真知灼见吧![我要评论]
1[游客]评论[2013-04-30]:为了避免在一个页面上多个实例并存而产生可能的变量感染,所以每次都new一个以杜绝日历之间可能的相互引用。
2[游客]评论[2013-02-26]:javascript日历控件
<<<1>>>
>

随机推荐

独醉江湖[积分:116分]

活跃度:

注册时间:2012-08-12

累计访问量:3615人次

Ta的主页Ta的简历给Ta留言
登录注册

原创文章列表页
>javascript实现智能机上触摸切换图片的网页效果
>ASP的正则表达式应用
>创建样式可控的javascript日历控件[二]
>创建样式可控的javascript日历控件[一]
>10个不常用的HTML标签
>javascript数组操作之移动数组元素
>通过prototype扩展Array对象实现数组去重
>利用ajax实现简单的邮箱采集器[二]
>利用ajax实现简单的邮箱采集器[一]
>javascript自定义标签选择器[三]
转载文章列表页
>认识Web开发中Js的setCapture和releaseCapture
>提高你的JavaScript 开发规范认识
>如何成为一名优秀的web前端工程师
>Javascript 的4种异步编程方法
>网页设计中的分页交互设计
>如何让页面跑的更快(有效缩短页面的渲染时间)
>Web前端工程师必知的技能知识
>函数式JavaScript高级编程
>优秀的JavaScript模块是怎样炼成的
>认识Javascript里的Json
收藏文章列表页
>Mysql存储过程中临时表的建立及游标遍历
>关于网页设计中的色彩搭配与应用
>网页设计中的平面构成
>国内常用四大web应用编程介绍及优缺点比较
>CSS知识要点介绍
>网络数据采集生涯趣谈
>网页制作中需要权衡的页面效果与seo效果
>web开发中如何更合理的应用jQuery
>网站用户体验设计须知
>js[原生javascript]浮动层智能判断上下边界
Copyright © 2012 guixing.info 版权所有 滇ICP备07500776号-2