2013年8月 的存档

jquery日历插件FullCalendar简介

FullCalendar是一款基于jquery的日历控件

简介

官方网站:
http://arshaw.com/fullcalendar/
英文文档:
http://arshaw.com/fullcalendar/docs/

中文翻译文档(虽然是2009年翻译的,不过文档变动不是很大,可以参考)
http://blog.csdn.net/lgg201/article/details/4818941

开源协议 – MIT
目前最新版本 – 1.6.3
发布日期 – 2013-08-10

使用方法
1. 下载压缩包fullcalendar-1.6.3.zip解压
2. 在html页面中导入资源

几点说明:
FullCalendar需要jquery,如果项目已经引入了jquery,此处不需要重复导入
如果要在日历中使用鼠标拖拽功能,需要导入jquery-ui
压缩包中包含的jquery-ui文件仅包含了jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js的功能;如果项目已经引入了包含以上功能的jquery-ui文件,此处不可重复导入,重复导入会造成jquery-ui的其它功能失效
3. 调用插件

配置日历表头

left、center、right参数对应页面表头三个位置(左、中、右),参数值多个之间可以使用逗号或者空格隔开,可选值范围如下:
title – 当前日期文本
prev – 向前翻按钮
next – 向后翻按钮
prevYear – 前一年按钮
nextYear – 后一年按钮
today – 今天按钮
month – 月视图
basicWeek – 周视图
basicDay – 日视图
agendaWeek – 带小时周视图
agendaDay – 带小时日视图

配置中文界面

日程对象event
日历中显示的日程事件
{
title: ‘some name’,
start: ‘2013-08-08’,
end: ‘2013-08-12’
}
基本参数说明
title – 事件名称,显示在日程中
start – 日程开始时间
end – 日程结束时间
其它参数
id
allDay
url
className
editable
startEditable
durationEditable
source
color
backgroundColor
borderColor
textColor
除此以外,可以根据功能需要在event对象中添加自定义的属性

显示日程

添加参数events: array/json string/function
可以为数组:

可以通过ajax加载json数据:

也可以是一个function:

添加日程
通过点击日历单元格,添加新日程

参数说明
date – 当前日期,在agendaWeek、agendaDay视图点击时包含时间
allDay – 在agendaWeek、agendaDay视图点击时为false,其它情况为true
jsEvent – 原生javascript事件
view – 当前视图对象

修改日程
点击当前显示的日程,修改日程

event参数为当前点击的日程

鼠标拖动改变日程时间范围
使用鼠标在页面上直接拖动改变日程时间范围,需要jquery-ui的拖拽功能,初始化时需配置参数editable为true来启用拖动功能。

参数说明
dayDelta – 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数
minuteDelta – 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数,该值只有在agenda view下有效
allDay – 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false
revertFunc – 调用该方法, 可以将刚才的拖动恢复到原状。这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状

参数与eventDrop回调类似,以下仅说明不同之处:
dayDelta – 保存了日程结束时间变化了多少天,向前为正数, 向后为负数
minuteDelta -保存了日程结束时间变化了多少分钟, 向前为正数, 向后为负数,该值只有在agenda view下有效,其它情况为0

鼠标划过选择一段日期
类似在资源管理器中选择多个文件的操作,使用鼠标在页面上选择一段日期进行操作,例如添加日程,需要配置selectable参数为true
在一个单元格上,鼠标划过选择事件select和鼠标点击单元格事件dayClick会被同时触发

参数说明
startDate – 开始日期
endDate – 结束日期,当allDay为true时,结束日期包含最后一天

演示demo
demo/calender.html

示例下载demo

扁平化设计-jquery插件实现卡片翻转效果

扁平化设计是越来越流行了,飞尘在开发中也小小的使用了一下。用到的是方块布局中很典型的卡片翻转效果,于是搜罗了一下,目前只测试使用了三个基于jquery的插件。

下面就个人的体会简单说明一下。

QuickFlip2

看了下文档,没有设置翻转后内容的参数,翻转的内容需要直接在容器内写好,如果只需要简单的翻转效果,用这个就够了。

官方网址:
http://jonraasch.com/blog/quickflip-2-jquery-plugin

Flip

基于翻转的效果,翻转时容器会被放大,可能导致原有页面布局出现混乱。

官方网址:
http://lab.smashup.it/flip/

Flippy

目前采用的方案,但是使用中发现有一点小小的不足,当设置翻转前后背景色不为白色时,翻转时的效果会对颜色进行渐变,但是翻转回来的效果没有对颜色进行反向渐变,导致翻转效果结束时背景色突变。

官方网址:
http://blog.guilhemmarty.com/flippy/

IE7元素ul嵌套ul边距bug

在web开发中,ul与li的组合经常会被使用到,配置好css可以实现很多种样式,例如导航菜单、新闻列表、图片列表等等,当然也不乏更为复杂的布局及展现形式。

飞尘最近在开发中就遇到了与一个ul相关的问题。布局大意就是两层ul的嵌套,外层ul及li用于竖排列表布局,基本上就是ul本身默认的布局形式;内层ul及li做横排浮动布局。从外观表现形式上来看,就是模仿了表格的布局形式。

下面说一下问题吧:在IE7浏览器下内层的ul始终无法充满外层ul,排除padding、margin等等之类属性的影响,内层换个div容器发现可以充满,于是就又遇到了IE7的一个存在已久的bug(此种经验最好还是不要累积了吧,愿历史的车轮早些将IE6 IE7 IE8收了吧,吾等阿弥陀佛)

牢骚归牢骚,问题总归得解决啊。原因找到了问题就不难解决,已经有无数的英雄前辈为我们指点迷津了:

1. 如果可以的话,那就给外层的li或者内层的ul加个宽度吧,100%也可以,但是要注意margin和padding哦。

2. 宽度不好加,就换个新鲜的,给IE吃点灵丹妙药,给外层的li或者内层的ul加个属性 zoom:1;

关于zoom属性,有温馨提示哦:
zoom是IE浏览器的私有属性,添加zoom属性,可以触发IE的hasLayout属性,还可以清除浮动、清除margin的重叠等。