基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于jQuery带备忘录功能的日期选择器。这款日期控制带有备记忘录功能。有备忘录的日期有一个圆圈，单击圆圈显示备忘录。该实例适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下：
实现的代码。
html代码：
<div class="container">
<header class="htmleaf-header">
<h1>
jQuery简单带备忘录功能的日期选择器插件</h1>
</header>
<div class="calendar-container">
<div class="calendar">
<header>
<h2 class="month">
</h2>
<a class="btn-prev fontawesome-angle-left" href="#"></a><a class="btn-next fontawesome-angle-right"
href="#"></a>
</header>
<table>
<thead>
<tr>
<td>
一
</td>
<td>
二
</td>
<td>
三
</td>
<td>
四
</td>
<td>
五
</td>
<td>
六
</td>
<td>
日
</td>
</tr>
</thead>
<tbody>
<tr>
<td date-month="12" date-day="1">
1
</td>
<td date-month="12" date-day="2">
2
</td>
<td date-month="12" date-day="3">
3
</td>
<td date-month="12" date-day="4">
4
</td>
<td date-month="12" date-day="5">
5
</td>
<td date-month="12" date-day="6">
6
</td>
<td date-month="12" date-day="7">
7
</td>
</tr>
<tr>
<td date-month="12" date-day="8">
8
</td>
<td date-month="12" date-day="9">
9
</td>
<td date-month="12" date-day="10">
10
</td>
<td date-month="12" date-day="11">
11
</td>
<td date-month="12" date-day="12">
12
</td>
<td date-month="12" date-day="13">
13
</td>
<td date-month="12" date-day="14">
14
</td>
</tr>
<tr>
<td date-month="12" date-day="15">
15
</td>
<td date-month="12" date-day="16">
16
</td>
<td date-month="12" date-day="17">
17
</td>
<td date-month="12" date-day="18">
18
</td>
<td date-month="12" date-day="19">
19
</td>
<td date-month="12" date-day="20">
20
</td>
<td date-month="12" date-day="21">
21
</td>
</tr>
<tr>
<td date-month="12" date-day="22">
22
</td>
<td date-month="12" date-day="23">
23
</td>
<td date-month="12" date-day="24">
24
</td>
<td date-month="12" date-day="25">
25
</td>
<td date-month="12" date-day="26">
26
</td>
<td date-month="12" date-day="27">
27
</td>
<td date-month="12" date-day="28">
28
</td>
</tr>
<tr>
<td date-month="12" date-day="29">
29
</td>
<td date-month="12" date-day="30">
30
</td>
<td date-month="12" date-day="31">
31
</td>
</tr>
</tbody>
</table>
<div class="list">
<div class="day-event" date-month="12" date-day="4">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 1</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="13">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 2</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="14">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 3</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="16">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 4</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="24">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 5</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="31">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 6</h2>
<p class="date">
2014-12-31</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
</div>
</div>
</div>
</div>
via：http://www.w2bc.com/Article/19446
基于jQuery带备忘录功能的日期选择器的更多相关文章
- 一款基于jQuery带事件记录的日历插件
之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
- jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
- 动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办？
通常页面输入控件想得到日期选择功能,借助jQuery是这样实现的: 1.载入css和js <script src="jqueryui/jquery-ui.js" type=& ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
随机推荐
- Python的数据处理学习(二)
本文参考Paul Barry所著的<Head First Python>一书,参考代码均可由http://python.itcarlow.ie/站点下载.本文若有任何谬误希望不吝赐教~ 二 ...
- 使用arm开发板搭建无线mesh网络（一）
由于项目的需要,老板让我使用arm开发板(友善之臂的tiny6410)搭建无线mesh网络.一般而言,无线自组织网络的网络设备都是由用户的终端设备来充当,这些终端设备既要处理用户的应用数据,比如娱乐, ...
- noip模拟赛 软件software
地图上的 n个城市,由 n-1条道路连接,且任意两个城市连通.除 1号城市之外的每个都有 一台计算机,安装软件号城市之外的每个都有 一台计算机,安装软件一个 自己的安装时间.住在 1号城市的蒟蒻要给这 ...
- 实现带有getMin的栈
题目 实现一个特殊的栈,在实现栈的基础上,再实现返回栈中最小的元素的操作. 要求 pop.push.getMin的时间复杂度是O(1) 可以使用现成的栈类型 思路 如下图所示,在栈结构中,每次pop的 ...
- 数据库中使用 Synonym和openquery
如果,你想在一台数据库服务器上,查询另一个台数据服务器的数据该如何做呢?如果,你想在同一台数据服务器上,在不同的数据库之间查询数据,又该怎么办呢?那就让我为你介绍Synonym和openquery吧. ...
- json的一些问题
使用json不仅可以这么写,{"ARCHIVAL_CODE":"String","TDQLR":"String"} 还可 ...
- hdoj 5375 Gray Code
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5375 编码规则:tmp = XOR(gr[i],gr[i-1]); 算是找规律的题目吧,考虑?前后字符 ...
- 数据结构——图——最短路径D&F算法
一.Dijkstra算法(贪心地求最短距离的算法) 在此算法中,我按照自己的理解去命名,理解起来会轻松一些. #define MAXSIZE 100 #define UNVISITED 0 #defi ...
- Openfire开发配置,Openfire源代码配置,OpenFire二次开发配置（eclipse）
首先去官网把openfire的源码下下来: http://www.igniterealtime.org/downloads/source.jsp 1.下载后放到你的workspace当中,我的woek ...
- 最基本的Unix系统操作命令
基本知识点: OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 USBHD ...