个人练习demo
日历组件功能:
- 组件默认一直呈显示状态,显示今天日期
- 日历头部
>``<
按钮用来切换月份 - 可选择单日,日期范围两个模式
- 通过单击某个具体的日期进行日期选择,选中日期呈选中状态,今天日期则置灰
- 选择日期范围,日期范围可通过参数设置,点击一次,日期范围选中的日期到今天,点击两次,为两次点击日期范围,点击三次,取消第一次点击,为第二次第三次点击日期范围,窗口提示选中的日期范围
- 文本框会显示选中日期或者日期范围
- 点击sidebar下方的关闭按钮(x),sidebar向左方滑出屏幕,关闭按钮向右方滑动,同时旋转为(+)。
- 点击(+),sidebar向右滑动,加号(+)向左滑动,并旋转为(x)。
- 点击sidebar上的菜单栏,相应的内容栏(从左向右)滑动。
- 如果有已经打开的内容栏,则已打开的内容栏关闭,新点击的相应的内容栏从下向上滑动。
- 打开的内容栏的右上方有关闭(<),点击后内容栏向右滑动关闭。
- 如果已经有打开的内容栏,点击sidebar下方的关闭按钮,则sidebar关闭,已经打开的内容栏应该关闭。
实现:css3 和js
- 参差不齐的多栏布局,图片等宽不等高,下一行的第一张图片加载上一行图片高度最小的下面。
- 图片持续加载到当前尾部