利用jquery实现日历待办事项



42 166 56



特效描述:利用jquery实现 日历待办事项,利用jquery实现日历待办事项

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />

2. 引入JS

<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>

3. HTML代码

		<h1>jquery日历待办事项</h1>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Mon</th><th>Tue</th><th>Wed</th>
					<th>Thu</th><th>Fri</th><th>Sat</th>
					<th>Sun</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="padding" colspan="3"></td>
					<td> 1</td>
					<td> 2</td>
					<td> 3</td>
					<td> 4</td>
				</tr>
				<tr>
					<td> 5</td>
					<td> 6</td>
					<td> 7</td>
					<td> 8</td>
					<td class="today"> 9</td>
					<td>10</td>
					<td>11</td>
				</tr>
				<tr>
					<td>12</td>
					<td class="date_has_event">
						13
						<div class="events">
							<ul>
								<li>
									<span class="title">Event 1</span>
									<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
								</li>
								<li>
									<span class="title">Event 2</span>
									<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
								</li>
							</ul>
						</div>
					</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
					<td>17</td>
					<td>18</td>
				</tr>
				<tr>
					<td>19</td>
					<td>20</td>
					<td>21</td>
					<td class="date_has_event">
						22
						<div class="events">
							<ul>
								<li>
									<span class="title">Event 1</span>
									<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
								</li>
								<li>
									<span class="title">Event 2</span>
									<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
								</li>
							</ul>
						</div>
					</td>
					<td>23</td>
					<td>24</td>
					<td>25</td>
				</tr>	
				<tr>
					<td>26</td>
					<td>27</td>
					<td>28</td>
					<td>29</td>
					<td>30</td>
					<td>31</td>
					<td class="padding"></td>
				</tr>
			</tbody>
			<tfoot>
				<th>Mon</th><th>Tue</th><th>Wed</th>
				<th>Thu</th><th>Fri</th><th>Sat</th>
				<th>Sun</th>
			</tfoot>
		</table>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 滑动星星打分 日期时间 时钟 日历 时间 日历插件 时间日期插件 其他 文字提示框 提示文字 提示框/弹出层 时间日期插件 时间日期 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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