jQuery帶備忘錄日期選擇插件



52 207 70



特效描述: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

加群請備注:從官網了解到

老夫子电子