控件使用说明

注意在页面里引入js,css,图片等静态资源的时候用// 而不是 http:// ,以便使页面和静态资源的http协议一致

js,css资源

// jquery 一般系统框架会引用,无需特殊引用
<script src="https://res.wx.miscrm.com/common/system/js/jquery-3.1.1.min.js"></script>

// 开关插件,具体使用规则:http://www.bootcss.com/p/bootstrap-switch/
<link href="https://res.wx.miscrm.com/common/system/css/bootstrap-switch.min.css" rel="stylesheet">
<script src="https://res.wx.miscrm.com/common/system/js/bootstrap-switch.min.js"></script>
// eg
$('.toggle-online').bootstrapSwitch({
    onText:"值班",  
    offText:"休息",
    size: 'mini',
    // state : true选中, false:取消选中
    onSwitchChange: function (event, state) {   
        // 切换开关之后的处理逻辑     
        event.preventDefault();
    }    
});

图片资源

// 深色底时的无数据提示图
    //res.wx.miscrm.com/common/system/img/nodata-mobile-darkbg.png
// 浅色底时的无数据提示图
    //res.wx.miscrm.com/common/system/img/nodata-mobile.png
    //res.wx.miscrm.com/common/system/img/nodata-pc.png
    // 使用无数据提示时class为 .no-data-tip 
    // eg: <div class="no-data-tip"><img src="https://res.wx.miscrm.com/common/system/img/nodata-pc.png"></div>
// 默认分享图
    //res.wx.miscrm.com/common/system/img/share-default-bg.jpg
// 咪狐logo
    //res.wx.miscrm.com/common/system/img/logo100_100.png

在插件中使用注册控件

<%widget
    name = 'juke:widget/common/register/register.tpl'
%>
// 注册成功的回调,请在调用页面自行定义,会在手机认证成功之后调用
window.registerSuccessCallback = function(){
    window.location.href = '/index.php?r=user/index';
};

使用echarts图表的时候

在头部引入

<script src='/static/common/js/echarts/dist/echarts4.x.min.js'></script>

时间控件

tpl的头部中引入:

<%require name="common:static/css/datetime-picker/datetimepicker.less" %>

当页面需要两个时间选择器的时候,即:开始时间-结束时间 的格式

tpl的放置时间的部分引入,date00,date01为传入的默认值,选填: showType 为时间展示的格式,timeUnit:按今天,昨天,最近7天,最近30天的选择方式 timeChoose: 手动选择时间的方式(会记住上次选择的时间)

<%widget
    name = 'juke:widget/common/timeChoose/timeChoose.tpl'
    date00 = '2017-03-01'
    date01 = '2017-03-10'
    showType = 'timeUnit'
%>

当页面中只需要一个时间选择器的时候

html中引入

<div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
    <input class="form-control" size="8" type="text" value="<%date('Y-m-d', time())%>" id='date00' name='date00'>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

js中引入

/**
 * 时间选择区域
 *
 */
require.async(['common:widget/ui/jquery/jquery.js'], function($) {
    require.async('common:static/js/datetime-picker/bootstrap-datetimepicker.js');
    require.async('common:static/js/datetime-picker/locales/bootstrap-datetimepicker.zh-CN.js');
    var timer = setInterval(function(){
        if($ && $('.form_date').datetimepicker){
            clearInterval(timer);
            dateTimeReadyCallback();
        }
    },1000);

});
function dateTimeReadyCallback() {
    $('.form_date').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    }).on('changeDate', function(ev){

    });        
}

在前端生成二维码

/**
 * 在前端生成二维码
 * 请自行替换width,height,text参数
 * 
 */
require.async(['common:widget/ui/jquery/jquery.js'], function($){
    require.async('common:static/js/jquery.qrcode.min.js');
    var timer = setInterval(function(){
        if($ && $(".mobile-qrcode").html('').qrcode){
            clearInterval(timer);
            $(".mobile-qrcode").html('').qrcode({ 
                render: "canvas", 
                width: 126, 
                height: 126, 
                foreground: '#222', 
                background: '#fff',
                quiet: 10,
                radius: 3,
                text: qrText
            });
        }
    },1000);
});

单选框,复选框

// 单选框,复选框 系统中已经引入了icheck 库,使用参见: http://www.jq22.com/yanshi784
// 在需要标准化单选,多选 控件的时候,在它的父容器(比如form上)加一个icheck-container 的 class