自己编写的手机端周历插件

最新推荐文章于 2024-08-08 07:26:12 发布

原创

最新推荐文章于 2024-08-08 07:26:12 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#周历 #JavaScript #手机端 #行事历

一直想找一个手机端的关于行事历的周历插件，在手机日历上这种效果很常见，但是基于js开发的却很少见，我所知道的就只有fullcalendar，但是这种并不是我想要的效果，在网上搜索了很久也找不到合适的，最后无奈只好自己编写。

该周历插件是基于jQuery编写的，可以左右点击切换上下周，也可以左右滑动切换上下周，点击日期可以返回对应的日程记录，是很简单的一款行事历插件。截图如下：

css代码如下：

*{
	margin: 0;
	padding: 0;
}
.week-container{
	width: 100%;
	overflow: hidden;
	margin:0 auto;
	font-family: 'Microsoft YaHei';
	font-size: 16px;
}
.week-container .week_head{
	margin:5px 0;
}
.week-container .week_head span{
	display: inline-block;
	height: 36px;
	padding:0 20px;
	background: #f00;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	color: #fff;
	line-height: 36px;
	font-size: 16px;
}
.time{
	position: relative;
}
.week-container .button_prev,.week-container .button_next{
	width:30px;
	height: 30px;
	display: block;
	border: 1px solid #f00;
	color: #f00;
	text-align: center;
	line-height: 30px;
	position: absolute;
	top:50%;
	margin-top:-15px;
	border-radius: 50%;
	text-decoration: none;
	font-size: 26px;
	z-index: 9;
}
.week-container .button_prev{
	left:0;
}
.week-container .button_next{
	right: 0;
}
.week-container .time_header{
	overflow: hidden;
	padding:0 30px;
}
.week-container .time_header h3{
	width:14.1%;
	text-align: center;
	margin:0;
	line-height: 40px;
	float: left;
	font-weight: 600;
	font-size: 16px;
}
.week-container .time_con{
	overflow: hidden;
	width: 300%;
	margin-left: -100%;
}
.week-container .time .slider_li{
	float: left;
	width:33.3%;
	padding:0 30px;
	box-sizing: border-box;
}
.week-container .time_td{
	float: left;
	width:14.1%;
	height:40px;
	text-align: center;
	border-radius: 50%;
	position: relative;
}
.week-container .time_td p{
	margin:0;
}
.week-container .selected{
	background: #eee;
}
.week-container .c