JS组件

JS组件让您更便捷的开发

JS起步

$.render([option])

option为可选参数,若不配置,则启用默认配置渲染。option的参数应对应如下配置:

                    config = {
                        themeColor:{
                            mainColor:'#3498DB',
                            subColor:'#2980B9'
                        },
                        screenFix:{
                            fixType:'none',
                            [ baseSize:0 ]
                        }
                    };
                    $.render(config);
                

themeColor为主题色配置,
。。。
。。。
。。。
render时,会自动调用 $(*).draw();

fn方法

draw

$(*).draw()

会将找到的元素内的所有web组件替换为HooperUI样式。
返回值为找到的匹配元素($)

drawInput

$(*).drawInput()

会将找到的元素内的所有Input组件替换为HooperUI样式。
Input组件包括:input:text、input:email、input:password、textarea等文本类型框
返回值为找到的匹配元素($)

drawButton

$(*).drawSelect()

会将找到的元素内的所有Select组件替换为HooperUI样式。
返回值为找到的匹配元素($)

WEB组件

组件

没错,我们覆写了所有的WEB组件,这一组件被我们划分成为系统组件,不可定制和修改。
你可以在 hooperui.min.js加载完毕后,执行 $.render();,该方法 将会根据参数配置对页面进行一系列的预处理。其中就包括组件重定义。
关于 $.render();的更多介绍,请参见 $.render();

下面介绍的组件都是基于下面的代码执行后所得(下图代码展示了一部分配置信息):

                    var config = {
                        themeColor:{
                            mainColor:'#16A085',//主色
                            subColor:'#1ABC9C'//辅色
                        },
                        screenFix:{
                            fixType:'grid',//超大屏兼容模式。支持[none | rem | viewport | grid]
                        }
                    };
                    $.render(config);
                

上述代码的详细解释,可以到 JS组件的系统配置 了解。我们 在此只需注意他的主色和辅色参数。

input基本输入  添加class——hoo-input

禁用的input  添加属性——disabled

只读的input  添加属性——readonly

input错误——$("").makerror("您的邮箱格式不正确")

markerror方法添加错误提示信息,clearerror方法删除错误提示信息

input高级输入  添加class——hoo-input-super

hoo-tip属性:覆盖input的提示文字

基础select  添加class——hoo-select

select错误  ——$("").makerror("")

markerror方法添加错误提示信息,clearerror方法删除错误提示信息

radio样式1   添加class——hoo-radio

radio样式2  添加class——hoo-radiohoo-radio-back

checkbox样式1  添加class——hoo-checkbox

checkbox样式2  添加class——hoo-checkboxhoo-checkbox-back

button样式  添加class——hoo-button

添加属性disabled禁止标识

其他元素生成的按钮

自扩展button样式  添加class——hoo-button-auto

圆角button样式  添加class——hoo-button-round

常见问题

$.render()的重绘效率
$.render();重新修改了大部分组件、页面元素的样式,使得整个页面由此发生回流和重绘。
我们考虑过在虚拟Dom中进行操作,之后整页替换。但是zepto.js似乎并不能把绑定在页面元素上的事件 深度克隆。(参见: zepto clone
因此,我们在遇到大批量页面组件渲染时,会将页面全部元素隐藏,在操作完毕所有样式变更后,恢复显示。 这么做的意义在于,我们不管修改了多少组件的相关样式,只会发生两次次重绘(隐藏和显示)。 更多页面优化建议,参考: 前端网页性能问题与优化详解

辅助类

工具类

多数据处理

列表渲染

$(*).multiData()

是一个扩展的jquery插件,通过这个方法,可以很快构建一个多数据列表,填充所选元素,支持分页效果,加载效果可配置(点击加载、自动加载)。我们还解决了多个列表存在滚动时互相影响的问题,使用该方法,可以创建多个列表(要求当前页只存在一个列表可见),但滚动时不会互相影响。

使用规约

必需参数
tpl列表项渲染模板(重要!)
url获取数据的地址(重要!)
可选参数
size每页展示的项目条数(需要后台配合,默认为10)
page当前加载页数(需要后台配合,默认为1)
loadingtype加载方式,"click":点击加载更多,"auto":自动加载(默认auto)