当前位置: 首页 > Web前端 > HTML5

H5周历组件

时间:2023-04-05 01:16:18 HTML5

文档维护者:孙尊禄喜欢的话记得star哦!前段时间给《日历组件实现》写了一个在线文档,遇到一个需求:实现一个H5周历,用来填写每周的工作日志。上网查了资料,发现很多例子都没有标准的使用文档,感觉也不好用,所以自己搭建了一个周历组件,文章下面有很详细的使用说明。本文根据实际项目应用需求编写而成,后续会不断优化更新文档。如有不足之处,请多多指教,小编会及时改正!实例展示周历实例演示,支持上一周、下周切换等效果注:按F12可在浏览器中预览实例演示源码(H5):点此下载典型项目应用案例【手机OA课堂】我的日志依赖资源libs/calendar_base_week.js,周历组件的基类js库,可根据业务需求定制,从而实现设计视觉效果配置及使用方法DOM结构只有一个div

初始化下面的代码是最简单的用法。更复杂的用法可以参考calendarweek_showcase源码下载varweekcalendar=newCalendarWeek({//默认周历组件容器"container":"#weekcalendar",//点击日期事件"onItemClick":function(item){console.log(item.date+""+item.week);},isDebug:false});参数说明参数参数类型说明containerstring或HTMLElement必须选择Calendar容器的css选择器,例如“#calendar”。默认为#calendarprestring或HTMLElement可选的css选择器或前一周按钮的HTML元素。Default.prenextstring或HTMLElement下周按钮的可选css选择器或HTML元素。Default.nextdataRequestFunction可选回调函数,绑定业务数据。例如:如果某天有行程,则在相应的日期上打上小红点或其他标记。默认输入数据格式为:data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]onItemClickFunction是必须的回调函数,当你点击或触摸某个日期300ms后执行。回调日期结果:2018-04-07templateFunction或String可选,元素渲染的模板可以是模板字符串或函数。当它是一个函数时,它保证返回一个模板字符串。默认的组件内置模板isDebugBoolean是可选的。开启debug模式,默认为falseAPI生成的weekcalendar对象可以调用如下APIvarweekcalendar=newCalendarWeek(...);refresh()外部刷新方法重新渲染当前周的列表数据。weekcalendar.refresh();slidePrev()切换到前一周,与组件内部预传的参数相同。该API支持Promise异步成功回调来处理自己的业务逻辑。weekcalendar.slidePrev().then(...).then(...);slideNext()切换到下周,与组件内部传递的下一个参数效果相同。该API支持Promise在异步成功回调逻辑中处理自己的业务。weekcalendar.slideNext().then(...).then(...);优点和好处可以极大方便开发者在实际项目中的使用,版本会根据实际项目的需要不断优化升级,开源让有特殊需求的项目开发者进行修改、补充和完善。不足目前有多个js库依赖(mustache.min.js,mui.min.js),主要是一些手机常用的js库(无可厚非),包括组件的核心库,可能有人认为影响加载速度等等,其实已经有很多应用效果好的项目了。当然,小编也在努力剥离第三方js库。想法已经有了,只是重构代码需要一点时间。给您带来的不便请多多包涵,毕竟优化组件需要花费大量时间。