Flow-UI

Github

概述

快速开始

Flow-UI支持基于模板开发和基于自动化工具开发两种使用方式。基于模板开发与Bootstrap这类UI框架的用法基本相同,相当于使用了Flow-UI提供的默认UI主题和插件库;基于自动化工具开发可以额外获得定制主题、实时预览、组件化开发、构建时压缩等功能。

基于模板开发

1. 拷贝flow-ui/modules/到项目中;

2. 启动本地服务,访问 http://localhost/flow-ui/index.html

基于自动化工具开发

1. 安装Flow-CLI

npm i front-flow-cli -g

2. 初始化项目

flow init

3. 构建并监听

flow run

4. 构建

flow build

项目配置

seajs.root [string] 模块化js加载起始路径,通常为"",例如页面在站点二级目录,需设置此项为目录名称。
seajs.set [object] 模块设置或自定义功能设置,例如seajs.set = { base: { timeout: 1.5e4 } };
seajs.config.base [string] 模块化文件存放路径,默认seajs.root + "/modules",也可以配置其他位置或远程位置。
seajs.config.paths [object] 路径短语,默认配置了js文件夹和lib文件夹。
seajs.config.alias [object] 模块短命名。
seajs.localcache.timeout [number] 本地缓存方案加载超时时间,单位ms,默认2e4

获取

编译后文件

编译后的文件包括常规Flow-UI项目模板和控制台项目模板,均打包了完整CSS组件和JS插件,可以直接用于项目。

其中控制台模板代码经过压缩,常规项目模板为了便于开发修改所以未压缩。

npm
npm i @tower1229/flow-ui
直接下载
flow-ui master.zip

源码

如果希望定制自己的UI可以从这里获取FLow-UI源码,包括所有CSS组件less文件,及未经合并的JS文件。

只有源码并不能顺利的构建Flow-UI,更好的方式是使用官方自动化开发工具Flow-CLI。

直接下载
Flow-Template master.zip

自动化工具

集安装、预览、编译、压缩等一系列自动化功能的开发工具,是开发Flow-UI项目的最佳方式。

npm
npm i front-flow-cli -g

目录结构

开发目录结构

             
  |--_component/                //框架CSS组件
  |-- _src/                     //源码目录
  |    |-- css/
  |    |-- font/
  |    |-- img/
  |    |-- include/
  |    |-- js/
  |    |-- lib/
  |    |-- index.html
  |    |-- seajs.config.js
  |    `-- favicon.ico 
  |-- modules/                  //框架JS插件
  |-- public/                   //公共文件
  `-- config.json               //编译配置
                
          

构建目录结构

             
  |-- flow-ui/                  //项目文件
  |    |-- css/                     //css文件
  |    |-- font/                    //字体文件
  |    |-- img/                     //图片文件
  |    |-- js/                      //js文件
  |    |-- lib/                     //模块库以外的js文件
  |    |-- index.html               //索引页
  |    |-- seajs.config.js          //配置文件
  |    `-- favicon.ico              //网页图标
  ·-- modules/                  //框架模块库(可选)
            
        

CSS

定制主题

Flow-UI基于less实现UI组件化,从全站样式中抽离出配置文件,可实现灵活的风格控制和组件选配,要充分发挥Flow-UI的定制性,需要搭配自动化编译工具 Flow-CLI使用,示例主题配置如下:

            
//文字
@font-size:         14px;
@font-size-lg:      16px;
@font-size-sm:      12px;
@line-height:       1.7;
@font-family:       Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', '\5fae\8f6f\96c5\9ed1', 'SimSun', sans-serif;

//基础色
@black:             #000;
@light:             #fff;

@gray-darker:       lighten(@black, 13.5%); // #222
@gray-dark:         lighten(@black, 20%);   // #333
@gray:              lighten(@black, 33.5%); // #555
@gray-light:        lighten(@black, 60%);   // #999
@gray-lighter:      lighten(@black, 93.5%); // #eee

@text-color:        @gray;
@link-color:        inherit;
@link-color-hover:  @primary;
@selected:          #39f;
@placeholder:       #aaa;
@border:            #e8e9eb;

//情景色
@primary:           #1d6fb8;
@primary-dark:      darken(@primary, 20%);
@auxiliary:         #ff6e0a;
@auxiliary-dark:    darken(@auxiliary, 20%);
@info:              #4fcbf0;
@info-dark:         darken(@info, 20%);
@success:           #25ae88;
@success-dark:      darken(@success, 20%);
@warning:           #fec14c;
@warning-dark:      darken(@warning, 20%);
@danger:            #fd7b6d;
@danger-dark:       darken(@danger, 20%);

//间距
@space:             1.6 * @font-size;
@space-sm:          1 * @font-size;
@space-lg:          2.4 * @font-size;

//版式
@view-width:        1200px;
@radius:            4px;

//响应节点
@Pc:                1024px;
@Pad:               640px;

//grid.less
@gridColumns:       12;
@gridGutter:        2%;
//form.less
@form-base-height: round(@font-size * 2.3);
@form-sm-height: round(@font-size-sm * 2.1);
@form-lg-height: round(@font-size-lg * 2.5);
@form-base-space: round(@line-height / 3 * @font-size);
@form-lg-space: round(@line-height / 2.5 * @font-size);
//iconsprite.less
 @sprite-matrix:    5;
 @sprite-width:     25px;
//btn.less
@btn-base-height: @form-base-height;
@btn-sm-height: @form-sm-height;
@btn-lg-height: @form-lg-height;
//dl.less
@dl-label-width:    10em;
//table.less
@table-head-height: 40px;
            
        

点此进一步了解自动化工具Flow-CLI

CSS组件

部分样式组件仅供插件调用,如tree.less,将不在此罗列。

badge.less
button 99+ button 99 99 99 99 99 99
.badge 定义一个徽标容器
.badge-count 定义徽标数字元素
.badge-dot 定义徽标圆点
.badge-count-alone 叠加在.badge-count上将徽标显示为独立徽标
.badge-primary 叠加在.badge上以显示为主色调(另:"auxiliary", success", "info", "warning", "danger")

bread.less
Home / Components / Breadcrumb
Home / Components / Breadcrumb
.bread 定义一个面包屑容器
span.bread-sep 定义面包屑间隔
span.bread-link 定义面包屑当前位置
a.bread-link 定义面包屑链接

btn.less
.btn 定义一个按钮
.btn-default 普通颜色
.btn-primary 主色调颜色
.btn-auxiliary 辅色调颜色
.btn-info 中性情景颜色
.btn-success 成功情景颜色
.btn-warning 警告情景颜色
.btn-danger 危险情景颜色
.btn-sm 叠加更改为较小尺寸按钮
.btn-lg 叠加更改为较大尺寸按钮
.btn-ghost 叠加更改为幽灵按钮
.btn-block 叠加更改为块级按钮
.btn-link 叠加更改为链接按钮

card.less
无边框卡片
mycard
带阴影卡片
hahaha
带边框卡片
mycard3
带底部卡片
mycard4
$11.234,00
15%
.card 定义一个卡片
.card-shadow 叠加阴影效果
.card-bordered 叠加边框线
.card-head 定义卡片头部
.card-title 在头部内定义卡片标题
.card-extra 在头部内定义附加物
.card-body 内定卡片内容
.card-foot 定义卡片底部
.card-primary 叠加在容器上使开关显示为主色调(另:"auxiliary", success", "info", "warning", "danger")
.card-inverse 反转颜色卡片(card-body将带有背景色)

color.less

.text-muted

次要内容

.text-black

黑色文本

.text-light

白色文本

.text-primary

主色调文字

.text-auxiliary

辅助色文字

.text-success

成功情景色

.text-info

中性情景色

.text-warning

警告情景色

.text-danger

危险情景色

.bg-muted

次要背景色

.bg-black

黑色背景

.bg-light

白色背景

.bg-gray-light

浅灰色背景

.bg-gray-lighter

更浅灰色背景

.bg-primary

主色调背景色

.bg-auxiliary

辅助色背景色

.bg-success

成功情景背景色

.bg-warning

警告情景背景色

.bg-danger

危险情景背景色

dl.less
民国七年
以鲁迅为笔名发表中国现代文学史上第一篇用现代体式创作的白话短篇小说《狂人日记》,载在《新青年》第四卷第五号。
民国九年
在北京大学,北京高等师范学校讲授中国小说史,6月,读《共产党宣言》中文译本盛赞译者。9月,发表小说《风波》。
民国十二年
8月,小说集《呐喊》出版;与弟弟周作人分居,迁至西四塔胡同61号居住,分居原因不明。12月,作《娜拉走后怎样》演讲,兼任女师大,世界语学校教师;《中国小说史略》上册出版。
民国十三年
7月,赴西安讲《中国小说的历史变迁》。8月返京。11月,《语丝》周刊出版,鲁迅在首期发表《论雷峰塔的倒掉》,自此鲁迅成为《语丝》作家群的主将之一。
光绪二十三年
家族开会分房,分给鲁迅他们的既差且小,鲁迅拒绝签字遭到叔辈们斥责,倍感世态炎凉。
.dl 美化 dl元素
.dl-table 与.dl叠加提供左侧对齐样式

flex.less

移动端和高级浏览器可用的flex栅格,沿用流式栅格系统的命名风格,解决flex三代规范演变带来的兼容问题。

.flex-col 定义一个纵向flex容器。
.flex-row 定义一个横向flex容器。
.flex-1,
.flex-2,
.flex-3,
.flex-4
定义flex盒子的主轴尺寸占比。
即,在纵向容器中控制高度,在横向容器中控制宽度。
.align-stretch flex盒子在侧轴方向伸展。
.align-center flex盒子在侧轴方向居中对齐。
.justify-center flex盒子在主轴方向居中对齐。
.flex-wrap 允许flex盒子换行显示,默认不换行。
.scroll_cont 带滚动条区域

form.less
基本实例
配合栅格
Example block-level help text here.
单选和多选
内联单选和多选
内联表单
@
特殊样式
@
按钮组
btn1
btn2
btn3
btn4
primary
success
warning
danger
.form

定义表单元素

.form-inline

定义一个内联表单

.form-group

在表单内定义一行,可以配合栅格系统使用

.form-group-sm

叠加定义一个较小尺寸的行,内部元素自动缩小

.form-group-lg

叠加定义一个较大尺寸的行,内部元素自动放大

.input-group

定义一个带徽标的输入框组合

.input-group-sm

叠加input-group定义一个较小尺寸的输入框组合

.input-group-lg

叠加input-group定义一个较大尺寸的输入框组合

.input-group-addon

在输入框组合内定义一个徽标

.noborder 叠加input-group-addon使徽标无边框
.form-control

定义input/textarea控件样式

.form-control-blank

叠加form-control元素,使成为填空样式

.radio

定义一个radio元素组合

.radio-inline

叠加更改radio组合为内联样式

.checkbox

定义一个checkbox元素组合

.checkbox-inline

叠加更改checkbox组合为内联样式

.help-block

定义一条帮助信息

.form-control-static

定义一个与form-control元素登高的行

.control-label

定义一个与form-control元素对齐的提示元素

.input-sm

叠加更改为较小尺寸

.input-lg

叠加更改为较大尺寸

.form-mark

定义一个醒目标记元素

.disabled

叠加到空间使不可用

.input-group-btn

定义一个按钮组

grid.less
.span-2
.span-2
.span-2
.span-2
.span-2
.span-2
.span-4
.span-4
.span-4
.full-row .span-8
.full-row .span-4
.full-row .span-6
.full-row .span-6
基础栅格
    
       <div class="row">
          <div class="span-4"></div>
          <div class="span-8"></div>
       </div>
    
响应式栅格
    
       <div class="row">
          <div class="span-4 midd-8 smal-16"></div>
          <div class="span-8 midd-8 smal-16"></div>
       </div>
    
无间距模式
    
       <div class="full-row">
          <div class="span-4 midd-8 smal-16">无间距模式</div>
          <div class="span-8 midd-8 smal-16" style="background:grey;color:#fff;">无间距模式</div>
       </div>
    
栅格辅助工具
.center 居中,居中的栅格将成为块级元素占据整行,不能多列栅格共存
.midd-center 中屏居中
.smal-center 小屏居中
.hide 大屏隐藏
.midd-hide 中屏隐藏
.smal-hide 小屏隐藏
.smal-show 小屏显示,用于显示中屏隐藏的元素
.pull-right 置右,置右和位移工具的设计使用场景是,在非小屏下调整DOM顺序,以在小屏下全宽显示时有正确的前后(上下)关系
.pull-left-1 左位移1格, 注:位移在小屏下会自动清除
.pull-left-2 左位移2格, 注:位移在小屏下会自动清除
.pull-left-3 左位移3格, 注:位移在小屏下会自动清除
...
.pull-right-1 右位移1格, 注:位移在小屏下会自动清除
.pull-right-2 右位移2格, 注:位移在小屏下会自动清除
.pull-right-3 右位移3格, 注:位移在小屏下会自动清除
...
栅格嵌套

嵌套栅格也需要带.row.full-row层,支持无限嵌套。

 
    <div class="row">
        <div class="span-4">
          side
        </div>
        <div class="span-8">
          <div class="row">
            <div class="span-9">
              main
            </div>
            <div class="span-3">
              sub
            </div>
          </div>
        </div>
    </div>
 
iconfont.less

字体图标,为Flow-UI创建的图标库项目,提供框架内置图标的检索、获取Unicode、PNG定制下载功能。

详情访问Flow-ICON项目主页。

  
    :<i class="ion">&#xe63b;</i>
    :<i class="ion">&#xe64e;</i>
    :<i class="ion">&#xe660;</i>
  
iconsprite.less

精灵图,.ico定义一个25px正方形精灵图标,默认支持5x5矩阵,如:

                        
    <i class="ico ico1_1"></i>
    <i class="ico ico1_2"></i>
                        
                    
item.less
.items 定义列表容器
.bordered 叠加在.items上显示边框线
.item 定义列表项
.item-divider 叠加在.item上使当前项为分隔栏
.item-extra 定义列表右侧漂浮元素
.active 叠加在.item上使当前项为激活状态
.item-info 叠加.items使列表显示为指定色调,默认主色调(另:"auxiliary", success", "info", "warning", "danger")
.items-inverse 叠加.items使用列表呈现颜色反转效果

label.less
主色 辅助色 成功 信息 警告 危险 主色 辅助色 成功 信息 警告 危险
较小 较小 较小 较小
较大 较大 较大 较大
.label 定义标签元素
.label-sm 叠加.label显示为较小尺寸标签
.label-lg 叠加.label显示为较大尺寸标签
.label-auxiliary 叠加.label显示为辅色调,默认主色调(另:"auxiliary", success", "info", "warning", "danger")
.label-bordered 叠加.label显示为边框线风格
.label-closable 叠加.label显示为带关闭按钮标签,需要配合.ion图标

rect.less

rect-[比例:number]可以定义一个对应宽高比的矩形,内部._full子元素将充满该矩形,示例:

内置比例:

.rect-4854
.rect-50 2比1
.rect-5625 16比9
.rect-60 5比3
.rect-618 黄金分割
.rect-70 10比7
.rect-75 4比3
.rect-80 5比4
.rect-90 10比9
.rect-100 1比1

reset.less

样式重置的目的在于清除浏览器的默认样式,带来一个干净的定制空间,在此基础上还额外做了一些事情:

  1. 去掉触屏下链接点击背景色;
  2. 设置图片最大宽度100%,开发中会造成的常见问题是图片类效果插件显示异常,或百度地图这类自带图片资源的第三方插件显示异常,只要针对性的添加max-width:none即可;
  3. 对a标签添加0.3s的过渡动画;
space.less

.m 四周margin普通距离
.m-0 四周margin归零
.m-l 左方margin普通距离
.m-t 上方margin普通距离
.m-r 右方margin普通距离
.m-b 下方margin普通距离
.m-lr 左右两侧margin普通距离
.m-tb 上下两侧margin普通距离
.m-sm 四周margin较小距离
.m-l-sm 左方margin较小距离
.m-t-sm 上方margin较小距离
.m-r-sm 右方margin较小距离
.m-b-sm 下方margin较小距离
.m-lr-sm 左右两侧margin较小距离
.m-tb-sm 上下两侧margin较小距离
.m-lg 四周margin较大距离
.m-l-lg 左侧margin较大距离
.m-t-lg 上方margin较大距离
.m-r-lg 右侧margin较大距离
.m-b-lg 下方margin较大距离
.m-lr-lg 左右两侧margin较大距离
.m-tb-lg 上下方向margin较大距离

spin.less
Loading
.spin-icon-load 图标匀速旋转动画
.spin-size-sm 小尺寸等待动画
.spin-size-lg 大尺寸等待动画

switch.less
.switch 定义一个开关容器
.track 定义开关滑轨
.handle 定义开关波动手柄
.switch-on 叠加在容器上使开关显示开启状态
.switch-disabled 叠加在容器上使开关显示不可用状态
.switch-round 叠加在容器上使开关显示为圆角
.switch-sm 叠加在容器上使开关显示为较小尺寸
.switch-lg 叠加在容器上使开关显示为较大尺寸
.switch-primary 叠加在容器上使开关显示为主色调(另:"auxiliary", success", "info", "warning", "danger")

table.less

美化表格,示例参见该文档中的表格,具有三种叠加状态:

table-bordered 四周带边框线
table-condensed 紧凑型间距
table-striped 斑马线
table-hover 整行悬浮着色
table-responsive 响应式

tools.less

注意:移动端需要使用tools-mobile.less,以支持移动端屏幕适配

.wrap 定义主体内容区域,默认宽度自适应,最大宽度1000px,在移动端左右两边各有2%的间距,宽度支持自定义。
.fix 清除浮动(撑起浮动)
.oh 超出隐藏,同时有清浮动的作用
.l / .r 左 / 右浮动
.dib 使元素呈现为inline-block
.pr / .pa 相 / 绝对定位
.tc / .tr 居中对齐 / 居右对齐
.el 文字单行显示超出显示为省略号
.hide 隐藏元素
.hidetext 隐藏元素内的文字
.arr border绘图的基础类,实现了一个宽高为0的inline-block元素
.justify 单行文字两端对齐,需设置高度
.scrollbar 应用到容器元素,美化滚动条样式
.scrollbar-dark 叠加到.scrollbar呈现黑色调滚动条样式

横向
纵向
.menu-ui 定义菜单元素
.menu-horizontal/.menu-vertical 叠加在菜单元素上,定义菜单方向类型
.menu-light/.menu-dark/.menu-primary 叠加在菜单元素上,定义菜单主题
.menu-item 定义菜单项目
.menu-item-active 叠加在菜单项目上,定义激活状态
.menu-sub-ion 在菜单项目内定义菜单子项目状态图标
.menu-submenu 定义包含子菜单的项
.menu-opened 叠加在menu-submenu上指示子菜单为打开状态

page.less
.pagination 定义分页
.pagination > li > a.unable 不可用的分页链接
.pagination > li.active 当前页

progress.less
失败
65%
成功
.progress 定义进度条元素
.progress-inner 进度条轨道
.progress-bg 已完成进度条
.progress-text 进度条信息容器
.progress-active 叠加在.progress上呈现活动状态
.progress-show-info 叠加在.progress上以显示进度条信息
progress-primary 叠加在.progress上以显示为主色调(另:"auxiliary", success", "info", "warning", "danger")

Javascript

模块化开发

框架基于Seajs 实现js模块化开发,模块化很重要价值是前后端分离,引用js不再是页面底部的一堆script标签,js的增删改都不需要编辑、发布前台模板,使js代码可以向css一样容易维护,更多资料可以参考:前端模块化开发的价值

基于模块化加载方式,网站脚本拆分为两部分:业务代码组件

业务代码是具体业务脚本,每个页面模板都有一个对应的js文件放在项目内js/文件夹中,js/里还有一个common.js用于管理公用代码,这个文件夹组成了站点的业务层。

组件是对特定功能的封装,如jquery、轮显效果、视频播放器,日期选择器,表单验证等,用于被业务层调用,实现特定功能。模块封装相关文档见 CMD模块定义规范

加载模块

seajs.use()方法可以启动并执行一个模块化的js文件,如首页底部的:seajs.use('js/index');,将启动并执行"js/index.js",首页里的js效果都要在这里实现。

要使用某功能模块,就要先引用模块,语法是require("模块路径"),或者用异步加载的方式require.async("模块路径","回调方法")

以index.js为例:

            
  /*
   * index.js
   */
  define(function(require, exports, module) {
     var $ = require('jquery');
     var base=require('base');
     var com = require('./common');
     //...
     
  })
              
        

index.js里分别引用了jquery,base和common,并将他们的返回值分别赋值。

并不是所有的模块都有返回值,例如common模块多数时候只是存放网站通用代码,导航栏、返回顶部、分享代码之类,很少对外提供方法,如果确定一个模块不需要任何返回值也可以只引用不赋值,例如 require('./common'),大多数jquery插件模块也都没有返回值,因为jquery插件方法都扩展在jquery对象上,可以直接通过$.METHODNAME的方式使用。

异步加载

异步加载的模块不会提前就位,而是当前代码执行到该行时才开始请求模块文件,对于jquery和common这种被其他代码强依赖的模块我们希望尽快加载生效,因此使用同步加载,对于大多数效果类模块则应适度使用异步加载,以提高页面性能,但首屏效果应使用同步加载,以提高首屏响应速度。

require.async得到的模块对象无法通过赋值保存,只能在回调函数中接收为参数,以百度分享模块为例:

            
   require.async('bdshare',function(bdshare){
        //接收百度分享对象:bdshare  
      bdshare({
         bdSize : 16
      });
   });
              
        

公共代码

common.js用于管理整站公用代码,默认被所有业务层js引用。

JS模块

audio
描述

跨平台音频播放器,详见官网

配置

示例
 
          <!--html-->
          <audio preload="auto" >
             <source src="http://static.refined-x.com/sample.mp3" />
          </audio>
                              
                
 
          //js
          require('audio');
          audiojs.events.ready(function() {
            var as = audiojs.createAll();
          });
                            
                
Copy
描述

利用flash技术实现复制文字到剪贴板,详细参数见官网

示例
 
          <div id="d_clip_button">复制</div>
                                
                
 
          require('copy');

          $('#d_clip_button').zclip({
            copy: "测试" + Math.random(),
            afterCopy:function(){
              console.log('复制成功');
            }
          });
                            
                
flv
描述

集成vcastr3.0视频播放器,传入视频地址,返回播放器html,支持格式:.swf/.flv

配置
src 视频地址
width 宽,默认480
height 高,默认320
auto 默认false,自动播放
ctrl 默认true,是否有播放控件
loop 默认false,是否循环播放
logo Logo处显示的文字
id 给embed标签添加id,默认无
示例
 
          <!-- html -->
          <div class="playarea2"></div>
          <div class="playarea3"></div>
                                
                
 
          //js
          var player=require('flv');

          var player_2 = player({
             src: 'http://static.refined-x.com/sample.flv',
             loop:true
          });
          var player_3 = player({
             src:'http://player.youku.com/player.php/sid/XOTIwMDA5Nzk2/v.swf'
          });

          //将播放器插入页面
          $('.playarea2').html(player_2);
          $('.playarea3').html(player_3);
                              
                
jQuery
描述

封装1.x、2.x和3.x版本的jquery,seajs.config.js中已配置别名,默认使用1.x

示例
 
            var $ = require('jquery');
            console.log($);
                                    
                
raty
描述

评分插件,来自https://github.com/wbotelhos/raty

配置
cancel: 默认false,创建一个取消按钮;
cancelPlace: 默认'left',取消按钮的位置
click: 默认undefind,点击回调
half: 默认false,允许半星
hints: 默认 ['bad', 'poor', 'regular', 'good', 'gorgeous'],每颗星星对应的提示
mouseout: 默认undefind,mouseout回调
mouseover: 默认undefind,mouseover回调
number: 默认5,评分的总星数
precision: 默认false,允许选择一个更精确的分数
readOnly: 默认false,让评分不可更改
score: 默认undefind,初始分数
scoreName: 默认'score',评分插件会创建一个隐藏域存储分数,该项定义隐藏域的name
single: 默认false,评分时只有当前那颗星被点亮
space: 默认true,星星之间是否有间距
target: 默认undefind,jquery选择器格式或原生DOM元素,评分将被显示在该元素中
targetFormat: 默认'{score}',输出到target的格式模板
targetKeep: 默认false,当鼠标离开星星时target中的分数是否保留
targetScore: 默认undefind,jquery选择器格式或原生DOM元素,用来存储分数的input选择器,插件将不再生成默认隐藏域
targetText: 默认'',目标input的默认显示文字
targetType: 默认'hint',目标input显示的类型,可选'score'
示例
 
          <div class="demo"></div>
                                  
                
 
          require('raty');
          $('.demo').raty({
            click:function(val){
                console.log('打了'+val+'颗星');
            }
          });
                                  
                
upload
描述

上传插件,支持html5或ifram方式,改自aralejs/upload,集成localResizeIMG插件实现前端图片压缩,集成html5-make-thumb实现选择图片返回缩略图。

配置
trigger 唤出文件选择器,可以是:选择器、element、jQuery Object
name 上传文件时对应的 name
action 表单提交的地址。
headers 表单提交请求headers,默认{}
data 随表单一起要提交的数据,支持object格式或同步返回数据的function。
accept 支持的文件类型,比如 image/\* 为只上传图片类的文件。可选项。
change 选择文件回调,回调参数为当前所选文件对象。若不设置,选择文件将自动上传,默认null
progress 上传的进度回调,不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节,总字节,进度百分比和当前文件列表。
error 上传失败的回调函数。
multiple 是否支持多文件上传。默认为 false。
compress 图片是否上传前压缩。默认为 false。
compressOption 上传压缩参数。默认 {},可配置width和height。
thumb 接收缩略图的回调,回调参数为缩略图base64和文件对象。仅支持IE10及以上浏览器。
thumbOption 生成缩略图的配置,默认
 
        width: 0,               // thumbnail width
        height: 0,              //thumbnail height
        fill: false,            // fill color when the image is smaller than thumbnails size.
        background: '#fff',     // fill color‎
        type: 'image/jpeg',     // mime-type for thumbnail ('image/jpeg' | 'image/png')
        size: 'contain',        // CSS3 background-size: contain | cover | auto
        mark: {},               // watermark
          // text watermark.
          // mark = {padding: 5, height: 18, text: 'test', color: '#000', font: '400 18px Arial'}
          // font: normal, bold, italic
          // bgColor: '#ccc' (background color); bgPadding: 5 (padding)
          // image watermark. (Note: cross-domain is not allowed)
          // mark = {padding: 5, src: 'mark.png', width: 34, height: 45};
        stretch: false,         // stretch image(small versions) to fill thumbnail (size = auto | contain)
        before: null,           // call function before process image.
        fail: null,             // error function
        always: null            // complete function(done|fail)
                                                  
                                
success 上传成功的回调函数。
返回方法
submit() 提交上传
change(callback) 设置实例的change回调
success(callback) 设置实例的成功回调
error(callback) 设置实例的失败回调
enable() 恢复实例禁用状态
disable() 禁用实例
演示
                    
    <div class="wrap">
         <div class="row">
             <div class="span-6">
                 <form class="form m" id="myform">
                    <p class="form-group">key1:<input type="text" class="form-control" name="key1" value="value1"></p>
                    <p class="form-group">key2:<input type="text" class="form-control" name="key2" value="value2"></p>
                    <p class="form-group">文件名称:<input type="text" class="form-control" readonly id="filename"></p>
                    <div class="from-group">
                        <button type="button" id="selectFile" class="btn btn-primary">选择</button>
                        <button type="button" id="doupload" class="btn btn-warning">上传</button>
                    </div>
                </form>                                    
                <div class="m" id="uploaded"></div>
             </div>
         </div>
     </div>
                    
                
                    
    require.async('upload', function(Uploader) {
        var uploader = new Uploader({
            trigger: '#selectFile',
            name: 'file',
            data: function() {
                var serializeArray = $('#myform').serializeArray(),
                    formData = {};
                $.each(serializeArray, function(i, e) {
                    formData[e.name] = e.value;
                });
                return formData;
            },
            action: "http://host.refined-x.com/test/fileupload.php",
            change: function(file) {
                $('#filename').val(file[0].name);
            },
            progress: function(event, position, total, percent) {
                console.log('已上传 ' + position + '/' + total + ' ' + percent + '%');
            },
            success: function(response) {
                $('#uploaded').html('<img src="' + response.path + '" alt="" />');
            }
        });

        $('#doupload').on('click', function() {
            uploader.submit();
        });
    });
                                  
                
validform
描述

validform表单验证,整合密码强度验证插件。

内置验证规则
*: 检测是否有输入,可以输入任何字符,不留空即可通过验证;
*4-16: 检测是否为4到16位任意字符;
n: 数字类型;
n4-16: 4到16位数字;
f: 浮点数类型;
s: 字符串类型;
s4-16: 4到16位字符串;
p: 验证邮政编码;
m: 手机号码格式;
tel: 座机号码格式;
phone: 手机或座机号码格式;
e: email格式;
url: 验证字符串是否为网址
其他验证直接写正则 例如验证中文:datatype="/^[\u4e00-\u9fa5]*$/"
配置

这里只列举新增配置和开发中常见问题,普通使用参考演示demo,使用细节访问官方文档

type: 默认post,请求方式。(支持jQuery.ajax的所有配置)
allable: 默认false,设置为true将提交属性为disable的元素值
tiptype: 默认1,验证结果显示方式,1:弹出提示,2:输入框后插入
tipSweep: 默认true,是否只在提交前集中验证,每个输入框blur都会出发验证
dataType: 默认"json",ajax提交方式的返回数据格式
postonce: 默认false,是否只允许提交一次
ajaxPost: 默认true,是否ajax方式提交
ajaxData: 默认无,ajax提交方式的扩展数据,json || function(reutrn json)
ajaxurl

ajaxurl(实时验证)的处理页需要返回的数据格式:

 
          /*
          * type: json
          * status: 状态,"y"或"n"
          * info: 返回信息,当status不为"y"时此信息将以错误提示的形式显示
          */
          {
            "status": "n",
            "info": "用户名已被注册!"
          }
                                          
                                
beforeCheck

表单验证前的操作,需要返回"true / false"决定是否继续执行表单验证

beforeSubmit

验证后、提交前的操作,需要返回"true / false"决定表单是否提交

方法

完整方法见Validform对象

submitForm(flag,url)

以初始化时传入参数的设置方式提交表单,flag为true时,跳过验证直接提交,同时也将跳过beforeSubmit钩子函数;传入了url地址时,表单会提交到这个地址

check(bool,selector)

bool为true时则只验证不显示提示信息

对指定对象进行验证(默认验证当前整个表单),通过返回true,否则返回false(绑定实时验证的对象,格式符合要求时返回true,而不会等ajax的返回结果)

示例
 
                    
    <style>
        .demo {
            width: 50em;
            margin:auto;
        }
    </style>

    <form class="demo form" id="reg_form">
        <div class="form-group">
            <label class="control-label">用户名:</label>
            <input type="text" class="form-control" name="username" datatype="/^[A-Za-z0-9\u9fa5@\u9fa5.]{2,20}$/" sucmsg="用户名验证通过!" nullmsg="请输入用户名!" errormsg="用户名非法!">
        </div>
        <div class="form-group">
            <label class="control-label">密 码:</label>
            <input type="password" class="form-control" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间!" plugin="passwordStrength">
            <span class="passwordStrength r"><span>弱</span><span>中</span><span class="last">强</span></span>
        </div>
        <div class="form-group">
            <label class="control-label">确认密码:</label>
            <input type="password" class="form-control" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的密码不一致!">
        </div>
        <div class="form-group">
            <label class="control-label">邮箱:</label>
            <input type="text" class="form-control" name="email" datatype="e" errormsg="请输入正确的邮箱!" ignore="ignore">
        </div>
        <div class="form-group">
            <label class="control-label">验证码:</label>
            <div class="row">
                <div class="span-6">
                    <input type="text" class="form-control" name="validnum" datatype="*" ajaxurl="http://host.refined-x.com/test/validRand.php" sucmsg="验证码正确!" nullmsg="请输入验证码!" errormsg="验证码错误!">
                </div>
                <div class="span-6">
                    <img src="http://temp.im/80x30/?text=8888" style="vertical-align: middle;"> 看不清?<a href="###">换一张</a>
                </div>
            </div>
        </div>
        <div class="help-block">
            <label class="checkbox"> 同意用户协议<input type="checkbox" name="agree" datatype="*" nullmsg="请阅读并同意用户协议"></label>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">注册</button>
        </div>
    </form>
                        
                    
 
                    
          //js
          require('validform');
          var loginForm = $('#reg_form').Validform({
              ajaxPost:true,
              url: 'http://host.refined-x.com/test/ajax.php',
              usePlugin:{             //密码强度插件,不需要就删掉
                passwordstrength:{
                  minLen:6,     //设置密码长度最小值,默认为0;
                  maxLen:16,    //设置密码长度最大值,默认为30;
                  trigger:function(obj,error){            
                    if(error){
                      obj.parent().find(".Validform_checktip").show();
                      obj.parent().find(".passwordStrength").hide();
                    }else{
                      obj.parent().find(".Validform_checktip").hide();
                      obj.parent().find(".passwordStrength").show();  
                    }
                  }
                }
              },
              callback:function(res){
                
              }
            });
                                    
                
video
描述

集成video-js实现的跨平台视频播放插件,支持HTML5视频的跨平台播放,详见项目主页

配置
controls 是否有控件
autoplay 是否自动播放
preload 预加载,可选'auto','metadata','no',分别是自动,仅加载视频信息数据,不加载
poster 封面图片
loop 默认false,是否循环播放
width 播放器宽度
height 播放器高度
其他 官方文档
示例
 
          <video id="really-cool-video" class="video-js vjs-default-skin">
            <source src="http://static.refined-x.com/sample.mp4" type='video/mp4'>
            <p class="vjs-no-js">不支持js的浏览器会看到这个</p>
          </video>
                                    
                
 
          require('video');
          var player = videojs('really-cool-video', {
            width: 640,
            height: 264,
            poster: seajs.root + '/web/img/apple-touch-icon.png',
            controls:true,
            autoplay:true,
            preload:'auto'
          });
                                    
                
ajax-cache
描述

为jQuery.ajax()扩展两种缓存方式,定时缓存和快照缓存,依赖jQuery。

定时缓存

定时缓存即在特定时长内缓存数据,开启定时缓存的请求,在第一次成功返回数据后将不再重复发起请求,而是直接使用缓存数据,缓存过期后将自动清除,再次请求成功后将再次缓存,开启新的缓存周期,原理类似于函数防抖。

开启定时缓存需要为ajax配置localCache: Number,数字为缓存时长,单位ms。

快照缓存

快照缓存即把每一次成功返回的ajax结果保存为快照,下次发起相同请求(判断依据是url和参数相同)时第一时间将快照取出返回给回调函数,待真实数据返回后校验与快照是否相同(需要数据为json格式),若相同则缓存命中,会为对象格式的快照数据添加一个'snapshootEqual'属性值为'true',不同则再次调用回调函数并传入真实数据,为了使业务中能够区分出快照数据,会为对象格式的快照数据添加一个'snapshoot'属性值为'true'。

开启快照缓存需要为ajax配置localCache: 'snapshoot'选项。

注意

使用ajax缓存时必须用'success'配置Ajax的回调函数。

演示
                    
            <button id="test" type="button">send ajax</button>
            <div id="log"></div>
                    
                
                    
            //js
            require('ajax-cache');
            var $log = document.getElementById('log');
            $('#test').on('click', function() {
                $.ajax({
                    url: "http://rapapi.org/mockjsdata/9195/common/getRandom",
                    dataType:'json',
                    localCache: 'snapshoot',
                    success: function(res) {
                        if (res.snapshoot) {
                            $log.innerText = ('快照数据:' + res.data);
                        } else if (res.snapshootEqual) {
                            $log.innerText = ('快照命中');
                        } else {
                            setTimeout(function() {
                                $log.innerText = $log.innerText + ('\n最新数据:' + res.data);
                            }, 0);
                        }
                    }
                });
            });
                    
                
album
描述

相册插件,依赖幻灯片模块(slide.js)。返回Album方法,语法:Album(config),或者使用jquery插件语法:$el.album(config)

配置
blankclose 默认false,点空白关闭
title 默认null,匹配的元素文字将作为标题显示
cell 默认'li',相册展示的元素
trigger 默认等于cell,触发相册的元素,可传入cell的子元素选择器
hook 默认空字符串,用于附加自定义样式
effect 切换效果,可选 slide | fade | toggle
animate 动画曲线,默认“swing”
duration 效果时长,单位ms,默认480
prevHtml 左箭头html
nextHtml 右箭头html
lazyload 默认true,图片是否应用懒加载,基于DOM创建需手动给图片增加slide-src属性存储图片地址,基于数据创建将自动处理
onSlide 回调,参数同slide.js
onReady 扩展,参数同slide.js
示例
 
                  <style>
                  .demo{overflow: hidden;padding:1em;}
                  .demo li{float: left;width: 240px;height: 150px;overflow: hidden;margin:0 .5em;}
                  </style>
                  <div class="demo">
                      <ul>
                          <li class="show">
                              <img src="http://temp.im/640x320/?1" >
                              <div class="_title">1这行字会成为标题</div>
                          </li>
                          <li class="show">
                              <img src="http://temp.im/640x320/?1" >
                              <div class="_title">2这行字会成为标题</div>
                          </li>
                          <li class="show">
                              <img src="http://temp.im/640x320/?3" >
                              <div class="_title">3这行字会成为标题</div>
                          </li>
                          <li class="show">
                              <img src="http://temp.im/640x320/?4" >
                              <div class="_title">4这行字会成为标题</div>
                          </li>
                          <li>
                              <img src="http://temp.im/640x320/?5" >
                              <div class="_title">这个li不会在相册中显示</div>
                          </li>
                      </ul>
                  </div>
                                        
                
 
                  require.async('album',function(){
                     $('.demo').album({
                        title: '._title',
                        cell: '.show'
                     })
                  })
                                        
                
autocomplete
描述

自动补全插件,移植自jquery.autocomplete

配置
serviceUrl 远程请求地址,返回数据格式:
 
        //格式一,有附加数据
        {
            "suggestions": [
                { "value": "United Arab Emirates", "data": "AE" },
                { "value": "United Kingdom",       "data": "UK" },
                { "value": "United States",        "data": "US" }
            ]
        }
        //格式二,无附加数据
        {
            "query": "Unit",
            "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
        }
                                                
                                
suggestionsKey 远程数据字段名称,默认'suggestions'
lookup 本地查找数据,数据格式见示例。
onSelect 选中匹配项回调方法,接收选中的数据对象为参数。

完整API见官方文档

示例
 
          <!-- html -->
          <form>
              <input type="text" name="country" id="autocomplete-ajax" />
              <button type="submit">search</button>
          </form>
                                        
                
 
            // js
            var countriesArray = [{"value":"Andorra","data":"AD"},{"value":"United Arab Emirates","data":"AE"},{"value":"Afghanistan","data":"AF"},{"value":"Antigua and Barbuda","data":"AG"},{"value":"Anguilla","data":"AI"},{"value":"Albania","data":"AL"},{"value":"Armenia","data":"AM"},{"value":"Netherlands Antilles","data":"AN"},{"value":"Angola","data":"AO"},{"value":"Antarctica","data":"AQ"},{"value":"Argentina","data":"AR"},{"value":"American Samoa","data":"AS"},{"value":"Austria","data":"AT"},{"value":"Australia","data":"AU"},{"value":"Aruba","data":"AW"},{"value":"Åland Islands","data":"AX"},{"value":"Azerbaijan","data":"AZ"},{"value":"Bosnia and Herzegovina","data":"BA"},{"value":"Barbados","data":"BB"},{"value":"Bangladesh","data":"BD"},{"value":"Belgium","data":"BE"},{"value":"Burkina Faso","data":"BF"},{"value":"Bulgaria","data":"BG"},{"value":"Bahrain","data":"BH"},{"value":"Burundi","data":"BI"},{"value":"Benin","data":"BJ"},{"value":"Saint Barthélemy","data":"BL"},{"value":"Bermuda","data":"BM"},{"value":"Brunei","data":"BN"},{"value":"Bolivia","data":"BO"},{"value":"British Antarctic Territory","data":"BQ"},{"value":"Brazil","data":"BR"},{"value":"Bahamas","data":"BS"},{"value":"Bhutan","data":"BT"},{"value":"Bouvet Island","data":"BV"},{"value":"Botswana","data":"BW"},{"value":"Belarus","data":"BY"},{"value":"Belize","data":"BZ"},{"value":"Canada","data":"CA"},{"value":"Cocos [Keeling] Islands","data":"CC"},{"value":"Congo - Kinshasa","data":"CD"},{"value":"Central African Republic","data":"CF"},{"value":"Congo - Brazzaville","data":"CG"},{"value":"Switzerland","data":"CH"},{"value":"Côte d’Ivoire","data":"CI"},{"value":"Cook Islands","data":"CK"},{"value":"Chile","data":"CL"},{"value":"Cameroon","data":"CM"},{"value":"China","data":"CN"},{"value":"Colombia","data":"CO"},{"value":"Costa Rica","data":"CR"},{"value":"Serbia and Montenegro","data":"CS"},{"value":"Canton and Enderbury Islands","data":"CT"},{"value":"Cuba","data":"CU"},{"value":"Cape Verde","data":"CV"},{"value":"Christmas Island","data":"CX"},{"value":"Cyprus","data":"CY"},{"value":"Czech Republic","data":"CZ"},{"value":"East Germany","data":"DD"},{"value":"Germany","data":"DE"},{"value":"Djibouti","data":"DJ"},{"value":"Denmark","data":"DK"},{"value":"Dominica","data":"DM"},{"value":"Dominican Republic","data":"DO"},{"value":"Algeria","data":"DZ"},{"value":"Ecuador","data":"EC"},{"value":"Estonia","data":"EE"},{"value":"Egypt","data":"EG"},{"value":"Western Sahara","data":"EH"},{"value":"Eritrea","data":"ER"},{"value":"Spain","data":"ES"},{"value":"Ethiopia","data":"ET"}];

            require('autocomplete')
            $('#autocomplete-ajax').autocomplete({
                  lookup: countriesArray,                    //本地查找数据
                  onSelect: function(data){
                    console.log(data);
                  }
            });
                                    
                
badge
描述

主要用于通知未读数的角标,提醒用户点击。返回 Badge方法,语法: Badge(config),或使用jquery插件语法: $el.badge(config)

配置
el

默认 null,要显示徽标的元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

count

默认 0,初始徽标数量

slot

默认 true,是否将当前元素作为徽标显示元素,若为false将在el元素中插入独立徽标

color

默认 'danger',徽标色调,支持【色彩】组件中的所有颜色

max

默认 99,徽标显示的最大值

dot

默认 false,是否以圆点形式显示

返回方法
count([value])

设置/获取当前实例的徽标数

示例
 
            <div class="wrap">
                <div class="m">
                    <a href="###" class="btn btn-default demo">Button</a>
                    <div class="btn btn-primary setmax m-l">设置为100</div>
                    <div class="btn btn-primary add m-l">+</div>
                    <div class="btn btn-primary min m-l">-</div>
                    <div class="btn btn-primary setmin m-l">设置为0</div>
                </div>
                <div class="p">独立显示:<span class="demo2 m-l"></span>
                    <div class="btn btn-primary setmax2 m-l">设置为100</div>
                    <div class="btn btn-primary add2 m-l">+</div>
                    <div class="btn btn-primary min2 m-l">-</div>
                    <div class="btn btn-primary setmin2 m-l">设置为0</div>
                </div>
            </div>
                                        
                
 
            require('badge');
            var badge1 = $('.demo').badge({
                count: 1
            });
            $('.setmax').on('click', function() {
                badge1.count(100);
            });
            $('.setmin').on('click', function() {
                badge1.count(0);
            });
            $('.add').on('click', function() {
                badge1.count(badge1.count() + 1);
            });
            $('.min').on('click', function() {
                badge1.count(badge1.count() - 1);
            });

            var badge2 = $('.demo2').badge({
                slot: false,
                count: 9,
                color: 'success'
            });
            $('.setmax2').on('click', function() {
                badge2.count(100);
            });
            $('.setmin2').on('click', function() {
                badge2.count(0);
            });
            $('.add2').on('click', function() {
                badge2.count(badge2.count() + 1);
            });
            $('.min2').on('click', function() {
                badge2.count(badge2.count() - 1);
            });
                                        
                
base
描述

封装常用工具

返回方法
getUID() 返回一个递增数字
getUUID([length]) 返回一个随机数字字母组合,接收长度参数,不传默认6位
deepcopy(source) 多维数组/对象数组深拷贝
getStyle(ele,attr) 获取元素的属性值,ele:元素;attr:要获取的属性,返回属性值
$.cookie(name,value) 操作cookie,name:键名;value:设置为的值,一个参数取值,返回value,两个参数赋值,无返回值
browser

获取浏览器信息:

isMobile [boolean]是否移动设备
ie [number]返回ie版本,ie11及以上和非ie返回0
platform [string]浏览器运行平台
agent [string]浏览器用户代理头信息
support3d [boolean]是否支持3d转换

url

url操作方法

get(name, [url])
 
          /*
          * @name:要获取的参数名
          * @url:要检索的url,可选,默认检索当前窗口url
          */

          // 当前url
          http://localhost:8001/web/pro-list.htm?cat_id=2643

          // js
          console.log(base.url.get('cat_id'));  // 输出 2643
          console.log(base.url.get('cat_id','http://a.b.c?cat_id=wakaka'));  // 输出 wakaka
                                                        
                                                
set(name, val, [url])
 
          console.log(base.url.set('cat_id','test', 'http://a.b.c?cat_id=wakaka'));  
          // 输出 'http://a.b.c?cat_id=test'
                                                             
                                                

storage

localStorage操作模块。

val(key, [val])

数据存/取,支持对象、数字格式自动个转化

 
          base.storage.val('test',{a:1});   //存
          base.storage.val('test');         //{a:1}
                                                        
                                                
remove(key)

删除指定字段数据

 
          base.storage.remove('test'); 
                                                             
                                                
clear([safeStorage])

清空本地数据,safeStorage是可选保留字段,数组格式

 
          base.storage.clear(); 
                                                             
                                                
leaveSpace()

返回剩余空间

 
          base.storage.leaveSpace();    //返回剩余空间,单位B
                                                             
                                                

throttle(fn, [delay], [duration])

函数节流,用于过滤resize,mousemove,scroll这类频连续繁触发事件

 
          /*
          * @fn(function):要节流执行的函数
          * @delay(number): 隔内连续触发的事件将被屏蔽,可选,默认64,单位ms
          * @duration(number): 间隔内至少执行一次事件,可选,默认640,单位ms
          * return(function):新的节流函数,可直接在密集事件中执行
          */

          // 查看控制台,IE效果更明显
          var thro = base.throttle(function(){
                console.log('thro resize')
              });

          $(window).on('resize',thro);
                                                
                                
getScript(file, [callabck], [option])

加载未模块化的普通js文件,可控制jquery依赖、指定css依赖、添加回调,支持批量加载及批量线性依赖加载。

 
          /*
          * @file:(string/array) 加载的js路径,规则与require/require.async方法相同
          * @callabck(function): 加载完成的回调,接收加载的js文本和返回状态,批量加载只返回最后一个js文本
          * @option(object): 若callback是object格式将被作为option使用
          * @option.css(boolean/string/array): 是否依赖css,默认false,
传入true将加载与js同名同级css文件 * @option.beforeLoad(function): 加载前回调 * @option.rely(boolen): 批量加载的js是否保持线性顺序,默认false,将同时请求 */ //利用线性加载特定版本jquery的例子 base.getScript(['http://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js', 'http://host.refined-x.com/test/test2'], function(data) { var $ = window.jQuery; $.fn.test2(); }, { rely: true }); //也可以写成base.getScript(file, callabck)快捷方式,百度地图示例: base.getScript('http://api.map.baidu.com/getscript?v=2.0&ak=D1DX6yGc5HGh28jtaAwNzcBi', function() { var theBody = document.getElementsByTagName('body')[0]; theBody.style.height='600px'; theBody.setAttribute('id','content'); var map = new BMap.Map("content"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); window.setTimeout(function() { map.panTo(new BMap.Point(116.409, 39.918)); }, 2000); })
ajaxCombo(config)

扩展jQuery.ajax方法,使支持请求合并,设置combo:trueajax会被合并,集中以post方式发送到指定url,示例:

 
          /*
          * ajaxCombo(option);
          * option.comboUrl[string]: 合并请求的发送地址,默认"/test/combo.php"
          * option.comboDataKey[string]: 发送合并数据的key,默认"paramArray"
          * option.extendData[object]: 合并请求的附加参数,将与option.comboDataKey平级,默认{}
          * option.duration[number]: 合并等待时间,单位ms,该时间段内连续发起的请求会被合并,默认16
          * option.everytimeout[number]: 单个请求超时时间,单位ms,默认2000,合并请求达到总超时时间后会终止,并将原ajax重新发起。
          */
            var base = require('base');
            base.ajaxCombo({
                comboUrl:"http://host.refined-x.com/test/combo.php"      //设置合并请求发送地址
            });

            $.ajax({
                url:"/getxxx/",
                combo:true,                     //触发合并
                success:function(){
                    //do something
                }
            })

          //发送数据格式,数据以"combo1、combo2..."的规则组织:
          {
            "paramArray": {
              "combo1": {
                "url": "",
                "data": ""
              },
              "combo2": {
                "url": "",
                "data": ""
              }
            }
          }
          //返回数据格式,数据按原paramArray的结构返回:
          {
            "combo1": {
              "data": "返回数据"
            },
            "combo2": {
              "data": "返回数据"
            }
          }

                                                
                                
bdshare
描述

封装百度分享,扩展分享按钮html自定义能力,接收通用设置和share设置,都是标准的百度分享参数格式,获取HTML代码请点这里

配置
commonConfig 通用设置,可选,提供onBeforeClick接口用于点击分享按钮时动态更改配置,详见通用设置
shareConfig share设置,可选,允许对多组分享通过data-tag标记做不同的配置,当只有一组分享时可以直接传入json格式,不传参将使用百度默认值,详见分享按钮设置
注意
  1. 全站的百度分享代码必须commonjs中通过一次require.async集中配置,多次配置只有最后一次会生效;
  2. 分享按钮a标签HTML自定义,最多只允许增加一层DOM,否则点击事件不生效。
示例
 
           <!-- 如果页面内有多组分享 -->
           <div class="bdsharebuttonbox" data-tag="share_1" data-sharetitle="自定义分享标题">
              <a class="bds_mshare" data-cmd="mshare"></a>
              <a class="bds_qzone" data-cmd="qzone" href="#"></a>
              <a class="bds_tsina" data-cmd="tsina"></a>
              <a class="bds_baidu" data-cmd="baidu"></a>
              <a class="bds_renren" data-cmd="renren"></a>
              <a class="bds_tqq" data-cmd="tqq"></a>
              <a class="bds_more" data-cmd="more">更多</a>
              <a class="bds_count" data-cmd="count"></a>
           </div>
           <div class="bdsharebuttonbox" data-tag="share_2">
              <a class="bds_mshare" data-cmd="mshare"></a>
              <a class="bds_qzone" data-cmd="qzone" href="#"></a>
              <a class="bds_tsina" data-cmd="tsina"></a>
              <a class="bds_baidu" data-cmd="baidu"></a>
              <a class="bds_renren" data-cmd="renren"></a>
              <a class="bds_tqq" data-cmd="tqq"></a>
              <a class="bds_more" data-cmd="more">更多</a>
              <a class="bds_count" data-cmd="count"></a>
           </div>
                                      
                
 
           //多组分享js         
           require.async('bdshare',function(bdshare){
               bdshare({
                //如果不需要从页面获取分享内容不要加onBeforeClick这一段
                onBeforeClick: function(cmd, config) {
                  var e = (arguments.callee.caller.arguments[0] || window.event).event;
                  config.bdText = $(e.target).parents('.bdsharebuttonbox').data('sharetitle');
                  //更改标题,所取的值若为undefined将默认使用页面title
                  config.bdDesc = 'shareTo ' + cmd;
                  //cmd是分享目标id,例如人人的id是"renren",可以用来识别具体分享到哪里
                  config.bdPic = 'http://temp.im/100x100/';
                  //更改分享信息的缩略图
                  config.bdUrl = window.location.href + '?shareTo=' + cmd;
                  //更改分享信息的url

                  return config; //返回新的config
                }
               },[{
                    tag : 'share_1',  
                    bdSize : 16,      //图标尺寸, 16|24|32
                    bdStyle : '1'     //图标类型, 0|1|2

                 },
                 {
                    tag : 'share_2',
                    bdSize : 32,
                    bdStyle: 2
                 }])
           });
                                       
                
box
描述

弹窗插件,具有弹出任意内容、提醒、消息、询问、ajax、图片模式。

返回Box方法,语法:Box.open(params...),或者使用jquery插件语法:$.box(params...)

方法
Box.open(anything, [config])

打开弹窗

Box.hide([boxid])

关闭弹窗,接收弹窗id为参数,无参数将关闭页面上所有弹窗

Box.setSize(boxid,[config])

box尺寸重设,接收弹窗id和尺寸配置为参数,无配置时将重计算指定弹窗的尺寸

Box.alert()

提醒弹窗,弹出短信息,有一个确认按钮

 
          /*
          * @param.message[string]:消息内容
          * @param.callback[function]:确认按钮的回调
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.alert( message, [callback], [options] );
                                                
                                
Box.msg()

消息弹窗,在屏幕顶部显示一条全局消息,特有一个color配置用来定义消息请景色,可选"info,primary,success,warning,danger"

 
          /*
          * @param.message[string]:消息内容
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.msg( message, [options] );
                                                
                                
Box.toast()

消息气泡,在屏幕中部显示一条消息气泡,默认延时2s自动关闭。

 
          /*
          * @param.message[string]:消息内容
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.toast( message, [options] );
                                                
                                
Box.confirm()

确认弹窗,弹出一条确认信息,有一个确认按钮和一个取消按钮

 
          /*
          * @param.message[string]:消息内容
          * @param.sureCall[function]:确认按钮的回调
          * @param.cancelCall[function]:取消按钮的回调
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.confirm( message, [sureCall], [cancelCall], [options] );
                                                
                                
Box.ajax()

ajax弹窗,弹出ajax获得的内容

 
          /*
          * @param.uri[string]:ajax地址
          * @param.params[object]:ajax参数
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.ajax( uri, [params], [options] );
                                                
                                
Box.ifram()

弹出一个ifram窗口

 
          /*
          * @param.uri[string]:ifram页面地址
          * @param.params[object]:ifram参数,包括name,width,height
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.ifram( uri, [params], [options] );
                                                
                                
Box.img()

弹出一张图片

 
          /*
          * @param.src[string]:图片地址
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.img( src, [options] );
                                                
                                
配置
top 默认无,若有值将固定弹窗据window顶部距离
title 默认"对话框",对话框标题html
oktext 默认"确定",确定按钮的文字
canceltext 默认"取消",取消按钮的文字
shut 默认"×",关闭按钮html,传入false将没有关闭按钮
width 默认"auto",弹窗宽度
height 默认"auto",弹窗高度
layout 默认true,是否包含边框
setposi 默认true,无layout的情况下,是否自动添加定位样式,手动定位需要设为false
bar 默认true,是否显示标题栏
bg 默认true,是否显示背景层
fix 默认true,弹窗是否框固定在页面上
bgclose 默认true,是否点击背景层关闭
drag 默认false,是否可拖拽
protect 默认false,若为true,关闭后会将弹出的元素appendTo('body')
delay 默认0,弹窗自动关闭时间, 0和负值不触发
lang 默认0,语言选择,0:中文 1:英文
hook 默认无,自定义样式钩子,用于给弹窗附加class修改样式
color 默认"info",Box.msg方法的情景色,使用的是ui.css提供的几种背景色,可选info,primary,success,warning,danger
onshow(box) 默认无,弹窗打开事件,接收弹窗DOM对象为参数
onclose() 默认无,弹窗关闭事件
返回方法
boxid

每次Box调用都将返回一个boxid,用于Box.hide()的参数时,可关闭本弹窗实例

var mybox = Box(...);

示例
 
          <style>
          button{margin:.5em;}
          .myextclass .wrap_bar{background:green;}
          </style>

          <!-- html -->
          <form class="demo hide" style="padding:20px;">
            <p>
              <label>姓名:</label><input type="text">
            </p>
            <p>
              <label>电话:</label><input type="tel">
            </p>
            <p>
              <label>邮箱:</label><input type="mail">
            </p>
            <p class="tc" style="margin-top:1em">
              <button>填好了</button>
            </p>
          </form>

          <div><button class="btn btn-default boxDom">弹出Dom</button></div>
          <div><button class="btn btn-default boxMsg">提示</button></div>
          <div><button class="btn btn-default boxToast">气泡</button></div>
          <div><button class="btn btn-default boxAlert">警告</button></div>
          <div><button class="btn btn-default boxConfirm">询问</button></div>
          <div><button class="btn btn-default boxAjax">Ajax弹出内容</button></div>
          <div><button class="btn btn-default boxIfram">弹出ifram</button></div>
          <div><button class="btn btn-default modal">弹出一个模态自定义内容</button>
          <div><button class="btn btn-default extclass">添加自定义class</button></div>
          <div><button class="btn btn-default boximg">弹出图片</button></div>
                              
                
 

            //支持全局修改默认配置,全局配置必须在require('module name'),
            //例如全局语言改为英文
            window.boxGlobal = {lang:1};

            //js
            var Box = require('box');

            $('.boxDom').on('click',function(){
              Box.open( $('.demo') );
            });
            
            $('.boxAlert').on('click',function(){
              Box.alert('hello box!',function(){
                alert('alert的回调');
              });
            });
            
            $('.boxMsg').on('click',function(){
              Box.msg('注意,这是一条测试信息!',{
                delay:3000
              });
            });

            $('.boxToast').on('click',function(){
              Box.toast('这是一条测试信息!');
            });

            $('.boxConfirm').on('click',function(){
              Box.confirm('hello box!', function(){
                alert('确定回调');
              }, function(){
                alert('取消回调');
              });
            });
            
            $('.boxAjax').on('click',function(){
              Box.ajax('http://host.refined-x.com/test/ajax.php', { 
                param: "param1" //Ajax参数
              });
            });
            
            $('.boxIfram').on('click',function(){
              var myifr = Box.ifram('http://host.refined-x.com/test/iframCloseTest.html',{
                name: "closeTestIfram",  //ifram name,默认空(不是弹窗标题)
                width: 320,     //iframe宽,默认640
                height: 240     //iframe高,默认480
              });
            });

            $('.modal').on('click',function(){
              Box.open('<i class="ion rotation"></i>',{
                layout:false,
                bgclose:false,
                delay:3e3
              });
            });

            $('.extclass').on('click',function(){
              Box.open('通过附加自定义class修改了弹窗样式',{
                hook: "text-success"
              });
            });

            $('.boximg').on('click',function(){
              var imgBox = Box.img('http://static.refined-x.com/view0.jpg',{
                onshow:function($this){
                  $this.on('click',function(){
                    Box.hide(imgBox);
                  });
                }
              });
            });

                                
                
Checks
描述

基本组件-单/多选框。

返回Checks方法,语法:Checks(params...),或者使用jquery插件语法:$.checks(params...)

配置
el

默认null,控件生成元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

type

默认"checkbox",切换单/多选模式,可选"radio"

name

默认null,指定该组控件的name

data

默认null,控件数据,数据格式见示例,也支持使用标签初始化,标签格式见示例

checked

默认null,已选择项的value值,数组格式

disabled

默认null,禁用项的value值,数组格式

mode

默认"inline",将采用内联样式,可选"block"

onChange

默认null,选项变化回调方法,@param(checked) : 已选项,"checkbox"模式返回所选项value数组,radio"模式返回所选项value)

onReady

默认null,初始化完成回调方法,@param(checked) : 已选项,"checkbox"模式返回所选项value数组,radio"模式返回所选项value)

返回方法
checked([value])

获取/设置已选项,"checkbox"模式接收value数组,"radio"模式接收value

disabled([value])

获取/设置禁用项,接收value数组

返回方法
 
            <div class="wrap">
                <form class="form" id="testform">
                    <div class="form-group demo1">
                        使用数据初始化
                    </div>
                    <div class="form-group demo2">
                        使用标签初始化
                        <input type="radio" value="1" name="radio1" label="香蕉" checked>
                        <input type="radio" value="2" name="radio1" label="西瓜">
                        <input type="radio" value="3" name="radio1" label="猕猴桃" disabled>
                    </div>
                    <div class="input-group-btn">
                        <div class="btn btn-default checkall">全选checkbox</div>
                        <div class="btn btn-default checknone">反选checkbox</div>
                        <div class="btn btn-default radiocheck">选中radio第二项</div>
                    </div>
                    <p class="form-control-static" id="log"></p>
                </form>
            </div>
                                    
                
 
            var checks = require('checks');
            var showLog = function(checked){
                if(checked){
                    console.log(checked);
                }
                $('#log').text($('#testform').serialize());
            };

            var mycheck = checks({
                el: $('.demo1'),
                type: 'checkbox',
                name: 'datacheck',
                data: [{
                    value: 'yingtao',
                    label: '樱桃'
                },{
                    value: 'tianhua',
                    label: '甜瓜'
                },{
                    value: 'caomei',
                    label: '草莓'
                }],
                checked: ['yingtao'],
                disabled: ['caomei'],
                onChange: showLog,
                onReady: showLog
            });

            var myradio = checks({
                el: $('.demo2'),
                type: 'radio',
                onChange: showLog,
                onReady: showLog
            });
                                        
            $('.input-group-btn').on('click', '.btn', function(){
                $(this).addClass('active').siblings('.active').removeClass('active');
                if($(this).hasClass('checkall')){
                    mycheck.checked(['yingtao','tianhua','caomei']);
                } else if($(this).hasClass('checknone')){
                    mycheck.checked([]);
                } else if($(this).hasClass('radiocheck')){
                    myradio.checked('2');
                }
            });
            
                                    
                
city-select
描述

地区选择器插件,返回citySelect方法,语法citySelect(config),或使用jquery插件格式$el.citySelect(config)

配置
el

触发元素,默认无,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

textKey

默认"name",用于显示选项文字的数据属性

subKeys

默认['city', 'area'],下级数据的key序列

data

省市区数据,支持数组或能返回指定格式的异步请求地址,异步数据必须为json格式且包含data字段。

data格式不限(需正确匹配"textKey"和"subKeys"设置)

readOnly

默认true,若触发元素为input/textarea是否禁止用户输入

onSelect

选择结束回调函数,接收选择结果,格式为所选每一级数据组成的数组

返回方法
val

获取/设置选择器的当前值

设置值时需要传入textKey所配置属性值,多个值之间逗号隔开

示例
 
            <div class="m" style="width:200px">
                <input type="text" class="demo form-control" placeholder="选择地区">
            </div>
            <div class="getval btn btn-default">获取当前值</div>
            <div class="setval btn btn-default">赋值</div>
                                    
                
 
            require('city-select');
            var myselect = $('.demo').citySelect({
                data:[{"name":"北京","id":"001","city":[{"name":"北京","id":"001","area":[{"name":"东城区","id":"001"},{"name":"西城区","id":"002"},{"name":"崇文区","id":"003"},{"name":"宣武区","id":"004"},{"name":"朝阳区","id":"005"}]}]},{"name":"河北","id":"002","city":[{"name":"石家庄","id":"002","area":[{"id":"002","name":"长安区"},{"id":"002","name":"桥东区"},{"id":"002","name":"桥西区"},{"id":"002","name":"新华区"},{"id":"002","name":"郊  区"}]}]},{"name":"台湾","id":"003","city":[{"name":"台湾","id":"003","area":[{"id":"003","name":"台北市"},{"id":"003","name":"高雄市"},{"id":"003","name":"台北县"},{"id":"003","name":"桃园县"}]},{"name":"其他","id":"004","area":[{"name":"其他","id":"004"}]}]}],
                onSelect:function(result){
                    console.log(result);
                    var address = [];
                    $.each(result, function(i, e) {
                        address.push(e.name);
                    });
                    $(this).val(address.join(' / '));
                }
            });

            $('.getval').on('click', function(){
                console.log(myselect.val());
            });

            $('.setval').on('click', function(){
                myselect.val('北京,北京,西城区');
            });
                              
                
collapse
描述

将内容区域折叠/展开,支持基于标签生成和基于数据生成两种模式。返回Collapse方法,语法Collapse(config),或使用jquery插件格式$el.collapse(config)

配置
el

插入/生成折叠面板的元素,默认无,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

conts

默认'.panel',基于标签生成时,指定面板的元素选择器

该元素的data-card-title属性值将作为选项卡标签标题,另外还支持opened属性,用于指定初始展开的面板

data

默认null,用于生成实例的数据,格式:

[{
title: "tab1", //面板标题
cont: 'tab1cont', //面板内容
opened: [boolean], //是否展开
color: '', //面板颜色,支持【颜色】组件中的所有颜色
}]
opened

默认[],默认打开元素,优先级高于数据和标签中的初始值

color

默认'',面板颜色,支持【Color】组件中的所有颜色

single

默认true,手风琴模式,同时只允许展开一个面板

onChange

状态变化回调方法,@param(opened) : 当前展开的序号数组

返回方法
open([indexArray])

设置/获取展开的折叠面板

示例
 
            <div class="wrap">
                <div class="row">
                    <div class="span-6">
                        <div class="demo m-tb">
                            <div class="panel" data-card-title="史蒂夫·乔布斯">
                                史蒂夫·乔布斯(Steve Jobs),1955年2月24日生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创办人。
                            </div>
                            <div class="panel" data-card-title="斯蒂夫·盖瑞·沃兹尼亚克">
                                斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak),美国电脑工程师,曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学,后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。
                            </div>
                            <div class="panel" data-card-title="乔纳森·伊夫">
                                乔纳森·伊夫是一位工业设计师,现任Apple公司设计师兼资深副总裁,英国爵士。他曾参与设计了iPod,iMac,iPhone,iPad等众多苹果产品。除了乔布斯,他是对苹果那些著名的产品最有影响力的人。
                            </div>
                        </div>
                        <div class="btn btn-default open3">打开第3个</div>
                        <div class="btn btn-default opennone">全部关闭</div>
                    </div>
                </div>
            </div>
                                    
                
 
            require('collapse');
            var mycol = $('.demo').collapse();

            $('.open3').on('click', function(){
                mycol.open([2]);
            });
            $('.opennone').on('click', function(){
                mycol.open([]);
            });
                                    
                
countdown
描述

倒计时插件,通过重写render方法可自定义显示格式。

注意

标准日期对象的月份设置范围是0~11,不是1~12

配置
begin 开始时间,可选,默认本机时间,标准日期格式,如new Date(2089,01,05,02,25,00),或new Date("2089/01/05 02:25:00"),或new Date("2089-01-05 02:25:00")
date 结束时间,标准日期格式,默认 new Date(2089,01,05,02,25,00)
refresh 刷新率,单位ms,默认1000,即按秒刷新
offset 偏移量,单位ms,用于纠正时区偏差
onEnd 倒计时结束回调函数,默认无
render 渲染函数,接收两个参数分别是当前DOM和日期
返回对象
update(option)

更新倒计时参数,如果在onEnd回调中调用update方法,注意避免死循环

stop()

停止当前倒计时实例

示例
 
          <!-- html -->
          <div class="demo"></div>
                                    
                
 
           //js
           var endData = new Date(),
               endMill = endData.getTime()+1000*60*60*24;
           endData.setTime(endMill);
           require.async('countdown', function() {
              $('.demo').Countdown({
                 date: endData,
                 render: function($this, date) { 
                    $this.html(date.years + " 年, " +
                       date.days + " 天, " +
                       date.hours + " 时, " +
                       date.min + " 分 " +
                       date.sec + " 秒"
                    )
                 }
              })
           })
                                    
                
Datepicker
描述

日期选择器插件,基于fengyuanchen/datepicker二次开发

配置
autoShow 默认false,初始化后立即显示日历
autoHide 默认false,选择日期后自动关闭日历
autoPick 默认false,初始化后自动选中当前日期
inline 默认false,是否以内嵌模式显示日历,需搭配container使用
container 元素或字符串,默认null,容纳inline模式日历的元素或元素选择器
trigger 元素或字符串,默认null,指定显示日历的触发器
language 界面语言,默认'',可选'zh-CN'
format

字符串,默认'yyyy/mth/dd'

支持的格式元素:

year: 'yyyy','yy'
month: 'mth', 'm'
day: 'dd', 'd'
hour: 'hh'
minute: 'mm'
secend: 'ss'

date 日期数据或字符串,默认null,初始日期,不设置选择当天
selected 日期数组,默认[],设置需要高亮显示的日期
startDate 日期数据或字符串,默认null,设置可选的起始日期
endDate 日期数据或字符串,默认null,设置可选的终止日期
startView 数值,默认0,设置初始化界面,可选0: days;1: months;2: years
weekStart 数值,默认0,设置每周的起始天,可选0: Sunday;1: Monday;2: Tuesday;3: Wednesday;4: Thursday;5: Friday;6: Saturday
yearFirst 布尔值,默认false,界面上将年显示到月之前
yearSuffix 字符型,默认'',年份后缀,例如可以设置为'年'
days 数组,默认['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],设置一周每天称谓
daysShort 数组,默认['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],一周每天称谓短版
daysMin 数组,默认['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],一周每天称谓更短
months 数组,默认['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],月份名称
monthsShort 数组,默认['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],月份短称谓
itemTag 字符串,默认'li',标签名
mutedClass 字符串,默认'muted',设定class前缀
selectedClass 字符串,默认'selected',定义高亮日期class
pickedClass 字符串,默认'picked',定义选中日期class
disabledClass 字符串,默认'disabled',定义不可用日期class
offset 数值,默认10,日期弹出位置距离元素的距离,单位px
needTime

默认false,是否需要时间选择器,如果传入Object将作为该time picker实例的设置参数。

注意:默认format不显示时间,需要同时修改format

zIndex 数值,默认1,日期弹窗的z-index值
filter 函数,默认null,例如
 
        $().datepicker({
          filter: function(date) {
            if (date.getDay() === 0) {
              return false; // Disable all Sundays
            }
          }
        });
                                            
                                
show 函数,默认null,日历显示的回调
hide 函数,默认null,日历隐藏的回调
pick 函数,默认null,选择日期的回调,函数event中date属性可以获得选中的日期
方法

见:官方文档

示例
 
            <p> 普通 </p>
            <input class="datepicker">
            <p> 自动关闭/值选择年月 </p>
            <input class="datepicker2">
            <p> 选择时间 </p>
            <input class="datepicker3">
                                  
                
 
            require('datepicker');

            $('.datepicker').datepicker({
              language: 'zh-CN'
            });

            $('.datepicker2').datepicker({
              autoHide: true,
              format:'yyyy/mth'
            });

            $('.datepicker3').datepicker({
                needTime: true,
                format:'yyyy/mth/dd hh:mm:ss'
            }); 

                                  
                
Drag-panel
描述

拖拽面板插件,配合card(卡片)组件和flex(栅格)组件实现可拖拽面板;返回DragPanel方法,语法:DragPanel(config),或使用jquery插件语法:$el.dragPanel(config)

注意

兼容ie10+

配置
el 默认null,拖拽面板外边界,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
sortkey 默认"data-key",被拖拽元素的排序标识
dragable 默认".dragable",被拖拽元素
dragwrap 默认null,被拖拽元素的包裹元素,设置该项可实现多栏/多行效果
dragwrapLimitLength 默认1,每个包裹元素中的被拖拽元素最小数量限制
ondrag 默认无,拖拽结束回调,返回新的排序标识数据
showShadow 默认false,是否显示一个被拖拽元素的克隆元素
自动添加类

dragstart自动为el元素添加"drag-panel-wrap"类,为opt.dragable元素添加"drag-panel-active"类;

示例
 
                    <style>
                .drag-panel-active{opacity: .2;}
            </style>
            <div class="wrap">
                <div class="row" id="wrapper">
                    <div class="span-4 m dragable" data-key="1">
                        <div class="card card-shadow card-primary">
                            <div class="card-head">
                                <div class="card-title"> Hello Card1</div>
                            </div>
                            <div class="card-body">
                                mycard
                            </div>
                        </div>
                    </div>
                    <div class="span-4 m dragable" data-key="2">
                        <div class="card card-shadow card-primary">
                            <div class="card-head">
                                <div class="card-title"> Hello Card2</div>
                            </div>
                            <div class="card-body">
                                mycard
                            </div>
                        </div>
                    </div>
                    <div class="span-4 m dragable" data-key="3">
                        <div class="card card-shadow card-primary">
                            <div class="card-head">
                                <div class="card-title"> Hello Card3</div>
                            </div>
                            <div class="card-body">
                                mycard
                            </div>
                        </div>
                    </div>
                    <div class="span-4 m dragable" data-key="4">
                        <div class="card card-shadow card-primary">
                            <div class="card-head">
                                <div class="card-title"> Hello Card4</div>
                            </div>
                            <div class="card-body">
                                mycard
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                    
                
 
            require('drag-panel');
            $('#wrapper').dragPanel({
                ondrag: function(newSort) {
                    console.log(newSort);
                }
            });
                                    
                
drag
描述

拖拽插件,拖拽元素大于拖拽范围或者小于拖拽范围都可以,两种情况都支持边缘检测,返回Drag方法,语法:Drag(config),或者使用jquery插件语法:$el.drag(config);

配置
wrap

默认null,指定拖拽范围,默认选择父元素

el

默认null,拖拽元素

overflow

默认false,是否允许超出边缘,默认不允许

dragStart

默认null,拖拽开始回调 @param($el) : 拖拽元素

onDrag

默认null,拖拽过程回调 @param($el) : 拖拽元素

onMove

默认null,拖拽过程函数 @param(moveX, moveY) : 横向移动距离,纵向移动距离,将接管拖拽过程,元素位移不会发生变化

dragEnd

默认null,拖拽结束回调 @param($el) : 拖拽元素

handletouch 默认true,是否劫持触屏事件
onClick 默认无,当handletouch为true时常规click事件将失效,可以通过该配置添加click事件
示例
 
          <!--html-->
          <div class="drag" style="width:100px;height:100px;background:#434343;"></div>
                                    
                
 
          //js
          require('drag');
          $('.drag').drag({
            dragStart:function($this){
              console.log(1)
            },
            dragEnd:function($this){
              console.log(2)
            }
          });
                                
                
描述

下拉菜单插件,继承【tip】插件配置和方法,返回Dropdown方法,语法:Dropdown(config),或者使用jquery插件语法:$el.dropdown(config);

配置
el 默认null,制定触发元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
trigger 默认"hover",触发动作 hover | click | custom
place 默认"bottom-center"
items 默认[],下拉数据,必须,每一项必须是包含item属性的对象,此外可添加自定义属性,对象将在onclick回调中接收
width 默认无,可设置菜单最小宽度
theme 默认"dropdown-default",通过该hook可自定义下拉菜单皮肤
onclick 默认无,点击菜单项回调方法。@param(item, isCurrent) : 对应的items数据项,是否为当前已选项
返回方法
items([data]) 设置/获取当前实例的数据。
示例
 
            <div class="wrap">
                <div id="demo1" class="btn btn-success">菜单1</div> <div id="demo2" class="btn btn-warning">菜单2</div> 
            </div> 
                                    
                
 
            var Dropdown = require('dropdown');
            Dropdown({
                el: '#demo1',
                items: [{
                    item: '个人设置',
                    data: 'demo1'
                }, {
                    item: '数据统计',
                    data: 'demo1'
                }, {
                    item: '立即更新',
                    data: 'demo1'
                }],
                onclick: function(item){
                    console.log(item);
                }
            });

            $('#demo2').dropdown({
                items: [{
                    item: '个人设置',
                    data: 'demo2'
                }, {
                    item: '数据统计',
                    data: 'demo2'
                }, {
                    item: '立即更新',
                    data: 'demo2'
                }],
                onclick: function(item){
                    console.log(item);
                }
            });
                                    
                
easing
描述

扩展jquery.animate动画效果,来自jquery.easing.js,被scroll-colscroll-row插件依赖

效果包括:linear, swing, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce

示例
 
          require('easing');

          $(element).slideUp({
            duration: 1000, 
            easing: method, 
            complete: callback
          });

          $(element).animate({
            height:100
          },{
            duration: 1000, 
            easing: method, 
            complete: callback
          });
                                    
                
Echarts
描述

封装百度Echarts 4.0,包含类型:柱状图、饼状图、折线图、散点图、雷达图、热力图、地图、仪表盘、象形柱图;包含组件:标题、图例、提示框

详细用法见官方文档

兼容性

IE9+

示例
 
          <div id="main" style="width: 600px;height:400px;"></div>
                                 
                
 
          var echarts = require('echarts');
          // 基于准备好的DOM,初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));

          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: 'ECharts 入门示例'
              },
              tooltip: {},
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
              }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
                                 
                
etpl
描述

模板引擎,用于相对大量的视图渲染,文档详见项目主页

对于动态数据渲染场景,推荐基于etpl的渲染器Render

内置过滤器
html 默认过滤器,html转义
url url转义
raw 不进行任何转义
date 日期过滤,可选参数outFormat(默认'YYYY-MM-DD'), inFormat(默认'YYYY年MM月DD日')
dec 数字过滤,可选参数format(默认'#,###.00')
示例
 
          <!-- html -->
          <div class="demo"></div>
                                  
                
 
          var etpl=require('etpl');
          var render = etpl.compile('Hello ${name}!');
          var text = render({ name: 'etpl' });
          $('.demo').html(text);
                                  
                
img-loaded
描述

对目标区域内图片做加载完成检测

示例
 
          <!--html-->
          <div class="demo">
             <ul>
                <li><img src="http://lorempixel.com/442/548/?582" ></li>
                <li><img src="http://lorempixel.com/405/406/?324" ></li>
                <li><img src="http://lorempixel.com/374/330/?734" ></li>
             </ul>
          </div>
                                    
                
 
          //js
          require('img-loaded');
          $('.demo').imagesLoaded(function(){
             alert('加载完成');
          })
                                
                
img-ready
描述

能在图片下载完成之前检测到图片真实尺寸,返回方法接受三个参数分别是图片地址、检测完成回调,下载完成回调

示例
 
            <!-- html -->
            <img id="demo" src="http://lorempixel.com/442/548/?582">
                                    
                
 
          var ready = require('img-ready');
          ready($('#demo').attr('src'), 
            function(width,height){
              $('body').append($('<div>预取width:'+width+' height:'+height+'</div>'))
            }, function(width,height){
              $('body').append($('<div>加载完成!</div>'));
            }
          )
                                    
                
input-number
描述

数字输入框插件,继承【input】插件配置和方法(部分配置无效),支持标签data-options属性传参

$('.flow-ui-input-number')元素将自动初始化,并且支持data-config属性

配置
min 默认0,最小值
val 默认null,将沿用input元素初始值
countstep 默认1,每次加减数量
max 默认无限大,最大值
style 默认'default',可选'inline',计数器样式
onChange(val) 默认无,数值变更回调
返回方法

【输入框】组件。

示例
 
            <style type="text/css">
                .demo{width:200px;margin-bottom: 1em;}
            </style>                           
            <input type="text" name="count" class="demo mytest">

            <div class="demo flow-ui-input-number" data-options={"name":"countnumber"}></div>                  
                                      
            <button type="button" id="act1" class="btn btn-default">切换实例1禁用状态</button>  
                                    
                
 
            require('input-number');
            var mycount = $('.mytest').inputNumber({
                min:2,
                max:9,
                val: 5,
                style: 'inline',
                onChange: function(val) {
                    $('body').append('<p>实例1的值:' + val + '</p>');
                }
            });

            var disable = false;
            $('#act1').on('click',function(){
                disable = !disable;
                mycount.disabled(!disable);
            });
                                
                
input
描述

输入框插件,可以基于input、textarea标签生成文本框,也可以基于其他标签在其内部插入一个文本框,支持data-options属性传参

$('.flow-ui-input')元素将自动初始化,并且支持data-config属性

配置
color 默认"",情景色配置,可选"success""warning""danger"
id 默认自动生成随机id,指定生成input的id
width 默认无,组件宽度,默认继承目标元素的class定义的宽度
buttons 默认无,按钮配置,格式如下:
 
            [{
                text: '确定',
                click: function(){}
            }, {
                text: '清除',
                click: function(){}
            }]
                                            
                                
type 指定生成input的type类型,默认使用目标元素的type类型
holder 默认'',指定生成input的placeholder文字
val 默认null,不填将沿用input元素初始值
text 默认'',指定生成input的初始显示值
icon 默认'',指定icon编码,不传则不显示图标
iconPosition 默认'right', 图标位置,可选'left'
size 默认'',生成组件尺寸,可选'sm'/'lg'
name 默认'',指定input的name值,不传则不会添加或修改原始input的name属性
disable 默认false,是否禁用
readonly 默认false,是否只读
datatype 默认'',验证类型,不传将继承目标元素的datatype属性,释义同【validform组件】
errormsg 默认'',验证错误提示,不传将继承目标元素的errormsg属性,释义同【validform组件】
nullmsg 默认'',验证未填提示,不传将继承目标元素的nullmsg属性,释义同【validform组件】
render(val) 默认无,格式化方法,接收原始值,需返回格式化后的值,用于input组件展示
onChange(val) 默认无,监听输入变化回调,接收当前值
返回对象方法
disabled([flag]) 禁用input实例,若flag为真值将解禁
readonly([flag]) 只读input实例,若flag为真值将恢复可写
destroy() 销毁实例
clear() 清空输入
reset() 恢复实例为初始值
text([setValue]) 读取/设置实例显示值
val([setValue]) 读取/设置实例值
示例
 
            <style>
                .demo{display:inline-block;width:250px;vertical-align: bottom;}
            </style>                        
            <form class="wrap">  
                <!-- 基于input标签 -->
                <input type="text" name="input1" class="demo input1">
                <!-- 基于textarea标签 -->
                <textarea class="demo flow-ui-input" name="area1"></textarea>
                <!-- 基于其他标签 -->
                <div class="demo inputdiv flow-ui-input" data-options={"name":"input2"}></div>

                <button type="button" class="btn btn-default setreadonly">切换input1只读状态</button>
            </form>
                                    
                
 
            require('input');                  
            var myinput = $('.input1').input({
                buttons: [
                    {
                        text: '确定',
                        click:function(val, text){
                            console.log('val:',val);
                            console.log('text:',text);
                        }
                    },
                    {
                        text: '清除',
                        click:function(val, text){
                            myinput.clear();
                        }
                    }
                ],
                val:'100',
                holder: '输入金额',
                errormsg: '请输入整数!',
                datatype:'n',
                render:function(val){
                    return '$'+val;
                },
                onChange: function(val){
                    console.log('change to',val);
                }
            });

            var readable = true;
            $('.setreadonly').on('click',function(){
                readable = !readable;
                myinput.readonly(readable);
            });
                                    
                
instantclick
描述

链接预加载插件,详细应用方案查看【链接预加载】,文档参见官方文档

示例
                    
    var ic = require('instantclick');
    ic.init();
                    
                
label
描述

标签插件,可以用于标记和分类。返回 Label方法,语法:Label(config),或使用jquery插件语法:$el.label(config)

配置
el

默认 null,表格生成元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

color

默认 "primary",指定实例色调,支持【color】组件中所有颜色名称

data

默认 [],示例初始化数据,对象数据,对象必须包含 text属性

closable

默认 false,是否可关闭

type

默认null,标签类型,可选"bordered"

size

默认null,标签类型,可选"sm" | "lg"

onClose

默认null,标签关闭回调方法 @param(object) : 当前关闭标签的数据对象

返回方法
data([Array])

设置/获取标签数据

示例
 
            <div class="m demo"></div>
            <div class="btn btn-default add">add</div>
                                    
                
 
            require('label');
            var mytag = $('.demo').label({
                data: [{
                    text: '标签1',
                    name: 'tag1'
                }, {
                    text: '标签2',
                    name: 'tag2'
                }],
                closable: true,
                onClose: function(tag) {
                    console.log('delete:' + tag.text);
                }
            });
            $('.add').on('click', function(){
                var otag = mytag.data();
                otag.push({
                    text: '标签' + (otag.length + 1)
                });
                mytag.data(otag);
            });
                                    
                
lazyload
描述

图片懒加载插件,用于滚动时加载视窗内的图片或元素背景。返回LazyLoad方法,语法:LazyLoad(config),或使用jquery插件语法:$el.lazyload(config)

配置
el

默认 null,懒加载区域选择器,直接调用方法必填,jquery插件调用时可忽略,将默认应用$(this)

attr

默认 data-lazy,懒加载元素或图片存贮图片地址的属性。

everyCount

默认 3,每次加载的数量。

distance

默认 100,距离目标进入屏幕可见范围的开始加载的距离,单位px。

示例
 
          <style>
          .demo p{float:left; margin:20px; width:200px; height: 200px; background:#eee;background-position:center;}
          </style>
                                    
                    
          <div class="demo">
            <p><img data-lazy="http://temp.im/800x600/" ></p>
            <p><img data-lazy="http://temp.im/801x600/" ></p>
            <p><img data-lazy="http://temp.im/802x600/" ></p>
            <p><img data-lazy="http://temp.im/803x600/" ></p>
            <p><img data-lazy="http://temp.im/804x600/" ></p>
            <p><img data-lazy="http://temp.im/805x600/" ></p>
            <p><img data-lazy="http://temp.im/806x600/" ></p>
            <p><img data-lazy="http://temp.im/807x600/" ></p>
            <p><img data-lazy="http://temp.im/808x600/" ></p>
            <p><img data-lazy="http://temp.im/809x600/" ></p>
            <p><img data-lazy="http://temp.im/810x600/" ></p>
            <p><img data-lazy="http://temp.im/811x600/" ></p>
            <p><img data-lazy="http://temp.im/812x600/" ></p>
            <p><img data-lazy="http://temp.im/813x600/" ></p>
            <p><img data-lazy="http://temp.im/814x600/" ></p>
            <p><img data-lazy="http://temp.im/815x600/" ></p>
            <p><img data-lazy="http://temp.im/816x600/" ></p>
            <p><img data-lazy="http://temp.im/817x600/" ></p>
            <p><img data-lazy="http://temp.im/818x600/" ></p>
            <p><img data-lazy="http://temp.im/819x600/" ></p>
            <p><img data-lazy="http://temp.im/820x600/" ></p>
            <p><img data-lazy="http://temp.im/821x600/" ></p>
            <p><img data-lazy="http://temp.im/822x600/" ></p>
            <p><img data-lazy="http://temp.im/823x600/" ></p>
            <p><img data-lazy="http://temp.im/824x600/" ></p>
            <p><img data-lazy="http://temp.im/825x600/" ></p>
            <p><img data-lazy="http://temp.im/826x600/" ></p>
            <p><img data-lazy="http://temp.im/827x600/" ></p>
            <p><img data-lazy="http://temp.im/828x600/" ></p>
            <p><img data-lazy="http://temp.im/829x600/" ></p>
            <p><img data-lazy="http://temp.im/830x600/" ></p>
            <p><img data-lazy="http://temp.im/831x600/" ></p>
            <p><img data-lazy="http://temp.im/832x600/" ></p>
            <p><img data-lazy="http://temp.im/833x600/" ></p>
            <p><img data-lazy="http://temp.im/834x600/" ></p>
            <p data-lazy="http://temp.im/835x600/"> element </p>
          </div>
                                        
                
 
          //js
          require('lazyload');
          $('.demo').lazyload();
                                    
                
marquee
描述

跑马灯插件(横竖方向的匀速循环滚动)

配置
direction 滚动方向,可选"left/top",默认"top"
duration 单次滚动时长,单位ms,默认5000
pauseOnHover 悬停暂停,默认true
示例
 
            <style>
            .marquee{height:150px;border:1px solid blue;}
            .marquee2{width:150px;border:1px solid red;}
            </style>
                                        
                    
          <div class='marquee'>
            <p> cont1 </p>
            <p> cont2 </p>
            <p> cont3 </p>
            <p> cont4 </p>
            <p> cont5 </p>
            <p> cont6 </p>
            <p> cont7 </p>
            <p> cont8 </p>
            <p> cont9 </p>
          </div>
          <div class='marquee2'>
            这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字!!
          </div>
                                      
                
 
          require.async('marquee',function(){
            $('.marquee').marquee();
            $('.marquee2').marquee({
              direction:'left'
            });
          });
                                    
                
masonry
描述

瀑布流插件,封装自masonry

示例
 
          <style> 
            /*css*/
            .item { width: 200px; margin:10px;}
          </style>
                                  
                    
          <!--html-->
          <ul id="container">
            <li class="item">
              <img src="http://temp.im/200x100/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x400/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x300/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x600/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x100/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x400/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x300/">
            </li>
            <li class="item">
              <img src="http://temp.im/200x600/">
            </li>
          </ul>    
                                    
                
 
          require('masonry');
          require('img-loaded');

          var $container = $('#container'),win=$(window),loaded = true;
          //应用瀑布流
          $container.imagesLoaded(function(){
            $container.masonry({
              itemSelector: '.item'
            })
          });
          //滚动加载
          win.scroll(function scrollHandler(){
            if(loaded){
              var t=win.scrollTop(),
                h=win.height(),
                t1= $container.offset().top, 
                h1 =$container.outerHeight(true);

              if(t+h >= t1+h1){
                addItem(3);
              }
            }
          });
             
          //模拟动态加载数据
          function addItem(n) {
            loaded = false;
            var fragment =  '<li class="item">\
              <img src="http://temp.im/200x100/">\
            </li>\
            <li class="item">\
              <img src="http://temp.im/200x400/">\
            </li>\
            <li class="item">\
              <img src="http://temp.im/200x300/">\
            </li>';
            for ( var i = 0; i < n; i++ ) {
              fragment+=fragment;
            };
            $container.append($(fragment)).imagesLoaded(function(){
              $container.masonry("reload");
              loaded = true;
            });
          };
                                    
                
描述

为页面和功能提供导航的菜单列表,常用于网站顶部和左侧。返回Menu方法,语法:Menu(config),或者使用jquery插件语法:$el.menu(config)

配置
el 默认null,制定触发元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
data 默认无,菜单数据,必填
key 默认无,菜单项的唯一标识,必填
mode 默认"horizontal",菜单类型,可选值为 horizontal | vertical
theme 默认"primary",主题,可选值为 light、dark、primary
subicon 默认"&#xe609;",多重菜单标题右侧指示图标
actived 默认无,当前激活的菜单项key
opened 默认[],当前打开的菜单项key值组成的数组,horizontal模式只打开第一个
toggle 默认true,是否显示切换效果,只对vertical模式有效
onSelect 菜单切换时触发回调,@param(object, $item) : 当前数据对象,当前Dom对象
onClick 菜单点击回调,@param(object, $item, isCurrent) : 当前数据对象,当前Dom对象,是否已选中
返回方法
open(key) 打开指定key值的项
active(key) 激活指定key值的项
示例
 
            <div class="wrap">
                <nav id="menu"></nav>
                <div class="btn btn-default menu-open">打开子菜单</div>
                <div class="btn btn-default menu-active">激活第三项</div>
            </div>
                                    
                
 
            var Menu = require('menu');
            var mymenu = Menu({
                el:'#menu',
                //theme: 'dark',
                data: [
                    {
                        item: '<i class="ion">&#xe64a;</i>首页',
                        id: 1
                    },{
                        item: '订单',
                        id: 2
                    },{
                        item: '会员',
                        id: 3,
                        sub:[
                            {
                                item: '会员统计',
                                id: 30
                            },{
                                item: '会员群发',
                                id: 31
                            },{
                                item: '会员管理',
                                id: 32
                            }
                        ]
                    },{
                        item: '店铺',
                        id: 4
                    },{
                        item: '系统',
                        id: 5
                    }
                ],
                key: 'id',
                actived: 1,
                toggle: false,
                onSelect: function(object, item){
                    console.log(object, item);
                }
            });
            
            $('.menu-open').on('click', function(){
                mymenu.open(3);
            });
            $('.menu-active').on('click', function(){
                mymenu.active(4);
            });
                                    
                
mousemenu
描述

自定义鼠标右键,支持菜单内分组,调用格式为 $target.mousemenu( data, option )

配置
name 将作为菜单id的后缀,以区别多组菜单,只有一组可省略
offsetX 默认2,单位px,菜单左上角距点击位置横向距离
offsetY 默认2,单位px,菜单左上角距点击位置纵向距离
textLimit 默认6,菜单项显示文字个数,超出显示省略号
beforeShow 菜单显示前回调
afterShow 菜单显示后回调
broke 用于点击时做条件判断,返回真值将阻止本次弹出
示例
 
          <style>
          /*css*/
          .demo{height: 400px;border:1px solid #ccc;line-height: 400px;text-align: center;}
          </style>
                                      
                    
          <!-- html -->
          <div class="demo">测试区域</div>
                                      
                
 
          require('mousemenu');
          $('.demo').mousemenu(
              [
                  [{
                      text: "组1-1",
                      func: function() {
                        alert("组1-1");
                      }
                  }, {
                      text: "组1-2",
                      func: function() {
                        alert("组1-2");
                      }
                  }],
                  [{
                      text: "组2-1",
                      func: function() {
                        alert("组2-1");
                      }
                  }, {
                      text: "组2-2",
                      func: function() {
                        alert("组2-2");
                      }
                  }]
              ], {
                  //配置
              }
          );
                                  
                
mousetrap
描述

按键监听

示例
 
          <!-- html -->
          <div class="demo">
            <p>单按键:按"a"或"?"或"esc"</p>
            <p>功能键:按"ctrl+shift+k"</p>
            <p>多组按键绑定同一个事件:按"command k" 或者 "control k"</p>
            <p>组合键:试试"up up down down left right left right b a enter"</p>
          </div>
                                    
                
 
          //js
          require.async('mousetrap',function(){
            // 单按键
            Mousetrap.bind('a', function() { 
              alert('a');
            });
            Mousetrap.bind("?", function() { 
              alert('show shortcuts!');
            });
            Mousetrap.bind('esc', function() { 
              //阻止浏览器默认事件
              if (e.preventDefault) {
                  e.preventDefault();
              } else {
                  e.returnValue = false;
              }
              alert('退出?');
            }, 'keyup');
           
            // 功能键
            Mousetrap.bind('ctrl+shift+k', function() { 
              alert('command shift k');
            });

            // 多组按键绑定相同事件
            Mousetrap.bind(['command+k', 'ctrl+k'], function() {
                alert('command k 或者 control k');
                return false; //取消系统默认事件
            });
           
            // 组合键
            Mousetrap.bind('up up down down left right left right b a enter', function() {
                alert("哇咔咔!");
            });
          });
                          
                                    
                
mousewheel
描述

鼠标滚轮监听,回调函数的event包含三个属性:deltaX,deltaY,deltaFactor;分别代表横向滚动方向,纵向滚动方向,滚动长度(不同浏览器下该值不一致)

示例
 
          <style>
          /*css*/
          .demo,.control{height: 200px;overflow: auto;border:1px solid #ccc;margin:10px;}
          </style>
                                    
                    
          <!-- html -->
          <div class="demo">
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>滚动测试<br>
          </div>
          <div class="control"></div>
                                    
                
 
          //js
          require('mousewheel');
          //开始监听
          $('.demo').on('mousewheel', function(event) {
              $('.control').append('<p>'+event.deltaX+', '+event.deltaY+', '+event.deltaFactor+'</p>');
          });
          //停止监听
          setTimeout(function(){
              $('.demo').unmousewheel();
              $('.control').text('监听事件已卸载!');
          },5e3)
                                    
                
Notice
描述

在界面右上角显示可关闭的全局通知,常用于以下场景:通知内容带有描述信息、系统主动推送。返回Notice方法

配置
title 默认"",通知提醒的标题
desc 默认"",通知提醒的内容,为空或不填时,自动应用仅标题模式下的样式
color 默认"primary",主题色,支持【颜色】组件中所有的颜色
delay 默认0,自动关闭的延时,单位毫秒
onClose 默认无,关闭时的回调
返回方法
obj.hide() 关闭当前notice实例
示例
 
            <div class="wrap">
                <div class="btn btn-primary open">打开notice</div>
            </div> 
                                    
                
 
            var Notice = require('notice');
            var colors = ['primary', 'success', 'info', 'warning', 'danger'];
            var count = 0;

            $('.open').on('click',function(){
                Notice({
                    title: '这是标题' + parseInt(Math.random() * 1e6),
                    desc: '这里是描述',
                    color: colors[count],
                    delay: 3000
                });
                count++;
                if(count===colors.length){
                    count = 0;
                }
            });
                                    
                
offcanvas
描述

侧边伸缩导航菜单插件,多用于移动端导航,导航必须具有id属性,与导航控制按钮的href属性相同。

注意
  1. 为避免插件加载期间导航错乱闪现,可以先用样式将导航隐藏,插件运行后会清除原样式。
  2. 使用点击预加载方案(PJAX)的情况下菜单会出现点击不收回的情况,需要在使用时增加配置:{ onClick:{ close:true}}
配置
position 默认 "left",菜单位置,可选 top || right || bottom
zposition 默认 "front",菜单层次,可选 next
slidingSubmenus 默认横向(true),菜单展开方向,true || false
isMenu 默认 true,是否按导航结构初始化,自定义结构和样式需要设为false
classes 默认 "mm-black",主题class, 可选 mm-light || mm-white
示例
 
          <nav class="demo hide" id="menu">
            <ul>
              <li><a href="/1">导航</a> </li>
              <li><a href="/2">导航2</a>
                    <ul>
                        <li><a href="/#2">二级</a></li>
                        <li><a href="/#2">二级</a></li>
                        <li><a href="/#2">二级</a></li>
                    </ul>
                 </li>
                 <li><a href="/3">导航3</a>
                    <ul>
                        <li><a href="/#2">二级</a></li>
                        <li><a href="/#2">二级</a></li>
                        <li><a href="/#2">二级</a></li>
                    </ul>
                 </li>
                 <li><a href="/4">导航4</a>
                    <ul>
                        <li><a href="/#2">二级</a></li>
                        <li><a href="/#2">二级</a></li>
                        <li><a href="/#2">二级</a></li>
                    </ul>
                 </li>
             </ul>
          </nav>
          <a href="#menu" class="btn btn-default mobile_key">导航控制按钮</a>  <!--导航控制按钮-->
                                    
                
 
          //js
          require('offcanvas');
          $('.demo').offcanvas();
                                    
                
on-scroll
描述

监听指定元素随页面滚动出现在视野中的事件,返回onScroll方法,语法:onScroll(config),或者使用jquery插件语法:$el.onScroll(config);

可用于长页面懒加载;当指定元素为多个时,还可以关联定位(target)元素,实现滚动导航;当target元素向上滚出视野时,将为target元素或指定的targetFix元素添加fixed类,用于实现固定在页面顶部效果。

配置
el 默认无,监听元素选择器,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
offset 可选,顶部位置计算偏移量,默认0
target 可选,绑定目标,jquery选择器格式,默认无
targetCell 可选,绑定目标子元素类型,默认'li'
targetFix 可选,设置将添加fixed类的元素,通常是target的外层
speed 可选,滚动动画时间,单位ms,默认300
onshow 可选,元素第一次出现在视野的回调,默认无
ontop 可选,当配置了target时,元素第一次与target距离为offset时触发,默认无
示例
 
    <!-- html -->
    <style>
        .target_wrap {
            height: 42px;
        }
        
        .demo_Target {
            width: 980px;
            margin: 0 auto;
            overflow: hidden;
            *zoom: 1;
            background: #fff;
            border-left: 1px solid #eee;
        }
        
        .demo_Target li {
            float: left;
            height: 40px;
            line-height: 40px;
            border: 1px solid #eee;
            margin-left: -1px;
            width: 33%;
            text-align: center;
            cursor: pointer;
        }
        
        .demo_Target.fixed {
            position: fixed;
            left: 50%;
            margin-left: -490px;
            top: 0;
            z-index: 99;
        }
        
        .demo_Target .active {
            color: #39f;
            background: #eee;
        }
        
        .demo_sections {
            width: 978px;
            border: 1px solid #ccc;
            padding: 2em 0;
            margin: 2em auto;
            height: 800px;
        }
        
        .lazyPush {
            height: 400px;
        }
    </style>

    <div class="target_wrap">
        <ul class="demo_Target">
            <li>channel01</li>
            <li>channel02</li>
            <li>channel03</li>
        </ul>
    </div>
    <div class="demo_sections">
        anything...1
        <textarea class="hide">
            <img src="http://temp.im/500x400/">
          </textarea>
    </div>
    <div class="demo_sections">
        anything...2
        <textarea class="hide">
            <img src="http://temp.im/500x400/">
          </textarea>
    </div>
    <div class="demo_sections">
        anything...3
        <textarea class="hide">
            <img src="http://temp.im/500x400/">
          </textarea>
    </div>
                    
                
                    
    var responsive = require('responsive');
    require('on-scroll');
    $('.demo_sections').onScroll({
        offset: 42,
        target: '.demo_Target',
        onshow: function(elem, index) {
            responsive.topush(elem, function() {
                console.log('元素' + index + '懒加载完成');
            });
        },
        ontop: function(elem, index){
            console.log('ele' + index + '就位');
        }
    }); 
                    
                
page
描述

按指定配置生成分页组件,返回Page方法,语法:Page(config),或者使用jquery插件语法:$el.page(config);

配置
el 默认无,必填,分页展示容器,jquery选择器格式,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
current 默认1,当前页码
showNum 默认5,显示页数
total 默认无,必填,总页数
holder 默认'...',翻篇占位符
hook 默认无,自定义样式钩子
onChange 默认无,页码改变回调,参数接收点击页码
size 默认'normal',内置尺寸,可选'sm / lg'
auto 默认true,是否自动渲染当前状态
返回方法
set(obj) 更改显示状态,obj只接受三个属性:current,total,pageSize
示例
 
                    
    <div class="wrap">
        <div class="demo"></div>
        <div class="btn btn-primary set1">设置页码为1</div>
      </div>
                    
                
                    
    var page = require('page');
    var pageObj = page({
        el: '.demo',
        total: 10,
        onChange: function(page) {
            console.log(page);
        }
    });

    $('.set1').on('click', function() {
        console.log(pageObj)
        pageObj.set({
            current: 1
        });
    });
                    
                
paging-load
描述

自动生成分页参数的请求方法,调用后返回当前分页加载实例,约定异步数据格式为json,必须包含datacount字段,分别代表每页数据和数据总条数。

配置
method 默认"get",请求方法
url 默认无,必填,分页请求地址
size 默认6,每页条数,服务端将接收到此参数的实际key为"page_size"
data 默认{},请求参数,不得包含"page_index"和"page_size"键
success ajax成功回调
nomore 没有更多回调
error ajax错误回调
实例方法
load([callback])

加载新的一页,参数中将包含从1开始累加的"page_index"值,@param([callback]) : 加载完成后回调方法,若参数中的success/nomore方法明确return则该回调不执行。

reload([hold], [data], [callback])

将当前实例的页码重置为初始值。若hold为真值只重置不请求,若data为对象格式将合并到当前参数中。

destroy()

销毁当前实例

示例
 
            <div class="m">打开控制台查看网络请求</div>
            <div class="btn btn-default pagingLoad">分页加载</div>
            <div class="btn btn-default reload">分页重新加载</div>
            <div class="btn btn-default destroy">销毁分页加载实例</div>

                                    
                
 
            var pagingLoad = require('paging-load');
            var myload = pagingLoad({
                url: 'http://rap.taobao.org/mockjsdata/1101/core/citylist/',
                data: {
                    "method": "test"
                },
                success: function(data) {
                    console.log(data);
                }
            });

            $('.pagingLoad').on('click', function() {
                myload.load();
            });
            
            $('.reload').on('click', function(){
                myload.reload();
            });

            $('.destroy').on('click', function(){
                myload.destroy();
            });
                                    
                
progress
描述

展示操作或任务的当前进度,比如上传文件。

配置
el

默认 null,进度条容器元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

persent

默认 0,初始化实例进度,取值0-100

color

默认 "primary",进度条色调,支持【color】组件的所有颜色

active

默认 true,实例是否为激活状态(动态光影),当persent值达到100后自动设为 false

height

默认 0,进度条宽度,默认将采用组件默认

showInfo

默认 true,是否显示进度信息

infoRender

进度信息渲染方法,param(persent, entity) : 当前进度值,当前实例方法。

默认: function(persent, entity) { return persent + '%'; }

entity只有一个 color()方法,用法同下文【返回方法】

返回方法
persent([value]) 设置/获取当前进度
color([value]) 设置/获取当前实例色调
active([value]) 设置/获取当前实例激活状态
destroy() 销毁实例
示例
 
            <div class="wrap">
                <div class="row">
                    <div class="span-6 m-tb demo"></div>
                </div>
                <div class="btn btn-default add">+</div>
                <div class="btn btn-default min">-</div>
                <div class="btn btn-default toggle">切换激活状态</div>
            </div>
                                    
                
 
            require('progress');                 
            var myprog = $('.demo').progress({
                persent: 50,
                infoRender: function(persent, entity){
                    if(persent===100){
                        entity.color('success');
                        return '<i class="ion">&#xe924;</i>成功';
                    }else{
                        entity.color('info');
                        return persent + '%';
                    }
                }
            });


            $('.add').on('click', function(){
                myprog.persent(myprog.persent() + 10);
            });  
            $('.min').on('click', function(){
                myprog.persent(myprog.persent() - 10);
            });    
            $('.toggle').on('click', function(){
                myprog.active(!myprog.active());
            });     
                                    
                
qr
描述

生成二维码,封装自davidshimjs/qrcodejs

示例
 
          <style>
            #qr_container{position: fixed;right:10px;bottom:10px;text-align: center;}
          </style>
                                    
                    
          <div id="qr_container"> 微信扫描查看或分享 </div>
                                    
                
 
          //js
          var qr = require('qr');
             
          var qrcode = new qr(document.getElementById("qr_container"), {
            text: "http://www.jerei.com",             // 生成内容
            width: 128,                               // 宽
            height: 128,                              // 高
            colorDark : "#000000",                    // 颜色
            colorLight : "#ffffff",                   // 背景色
            correctLevel : qr.CorrectLevel.H          // 容错级别 L|M|Q|H
          });

          //qrcode.clear();                           // clear the code.
          //qrcode.makeCode("http://naver.com");      // make another code.
                                    
                
responsive
描述

响应式工具包,包含想响应式所需的js功能

getType([callback])

获取当前设备类型,回调函数可选,当无回调时返回字符串('Pc','Pad','Mobile'),有回调时回调接受返回字符串为参数:

 
           var resp = require('responsive');
           //无回调
           var type=resp.getType();      //"Pc" || "Pad" || "Mobile"
           
           //有回调
           resp.getType(function(type){
              alert(type);                //"Pc" || "Pad" || "Mobile"
           })
           
                                                
                                
getOrient([callback])

获取移动设备屏幕方向,回调函数可选,当无回调时返回字符串('Heng','Shu'),有回调时回调函数将持续监听屏幕方向变化,并接受屏幕方向为参数:

 
           var resp = require('responsive');
           //无回调
           var orient=resp.getOrient();// "Heng" || "Shu"
           
           //有回调
           resp.getOrient(function(orient){
              alert(orient);// 每次旋转屏幕都将alert "Heng" 或 "Shu"
           })
                                                
                                
resImg(bigSrc, [filter])

全局图片响应方法

图片的src将在手机端显示,bigSrc参数指定存放大图的自定义属性,可省,默认"data-src","data-src"图片地址将在pc和pad端显示。

filter参数传入响应图片的范围,可省,默认检索整个页面。

 
            <img src="small.jpg" data-src="big.jpg" /> 
                                                
                                    
            var resp = require('responsive');
            resp.resImg();
                                                
                                
topush(DOM,callback)

<textarea>标签在页面中具有延迟渲染的特性,因此是一个天然的缓存容器,只要将自身隐藏,便实现了html5 template标签的特性,唯一的问题是使用<textarea>暂存的代码中不能包含另一个<textarea>,否则会造成暂存标签意外闭合,这时也可以选择<script type="text/template">标签代替,它和textarea标签的作用是等价的,并且script标签自身就是不可见的,无须手动隐藏:

 
             <!--textarea标签暂存页面片段-->
             <div class="demo topush">
                <textarea class="hide">
                  <a href="#">暂存的页面片段</a>
                  <a href="#">暂存的页面片段</a>
                  <a href="#">暂存的页面片段</a>
                </textarea>
             </div>
                                            
                                    
             <!--script标签暂存页面片段-->
             <div class="demo topush">
                <script type="text/template">
                  <a href="#">暂存的页面片段</a>
                  <a href="#">暂存的页面片段</a>
                  <a href="#">暂存的页面片段</a>
                </script>
             </div>
                                            
                                

resp.topush(DOM,callback)方法专门用来取出暂存标签中的html片段(或发起Ajax)插入到外层元素中,两个参数分别是指定外层元素和取出后的回调函数,均为可选,DOM默认.topush

加载后的dom会添加pushed类,用来标记暂存代码已经取出。

示例:

 
           <!--发起Ajax的例子-->
           <div class="demo topush">
              <textarea class="hide" data-url="http://host.refined-x.com/test/ajax.php"> </textarea>
           </div>
                                                
                                    
            var resp = require('responsive');
           //无参数调用,显示所有".topush"元素中的暂存代码
           resp.topush();  
           
           //有回调                  
           resp.topush(function(e){           
              console.log(e.attr('class')) //"topush ..."
           });
           
           //指定渲染目标                 
           resp.topush('.demo');
           
           //传入两个参数
           resp.topush('.demo',function(e){    
              console.log(e.html())//.demo 渲染后的html
           });     
                                              
                                
scanpush()

resp.scanpush()方法会扫描页面上具有延迟渲染类名的元素,并按规则对其渲染。

预置的四个按需渲染类是:.PcPush,.UnpcPush,.MobilePush,.UnmobilePush, 分别代表“只有Pc渲染”,“只有非Pc渲染”,“只有手机渲染”,“只有非手机渲染”,渲染完成后会触发该元素的渲染类同名事件,用 $(DOM).on('PcPush'/'UnpcPush'/'MobilePush'/'UnmobilePush')可以捕捉到,事件也会冒泡到body上。

并且这四个类元素下的textarea标签将自动隐藏,不需要手动加隐藏类。

示例:

 
          <!-- html -->
         <div class="PcPush">
            <textarea>
               只在Pc显示
            </textarea>
         </div>
         
         <div class="UnpcPush">
            <textarea>
               除了Pc都显示
            </textarea>
         </div>
                                               
                                
 
            //js
            var resp = require('responsive');
            $('body').on('PcPush',function(){
                console.log( 'PcPush已经被渲染了' )
            })
            $('body').on('UnpcPush',function(){
                console.log( '.UnpcPush已经被渲染了' )
            })

            resp.scanpush();
          
                                               
                                
render
描述

创建一个数据->模板的单项绑定渲染器,返回Render方法,语法var myRender = Render(confg)

依赖etpl模块

配置
el

默认null,模板填充元素,必填

template

默认'',etpl模板字符串,默认将寻找el内具有[template]属性的元素,将其value或innerText作为模板字符串,建议用textarea/script元素作为模板容器

data

默认null,将作为初始化模板数据

reload

默认true,决定以.html()/.append()的方式填充模板

etplConfig

默认null,etpl模板引擎配置

callback(targetElement, renderData)

默认null,渲染完成后回调方法。targetElement是渲染目标元素,renderData是渲染所用数据

返回方法
set(config)

修改渲染器配置,通产用来修改reload模式和callback回调

data([setData])

为渲染器赋值/取值,使用新数据渲染的结果将同步到容器元素

push(node, arrayData)

向node节点下的数组插入arrayData数据,如果node节点不存在或格式不是数组,将先设置为空数组。使用新数据渲染的结果将同步到容器元素

destroy()

销毁示例移除容器元素

示例
                    
    <div class="p" id="wrap">
        <textarea style="display: none" template>
        render result: ${time}
        </textarea>
    </div>
    <div class="p">
        <div class="btn btn-default setIntval">暂停/恢复</div>
        <div class="btn btn-default setReload">重载/填充</div>
        <div class="btn btn-default destroy">销毁</div>
    </div>
                    
                
                    
    var render = require('render');
    var myRender = render({
        el: '#wrap',
        reload: reload,
        callback: function($el, html) {
            console.log(html);
        }
    });
    var reload = true;
    var int = setInterval(function() {
        myRender.data({
            time: new Date()
        });
    }, 1000);

    $('.setIntval').on('click', function() {
        if (int) {
            int = clearInterval(int);
        } else {
            int = setInterval(function() {
                myRender.data({
                    time: new Date()
                });
            }, 1000)
        }
    });
    $('.setReload').on('click', function(){
        reload = !reload;
        myRender.set({
            reload: reload
        });
    });
    $('.destroy').on('click', function(){
        myRender.destroy();
    });
                    
                
scroll-bar
描述

滚动条美化插件,支持横向和纵向、滚动条自动隐藏、样式自定义。

注意

内容元素不能有可向上传导的margin-top属性,否则会干扰滚动定位。

配置
wrap 包裹元素,默认不指定,将插入div.scroll_cont
monitor 否监听内容变化(用于多插件协作),布尔值,默认false
keyway 按钮键程,默认30(px)
width 滚动条宽度,默认8(px)
btnLength 按钮长度,默认0(不显示按钮)
btnBreadth 按钮宽度,默认与滚动条同宽
sliderWidth 滑块宽度,默认与滚动条同宽
hideBar 自动隐藏滚动条,鼠标进入显示,默认false
ontop 滚动到顶部触发的回调,默认无
onend 滚动到底部触发的回调,默认无
示例
 
          <style>
          /*css*/
          .demo{position:relative;overflow:hidden;height:320px;max-width: 480px;margin:10px auto;}
          .demo .scroll_cont{background: yellow;}
          .demo .scroll_cont img{max-width: none;}
          </style>
                                      
                    
          <!--html-->
          <div class="demo demo1">
             <img src="http://temp.im/480x480/"><br/>
             content conten ontentcontent1<br/>
             content7<br/>
             content conten ontentcontent1<br/>
             content7<br/>
          </div>
          <div class="demo demo2">
             <img src="http://temp.im/900x320/"><br/>
          </div>
                                    
                
 
          //js
          require('scroll-bar');
          $('.demo1').scrollBar();
          $('.demo2').scrollBar({
              overflow: "x"
          });
                                    
                
scroll-col
描述

横向滚动,支持触屏和半响应; 需指定滚动元素宽度和效果容器高度。

内置hero模式,用于全屏轮显焦点图,三张居中轮显。通常该模式的样式为.demo不设宽度(即全屏宽度),.demo li普通banner宽度(如980px);

内置unloop模式,不循环滚动,用于做大事记类的时间轴效果;

注意
  1. 效果自动计算间距("margin-right"),样式设置的右间距将被覆盖,或者作为效果无法运行时的后备样式。
  2. 当显示数+滚动步幅>=元素总数时效果不可用
配置
direct 自动播放方向,可选left | right
mode 模式,默认无,可选 hero(全屏三图滚动) | unloop(不循环)
num 滚动个数,默认99,即能显示几个显示几个
auto 默认true,自动播放
interval 默认5000,单位ms,自动播放间隔
duration 默认640,单位ms,单次滚动持续时长
animate 默认‘swing’,滚动效果,来自jquery.easing
step 默认1,每次滚动个数
wrap 默认‘ul’,指定滚动包裹元素
cell 默认‘li’,指定滚动元素
prev 指定向左按钮,默认无,将自动插入 '.arrs .arr_prev'元素
next 指定向右按钮,默认无,将自动插入 '.arrs .arr_next'元素
handletouch 默认false,是否劫持触屏事件
callback 回调 @param (nowStep)
ext 扩展 @param (this, showNumber, allStep)
示例
 
          <style>
          .demo {height: 10em; width:32em; display:none;margin-bottom:2em;}
          .demo li {width:10em; background:yellow;}
          .demo .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
          .demo .arr_prev{left:0;}
          .demo .arr_next{right:0;}
          .demo .scroll_nav{position:absolute;left:0;top:0;}
          .demo .scroll_nav .on{color:#39f;}
          </style>             
                                    
                    
          <h4>普通模式</h4>      
          <div class="demo">
             <ul>
                <li><img src="http://temp.im/300x301/" /></li>
                <li><img src="http://temp.im/300x302/" /></li>
                <li><img src="http://temp.im/300x303/" /></li>
                <li><img src="http://temp.im/300x304/" /></li>
                <li><img src="http://temp.im/300x305/" /></li>
             </ul>
          </div>
                                    
                    
          <style>
          .demo-hero { display:none;}
          .demo-hero li {width:980px; background:yellow;}
          .demo-hero .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
          .demo-hero .arr_prev{left:0;}
          .demo-hero .arr_next{right:0;}
          </style>
                                    
                    
          <h4>hero模式</h4>  
          <div class="demo-hero">
             <ul>
                <li><img src="http://temp.im/980x301/" /></li>
                <li><img src="http://temp.im/980x302/" /></li>
                <li><img src="http://temp.im/980x303/" /></li>
                <li><img src="http://temp.im/980x304/" /></li>
                <li><img src="http://temp.im/980x305/" /></li>
             </ul>
          </div>
          <span class="button myback">back</span><span class="button myforward">forward</span>
                                    
                
 
          //js
          require('scroll-col');

          $('.demo').scrollCol();

          $('.demo-hero').scrollCol({
            mode: 'hero',
            prev: '.myback',
            next: '.myforward'
          });
                                    
                
scroll-load
描述

监听元素滚动到底部事件,返回scrollLoad方法,语法scrollLoad(config),或使用jQuery语法格式$el.scrollLoad(config)

配置
el 默认null,要监听的元素,使用jQuery语法可省略
distance 默认70,距离底部开始加载的距离,单位px
callback(scrollStop) 默认无,滚动到底部回调,参数接收终止加载方法,需手动调用
force 默认false,当对同一个元素多次调用时,可以卸载并重新绑定滚动监听
loadingTemplate 默认'<div class="scrollLoadSpinning"><span class="_spin"></span></div>',加载条html
返回方法

重复绑定或不合法配置将返回null

destroy 销毁监听实例
示例
 
            <div class="cont" style="width:200px;height: 200px; line-height:2;border:1px solid #ccc;overflow: auto;"></div>
                                    
                
 
            var testdata = '<p>test data</p>',
                cont = $('.cont'),
                getData = function(length){
                    var i = 0,
                        len = length || 10,
                        r = '';
                    for(; i<len; i++){
                        r += testdata;
                    }
                    return r;
                };

            cont.html(getData());
            require.async('scroll-load',function(){
                cont.scrollLoad({
                    callback:function(scrollStop){
                        setTimeout(function(){
                            cont.append(getData());
                            scrollStop();   //加载完成后执行scrollStop方法,终止加载状态
                        },1000);
                    }
                });
            });
                                    
                
scroll-row
描述

垂直方向整行滚动。可以处理多列情况,默认添加内部按钮, 如果需要外部按钮可以指定自行添加的按钮。

配置
prev 指定向上箭头,默认无,将添加 '.arrs .arr_prev'
next 指定向下箭头,默认无,将添加 '.arrs .arr_next'
wrap 默认ul,指定包裹元素
cell 默认li,指定列表元素
line 滚动行数
duration 滚动时长,默认460,单位ms
animate 默认'swing',动画曲线,来自jquery.easing
auto 默认true,自动滚动
pause 默认true,自动滚动时是否悬浮暂停
interval 自动播放间隔,默认5000,单位ms
callback 滚动回调,@param (nowRow) :当前所在页数
ext 扩展方法,@param (totalRow) :总页数
示例
 
          <style>
          .demo { position: relative; width: 320px; height: 22em; overflow: hidden; }
          .demo li{ height: 10em; overflow: hidden; margin-bottom:1em; background:yellow; }
          .demo .arrs{position: absolute; right:0; width:1.5em;height: 1.5em;background: grey;}
          .demo .arr_prev{top:0;}
          .demo .arr_next{top:2em;}
          </style>
                                  
                    
          <div class="demo">
             <ul class="row">
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/300x300/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/400x400/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/500x500/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/300x300/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/400x400/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/500x500/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/300x300/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/400x400/" /></li>
                <li class="span-4 midd-6 smal-12"><img src="http://temp.im/500x500/" /></li>
             </ul>
          </div>
          <div class="myprev">prev</div>
          <div class="mynext">next</div>
                                    
                
 
          //js
          require('scroll-row');
          $('.demo').scrollRow({
            prev:'.myprev',
            next:'.mynext'
          })
                                    
                
select
描述

下拉框插件,使用模拟的增强下拉选择器来代替浏览器原生的选择器。 选择器支持单选、多选、搜索,以及键盘快捷操作。

返回Select方法,语法Select(config),或使用jquery插件语法$el.select(config)

配置
data 默认无,将优先使用数据初始化select元素,数据格式见示例
posi 默认"bottom",下拉方向,可选"top"和"auto","auto"会计算下拉框距离屏幕上下两端的尺寸,向空间大的一边展开。
hideSelected 默认false,是否隐藏已经选中的项
hideDisabled 默认true,是否隐藏不可用的项
act 默认"click",下拉触发动作,可选 "mouseenter"
filterable 默认false,是否支持搜索
domsafe 默认false,若为true将不更新原始select标签的值
hook 默认'',自定义样式钩子
name 默认'select',当基于非select标签创建实例时,指定生成的select标签name
disabled 默认false,是否禁用
readonly 默认false,是否只读
multi 默认false,是否可以多选
onChange(value,text) 选中回调,参数接收最新的value和text
format(textArray) 级联选择文字显示格式,默认return textArray.join(' / ');
返回对象

所返回的操作句柄包含以下方法:

update([data]) 用于更新实例数据,参数接收数组类型数据,没有参数将从DOM节点中收集数据
disabled([flag]) 禁用实例,若flag为真值将解禁
readonly([flag]) 只读实例,若flag为真值将恢复可写
destroy() 销毁实例
clear() 清空输入
reset([flag]) 恢复实例为初始值,若flag为真值将不触发onChange事件
text([setValue]) 读取/设置实例显示值
val([setValue]) 读取/设置实例值,多选情况下赋值支持数组和字符串两种格式,字符串多个值用,隔开
示例
 
          <style>
          .demo, button{display: block; width: 200px; margin:10px;}
          </style>
          <form id="test" >
            <!-- 基于select初始化 -->
            <select class="demo demo-fromdom" name="select1" >
              <option disabled>--请选择--</option>
              <option value="1">山东</option>
              <option value="2">山西</option>
              <option value="3">河南</option>
            </select>
            <!-- 使用数据初始化 -->
            <select class="demo demo-fromdata" name="select2">
              <option disabled>--请选择--</option>
            </select>
            <!-- 基于非select初始化 -->
            <div class="demo demo-insert"> </div>

            <div class="demo demo-cascader"> </div>

            <button class="btn btn-default set1" type="button">切换select1禁用状态</button>
            <button class="btn btn-default set2" type="button">更新select2数据</button>
            <button class="btn btn-default set4" type="button">设置select4的值</button>
            <button class="btn btn-default" type="submit">提交</button>
          </form>
                                    
                
 
            var Select = require('select');
            var dataAjax = [{
                "option": "济南",
                "value": "jinan"
            }, {
                "option": "烟台",
                "value": "yantai",
                "selected": true
            }, {
                "option": "青岛",
                "value": "qingdao"
            }];

            var select1 = $('.demo-fromdom').select({
                val: [1, 2],
                multi: true,
                onChange: function(value, text) {
                    console.log('select1值更新为', value);
                }
            });

            var select2 = $('.demo-fromdata').select({
                onChange: function(val, txt) {
                    console.log('select2选中了' + txt);
                }
            });

            var select3 = $('.demo-insert').select({
                filterable: true,
                data: dataAjax,
                onChange: function(val, txt) {
                    console.log('select3选中了' + txt);
                }
            });

            var select4 = Select({
                el:'.demo-cascader',
                data: [{
                    "option": "山东",
                    "value": "shandong",
                    "children": [{
                        "option": "济南",
                        "value": "jinan"
                    }, {
                        "option": "烟台",
                        "value": "yantai",
                        "children": [{
                            "option": '莱山',
                            "value": 'laishan'
                        }, {
                            "option": '芝罘',
                            "value": 'zhifu'
                        }, {
                            "option": '开发区',
                            "value": 'kaifaqu'
                        }, {
                            "option": '福山',
                            "value": 'fushan'
                        }, {
                            "option": '牟平',
                            "value": 'muping'
                        }]
                    }, {
                        "option": "青岛",
                        "value": "qingdao",
                        "children": [{
                            "option": '崂山',
                            "value": 'laoshan'
                        }, {
                            "option": '四方',
                            "value": 'sifang'
                        }]
                    }]
                },{
                    "option": "江苏",
                    "value": "jiangsu",
                    "children": [{
                        "option": "浙江",
                        "value": "zhejiang"
                    },{
                        "option": "杭州",
                        "value": "hangzhou"
                    },{
                        "option": "南京",
                        "value": "nanjing"
                    }]
                }],
                onChange: function(value, text) {
                    console.log(value, text);
                }
            });

            //提交测试
            $('#test').on('submit', function(e) {
                e.preventDefault();
                alert($(this).serialize());
            });
            //set1
            var disabled = false;
            $('.set1').on('click', function() {
                disabled = !disabled;
                select1.disabled(!disabled);
            });
            //set2
            $('.set2').on('click', function() {
                select2.update([{
                    "option": "济南",
                    "value": "jinan"
                }, {
                    "option": "烟台",
                    "value": "yantai",
                    "selected": true
                }, {
                    "option": "青岛",
                    "value": "qingdao"
                }]);
            });

            $('.set4').on('click', function() {
                select4.val('shandong,qingdao,sifang');
            });
                                        
                
sendcode
描述

封装带倒计时的短信验证码功能

配置
mobile 字符型,要发送的号码,额外支持jquery选择器和函数类型,选择器用于获取input元素,函数用于返回手机号字符串
url 验证码请求地址
keyName 手机号在请求参数中的key,默认"mobile"
data 请求附加数据,默认{}
time 倒计时时间,默认60,单位s
sendBefore 发送前回调,参数接收手机号,可用于发送前对手机号做校验,返回真值继续,返回假值进入error回调
sendAfter 发送成功回调
error 错误回调,接收错误信息为参数
renderTarget 默认无,倒计时渲染对象,默认当前元素
render 倒计时渲染方法
reSendText 默认"重发验证码",重发验证码的提示文字
示例
 
            <a href="###" class="btn btn-default" id="btn">sendcode</a>
                                        
                
 
            require('sendcode');
            $('#btn').sendcode({
                mobile: '156555555',
                time: 10,
                render: function(sec) {
                  return sec + 's';
                },
                url: "http://rap.taobao.org/mockjsdata/9195/common/getYes/",
                sendBefore: function(mobile, suc, err) {
                  alert('sendBefore:mobile is ' + mobile);
                  if (mobile === '156555555') {
                    suc();
                  } else {
                    err();
                    alert('手机号验证不通过!');
                  }
                },
                sendAfter: function() {
                  alert('sendAfter callback');
                }
            });
                                        
                
slide
描述

幻灯片效果,支持触屏操作,支持基于数据创建,支持PC端图片按需加载(不可与响应式图片同时使用)。返回Slide方法,语法:Slide(config),或者使用jquery插件语法:$el.slide(config)

注意
  1. 自动生成的导航(小圆点)和左右箭头默认display:none且不绑定事件,使用时需先在样式中显示;
  2. 默认导航是带序号的a标签,要自定义a标签内容需要指定导航容器并添加custom属性:<div class="my_navs" custom> 自己写a标签... </div>
配置
el 默认null,容器元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
data 默认null,幻灯片数据,优先级高于从Dom中查找,对象数组格式:
                                    
[
    {
        src: '',        //图片src
        alt: '',        //图片alt
        link: '',       //图片链接
        attribute: {}   //幻灯片元素属性
    },
    ...
]
                                    
                                
wrap 默认"ul",不传data时用来指定包裹元素
cell 默认"li",不传data时用来指定切换元素
effect 切换效果,默认‘slide’,可选slide\fade
direction 默认"x",slide效果滚动方向,可选 x \ y
animate 默认"ease",css3动画曲线
duration 默认300,切换动画时长(ms)
start 起始帧,默认0,即从第一张开始
auto 默认true,自动播放
pause 默认true,控制是否鼠标悬停时暂停播放,还可以传入选择器将作为暂停按钮,点击暂停,按钮将被添加'pause'类
interval 默认5000,自动播放间隔(ms)
act 默认‘click’,导航按钮触发事件 mouseenter | click
prevHtml 左箭头html
nextHtml 右箭头html
prev 指定左箭头,不指定将自动插入'.arrs .arr_prev'元素
next 指定右箭头,不指定将自动插入'.arrs .arr_next'元素
navs 指定自定义导航,不指定将自动添加'.slide_nav'元素或使用效果元素内已存在的".slide_nav"元素;
lazyload 默认true,使用启用图片按需加载,基于数据创建将自动处理,基于DOM创建需要手动给图片添加data-src属性存储图片地址
handletouch 默认false,是否劫持触屏事件
onSlide 幻灯片切换回调,@param (效果元素,切换元素,当前帧序号)
onReady 初始化完成回调,@param (效果元素,切换元素,总帧数)
示例
 
          <style>
          .demo{max-width:1000px;margin:auto;height:0; overflow:hidden; padding-bottom:40%;}
          .demo li{background: yellow;}
          .demo img{width:100%; height:100%;}
          .demo .slide_nav{display:block; left: 0;bottom:0;}
          .demo .slide_nav a{float: left;width: 16px;height: 16px;overflow:hidden;background:#ccc;margin:6px;}
          .demo .slide_nav .on{background:#666;}
          </style>
                                      
                    
          <div class="demo">
            <ul>
              <li><img src="http://static.refined-x.com/view0.jpg" /></li>
              <li><img src="http://static.refined-x.com/view1.jpg" /></li>
              <li><img src="http://static.refined-x.com/view2.jpg" /></li>
              <li><img src="http://static.refined-x.com/view3.jpg" /></li>
              <li><img src="http://static.refined-x.com/view4.jpg" /></li>
            </ul>
          </div>

                                        
                
 
          //js
          require('slide');
          $('.demo').slide();
                                        
                
slider
描述

滑动输入器,用于在数值区间/自定义区间内进行选择,支持连续或离散值。返回Slider方法,语法Slider(config),或使用jquery插件语法$el.slider(config)

配置
el

默认null,显示滑块控件的容器元素

value

默认0,传入2位数组将显示为区间选择

min

默认0,范围最小值

max

默认100,范围最大值

step

默认1,步长,建议取值能被(max - min)整除

color

默认"primary",可选【Color】组件中的颜色

disabled

默认false,是否禁用滑块

tip

默认true,是否显示滑块当前值提示

tipRender

默认null,提示格式化方法 @param(value) : 当前值

onChange

默认null,在松开滑动时触发,返回当前的选值,在滑动过程中不会触发, @param(value) : 变更后的值

返回方法
value([value])

设置/获取示例当前值

disabled([flag])

禁用实例,若flag为真值将解禁

示例
 
            <div class="wrap">
                <div class="row">
                    <div class="span-6 m-tb p demo"></div>
                </div>
                <div class="btn btn-default set">赋值</div>
                <div class="btn btn-default get">取值</div>
                <div class="btn btn-default toggle">禁用/解禁</div>
            </div>
                                        
                
 
            require('slider');
            var myslider = $('.demo').slider({
                value: 50,
                onChange: function(value){
                    console.log('change to:' + value);
                }
            });
            $('.set').on('click', function(){
                myslider.value(parseInt(Math.random() * 100));
            });
            $('.get').on('click', function(){
                console.log('get:' + myslider.value());
            });
            var cur = true;
            $('.toggle').on('click', function(){
                cur = !cur;
                myslider.disabled(cur);
            });
                                        
                
Spin
描述

等待动画插件,返回Spin方法,语法Spin(config),或使用jquery插件语法$el.Spin(config)

配置
el

默认null,等待动画的覆盖元素,不填默认为"body"

icon

默认"&#xe66e;",字体图标代码

text

默认"Loading",提示文字

color

默认无,可选【Color】组件中的颜色

size

默认"default",可选"sm" | "lg"

hook

默认无,可添加自定义样式名

iconRoate

默认true,图标是否旋转

timeout

默认0,自动关闭时间,单位ms

返回方法
hide

关闭动画并销毁实例

示例
 
            <div class="test m-lg p-lg pr"></div>
            <div class="btn btn-default open">打开Spin</div>
            <div class="btn btn-default close">关闭Spin</div>
                                        
                
 
            require('spin');
            var loading;
            $('.open').on('click', function(){
                loading = loading || $('.test').spin();
            });
            $('.close').on('click', function(){
                loading && (loading = loading.hide());
            });
                                        
                
Store
描述

页面级异步数据存取插件,返回Store对象

方法
init([config])

设置默认ajax参数,默认:

                                    
{
    type: 'get',
    url: '',
    dataType: 'json',
    data: {}
}
                                    
                                
add(object)

添加预取数据对象,将继承默认ajax参数,格式:

                                    
{
    key: '',        //string, 数据别名
    type: 'get',
    url: '',
    dataType: 'json',
    data: {}
}
                                    
                                
clear([keyArray])

传入由key数组,将某(几)项数据从队列和存储中移除,不传keyArray将清空Store中的所有队列和存储

ready([keyArray], callback)

确保某(几)项数据已经获取后执行回调方法,不传keyArray将获取队列所有数据

update([keyArray], [callback])

更新某(几)项数据,不传keyArray将更新队列所有数据,若传入callback函数,将在完成后执行

示例
                    
    <div class="wrap">
        <button class="btn btn-default add">add</button>
        <button class="btn btn-default ready">ready(控制台查看输出)</button>
        <button class="btn btn-default clear">clear</button>
        <div id="log"></div>
    </div>
                    
                
                    
    var store = require('store');
    //初始化配置
    store.init({
        url: 'http://rapapi.org/mockjsdata/9195/tree/getNode'
    });
    
    $('.add').on('click', function(){
        var randomId = parseInt(Math.random() * 1e6);
        store.add({
            key: 'api-' + randomId,
            data: {
                hello: randomId
            }
        });
        $('#log').append('<p>添加 api-' + randomId+'</p>');
    });
    $('.ready').on('click', function(){
        store.ready(function(states) {
            console.log('states ready: ', states);
        });
    });
    $('.clear').on('click', function(){
        store.clear();
        $('#log').empty();
    });
                    
                
Switch
描述

开关插件,返回Switcher方法,语法Switcher(config),或使用jquery插件语法$el.switcher(config)

$('.flow-ui-switch')元素将自动初始化,并且支持data-config属性

配置
el

默认 null,插入开关的容器元素,必须

name

默认 null,switch实例将与页面中指定name的input值同步,若不存在该input元素将自动创建隐藏元素插入页面

value

默认 false,初始值

round

默认 false,是否开启圆角风格

color

默认 "default",指定实例色调,支持【color】组件中所有颜色名称

disabled

默认 false,是否禁用示例

size

默认 null,指定实例尺寸,支持"sm" | "lg"

onChange

开关变化时触发回调方法,@param(value) : 当前的实例状态

返回方法
value([value])

设置/获取实例当前值

disabled([flag])

禁用实例,若flag为真值将解禁

示例
 
            <div class="wrap">
                <div class="demo"></div>
                <div class="btn btn-default seton">开启</div>
                <div class="btn btn-default setoff">关闭</div>
                <div class="btn btn-default get">获取当前值</div>
                <div class="btn btn-default toggle">禁用/解禁</div>
            </div>
                                        
                
 
            require('switch');
            var myswitch = $('.demo').switcher({
                color:'primary',
                onChange: function(value){
                    console.log('switch is ',value);
                }
            });
            
            $('.seton').on('click', function(){
                myswitch.value(true);
            });   
            $('.setoff').on('click', function(){
                myswitch.value(false);
            });
            $('.get').on('click', function(){
                console.log(myswitch.value());
            });
            var cur = true;
            $('.toggle').on('click', function(){
                cur = !cur;
                myswitch.disabled(cur);
            });  
                                        
                
tab
描述

选项卡切换组件,常用于平级区域大块内容的的收纳和展现。返回Tab方法,语法Tab(config),或使用jquery插件语法:$el.tab(config)

支持基于标签创建和基于数据创建两种模式。

配置
el

默认null,生成/插入选项卡元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

conts

默认".tab-cont";基于标签创建时,$el中指定的选项卡元素选择器,该元素的内容将作为选项卡内容;

该元素的data-tab-title属性值将作为选项卡标签标题,另外还支持actived / disabled属性,分别用于指定初始显示和禁用该选项卡

data

默认null,用于基于数据创建选项卡,优先级高于基于标签创建,对象数组格式,对象属性:

{
title: "", //标签标题
cont: "", //选选卡内容
actived: boolean, //可选,激活当前选项卡
disabled: boolean, //可选,禁用当前选项卡
color: string //可选,当前选项卡颜色,支持【Color】组件中的所有颜色
}
active

默认0,默认显示的标签序号,优先级高于数据和标签中的初始值

act

默认"click",触发事件,可选"mouseenter"

throttle

默认300,当act为"mouseenter"时的函数节流间隔,单位ms

extra

默认无,选项卡标题栏右侧内容,支持DOM字符串或返回DOM的函数

beforeChange

切换前事件,默认无。@param (index) : 当前帧序号

onChange

切换回调方法,默认无。 @param (index) : 当前帧序号

onReady

创建Tab实例后扩展方法,默认无。 @param ($this, opts) : 当前对象,配置

返回方法
active([index])

设置/获取当前显示标签序号

disabled(index, [boolean])

禁用序号为index的标签,当Boolean值为true时将解禁

setCont(index, cont)

设置序号为index的标签内容

示例
 
            <div class="wrap">
                <div class="tabs-1">
                    <div class="tab-cont" data-tab-title="选项卡一">
                        许多年过去了,人们说陈年旧事可以被埋葬,然而我终于明白这是错的,因为往事会自行爬上来。回首前尘,我意识到在过去二十六年里,自己始终在窥视着那荒芜的小径。
                    </div>
                    <div class="tab-cont" actived data-tab-title="选项卡二">
                        在你心里,最能代表“春天”的是什么呢? 是此刻窗外的猫叫。 是衬衫和短裤。 是“沾衣欲湿杏花雨,吹面不寒杨柳风”。 是家里每年春天,母亲亲手沏的那一壶新茶,温暖又缠绵。 也许是压抑不住的出行拍摄的冲动吧。
                    </div>
                    <div class="tab-cont" disabled data-tab-title="选项卡三">
                        一位真正的作家永远只为内心写作,只有内心才会真实地告诉他,他的自私、他的高尚是多么突出。内心让他真实地了解自己,一旦了解了自己也就了解了世界。
                    </div>
                </div>

                <div class="m">
                    <div class="btn btn-default setactive">激活2</div>
                    <div class="btn btn-default setdisabled">禁用/解禁3</div>
                    <div class="btn btn-default getactive">获取当前index</div>
                </div>
            </div>
                    
                
 
            require('tab');
            var mytabs = $('.tabs-1').tab();

            $('.setactive').on('click', function(){
                mytabs.active(1);
            });

            var disabled = true;
            $('.setdisabled').on('click', function(){
                mytabs.disabled(2, disabled);
                disabled = !disabled;
            });
            $('.getactive').on('click', function(){
                console.log('actived: ' + mytabs.active());
            });
                    
                
table
描述

数据表格,返回Table方法,语法:Table(config),或使用jquery插件语法:$el.table(config)

主要用于展示大量结构化数据。支持排序、筛选、编辑等功能。

配置
el

默认null,表格生成元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)

data

用于展示的结构化数据,数组格式,默认无

load

ajax方式加载数据的配置:

{
method: "get", //请求方式
url: "", //请求url
data: {} //请求参数
dataParser: fn(res) //ajax返回数据处理
}
column

表格列的配置描述,详见下文

striped

默认false,是否显示间隔斑马纹

bordered

默认false,是否显示纵向边框

condensed

默认false,是否显示为紧凑表格

hover

默认false,是否显示悬浮背景

width 表格宽度,单位 px,默认无,将自适应容器宽度
height 表格高度,单位 px,设置后,如果表格内容大于此值,会固定表头
index

默认false,是否显示索引列

multi

默认false,是否支持多选

noDataText

默认"暂无数据"

noFilterText

默认"暂无筛选结果"

highlight

默认false,是否支持高亮选中的行

page

默认null,静态数据分页配置,可对data传入的数据分页显示。配置: {
el: 'JQUERY SELECTER', //指定分页显示元素,若不指定将在table.options.el之后插入分页
pageSize: 5, //每页信息条数
onChange: function(pageNumber){} //页码变更回调
}

注意改配置不可用于异步数据翻页,异步数据翻页的例子见插件-数据表格

onSelect

默认无,单选/多选结果变化回调方法。

@param(index, row, rowArray, [isSelect]) : 当前行数,当前行数据,所有选中行数据数组,是否选中(仅多选有此参数)

onReady

默认无,初始化完成回调方法。当使用异步数据时将接收ajax返回数据:@param(res)

onLoad

默认无,异步数据加载回调方法,接收ajax返回数据:@param(res)

column配置
title

列头显示文字,默认"#"

key

对应列内容的字段名

render

自定义列元素渲染方法,@param(value, row, index, entity) : 单元格数据,行数据,行数,行操作句柄。

width

列宽,默认单元格均分,指定数值不得小于50

align

对齐方式,默认"left",可选 center | right

hook

列的样式名称,默认无

ellipsis

默认false,开启后,文本将不换行,超出部分显示为省略号

editable

默认false,该列是否可编辑。

也可以传入一个方法,接收编辑结果相关数据 @param(rowIndex, key, value) : 原始数据行序号,列属性,新值

sort

默认false,该列是否可排序,可以设置本地排序方法和排序回调方法:

{
mehtod: function(a,b,type){}, //过滤方法,type 值为 "asc" 和 "desc";传入非函数类型将使用sort()排序
handle: function(key, type){} //跳过method,接管排序按钮点击事件,可以用于ajax请求排序数据。
}
filters

默认无,过滤器对象数组。

过滤器对象:

{
lable: "", //过滤器名称
mehtod: function(value){}, //过滤方法,参数接受被过滤的值,返回 true 通过过滤
handle: function(){} //跳过method,接管过滤器点击事件,可以用于ajax请求过滤数据。
}
validateMethod

验证方法,接受单元格编辑后的值,验证通过需要明确return true;

返回方法
data([newData])

获取/设置表格数据

load(ajaxSet)

重新ajax获取表格数据,参数:

{
method: "get", //请求方式
url: "", //请求url
data: {} //请求参数
}
column([newColumn])

获取/设置表格列数据

getPager

返回分页实例,可以获得Page组件的操作方法,仅用于静态数据分页,异步分页需要手动处理Table插件和Page插件的联动。

size([config])

设置/获取当前表格实例的宽和高;

config对象接受"width"和"height"属性

reload

将表格重置为初始数据或重新加载远程数据

getRows

返回当前(分页)的所有行数据

getSelected([prop])

返回当前所选行数据,允许传入过滤属性,不传将返回完整对象数组,@param([prop]) : 过滤属性

scrollTo(index)

滚动到当前(分页)第index行,index从0开始计数

highlightRow(index)

高亮第index条数据所在行,index从0开始计数

selectAll

全选当前(分页)所有行

unselectAll

全不选当前(分页)所有行

selectRow(index)

选择数据第index行,index从0开始计数

unselectRow(index)

取消选择数据第index行,index从0开始计数

getEntity(index, key)

获取第index条数据所在行且属性为key的单元格操作实例

实例具有以下方法:

set(key, value)

设置该行数据属性为key的单元格值为value

toggle(key, value)

切换该行数据属性为key的单元格值为value

get(full)

返回当前单元格的值;若设置full为true,将返回该单元格所在行数据

edit([callback])

使当前单元格进入编辑状态,可设置回调函数 @param(row, key, value) : 当前行数据,当前编辑单元格key,编辑后的值

updateRow(index, row)

更新数据队列第index行,index从0开始计数

row可以是当前行数据对象的子集,未包含的属性将沿用原数据

appendRow(row)

向表格末尾追加数据行

insertRow(start, row)

在数据队列第start处插入row,若start超出数据总长度,将追加到最后一行,相当于appendRow(row)

deleteRow(index)

删除数据队列第index条

getChanges([type])

返回类型为type的数据更改,type值可选"add","update","delete";若不传type,将返回包含所有更改类型的数据

sort(key, [method])

将属性为key的列按照method排序,method为标准排序方法,接受a,b两个参数,若不传method将使用js默认的数据sort()方法排序

detailFormater(index, render)

为第index条数据所在行生成附加内容,param(index, render) : 数据所在行, 内容生成方法

detailClear(index)

清除第index条数据所在行的附加内容

示例
 
            <div class="mytable m pr" style="width:800px;height: 400px"></div>
            <div class="mypage m"></div>
            <div class="m">
                <div class="btn btn-default updateCol">更新列</div>
                <div class="btn btn-default updateData">更新数据</div>
                <div class="btn btn-default getpager">操作page对象</div>
                <div class="btn btn-default resize">更改尺寸</div>
                <div class="btn btn-default reload">reload</div>
                <div class="btn btn-default getRows">获取当前页rows</div>
                <div class="btn btn-default getSelected">获取当前已选rows</div>
                <div class="btn btn-default scrollTo">滚到第2行</div>
                <div class="btn btn-default highlightRow">高亮第3行</div>
                <div class="btn btn-default selectAll">全选</div>
                <div class="btn btn-default unselectAll">全不选</div>
                <div class="btn btn-default selectRow">选中第4行</div>
                <div class="btn btn-default unselectRow">取消选中第4行</div>
                <div class="btn btn-default getEntity">单元格实体方法</div>
                <div class="btn btn-default updateRow">更新第一行数据</div>
                <div class="btn btn-default appendRow">追加数据</div>
                <div class="btn btn-default insertRow">再第一行后插入数据</div>
                <div class="btn btn-default deleteRow">删除第二行数据</div>
                <div class="btn btn-default getChanges">获取差异数据</div>
                <div class="btn btn-default sort">按"价格"排序</div>
            </div>
                                        
                
 
            var Table = require('table');
            //列配置
            var myColumn = [{
                    title:'operation',
                    render: function(value, rowData, index, entity){
                        if(rowData.storage > 0){
                            return $('<div class="btn btn-primary btn-sm">折扣</div>').on('click', function(e){
                                e.stopPropagation();
                                entity.toggle('price', Math.round(rowData.price * 0.8));
                            });
                        }else{
                            return $('<div class="btn btn-primary btn-sm disabled">无货</div>');
                        }
                    },
                    width: 100,
                    fixed: true
                },{
                    title: '图片',
                    render: function(value, rowData, index){
                        var smallImg = $('<img src="http://bsdn.org/projects/dorado7/deploy/sample-center/dorado/res/com/bstek/dorado/sample/data/images/'+rowData.product+'-24.png" alt="data.product" style="max-height:28px" />');
                        smallImg.tip('<img src="http://bsdn.org/projects/dorado7/deploy/sample-center/dorado/res/com/bstek/dorado/sample/data/images/'+rowData.product+'-128.png" style="width:128px;" />',{
                            type: 'content'
                        });
                        return smallImg;
                    }
                },{
                    title:'产品',
                    key:'product',
                    width: 125,
                    sort: {
                        mehtod: true,
                        handle: function(key, type){
                            datagrid.load({
                                url: 'https://static.refined-x.com/phone.json',
                                data: {
                                    sort: type,
                                    key: key
                                },
                                dataParser: function(res){
                                    return res.data;
                                }
                            });
                        }
                    },
                    validateMethod: function(value){
                        if(value && value.split && value.length < 10){
                            return true;
                        }
                        require.async('notice', function(Notice){
                            Notice({
                                title: '请输入长度小于10的字符串!',
                                color:'warning',
                                delay: 2000
                            });
                        });
                    },
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                },{
                    title:'制造商',
                    key:'manufacturer',
                    filters: [
                        {
                            label: '全部',
                            mehtod: function(value){
                                return true;
                            }
                        },
                        {
                            label: '三星',
                            mehtod: function(value){
                                return value.indexOf('Samsung')===0;
                            }
                        },
                        {
                            label: '苹果',
                            mehtod: function(value){
                                return value.indexOf('Apple')===0;
                            }
                        },
                        {
                            label: '诺基亚',
                            mehtod: function(value){
                                return value.indexOf('Nokia')===0;
                            }
                        }
                    ],
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                },{
                    title:'价格',
                    key:'price',
                    width: 100,
                    styler: function(value){
                        if(value>3000){
                            return "background: rgb(252, 197, 197)";
                        }
                    },
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                },{
                    title:'库存',
                    key:'storage',
                    align: 'center',
                    sort: true,
                    styler: function(value){
                        if(value<100){
                            return "background: rgb(211, 211, 211); color: red";
                        }
                    }
                },{
                    title:'类型',
                    width: 200,
                    key: 'type',
                    render: function(value, rowData, index, entity){
                        var inputArray = [{
                            type:"A",
                            name: '直板'
                        },{
                            type:"B",
                            name: '翻盖'
                        },{
                            type:"C",
                            name: '滑盖'
                        }];
                        var inputName = "phonetype"+index;
                        var typeControl = '<div style="user-select: none;">';
                        $.each(inputArray, function(i, e){
                            typeControl += ('<label class="radio radio-inline"><input type="radio" name="'+inputName+'" value="'+e.type+'"'+(e.type===value ? ' checked' : '')+' />'+e.name+'</label>');
                        });
                        typeControl += '</div>';

                        return $(typeControl).on('change', function(){
                            var newValue = $(this).find('input:checked').val();
                            entity.set('type', newValue);
                        });
                    }
                },{
                    title:'体积(mm)',
                    width: 200,
                    render: function(value, rowData, index){
                        var size = rowData.size;
                        if(size){
                            return [size.length, size.width, size.height].join(' x ');
                        }
                    }
                },{
                    title:'comment',
                    key: 'comment',
                    width: 200,
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                }];
            //其他插件
            var Tip = require('tip');
            //调用Table
            var datagrid = Table({
                el:'.mytable',
                load: {
                    url: 'https://static.refined-x.com/phone.json',
                    data: {
                        id: 123
                    },
                    dataParser: function(res){
                        return res.data;
                    }
                },
                column: myColumn,
                multi: true,
                page: {
                    el: '.mypage',
                    pageSize: 5
                },
                onSelect: function(index, row, collection){
                    console.log(index, row, collection);
                }
            });
            //测试                 
            $('.updateCol').on('click',function(){
                var col = datagrid.column();
                col.splice(0,1);
                datagrid.column(col);
            });

            $('.updateData').on('click',function(){
                var tableData = datagrid.data();
                tableData.reverse();
                datagrid.data(tableData);
            });

            $('.getpager').on('click', function(){
                var pager = datagrid.getPager();
                pager.set({
                    current: 3
                });
            });
            
            $('.resize').on('click', function(){
                var thesize = datagrid.size();
                var sizeArray = [thesize.width, thesize.height].reverse();

                datagrid.size({
                    width: sizeArray[0],
                    height: sizeArray[1]
                });
            });

            $('.reload').on('click', function(){
                datagrid.reload();
            });
            
            $('.getRows').on('click', function(){
                console.log('getRows()', datagrid.getRows());
            });

            $('.getSelected').on('click', function(){
                console.log('getSelected()', datagrid.getSelected());
            });

            $('.scrollTo').on('click', function(){
                datagrid.scrollTo(2);
            });

            $('.highlightRow').on('click', function(){
                datagrid.highlightRow(3);
            });

            $('.selectAll').on('click', function(){
                datagrid.selectAll();
            });

            $('.unselectAll').on('click', function(){
                datagrid.unselectAll();
            });

            $('.selectRow').on('click', function(){
                datagrid.selectRow(3);
            });

            $('.unselectRow').on('click', function(){
                datagrid.unselectRow(3);
            });

            $('.getEntity').on('click', function(){
                var entity = datagrid.getEntity(0, 'storage');
                entity.edit(function(row, key, value){
                    console.log('entity.edit() ', row, key, value);
                });
            });

            $('.updateRow').on('click', function(){
                datagrid.updateRow(0, {
                    price: 999,
                    storage: 8888
                });
            });

            var newRow = {
                "product": "I9000",
                "manufacturer": "三星",
                "type": "A",
                size: {
                    "width": 61.4,
                    "height": 12.6,
                    "length": 120.2
                },
                "os": "Android 6.1",
                "cpu": "Samsung 2GHz",
                "screen": "5.5",
                "touchScreen": true,
                "price": 6550,
                "storage": 8,
                "comment": "弧面屏"
            };
            
            $('.appendRow').on('click', function(){
                datagrid.appendRow(newRow);
            });

            $('.insertRow').on('click', function(){
                datagrid.insertRow(1, newRow);
            });

            $('.deleteRow').on('click', function(){
                datagrid.deleteRow(1);
            });

            $('.getChanges').on('click', function(){
                console.log(datagrid.getChanges());
            });

            $('.sort').on('click', function(){
                datagrid.sort('price', function(a,b){
                    return a-b;
                });
            });
                                        
                
Timepicker
描述

时间选择插件,返回TimePicker方法,语法:TimePicker(config),或使用jquery插件语法:$el.timepicker(config);

配置
el

默认null,制定触发元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this);当元素具有value属性时,value将自动同步所选时间

trigger 默认"click",触发动作 hover | click
value 默认当前时间,选择器初始值,配置时间必须符合format所设置的格式
format 默认"hh:mm:ss",格式化输出
hours 默认24,时制,可选 12
place 默认"bottom-center",选择器出现位置,选项同Tip插件
checkClass 默认"text-primary",选中时间项附加样式
confirm 默认false,是否显示底部确认按钮
show 默认false,是否初始化后立即显示
onReady 默认无,插件初始化完成回调 @param(parsedTime, timeData) : 格式化后的时间字符串,时间对象
onChange 默认无,当confirm为true时的点选回调 @param(parsedTime, timeData) : 格式化后的时间字符串,时间对象
onSelect 默认无,选择时间回调 @param(parsedTime, timeData) : 格式化后的时间字符串,时间对象
返回方法

同Tip插件

演示
 
            <div class="wrap">
                <div class="row">
                    <div class="span-2">
                        <div class="demo1 btn btn-default">打开时间选择器</div>
                    </div>
                    <div class="span-2">
                        <input type="text" class="demo2 form-control" >
                    </div>
                    <div class="span-2">
                        <div class="btn btn-default toggle2">切换demo2可用状态</div>
                    </div>
                </div>
            </div>
                                        
                
 
            var TimePicker = require('timepicker');

            TimePicker({
                el: '.demo1',
                show: true,
                onSelect: function(time) {
                    $('.demo1').text('onchange:' + time);
                }
            });

            var picker2 = $('.demo2').timepicker({
                format: 'hh点mm分',
                value: '11点30分',
                confirm: true,
                onSelect: function(time){
                    alert('onchange:' + time);
                }
            });

            $('.toggle2').on('click',function(){
                picker2.disabled($('.demo2').prop('disabled'));
            });
                                        
                
tip
描述

提示框插件,返回Tip方法,语法:Tip(TipContent, config),或者使用jquery插件语法: $el.tip(TipContent, config);

TipContent支持文本,html,jQuery元素(将清除默认样式)

配置
el 默认null,制定触发元素,直接调用方法必填,jquery插件调用时可忽略,默认应用$(this)
trigger 默认"hover",触发动作 hover | click | custom
place 默认"left-center",弹出元素相对于$handle的显示位置,规则"第一轴向-第二轴向-[定位模式]",第一轴向可选"left | right | top | bottom",第二轴向除四个方位外还可以选择"center",定位模式非必填,可选"in","in"定位模式表示$target将覆盖$handle
title 默认false,标题文字,不显示标题栏
hasarr 默认true,提示框有无箭头
offset 默认0,提示框与元素间距
type 默认"auto",弹出文本内容自带边框,DOM元素不带边框,可选'content',所有元素均自带边框弹出
modal 默认false,是否带半透明背景
opacity 默认0.5,模态背景透明度
hook 默认无,字符型,class钩子,将添加到弹出元素上
show 默认false,立即显示,显示后只能用返回对象中的hide()方法关闭
onshow 默认无,显示回调,接收当前对象为参数
onhide 默认无,关闭回调
返回方法
obj.hide() 关闭当前tip实例
obj.disabled(flag) 禁用当前tip实例,若flag为真值将解禁
obj.destroy() 销毁当前tip实例
示例
 
          <style>
          /*css*/
          .demo a{margin: 60px;}
          </style>
                                         
                    
          <!--html-->
          <div class="wrap demo">
            <a href="#1" class="_tip1 btn btn-default">左</a>
            <a href="#2" class="_tip2 btn btn-default">上</a>
            <a href="#3" class="_tip3 btn btn-default">右-自动显示并关闭</a>
            <a href="#4" class="_tip4 btn btn-default">下-自定义触发条件</a>
            <a href="#4" class="btn btn-primary toggle-tip4">显示最后一个tip</a>
          </div>          
                                        
                
 
            //js
            var Tip = require('tip');
            
            $('.demo ._tip1').tip(Math.random, {
                place: 'left-center'
            });
            $('.demo ._tip2').tip(Math.random, {
                place: 'top-center'
            });

            var tip3 = $('.demo ._tip3').tip(Math.random, {
                place: 'right-center',
                show: true
            });
            setTimeout(function() {
                tip3.hide();
            }, 1000);

            var tip4 = Tip(Math.random, {
                el: $('.demo ._tip4'),
                place: 'bottom-center',
                trigger: 't4show'
            });

            $('.toggle-tip4').on('click', function(){
                $('.demo ._tip4').trigger('t4show');
                setTimeout(function() {
                    tip4.hide();
                }, 2000);
            });
            
            
                                        
                
zoom
描述

图片放大镜,大图尺寸自动获取。

配置
zoomWidth 大图窗口宽度,默认与目标对象同宽
zoomHeight 大图窗口高度,默认与目标对象同高
zoomScale 默认0,大图相对小图放大倍数(大于1有效)
offset 大图窗口与小图距离,默认10,单位px
offsetTarget 大图定位目标,默认无,将相对目标元素定位
position 大图相对小图方位,默认right
animate 默认true,大图是否渐显
duration 默认200,大图渐显动画时长
preload 默认true,预加载大图,小图动态切换的情况只对第一张有效
示例
 
          <!--html-->
          <style>
          .demo{width:400px;height:320px;line-height: 320px; text-align:center;background:#eee;}
          .demo img{display: inline-block;vertical-align: middle;}
          </style>
          <div class="demo">
             <img src="http://temp.im/320x240/" zoom="http://temp.im/640x480/"  />
          </div>
                                        
                
 
          // JS
          require('zoom');
          $('.demo').zoom()
                                        
                
zTree
描述

树形插件,基于zTree优化。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

基于zTree美化皮肤,并自动添加ztree类,修复没有id无法拖拽的bug,及其他细节微调。

注意

依赖tree.less样式组件

配置

官网文档

示例
 
            <div class="wrap"><div class="tree1"></div></div>
                                        
                
 
            require('zTree');
            var zNodes = [{
                name: "test1",
                open: true,
                children: [{
                    name: "test1_1",
                    checked: true,
                    chkDisabled: true
                }, {
                    name: "test1_2"
                }]
            }, {
                name: "test2",
                open: true,
                children: [{
                    name: "test2_1",
                    children: [{
                        name: "test2_1_1"
                    }, {
                        name: "test2_2_2"
                    }]
                }, {
                    name: "test2_2"
                }]
            }];
            $.fn.zTree.init($(".tree1"), {
                check: {
                    enable: true
                }
            }, zNodes);
                                        
                

解决方案

内置解决方案示例见flow-ui/

响应式开发

css/style.css已经包含对应的媒体查询,默认断点是: {Pc} > 1024 > {Pad} > 640 > {Mobile} ,响应式网站开发除了css媒体查询以外,至少还要具备三项功能:响应式栅格系统、终端识别,响应图片。

  1. 响应式栅格系统使页面布局可以随终端自动调整;
  2. 终端识别使js可以为每个终端做单独处理,框架通过媒体查询在页面中埋下特殊标记,js通过查找标记分辨当前设备类型;
  3. 响应图片使移动设备可以使用单独定制的小尺寸图片,为加载提速;

对应方法已封装在【responsive】中。

移动端屏幕适配

约定设计稿宽度:手机界面640px,pad界面1024px。

基于以上约定,通过vw单位将html字号(rem)设置为100px(假设约定设计稿宽度640px,即html{font-size:15.625vw;}),因为vw以屏幕宽度为基准,使rem也对屏幕宽度具有适应性,因此使用rem为单位的尺寸都将随屏幕宽度自动缩放,从而实现适配,例如:

     
  <style>
    .test{width: 3.2rem;height:3.2rem;background:yellow;}
  </style>
  <div class="test">
    <p>在任何手机上都显示为宽度50%(3.2rem)的正方形</p>
    <p style="font-size:.28rem">字号.28rem的文字</p>
  </div>
     
   

全屏翻页

全屏翻页(fullpage)模式的简单实现,见 demo页面

链接预加载

结合【instantclick】插件,实现链接预加载、无刷新切换(PJAX)、加载进度条等特性,并扩展了页面切换后记住滚动位置的功能。

使用

预加载技术有一定特殊性,普通模块加载方式将失效,需要使用优化后的pjax专用模板,开发中基本保持了原有模块化开发体验,主要存在以下三点细节上的不同:

区别1:页面底部引用js时增加回调并执行返回函数(使用者无需关心)
          
          //页面引用js的写法
          seajs.use('js/index_pjax', function(run) {
            run();
          })
          
        
区别2:在页面js的返回函数里写业务代码(使用者无需关心)
      
  define(function(require) {
    var $ = require('jquery');
    var base = require('base');
    var com = require('./common_pjax'); //注意这里必须引用common_pjax
    //模块js的写法
    return function(){ 
      //页面代码里执行common_pjax
      com.init(); 
      //以下就是你得业务代码啦
      require('box'); 
      $.box.msg('hello p1!');

    }
  })
      
    
区别3:原来common.js里的码要写在common_pjax.js的init方法里,这里需要注意一下,common.js修改往往比较多
      
  //common_pjax
  module.exports = {
      init:function(){
        //整站通用代码
        ...
      }
  }
              
            

其他小问题:

页面中所有的资源路径(包括图片)必须是绝对路径,因为相对路径全部是相对于着陆页而言的,当跳转路径跨层级时相对路径会报错。

PJAX切换模式还会导致某些插件表现异常,本质上都是因为页面没有刷新,比如mmenu.js点击后不收回,需要添加如下配置: { onClick:{ close:true}}

黑名单

这几种情况下的a标签不会触发预加载和pjax切换:

  1. 具有targetdownloaddata-no-instant属性;
  2. 指向不同的域;
  3. 指向"#"或"#"开头的地址
记住滚动位置

当href地址中含有scrollfixed参数时,切换后会记住当前的页面滚动位置:

          
      <a href="/test/test.html?scrollfixed=1">
          
        

AJAX合并

实现jQuery.ajax请求合并,详见【base.js】ajaxCombo相关介绍,示例如下

            
    var base = require('base');
    //调用并附加参数:  
    base.ajaxCombo({
        extendData: {
          apikey: 'apikey',
          token: 'token',
          secretKey: 'secretKey'
        }
    });
    //第一批次合并请求
    $.ajax({
        url: 'http://host.refined-x.com/test/ajax.php',
        data: {
          test: 'hello1',
          sign: 's1'
        },
        combo: true,
        success: function(data) {
          console.log('第一批ajax1返回')
        }
    });
    $.ajax({
        type: 'post',
        url: 'http://host.refined-x.com/test/ajax.php',
        data: {
          test: 'hello2',
          sign: 's2'
        },
        combo: true,
        success: function(data) {
          console.log('第一批ajax2返回')
        }
    });
    //第二批次合并请求
    setTimeout(function() {
        $.ajax({
          url: 'http://host.refined-x.com/test/ajax.php',
          data: {
            test: 'hello3',
            sign: 's3'
          },
          combo: true,
          success: function(data) {
            console.log('第二批ajax1返回')
          }
        });
        $.ajax({
          type: 'post',
          url: 'http://host.refined-x.com/test/ajax.php',
          data: {
            test: 'hello4'
          },
          combo: true,
          success: function(data) {
            console.log('第二批ajax2返回')
          }
        });
    }, 300);
    //不参与合并的请求
    $.ajax({
        url: 'http://host.refined-x.com/test/ajax.php',
        data: {
          test: '普通未合并ajax'
        },
        success: function(data) {
          console.log(data)
        }
    });
          
        

js模块本地缓存

框架默认使用seajs-localcache插件实现模块缓存功能,通过manifest文件控制模块版本,manifest文件中注册的模块在第一次请求成功后会缓存到localStorage中,下次调用会直接从localStorage中读取,版本号变化则重新请求并更新本地缓存。

manifest文件位于开发目录结构下的/public/lib/seajs/manifest.js,编译后合并至/lib/seajs.js。manifest文件必须完整记录模块库中的每个js模块路径,同时模块库中的模块必须是具名模块,模块名为文件名。

对于路径带文件夹的模块,需要在seajs.config.alias中将别名配置为文件名,例如jquery模块的模块路径是"jquery/1/jquery",但模块名是"jquery",那么需要配置seajs短语如下:

            
    alias: {
        "audio"          : "audio/audio",
        "copy"           : "copy/ZeroClipboard",
        "flv"            : "flv/flv",
        "hook"           : "hook/hook",
        "jquery"         : "jquery/1/jquery",
        ...
            
        

此时require('jquery')将加载"jquery/1/jquery.js"这个文件,manifest文件中则如下记录:

            
  /*
  * manifest.js
  */
  define('manifest',function(){
    var mod = {
        'album/album'                   : 1,  //修改版本号更新对应的插件缓存
        'hook/hook'                     : 1,
        'jquery/1/jquery'               : 1,
        'jquery/2/jquery'               : 1
        //...
        }
    //...
  })
         
       

这样一来就可以很方便的使用带有多级路径的模块,而且用这种方式还可以很方便的控制类库版本,例如只要将"jquery"短语路径配置为"jquery/2/jquery",就可以全局切换到jQuery2.x版本了。

远程模块库

通过修改seajs.config.base可以使用远程模块库,借助云存储平台可以很方便的自建私有模块库,实现JS插件的共享和同步更新,也能节省单个项目的存储空间。

IE8注意

IE8浏览器默认不允许跨域请求数据,所以使用远程模块库会引起IE8报错,报错信息为"拒绝访问",因此需要兼容IE8的项目切勿使用远程模块库。Flow-UI文档和部分示例页面存在这个问题,如果用IE8访问出现报错,请忽略。

手动修改IE8浏览器的安全策略可以解决这个问题,步骤如下:IE工具->internet选项->安全->自定义级别->通过域访问数据源。