iceui是一款前后端框架,核心主要分两部分组成,ice和ui,需要通过这两大模块来充分介绍iceui,第一部分是一个单独的ice.js,第二部分是需要依赖ice.js的ui.js。
ice.js是一个快速、简洁的JavaScript框架,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互,如果你很熟悉jQuery的话,那么本文档对你来说是非常易懂的。
ice的核心特性可以总结为:
是不是跟jQuery一样?其实jq已经很出色了,但是对我来说我具有强烈的代码洁癖,甚至已经到了匪夷所思的地步,我也不清楚我为什么会变成这样,我喜欢完美,代码整洁,如果用jQuery做一套框架的话,感觉不像是自己的亲生孩子,甚至可能会引发版权问题,以至于我自己开发了一套JavaScript框架,我取名为ice,「冰」的意思,你可以看成是冰清玉洁的意思,最后经过很长一段时间的迭代,如今已经很稳定,经过大量的性能测试,ice的性能要比jQuery快速的多,没错,ice吸取了众多框架的优点,完美的集聚于一身,ice封装了常用的功能,大家甚至可以像使用jQuery一样来使用ice,例如你想要获取某个元素的对象,可以这么做:ice('.item div'),动态添加淡入效果:ice('.item div').fadeIn()
ice会吸取其它框架的优点,并不会搞的那么另类那么唯我独尊,至少让你使用上会很方便。
ice更加简洁,运行更快,文件更小,min版不到30k,而jq(3.5.1)差不多90k。
解释到这里大家就明白了,ice.js是iceui的内核;一套使用非常便捷的JavaScript框架
语法:ice(string,object)
说明:使用方式与jQuery一样,支持各种组合方式,方法返回文档中匹配指定CSS选择器的所有元素,例如:
参数 | 类型 | 描述 |
---|---|---|
string | string|function | 元素的class或者名称,如果为function,则页面加载完成后执行 |
object | object | DOM对象,用于获取该对象下的元素 |
语法:ice(selector).each(function(index,element))
提示:function的this指的遍历的当前对象
参数 | 类型 | 描述 |
---|---|---|
function(index,element,elementAll,length) | function | 必需,为每个匹配元素规定运行的函数。
|
语法:ice(selector).s(index)
提示:s()方法会用集合中的一个元素构造一个新的ice对象
参数 | 类型 | 描述 |
---|---|---|
index | int | 整数,指示元素的位置(最小为 0)。 如果是负数,则从集合中的最后一个元素往回计数。 |
语法:ice(selector).val(value)
提示:元素的值是通过 value 属性设置的。该方法大多用于 input 元素。但也支持select和textarea!
参数 | 类型 | 描述 |
---|---|---|
value | mix | 可选,获取或设置对象的值 |
语法:ice(selector).html(content)
提示:获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。
参数 | 类型 | 描述 |
---|---|---|
content | mix | 可选,获取或设置html |
语法:ice(selector).text(content)
提示:获取集合中第一个匹配元素的text内容 或 设置每一个匹配元素的text内容。
参数 | 类型 | 描述 |
---|---|---|
content | mix | 可选,获取或设置text |
语法:ice(selector).form()
语法:ice(selector).log()
参数 | 类型 | 描述 |
---|---|---|
content | object | 打印对象 |
语法:ice(selector).append(content)
参数 | 类型 | 描述 |
---|---|---|
content | mix | DOM元素,文本节点,HTML字符串。 |
语法:ice(selector).prepend(content)
参数 | 类型 | 描述 |
---|---|---|
content | mix | DOM元素,文本节点,HTML字符串。 |
语法:ice(selector).before(content)
参数 | 类型 | 描述 |
---|---|---|
content | mix | DOM元素,文本节点,HTML字符串。 |
语法:ice(selector).after(content)
参数 | 类型 | 描述 |
---|---|---|
content | mix | DOM元素,文本节点,HTML字符串。 |
语法:ice(selector).page()
ice('.demo').page();语法:ice(selector).checkall()
语法:ice(selector).inverse()
语法:ice(selector).getCss(attr)
参数 | 类型 | 描述 |
---|---|---|
attr | string | 例如width、height,如果遇到line-height这种写法,请转为驼峰方式:lineHeight。 |
语法:ice(selector).del()
我爱php
我爱java
我爱c++
语法:ice(selector).offset()
返回:object格式 {left:x, top:y}
语法:ice(selector).css(name, value)
语法:ice(selector).attr(name, value)
语法:ice(selector).delAttr(name)
语法:ice(selector).delCss(name)
语法:ice(selector).click(fn)
语法:ice(selector).dblclick(fn)
语法:ice(selector).change(fn)
语法:ice(selector).input(fn)
语法:ice(selector).on(type, fn, bool)
语法:ice(selector).find(selector)
语法:ice(selector).children(selector)
语法:ice(selector).childrens()
语法:ice(selector).siblings(selector)
语法:ice(selector).prev(selector)
语法:ice(selector).next(selector)
语法:ice(selector).parent()
返回:所有的祖先元素
语法:ice(selector).parents()
返回:所有的祖先元素
语法:ice(selector).addCss(name)
语法:ice(selector).hasCss(name)
语法:ice(selector).hasStyle(name)
语法:ice(selector).toggleCss(nameA,nameB,fnA,fnB)
语法:ice(selector).show()
语法:ice(selector).hide()
语法:ice(selector).opacity(s)
语法:ice(selector).fadeIn(speed, callback)
语法:ice(selector).fadeOut(speed, callback)
语法:ice(selector).fadeToggle(speed, callback)
语法:ice(selector).slideDown(speed, callback)
语法:ice(selector).slideUp(speed, callback)
语法:ice(selector).slideToggle(speed, callback)
语法:ice(selector).animate(json,options)
参数 | 类型 | 描述 |
---|---|---|
json | json | 需要修改的属性,例如:{height:'80px',width:'120px'} |
options | json | json格式如下:
|
语法:ice.c(tagName)
语法:ice.jsonDecode(str, bool)
语法:ice.sp(event)
语法:ice.pd(event)
语法:ice.mouseWheel(obj, fn)
语法:ice.data(name,value)
提示:本方法利用sessionStorage存储数据数据,生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就会被清空。
本方法的设计初衷是为了更加方便的使用,同时最主要的是打破sessionStorage的存储方式界限,可以存储类型的值,而不在是单纯的字符串,可以为number数字,array数组,object对象,function方法,请看下面使用示例:
/** * 重要提示:赋值完全等于取值,如果赋值数字类型,那么取值时也为数字类型 * 如果赋值为json对象,那么取值也为对象,array数组和function方法同理 */ //获取整个sessionStorage ice.data(); //获取t1值 ice.data('t1'); //设置t1值 ice.data('t1',123); //设置t1值,也可以为function方法,任何数据类型都支持 ice.data('t1',function(e){ console.log(e) }); ice.data('t1')('我是function'); //打印出:我是function //设置t1值,获取后也是该对象,不是字符串哦,如果你设置字符串类型的json,那么获取到的也是字符串类型的json ice.data('t1',{t2:123,t3:456}); //同时设置t1、t2、t3值, ice.data({t1:123, t2:456, t3:789});语法:ice.localData(name,value)
提示:本方法利用localStorage存储数据数据,生命周期是永久的,无时间限制,除非用户手动清除本地缓存。
使用方式同ice.data,数据存储方式也一样的。
语法:ice.setCookie(name,value,day)
语法:ice.getCookie(name)
语法:ice.delCookie(name)
语法:ice.isMobile()
语法:ice.obj2str(object)
语法:ice.delTag(str)
语法:ice.toSize(bytes)
返回:B、KB、MB、GB、TB、PB、EB、ZB、YB等单位
语法:ice.ready(fn)
语法:ice.ajax(json)
/** * json说明: * url:请求地址 * type:请求类型,默认为post,可选值:post,get * header:请求头设置 * timeout:网络超时,默认为15000毫秒 * form:用于绑定需要提交表单的容器,传class或id,默认绑定id:form * 如果该参数存在,无需使用data传参 * data:要求为Object或String类型的参数,发送到服务器的数据。 * json:是否将请求过来的数据自动转为json对象,默认为true, * success:请求成功之后的回调函数 * error:请求失败之后的回调函数 * complete:不管请求成功还是失败,都会调用 */ ice.ajax({ url:'/iceui/login.html', type:'post', data:{'username':ice('#username').val(),'password':ice('#password').val()}, success:function(res){ if(!res.code){ iceui.pop(res.message); ice.delCss(_thsi,'processing'); }else{ location.href='/admin/index.html'; } } });语法:ice.scroll(pos)
返回:{x,y}
语法:ice.setScrollT()
语法:ice.setScrollB(str)
语法:ice.keydown(key, callback)
//第一种方式,监听指定的按键 ice.keydown(13,function(){ console.log('我按了回车键'); }) //第一种方式也可以这么来 function hi(a=11){ console.log('我是'+a); } ice.keydown(13,hi); ice.keydown(13,'hi(123)'); //第二种方式,监听所有的按键 ice.keydown(function(key){ console.log('我按了键盘,键盘码为:',key); })语法:ice.web(str)
返回:{w,h}
语法:ice.getRandom(min, max)
语法:ice.cid(str)
语法:ice.randStr(num)
语法:ice.jump(url)
语法:ice.setDisplay(el)
语法:ice.getDisplay(el)
语法:ice.animationFrame(el)
语法:ice.time(param, format)
/** * 将time转化为指定格式的String * Date 2019-01-05 * param {string|int|empty} 时间戳|字符串类型时间戳|y-m-d格式|y-m-d格式的时间|为空将返回现在时间 * 说明:本函数的时间戳可以为10位或者13位,对于兼容10位因为对于时间的格式化,毫秒没有任何意义,只需要精确到秒即可 */ ice.time(); //结果:返回当前时间 2016-11-29 10:18:18(默认为y-m-d h:i:s格式) ice.time(1480385898); //结果:返回时间戳时间 2016-11-29 10:18:18 ice.time(1480385898,'y年m月d日'); //结果:返回时间戳时间 2016年11月29日 ice.time('y-m-d'); //结果:返回当前时间 2016-11-29 //结果:返回重新格式化后的时间 2016/11/29 ice.time('2016-11-29 10:18:18','y/m/d');语法:ice.scrollAni(el, offset, duration)