UI库文档v1.01
UI介绍

iceui是一款前后端框架,核心主要分两部分组成,ice和ui,需要通过这两大模块来充分介绍iceui,第一部分是一个单独的ice.js,第二部分是需要依赖ice.js的ui.js。

ui.js是控制前端界面的ui部分,为了让大家更方便的编写前端界面,ui内置了很多界面模型控制,和一些常用的插件,iceui的理念是简约唯美,包括使用也是,所以设计的初衷是尽量减少开发者依赖于js,尽量将大量复杂的设计交给了自己,用户只需要添加相应的class或data属性即可。

下面举一些例子来充分说明ui.js所负责的角色。

1、html5的界面中经常遇到视差背景图,随着页面的滚动,背景图也会发生滚动,有趣的是图片的宽高并不会改变,你所看到的变化仅仅只是图片所在容器中的滚动,但是容器中的内容却不会滚动,这种效果发生在很多HTML5页面,如今她被集成到iceui中,使用将前所未有的简单。 只需要设置一条data-img-parallax属性即可实现。

2、还有我们经常用到的一种方式,页面滚动到某个元素位置,添加相应的class,在iceui中只需要一条data-scroll-class属性即可,就这么方便!

iceui将前端开发的复杂度简化到极致,众多使用js实现的部分均需要简单的class与data就能实现,这就是ui她的理念与初衷。

很多动画效果不需要你来写复杂的js,因为ui已经帮你实现了,重要的事情说三遍,只需要添加class或者data属性!

为了让你更加深入的了解iceui,我将ui的使用方法一一介绍一下。

自动处理列表

所有的code标签中的内容都会被转义,所以code可以包裹html内容。

del(url, text)

类型:function

语法:ui.del(url, text)

功能:用于删除数据的弹框提示

参数 类型 默认 必填 描述
url String Object - 用户确认删除后要跳转的删除地址,或者a标签对象
text String 确认要删除?删除后将无法恢复! 弹出的删除信息
load(type)

类型:function

语法:ui.load(type)

功能:页面加载中动画

参数 类型 默认 必填 描述
type int 3 目前一共7种动画效果,具体请看下面data-load示例
loadClose()

类型:function

语法:ui.loadClose()

功能:关闭页面加载中动画

data-load 页面加载中动画

类型:data

使用说明:放在body上,动画可自定义,自定义的class为loading

参数 类型 默认 必填 描述
data-load bool - 只要设置该属性,便开启页面动画加载
data-load-type int 3 目前一共7种动画效果,点击下面按钮演示
加载中动画1 加载中动画2 加载中动画3 加载中动画4 加载中动画5 加载中动画6 加载中动画7
data-scroll-class 滚动添加class

类型:data

功能:滚动条滚动时,当页面出现该元素则添加设置的class

使用:放在需要控制的元素上,值为class名称

参数 类型 默认 必填 描述
data-scroll-class String - 需要设置的class名称
data-scroll-top int 元素的总高 滚动的高度
data-scroll-delay int 0 延迟时间
data-scroll-type String one 有效值:auto(随滚动条自动变化),one(只执行一次,就固定了)
data-scroll-view String bottom 有效值:top(元素在视口上面时触发),bottom(元素在视口下面时触发)
.submit 表单提交

类型:class

功能:添加该class的按钮被点击后,提交当前form表单

使用:放在需要点击的按钮上,仅限放在form表单中的按钮。

.ani 导航滚动逐步加载动画

类型:class

功能:导航滚动到该元素上时,加载该动画

使用:放在需要展示动画的元素上,该元素应该具有动画效果,推荐iceui内置的动画class

.ani-one-in 文字单个逐步加载动画

类型:class

功能:导航滚动到该元素上时,文字单个逐步加载

使用:放在有文本的元素上即可,注意,该class依赖.ani

.ani-scroll-l 向左滚动动画

类型:class

功能:随着页面滚动,该元素会向左滚动

使用:为元素添加该class

.ani-scroll-r 向右滚动动画

类型:class

功能:随着页面滚动,该元素会向右滚动

使用:为元素添加该class

.ani-num 动态加载数字

类型:class

功能:当滚动条滚动动到该位置时,数字会动态从0递增到最终结果。

使用:放在有纯数字的元素上

示例地址
.follow-disc 鼠标跟随

类型:class

功能:一个圆形的鼠标跟随动画

使用:添加一个该class的div,具体样式可自定义,默认为圆形

示例地址
data-open 弹出层

类型:data

功能:点击该元素显示该值的图层

使用:放在需要弹出的按钮上

参数 类型 默认 必填 描述
data-open String - 需要弹出的class或id,也可以是其它元素,支持ice选择器的所有值
data-ani String - iceui内置的ani系列class,注意:没有前缀ani-
打开视图层
往事成调,回忆成曲,也许今生的相遇注定是惹一世情殇。 你我的相逢,不过是两粒微小的尘埃在红尘中共赴了一场流年的约会,短暂相聚后便又各自纷飞、各安天涯。
data-scroll 滚动到指定位置

类型:data

功能:点击该元素,滚动到绑定的指定元素位置

使用:放在需要滚动的按钮上

参数 类型 默认 必填 描述
data-scroll String - 需要弹出的class或id,也可以是其它元素,支持ice选择器的所有值
点击滚动到ani示例
data-img-parallax 视差背景图

类型:data

功能:随着页面的滚动,背景图也会发生滚动,有趣的是图片的宽高并不会改变,你所看到的变化仅仅只是图片所在容器中的滚动,但是容器中的内容却不会滚动

使用:放在需要设置背景图的容器上,值为图片链接

参数 类型 默认 必填 描述
data-img-parallax String - 图片的链接地址
示例地址
data-table-sort 表格排序

类型:data

功能:表格排序

使用:放在表格上,必须是table标签上

参数 类型 默认 必填 描述
data-table-sort bool String - true:则每列都可排序,2,4:则第3列与第5列可排序,逗号分隔,从左到右并从0开始数,参照数组索引
示例地址
.check-form 验证表单

类型:class

功能:验证表单

使用:放在form标签上

文档目录