Skip to content

bababadboy/iComponents

Repository files navigation

iComponents

个人练习demo

calendar

日历组件功能:

  • 组件默认一直呈显示状态,显示今天日期
  • 日历头部>``<按钮用来切换月份
  • 可选择单日,日期范围两个模式
  • 通过单击某个具体的日期进行日期选择,选中日期呈选中状态,今天日期则置灰
  • 选择日期范围,日期范围可通过参数设置,点击一次,日期范围选中的日期到今天,点击两次,为两次点击日期范围,点击三次,取消第一次点击,为第二次第三次点击日期范围,窗口提示选中的日期范围
  • 文本框会显示选中日期或者日期范围

日历demo

Canvas

时钟 星空草地 七巧板

CSS3

平移,旋转,斜切,缩放

carousel 轮播图

js实现轮播图 jQ实现轮播图

sidebar 侧边栏信息展示

  • 点击sidebar下方的关闭按钮(x),sidebar向左方滑出屏幕,关闭按钮向右方滑动,同时旋转为(+)。
  • 点击(+),sidebar向右滑动,加号(+)向左滑动,并旋转为(x)。
  • 点击sidebar上的菜单栏,相应的内容栏(从左向右)滑动。
  • 如果有已经打开的内容栏,则已打开的内容栏关闭,新点击的相应的内容栏从下向上滑动。
  • 打开的内容栏的右上方有关闭(<),点击后内容栏向右滑动关闭。
  • 如果已经有打开的内容栏,点击sidebar下方的关闭按钮,则sidebar关闭,已经打开的内容栏应该关闭。

实现:css3 和js

sidebar

tooltips 浮动提示框

CSS3实现提示框 js实现提示框

accordion 手风琴图片展示

js手风琴 jq手风琴

nav-tabs选项卡切换

js实现选项卡切换

遮罩窗

js实现遮罩窗

瀑布流布局

  1. 参差不齐的多栏布局,图片等宽不等高,下一行的第一张图片加载上一行图片高度最小的下面。
  2. 图片持续加载到当前尾部

瀑布流布局demo

响应式布局demo

响应式布局demo

网页定位导航

js实现网页定位导航 jq实现网页定位导航

Bing主页

ajax实现智能提示

About

UI组件Demo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published