如何使用 jQuery 和 CSS3 创建一个日历控件

开发 前端
这个教程将教你如何使用 jQuery 和 CSS3 来创建一个绚丽的日历控件。我们将使用 CSS 来做样式,使用 jQuery 和 jQuery UI 来做功能。我们将只使用 jQuery UI 中的 “Datepicker” 脚本,所以你不需要下载所有的组件,可以让你的文件更小。

这个教程将教你如何使用 jQuery 和 CSS3 来创建一个绚丽的日历控件。我们将使用 CSS 来做样式,使用 jQuery 和 jQuery UI 来做功能。我们将只使用 jQuery UI 中的 “Datepicker” 脚本,所以你不需要下载所有的组件,可以让你的文件更小。

***步 - HTML 代码

我们只需要一行 HTML 代码,请注意这里的 id 属性:

  1. <div id="calendar"></div> 

在 body 标签之前,我们添加 jQuery 代码。这里我们需要调用“datepicker”,你需要上面定义的 div 的 id 属性。我们在这里添加了一些选项:

inline - 让日历默认可见,不需要点击或者输入控件
firstDay - 设置 Monday 为一周的开始
showOtherMonths - 在表格中填充其他月份的日期以充满表格

更多选项的解释,请查看文档。

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
  2. <script src="js/jquery-ui-datepicker.min.js"></script> 
  3. <script> 
  4. $('#calendar').datepicker({ 
  5. inline: true, 
  6. firstDay: 1
  7. showOtherMonths: true, 
  8. dayNamesMin: ['Sun''Mon''Tue''Wed''Thu''Fri''Sat'
  9. }); 
  10. </script> 

现在日历看起来是这样的:

#p#

第二步 - 容器

我们首先来移除所有的空白,填充,边框等等:

  1. .ui-datepicker, 
  2. .ui-datepicker table, 
  3. .ui-datepicker tr, 
  4. .ui-datepicker td, 
  5. .ui-datepicker th { 
  6. margin0
  7. padding0
  8. bordernone
  9. border-spacing0

下面来让这个日历好看一点,添加背景颜色,圆角,阴影,字体等等:

  1. .ui-datepicker { 
  2. displaynone
  3. width294px
  4. padding35px
  5. cursordefault
  6.  
  7. text-transformuppercase
  8. font-familyTahoma
  9. font-size12px
  10.  
  11. background#141517
  12.  
  13. -webkit-border-radius: 3px
  14. -moz-border-radius: 3px
  15. border-radius: 3px
  16.  
  17. -webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0); 
  18. -moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0); 
  19. box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0); 

现在这个日历看起来是这样的:

#p#

第三步 - 头部

我们将更改日历头部(月份、年份)的颜色,并添加边框,还有一些基本样式:

  1. .ui-datepicker-header { 
  2. positionrelative
  3. padding-bottom10px
  4. border-bottom1px solid #d6d6d6
  5.  
  6. .ui-datepicker-title { text-aligncenter; } 
  7.  
  8. .ui-datepicker-month { 
  9. positionrelative
  10. padding-right15px
  11. color#565656
  12.  
  13. .ui-datepicker-year { 
  14. padding-left8px
  15. color#a8a8a8

我们将使用 “before pseudo selector”来添加绿色的圈圈。这可以让我们在 month 元素之前插入内容,然后我们就可以格式化并设置内容的位置:

  1. .ui-datepicker-month:before { 
  2. displayblock
  3. positionabsolute
  4. top: 5px
  5. right: 0
  6. width5px
  7. height5px
  8. content''
  9.  
  10. background#a5cd4e
  11. background: -moz-linear-gradient(top#a5cd4e 0%#6b8f1a 100%); 
  12. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); 
  13. background: -webkit-linear-gradient(top#a5cd4e 0%,#6b8f1a 100%); 
  14. background: -o-linear-gradient(top#a5cd4e 0%,#6b8f1a 100%); 
  15. background: -ms-linear-gradient(top#a5cd4e 0%,#6b8f1a 100%); 
  16. background: linear-gradient(top#a5cd4e 0%,#6b8f1a 100%); 
  17.  
  18. -webkit-border-radius: 5px
  19. -moz-border-radius: 5px
  20. border-radius: 5px

现在日历控件看起来是这样的:

#p#

第四步 - Prev 和 Next 按钮

我们将使用背景图片来格式化 next 和 previous 箭头,我们将把 previous 放在左边,next 放在右边:

  1. .ui-datepicker-prev, 
  2. .ui-datepicker-next { 
  3. positionabsolute
  4. top: -2px
  5. padding5px
  6. cursorpointer
  7.  
  8. .ui-datepicker-prev { 
  9. left: 0
  10. padding-left0
  11.  
  12. .ui-datepicker-next { 
  13. right: 0
  14. padding-right0
  15.  
  16. .ui-datepicker-prev span, 
  17. .ui-datepicker-next span{ 
  18. displayblock
  19. width5px
  20. height10px
  21. text-indent-9999px
  22.  
  23. background-imageurl(../img/arrows.png); 
  24.  
  25. .ui-datepicker-prev span { background-position0px 0px; } 
  26.  
  27. .ui-datepicker-next span { background-position-5px 0px; } 
  28.  
  29. .ui-datepicker-prev-hover span { background-position0px -10px; } 
  30.  
  31. .ui-datepicker-next-hover span { background-position-5px -10px; } 

现在日历看起来是这样的:

#p#

第五步 - 日历样式

我们将给 天 和 周 添加顶部和底部的填充并修改颜色:

  1. .ui-datepicker-calendar th { 
  2. padding-top15px
  3. padding-bottom10px
  4.  
  5. text-aligncenter
  6. font-weightnormal
  7. color#a8a8a8

下面来给“days grid"添加填充,修改颜色,并给每一个数字添加一个透明的边框。这是很必要的,因为我们要给选中的数字添加边框,为了防止页面跳动,我们预先给所有的数字都添加一个透明的边框:

  1. .ui-datepicker-calendar td { 
  2. padding0 7px
  3.  
  4. text-aligncenter
  5. line-height26px
  6.  
  7. .ui-datepicker-calendar .ui-state-default { 
  8. displayblock
  9. width26px
  10. outlinenone
  11.  
  12. text-decorationnone
  13. color#a8a8a8
  14.  
  15. border1px solid transparent

对于当前选中的日期,我们要更改边框和文字的颜色为绿色。对于其他月份的日期,我们要修改为更暗的颜色:

  1. .ui-datepicker-calendar .ui-state-active { 
  2. color#6a9113
  3. border1px solid #6a9113
  4.  
  5. .ui-datepicker-other-month .ui-state-default { color#565656; } 

就这样我们的日历做完了,下图是最终效果:

你可以点击 这里 查看这个日历的demo。

责任编辑:王雪燕 来源: 开源中国社区
相关推荐

2017-05-11 15:20:52

CSS3动画前端

2012-05-27 18:28:46

jQuery Mobi

2015-04-23 15:40:59

CSS3叮当猫

2021-03-30 05:58:01

JavascriptCss3转盘小游戏

2011-11-17 09:24:27

HTML 5

2012-11-15 09:41:43

jQuery

2012-06-21 14:20:16

CSS3

2012-02-24 09:11:45

jQuery

2024-04-01 08:18:52

CSSHTMLWeb

2012-09-13 09:24:31

CSSJSjQ

2014-07-14 12:37:36

jQueryCSS3

2013-01-30 15:59:29

adobeCSS3HTML5

2015-10-10 14:22:46

jQueryCSS3栏菜单

2009-08-19 14:15:42

C# 复合控件

2020-09-01 20:53:26

DocsifyGitHub Page文档网站

2012-03-02 10:50:20

jQuery

2013-07-09 09:24:29

响应式HTML5CSS3

2013-09-24 13:56:25

jQueryCSS

2011-03-22 08:54:02

HTML 5CSS3JavaScript

2020-08-24 07:33:20

CSS框架 SASS
点赞
收藏

51CTO技术栈公众号