规范:
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
Code
            

            
            
描述
调用:$('.dom').F('Share',{参数});
会在含有fu-share属性的子元素上添加对应类型的href
配置参数
JS参数 作用 默认值
title 标题 网站标题
desc 分享内容 网站描述
imgs 分享图片 ''
link 分享链接 网站链接

数字输入框(Number)

Demo
min - 清空 max +

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-modalinfu-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
            

            
            
粤ICP备13073167号-4
Copyright © 2017 - 2018 深圳市龙岗区三向砖网络科技工作室 版权所有