ui-ctool 介绍

安装ui-ctool

npm install git+http://gitlab.alibaba-inc.com/jianlin.zjl/ui-ctool.git

ui-ctool是什么

• 基于zepto的组件集合,在ctool中默认tempte中包含该组件集合
• 该组件集合中的css 样式全部基于m-base 的高清方案样式
• 该组件集合中组件间无耦合可以任意模块化引用，部分ui组件ui来源f7

ui-ctool 目录结构

具体组件使用

loading组件

js 部分
var Loading = require('ui-ctool/src/c/loading/index');
Loading.show(); //loading 打开loading 注入在body中
Loading.hide(); //loading关闭

Loading.show({renderTo: '#id',msg: '加载中'}); //loading注入指定容器中

css 引用
@import "ui-ctool/build/less/loading";

• modal 组件包含各类弹出层toast alert confrim tip

js 部分

var Modal = require('ui-ctool/src/c/modal/index');

Modal.confirm(content,surefn,closefn) //

Modal.alert(content,surefn);

Modal.toast(content);

其他格式参数传人修改文案具体看下代码


css 引用
@import "ui-ctool/build/less/modal";

spic 组件 智能图片懒加载模块

api 参数

  var configDefault = {
    diff: 200,  //临界点
    timingTime: 150, //判断网络状态浏览器响应返回时间
    imgTime: 300, //判断网络状态1px图片加载时间
    event: 'scroll touchmove resize', //懒加载触发事件 懒加载事件注册在container中 ios 低版本有自动添加touchend touchcancel兼容
    mEvent: 'resize',  //页面宽度响应图的事件有必要单独提出
    container: document, //相对视窗
    delayTime: 100, //事件触发延迟时间
    isLazyload: true, //开启懒加载
    isWebp: true, //开启webp
    attr: 'data-src', //设定绑定的属性
    $nodes: null, //启用智能图片加载的元素
    mSizes: false, //页面宽度响应图片100x100 {'>360':'400x400','<=360':'100x100'}
    mHSizes: false,//高清屏下的图片响应图片  {'>360':'800x800','<=360':'200x200',,'>=960':'1000x1000'}
    qSizes: [30,75],//网络状况响应图片默认开启Q50【弱，强】 [30,75]
    complate: null  //function(){} 容器中已无未加载图片
  };

具体使用

var Spic = require('ui-ctool/src/c/spic/index');
var  pic = new Spic({
        mSizes: {
          '>640': '200x200',
          '<=640': '100x100'
        },
        qSizes: [50, 90] //图片质量
      });
      //再次动态添加图片进入懒加载
     pic.addNodes($('body').find('[data-src]'));

monitor 监控下拉触底上拉到顶

使用代码片段

var Monitor = require('ui-ctool/src/c/monitor/index');
self.monitor = new Monitor({
      'scrollToBottom': function(){
        if(self.currentPage >= self.totalPage){
          console.log('stop');
          self.monitor.stop();// 触底停止
          return;
        }
        if(self.submiting) return;
        self.submiting = true;
        self.currentPage ++;
        self.getData({loading: false},function(){
          self.submiting = false;
          self.monitor.after(); //继续监听
        });
      }
    });


  self.monitor.reopen(); //重新停止后重新监听monitor

具体使用代码参考

router hash路由

api 参数

    this.config = $.extend({
        container: 'body', //必填触发节点
        hashPrefix: '',
        clsPrefix: 'km-route',
        clsAnimate: 'km-route-transform-left', //启动动画移除该cls
        clsCur: 'km-route-cur', //结束动画移除该cls
        defaultTitle: document.title,
        defaultRoute: 'index', //默认的路由
        isSetTitle: true, //设置标题
        isAnimate: false, //动画开启
        isSetHistory: true, //是否history记录
        resizeTime: 100
    },

使用代码片段

var Route = require('ui-ctool/src/c/router/index');
var IndexInfo = require('../../c/indexInfo/index');
var router = new Route({
    container: '#page'
});
router.addRoute({
    routeName: 'index',
    title: '个人信息',
    ctr: IndexInfo
});
router.init();

具体使用代码参考

如果项目主页面是单页面您可以使用ctool init router 初始化项目 使用ctool r 【name】 创建路由模块，自动注入依赖

###formVaild 表单验证组件

使用代码片段

js 部分
var FormVaild = require('ui-ctool/src/c/formVaild/index');
 self.formVaild = new FormVaild({
         rules: {
          salePrice: {
            test: function(val) {
              if (val && Number(val) <= self.allObj.dropPrice || !self.allObj.dropPrice) {
                return true;
              }
            },
            msg: '售价不能大于吊牌价'
          },
          price: {
            test: function(val, $this) {
              if (val && Number(val) > 0 && /^(([1-9]\d{0,7})|0)(\.\d{1,2})?$/g.test(val)) {
                return true;
              }
            },
            msg: 'data-label|在0.01~1亿之间'
          },
        },
        showError: function($this, errors, msg) {
          $this.closest('.item-content').addClass('error');
          //设置出错信息显示第一条
          if (self.showError && !firstTimer) {
            firstTimer = setTimeout(function() {
              Modal.toast(msg || '请看红色指示', 1000);
              firstTimer = null;
            }, 10);
          }
        },
        hideError: function($this) {
          $this.closest('.item-content').removeClass('error');
        }
      });
      self.formVaild.validateForm(); //验证表单是否ok
   html 部分
 <input type="text" name="title" data-rule="required;title" data-label="标题" value="<%= data.title %>" maxlength="30">

slider 滑动切换slider组件

具体使用代码参考

无线页面通信crossmsg组件(来源风月)

其他公用业务组件login env windvane mtop 来源mtb 在ui-ctool中未改动,只是copy其中,方便统一引用维护

####其他组件正在动态添加中不在列举

说明

• ui-ctool 是基于zepto 的common 规范的组件集合
• 支持链接引用与npm加载

后期迁移

ui-ctool 中只保留与ui相关的组件toast login alert modal 其他组件单独管理