/iComponents

UI组件Demo

Primary LanguageJavaScript

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实现智能提示