TimeSheet:一个用于时间规划的jQuery插件
2015-09-14 16:52
645 查看
设计思想
基于面向对象的设计思想。
源代码分3个部分:
单元格类--CSheetCell
表格类--CSheet
插件主体
单元格类--CSheetCell
私有成员:
state -- 单元格的状态,只能取值 0 或 1,默认 0;
toggleCallback(state) -- 改变单元格状态时的回调函数,默认 false;
settingCallback() -- 设置单元格状态时的回调函数,默认 false;
公有成员:
toggle() -- 改变单元格的状态;
set(state) -- 设置单元格状态为指定值;
get() -- 获取单元格状态;
表格类--CSheet
私有成员:
dimensions -- 表格的维度,二元数组,[行数,列数],默认 undefined;
sheetData -- 表格的数据,二维数组,默认 undefined;
toggleCallback() -- 改变指定区域状态时的回调函数,默认 false;
settingCallback() -- 设置指定区域状态时的回调函数,默认 false;
cells -- 表格所持有的 CSheetCell 实例,二维数组,与 sheetData 元素一 一对应;
initCells() -- 使用 sheetData 初始化 cells;
areaOperate(area, opt) -- 选定一个区域,对其执行 toggle 或 set 操作;
公有成员:
toggle(area) -- 改变指定区域内单元格的状态;
set(state, area) -- 设置指定区域内单元格状态为指定值;
getCellState(cellIndex) -- 获取指定单元格状态;
getRowStates(rowIndex) -- 获取指定行所有单元格状态;
getSheetStates() -- 获取整个表格所有单元格状态;
插件主体
CSheetCell 与 CSheet 封装了一些数据和方法以方便插件的实现。在使用场合,CSheetCell 与 CSheet 对用户是不可见的,API 最终由插件主体提供。
open API:
getCellState(cellIndex) -- 获取单元格状态,封装了 CSheet :: getCellState;
getRowStates(rowIndex) -- 获取指定行所有单元格状态,封装了 CSheet :: getRowStates;
getSheetStates() -- 获取整个表格所有单元格状态,封装了 CSheet :: getSheetStates;
setRemark(row, text) -- 设置指定行的说明文字;
clean() -- 将表格重置为未设置状态;
disable() -- 禁止操作表格;
enable() -- 允许操作表格;
isFull() -- 判断表格是否所有单元格状态都是1;
getDefaultRemark() -- 获取行注释的默认值
开源项目
项目地址:https://github.com/lbbc1117/TimeSheet
也可以在这里下载源码: http://www.oschina.net/code/snippet_1047422_50906
演示视频:http://v.youku.com/v_show/id_XMTMzNzcxMzI0NA==.html
选择超清模式看的更清楚。
源码中提供了样例,展示了 TimeSheet 所有主要功能:
基于面向对象的设计思想。
源代码分3个部分:
单元格类--CSheetCell
表格类--CSheet
插件主体
单元格类--CSheetCell
私有成员:
state -- 单元格的状态,只能取值 0 或 1,默认 0;
toggleCallback(state) -- 改变单元格状态时的回调函数,默认 false;
settingCallback() -- 设置单元格状态时的回调函数,默认 false;
公有成员:
toggle() -- 改变单元格的状态;
set(state) -- 设置单元格状态为指定值;
get() -- 获取单元格状态;
表格类--CSheet
私有成员:
dimensions -- 表格的维度,二元数组,[行数,列数],默认 undefined;
sheetData -- 表格的数据,二维数组,默认 undefined;
toggleCallback() -- 改变指定区域状态时的回调函数,默认 false;
settingCallback() -- 设置指定区域状态时的回调函数,默认 false;
cells -- 表格所持有的 CSheetCell 实例,二维数组,与 sheetData 元素一 一对应;
initCells() -- 使用 sheetData 初始化 cells;
areaOperate(area, opt) -- 选定一个区域,对其执行 toggle 或 set 操作;
公有成员:
toggle(area) -- 改变指定区域内单元格的状态;
set(state, area) -- 设置指定区域内单元格状态为指定值;
getCellState(cellIndex) -- 获取指定单元格状态;
getRowStates(rowIndex) -- 获取指定行所有单元格状态;
getSheetStates() -- 获取整个表格所有单元格状态;
插件主体
CSheetCell 与 CSheet 封装了一些数据和方法以方便插件的实现。在使用场合,CSheetCell 与 CSheet 对用户是不可见的,API 最终由插件主体提供。
open API:
getCellState(cellIndex) -- 获取单元格状态,封装了 CSheet :: getCellState;
getRowStates(rowIndex) -- 获取指定行所有单元格状态,封装了 CSheet :: getRowStates;
getSheetStates() -- 获取整个表格所有单元格状态,封装了 CSheet :: getSheetStates;
setRemark(row, text) -- 设置指定行的说明文字;
clean() -- 将表格重置为未设置状态;
disable() -- 禁止操作表格;
enable() -- 允许操作表格;
isFull() -- 判断表格是否所有单元格状态都是1;
getDefaultRemark() -- 获取行注释的默认值
开源项目
项目地址:https://github.com/lbbc1117/TimeSheet
也可以在这里下载源码: http://www.oschina.net/code/snippet_1047422_50906
演示视频:http://v.youku.com/v_show/id_XMTMzNzcxMzI0NA==.html
选择超清模式看的更清楚。
源码中提供了样例,展示了 TimeSheet 所有主要功能:
相关文章推荐
- jQuery获取select的text
- 一个简单的jQuery鼠标悬停经过事件
- jQuery实现默认是闭合的FAQ展开效果菜单
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
- jQuery系列之操作select标签
- 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
- jQuery 效果 - 淡入淡出
- 使用jQuery查找注册到某个DOM对象的事件处理函数
- jQuery从服务器获取数据使用post(字典查询的功能),服务器端php返回数据
- jQuery 效果- 隐藏和显示
- 关于Jquery 序列化表单的注意事项
- 关于Jquery 序列化表单的注意事项
- jQuery ajax 同步失效?
- jquery for循环
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
- JQuery中的siblings()是什么意思
- jQuery执行脚本,在指定的div添加(附加)html代码
- JavaScript学习笔记8-jQuery表单选择器
- jQuery 语法
- javascript中的jQuery简单应用