JS组件

规范：

1、变量首字母小写，加下划线。
2、方法首字母大写，驼峰写法。

兼容：

由于目前不支持对IE6、7支持，在此版本浏览器上会调用F['LowIE']方法。
页面将以引导更新浏览器的形式下显示。

配置项优先级：

节点属性 > JS定义 > 默认配置

常用变量

变量名	作用
F.version	框架版本号
F.namespaces	框架的命名空间组
F.ua	浏览器的用户标识，userAgent
F.is_ios	判断是否为苹果系统，是为`true`，不是为`false`
F.is_android	判断是否为安卓系统，是为`true`，不是为`false`
F.is_mobile	判断是否为移动端，是为`true`，不是为`false`
F.is_touch	判断是否支持touch事件，是为`true`，不是为`false`
F.let_ie9	判断是否小于IE9浏览器，是为`true`，不是为`false`
F.let_ie8	判断是否小于IE8浏览器，是为`true`，不是为`false`

点击事件

Demo

点击1

点击2

Code

描述

FreeUi框架提供一个点击事件FU_tap，主要是为了解决移动端点击300ms延迟问题，兼顾移动电脑端的点击。
移动端上默认从手指触控到手指离开的时间小于200ms时，则触发该事件。
修改F.tap_time变量可以修改判断时间。
修改F.tap_offset变量可以修改点击误滑距离。

简单的方法

1、字符串转JSON（ParseJSON）
F['ParseJSON']('要转成JSON的字符串')
2、生成随机整数（Rd）
F['Rd'](255)
3、处理空格（Space）
F['Space']('字符串','空格替换成什么')
4、获得浏览器参数（UrlVars）
F['UrlVars']()
5 、是否支持CSS3属性（SupportCss3）
F['SupportCss3']()
6 、获得最佳适配的HTML字体大小（Rem）
F['Rem']()

分享（share）

Demo

QQ空间腾讯微博新浪微博 QQ好友

Code

描述

调用：$('.dom').F('Share',{参数});
会在含有fu-share属性的子元素上添加对应类型的href

配置参数

JS参数	作用	默认值
title	标题	网站标题
desc	分享内容	网站描述
imgs	分享图片	''
link	分享链接	网站链接

数字输入框（Number）

Demo

min - 清空 max +

- +

Code

简介

定义：$('.dom').F('Ui', 'number',{参数});
框架默认将.u-FU_number的类名使用该组件。
代码：$('.u-FU_number').F('Ui', 'number');
该组件，有做阻止输入非数字的功能，以及若有jquery.mousewheel.js插件时，输入框聚焦后，滚动滑轮可+,-

配置参数

属性	JS参数	作用	默认值
fu-min	min	最小值	0
fu-max	max	最大值	100
fu-step	step	步长，每次增加或减少的数值	1
fu-point	point	保留几位小数，默认值为步长的小数点位数	null
fu-fn	无	方法，add:增加，sup:减少，max:最大值，min:最小值，clear:清空

弹出层（Pop）

Demo

弹出

Code

Slide

Demo

 

Code

弹层（modal）

Demo



标题

出来吧！弹层2



标题2

关闭吧！弹层2

出来吧！弹层

出来吧！弹层（无阴影）

出来吧！弹层（其他动画）

Code

简介

使用：$('.dom').F('Modal','方法名',{参数});
方法名：in、out、position、显示弹层，隐藏弹层、重新计算弹层位置。
配置：可在dom属性上增加fu-conf进行配置。
触发器：fu-modalin和fu-modalout属性值为弹层带j的类名例如.j-test则会选中.m-FU_modal.j-test
触发器上也可以使用配置属性fu-conf
配置属性的值为一个对象，如：{"shade",false} 类名：模块内的类名.j-close会绑定关闭事件、.j-scroll则为弹层的内容区域，自适应区域。

配置参数

JS参数	作用	默认值
shade	是否出现阴影	true
shadeSkin	阴影皮肤类名	''
inAnim	弹窗显示时动画	'FU_modalIn .3s ease both'
outAnim	弹窗关闭时动画	'FU_modalOut .3s ease both'
inBack	弹窗显示完后的回调	$.noop
outBack	弹窗关闭后的回调	$.noop
lockScroll	是否锁住滚动条	true
lockShade	阴影点击是否不关闭弹层	false

提示（Hint）

Demo

提示

Code

配置参数

JS参数	作用	默认值
ct	提示内容	'错误'
type	0：感叹号、1：勾、2：叉、	0
time	多少毫秒后关闭	1000
inAnim	提示显示时动画	'FU_modalIn .3s ease both'
outAnim	提示关闭时动画	'FU_modalOut .3s ease both'
inBack	提示显示完后的回调	$.noop
outBack	提示关闭后的回调	$.noop

表单提交（Form）

Demo

提交

Code

七牛处理图片（Qn）

Demo

Code

描述

调用：F['LazyImg']("图片URL",{参数});
不加参数时则会返回原图，会过滤掉图片URL中的七牛参数
详细请看七牛官方文档

配置参数

JS参数	作用	默认值
mode	模式	0
w	宽度	undefined
h	高度	undefined
format	新图的输出格式	undefined
interlace	是否支持渐进显示	1
q	新图的图片质量，取值范围是[1, 100]，默认75。	undefined
ignore-error	图片出错时处理	1

图片惰性加载（LazyImg）

Demo

Code