HTML5小组件

刺骨的言语ヽ痛彻心扉 2022-01-29 09:23 262阅读 0赞

# 7、[https://www.html5tricks.com/jquery-calendar-with-event.html][https_www.html5tricks.com_jquery-calendar-with-event.html] #

# jQuery多功能日历插件 带事件记录功能 #

21,514 人浏览

[1条回复][1]

2014-12-13 21:36:22

本文作者[html5tricks][]，转载请注明出处

之前我们也已经分享过不少jQuery日历插件，有些应用了CSS3的特性，外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观，而且带有日期事件记录功能，点击日期即可展开事件记录窗口，你可以设置事件的描述以及提醒的时间，是一款相对实用的jQuery日历插件。

![jquery-calendar-with-event][]

接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码，代码主要由HTML、CSS和jQuery组成。

## HTML代码： ##

## CSS代码： ##

.jalendar {
        position: relative;
        width: 300px;
        margin: 30px auto;
    }
    .jalendar .left {
        float: left;
    }
    .jalendar .clear {
        clear: both;
    }
    .jalendar.mid {
        width: 420px;
    }
    .jalendar .added-event {
        display: none;
    }
    .jalendar-wood {
        position: relative;
        background: url('../images/jalendar-wood-bg.png') left top;
        border-radius: 10px;
        box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -2px 10px rgba(255,255,255,0.3);
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        border-top: 1px solid #e1bf89;
        border-right: 1px solid #b4925d;
        border-left: 1px solid #b4925d;
        display: inline-block;
        z-index: 2;
    }

## jQuery代码： ##

$(function () {
        $('#myId').jalendar({
            customDay: '2017/12/01',  // Format: Year/Month/Day
            color: '#ed145a', // Unlimited Colors
            lang: 'EN' // Format: English — 'EN', Türkçe — 'TR'
        });
    });

# 6、 #

# [基于Layui的可自定义添加删除数据的表格处理插件][Layui] #

如何在网页上编辑表格数据，这通过自己编写JS和CSS实现都是比较麻烦的，jQuery有很多插件可以完成这种功能，比如这款[jQuery简易版的Excel表格功能插件][jQuery_Excel]，就可以基本满足网页上的数据编辑。这次我们分享的这款插件是基于Layui的，layui 是一款采用自身模块规范编写的前端UI框架，这款表格插件可以允许你非常方便的添加、删除表格行数据，并且通过服务器接口进行保存。你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。

[![layui-table-data][]][layui-table-data 1]

[在线演示][layui-table-data 1][源码下载][Link 1]

# 5、 #

# [CSS3卡片3D翻转动画 卡片带3D按钮][CSS3_3D_ _3D] #

很多现代网站现在都喜欢用卡片式的风格，即在首页中将文章标题、内容和主题图片制作成卡片展示。今天这款就是基于CSS3的卡片动画，卡片中的元素可以是任意HTML元素，这里比较特别的是在文字下方显示一个3D按钮，同时当我们将鼠标滑过卡片时，卡片会呈现3D的翻转动画。

[![css3-3d-card-button][]][css3-3d-card-button 1]

[在线演示][css3-3d-card-button 1][源码下载][Link 2]

# 4、 #

# [jQuery事件循环滚动的时间轴插件][jQuery] #

今天给大家分享一款基于jQuery的时间轴插件，它的功能就像是扩展版的[jQuery焦点图][jQuery 1]那样，不仅可以像时间轴那样沿着轴向前翻滚，而且可以点击按钮向前或者向后翻滚，这有点类似传统的焦点图插件，并且这些在时间轴上的事件可以循环滚动。

[![jquery-event-timeline][]][jquery-event-timeline 1]

[在线演示][jquery-event-timeline 1][源码下载][Link 3]

# 3、 #

# [CSS3个性化自定义样式的Radiobox单选框][CSS3_Radiobox] #

单选框[Radiobox][]是网页表单中比较常用的元素，有时候为了统一网页风格，让页面变得更加协调，我们通常需要重写浏览器单选框的默认样式。今天我们要分享的是一款基于CSS3的个性化自定义样式[Radiobox][]单选框，它不仅有着扁平化的样式外观，而且在选中项切换的时候伴随动画效果。

[![css3-personalise-radiobox][]][css3-personalise-radiobox 1]

[在线演示][css3-personalise-radiobox 1][源码下载][Link 4]

# 2、 #

# [超酷的CSS3复古风格和字体的3D按钮][CSS3_3D] #

我们分享过很多基于CSS3的3D按钮，很多都非常漂亮，例如这篇[7款外观迷人的HTML5/CSS3 3D按钮特效][7_HTML5_CSS3 3D]文章中就收藏了不少。这次我们要带来一款也是基于CSS3的3D按钮，它有着复古的风格和字体。第一个按钮根据光标在悬停时的位置向左或向右倾斜，它的风格类似于老式游戏机按钮。 这些按钮配置了sm，md，lg大小类以及bootstrap-esque类，如primary，secondary，dangerous，warning，success和info。第二个按钮是一个加载程序按钮，按下它时会有自己的进度条。 它只会向中心推动，但随后向上打开，在它的正面显示一个进度条。 根据操作的成功与否，它将在完成时显示具体信息。

[![css3-3d-retro-button][]][css3-3d-retro-button 1]

[在线演示][css3-3d-retro-button 1][源码下载][Link 5]

# 1、[CSS3和SVG实现的圆环菜单动画][CSS3_SVG] #

网页菜单的样式真实多种多样，特别是[HTML5][]和CSS3的流行，让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单，在圆环上一共有7个节点，表示菜单项，当鼠标滑过或者点击其中一个节点时，就会弹出文字菜单项，圆环形状和节点都是采用SVG绘制而成，动画效果也非常不错。

[![css3-svg-circle-menu][]][css3-svg-circle-menu 1]

[在线演示][css3-svg-circle-menu 1][源码下载][Link 6]

本条目发布于[一月 10, 2019][CSS3_SVG]。属于[HTML5应用][HTML5 1]分类，被贴了 [CSS3菜单][CSS3]、[SVG][] 标签。

[https_www.html5tricks.com_jquery-calendar-with-event.html]: https://www.html5tricks.com/jquery-calendar-with-event.html
[1]: https://www.html5tricks.com/jquery-calendar-with-event.html#comments
[html5tricks]: http://www.html5tricks.com/
[jquery-calendar-with-event]: /images/20220129/72748a5d5a0048b6bfefd7ea034f582f.png
[Layui]: https://www.html5tricks.com/layui-table-data.html
[jQuery_Excel]: https://www.html5tricks.com/jquery-excel.html
[layui-table-data]: /images/20220129/2f328f63659041718b355468945fca31.png
[layui-table-data 1]: https://www.html5tricks.com/demo/layui-table-data/index.html
[Link 1]: https://www.html5tricks.com/download/layui-table-data.rar
[CSS3_3D_ _3D]: https://www.html5tricks.com/css3-3d-card-button.html
[css3-3d-card-button]: /images/20220129/514454c95cdd48b5b651270828be4a9e.png
[css3-3d-card-button 1]: https://www.html5tricks.com/demo/css3-3d-card-button/index.html
[Link 2]: https://www.html5tricks.com/download/css3-3d-card-button.rar
[jQuery]: https://www.html5tricks.com/jquery-event-timeline.html
[jQuery 1]: https://www.html5tricks.com/category/jquery-plugin/jquery-image-slider
[jquery-event-timeline]: /images/20220129/fb4d9e8399644534b0e9db9c90c04945.png
[jquery-event-timeline 1]: https://www.html5tricks.com/demo/jquery-event-timeline/index.html
[Link 3]: https://www.html5tricks.com/download/jquery-event-timeline.rar
[CSS3_Radiobox]: https://www.html5tricks.com/css3-personalise-radiobox.html
[Radiobox]: https://www.html5tricks.com/tag/radiobox
[css3-personalise-radiobox]: /images/20220129/42963a277a784f6385e28e9006115599.png
[css3-personalise-radiobox 1]: https://www.html5tricks.com/demo/css3-personalise-radiobox/index.html
[Link 4]: https://www.html5tricks.com/download/css3-personalise-radiobox.rar
[CSS3_3D]: https://www.html5tricks.com/css3-3d-retro-button.html
[7_HTML5_CSS3 3D]: https://www.html5tricks.com/7-html5-css3-button.html
[css3-3d-retro-button]: /images/20220129/94007caf4fbb4689808e6fe6572706c0.png
[css3-3d-retro-button 1]: https://www.html5tricks.com/demo/css3-3d-retro-button/index.html
[Link 5]: https://www.html5tricks.com/download/css3-3d-retro-button.rar
[CSS3_SVG]: https://www.html5tricks.com/css3-svg-circle-menu.html
[HTML5]: https://www.html5tricks.com/
[css3-svg-circle-menu]: /images/20220129/b102f0f393d84984a2bce5e60ee95479.png
[css3-svg-circle-menu 1]: https://www.html5tricks.com/demo/css3-svg-circle-menu/index.html
[Link 6]: https://www.html5tricks.com/download/css3-svg-circle-menu.rar
[HTML5 1]: https://www.html5tricks.com/category/html5-demo
[CSS3]: https://www.html5tricks.com/tag/css3%E8%8F%9C%E5%8D%95
[SVG]: https://www.html5tricks.com/tag/svg