jQuery带备忘录日期选择插件



49 195 66



特效描述:jQuery 带备忘录 日期选择插件,jQuery带备忘录日期选择插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="http://fonts.useso.com/css?family=Lato:300,400,700">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/simplecalendar.js" type="text/javascript"></script>

3. 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>
<div style="text-align:center;margin:450px 0; font:normal 14px/24px 'MicroSoft YaHei';">



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 日期时间 时钟 日历 时间 日历插件 时间日期插件 文字提示框 提示文字 日历选择器 时间选择器 时间日期插件 时间日期

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到