Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。

森中灵 最后提交于11月前 整理V8.0.6
zhiqim_form.js31KB
/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。[遇见知启蒙,邂逅框架梦]
 * 
 * https://zhiqim.org/project/zhiqim_framework/zhiqim_ui.htm
 *
 * Zhiqim UI is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *          http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 
+(function(Z)
{//BEGIN

Z.Input = Z.Class.newInstance();
//定义支持的类型数值的,整数,小数的,字母的,两位小数金额的,折扣值,小时分钟值
Z.Input.types = ["Numeric", "Alphabetic", "AlphaNumeric", "Integer", "Decimal", "Amount2R", "Discount", "Date", "HourMinute"];
Z.Input.prototype = 
{
    defaults:
    {
        elem: null,
        options: null
    },
    
    init: function()
    {//初始化
        if (!this.elem || !this.options)
            return;
        
        this.$elem = Z(this.elem);
        if (this.options.paste != "true")
        {//如果不支持粘贴
            this.$elem.on("paste", Z.E.forbidden);
        }
        else
        {//支持粘贴
            this.$elem.on("paste", this.onPaste, this);
        }
            
        //键点击双击,按下事件,按下恢复事件和值被修改事件
        this.$elem.click(this.onClick, this);
        this.$elem.dblclick(this.onDbClick, this);
        
        this.$elem.keypress(this.onKeyPress, this);
        this.$elem.keyup(this.onKeyUp, this);
        this.$elem.change(this.onChange, this);
        
        //禁止拖输入{dragenter:拖放到目标上面,dragleave:拖放出目标,drop:拖放执行}
        this.$elem.on("drop", Z.E.forbidden);
    },
    remove: function()
    {//删除
        if (this.options.paste != "true"){
            this.$elem.off("paste", Z.E.forbidden);
        }else{
            this.$elem.off("paste", this.onPaste, this);
        }
        this.$elem.offclick(this.onClick, this);
        this.$elem.offdblclick(this.onDbClick, this);
        this.$elem.offkeypress(this.onKeyPress, this);
        this.$elem.offkeyup(this.onKeyUp, this);
        this.$elem.offchange(this.onChange, this);
        this.$elem.off("drop", Z.E.forbidden);
    },
    
    /************************************************/
    //事件方法,设置三种控制方式:
    //1、键按下时判断是否可以输入,用is开头方法
    //2、键恢复时表示判断通过,用on再检查一次
    //3、由其他方式修改了值change事件时,用ch检查控制
    //4、由设置值方式修改值,不会触发change方法暂时没办法控制
    /************************************************/
    
    onClick: function(e)
    {//单击光标移到最后
        //this.$elem.focusEnd();
    },
    onDbClick: function(e)
    {//双击光标全部选中
        this.$elem.select();
    },
    onChange: function(e)
    {
        this.call("ch", e);
    },
    onKeyPress: function(e)
    {//键按下事件
        if (Z.E.isBackspace(e) || Z.E.isEnter(e) || Z.E.isCtrl(e))
        {//firefox退格键时也会触发,ie和chrome不会,如果按到Ctrl键不处理
            return;
        }
        this.call("is", e);
    },
    onKeyUp: function(e)
    {//键按下恢复事件
        if (Z.E.isBackspace(e) || Z.E.isEnter(e))
        {//firefox退格键时也会触发,ie和chrome不会
            return;
        }
        
        if (Z.E.isCtrl(e) && !Z.E.isCtrlV(e))
        {//按住Ctrl,但不是Ctrl+V不处理
            return;
        }
        
        this.call("on", e);
    },
    onPaste: function(e)
    {//支持粘贴,先填充,再设置2毫秒后处理
        setTimeout(Z.bind(this.onPasteTimout, this), 2, e);
    },
    onPasteTimout: function(e)
    {//粘贴后判断
        this.call("on", e);
    },
    call: function(action, e)
    {
        if (this.options.type && action+this.options.type in this){
            this[action+this.options.type].call(this, e);
        }
    },
    
    /************************************************/
    //数值型判断,替换和粘贴
    /************************************************/
    isNumeric: function(e)
    {//控制输入数值型
        var key = Z.E.key(e);
        if (!Z.V.isDigit(key))
            return Z.E.cancel(e);
    },
    onNumeric: function(e)
    {//处理非数值型数据
        var value = this.$elem.val();
        if (!/^[0-9]*$/.test(value))
        {
            value = value.replace(/[^0-9]/g, "");
            this.$elem.val(value);
        }
    },

    /************************************************/
    //整数型判断,替换和粘贴
    /************************************************/
    isInteger: function(e)
    {//不是数字和已输入0时后面不能再输入
        var key = Z.E.key(e);
        if (!Z.V.isDigit(key))
            return Z.E.cancel(e);
            
        var value = this.$elem.val();
        if (value == "0"){
            return Z.E.cancel(e);
        }
    },
    onInteger: function(e)
    {//处理非整数型数据
        var value = this.$elem.val();
        if (!/^[0-9]*$/.test(value)){
            value = value.replace(/[^0-9]/g, "");
        }
        
        value = Z.S.prefixZeroRemove(value);
        this.$elem.val(value);
    },
    
    /************************************************/
    //小数型判断,替换和粘贴
    /************************************************/
    isDecimal: function(e)
    {//控制输入小数型
        var key = Z.E.key(e);
        if (!Z.V.isDigitOrDot(key))
            return Z.E.cancel(e);
            
        if (!Z.V.isDot(key))
            return;
            
        var value = this.$elem.val();
        if (value.indexOf(".") != -1){
            return Z.E.cancel(e);
        }
    },
    onDecimal: function(e)
    {//处理非小数型数据
        var value = this.$elem.val();
        if (!/^[0-9.]*$/.test(value)){
            value = value.replace(/[^0-9.]/g, "");
        }
        
        //删除前缀0,第二个点后数据,如果首符是.则加为0.
        value = Z.S.prefixZeroRemove(value);
        value = Z.S.removeSecondDot(value);
        if (value.length > 0 && value.charAt(0) == '.'){
            value = "0" + value;
        }
            
        this.$elem.val(value);
    },
    chDecimal: function(e)
    {
        this.onDecimal(e);
        
        //小数最后一位是点号要去除
        var value = this.$elem.val();
        value = Z.S.removeAmountZero(value);
        this.$elem.val(value);
    },
    
    /************************************************/
    //字母型判断,替换和粘贴
    /************************************************/
    isAlphabetic: function(e)
    {//控制输入字母型
        var key = Z.E.key(e);
        if (!Z.V.isLetter(key))
            Z.E.cancel(e);
    },
    onAlphabetic: function(e)
    {//处理非字母型数据
        var value = this.$elem.val();
        if (!/^[a-zA-Z]*$/.test(value))
        {
            value = value.replace(/[^a-zA-Z]/g, "");
            this.$elem.val(value);
        }
    },
    
    /************************************************/
    //字母数值型判断,替换和粘贴
    /************************************************/
    isAlphaNumeric: function(e)
    {//控制输入字母数值型
        var key = Z.E.key(e);
        if (!Z.V.isLetter(key) && !Z.V.isDigit(key))
            Z.E.cancel(e);
    },
    onAlphabeticNumeric: function(e)
    {//处理非字母型数据
        var value = this.$elem.val();
        if (!/^[0-9a-zA-Z]*$/.test(value))
        {
            value = value.replace(/[^0-9a-zA-Z]/g, "");
            this.$elem.val(value);
        }
    },
    
    /************************************************/
    //2位小数的金额判断,替换和粘贴
    /************************************************/
    isAmount2R: function(e)
    {//控制输入2位小数金额
        var key = Z.E.key(e);
        if (!Z.V.isDigitOrDot(key))
            return Z.E.cancel(e);

        var isSelection = Z.EL.isSelection(this.$elem[0]);
        var value = this.$elem.val();
        if (Z.V.isDot(key))
        {//已有小数点也不允许再输入
            if (value.indexOf(".") != -1)
                return Z.E.cancel(e);
        }
        else
        {//控制小数点后最多两位小数,且不允许零后输零
            var ind = value.indexOf(".");
            if (ind != -1)
            {
                if (ind <= value.length-1-2 && !isSelection)//-1表示转为索引,-2表示两位小数
                    return Z.E.cancel(e);
            }
                
            if (value == "0" && key == 48)
                return Z.E.cancel(e);
        }
    },
    onAmount2R: function(e)
    {
        var value = this.$elem.val();
        if (!/^[0-9.]*$/.test(value)){
            value = value.replace(/[^0-9.]/g, "");
        }
        
        //删除前缀0,第二个点后数据,如果首符是.则加为0.
        value = Z.S.prefixZeroRemove(value);
        value = Z.S.removeSecondDot(value);
        if (value.length > 0 && value.charAt(0) == '.'){
            value = "0" + value;
        }
        
        //金额还要增加2位小数限制
        var ind = value.indexOf(".");
        if (ind != -1 && ind <= value.length-1-2){
            value = value.substring(0, ind+1+2);
        }
        this.$elem.val(value);
    },
    chAmount2R: function(e)
    {
        this.onAmount2R(e);
        
        //金额抹零
        var value = this.$elem.val();
        value = Z.S.removeAmountZero(value);
        this.$elem.val(value);
    },
    
    /************************************************/
    //折扣(0.01-10)判断,替换和粘贴
    /************************************************/
    isDiscount: function(e)
    {//是否是折扣
        var key = Z.E.key(e);
        if (!Z.V.isDigitOrDot(key))
            return Z.E.cancel(e);

        var isSelection = Z.EL.isSelection(this.$elem[0]);
            
        var value = this.$elem.val();
        if (value == "10" && !isSelection)
        {//如果值等于10不允许再输入
            return Z.E.cancel(e);
        }
            
        if (Z.V.isDot(key))
        {//已有小数点也不允许再输入
            if (value.indexOf(".") != -1 && !isSelection)
                return Z.E.cancel(e);
        }
        else
        {//控制折扣最大10折,小数点后最多两位小数
            if (value.length == 1)
            {
                if (value != 1 || key != 48)//0,2,3,4,5,6,7,8,9后面接数字要求转为如2后接数字转为2.3,1后面不是0也设置民1.
                    return this.$elem.val(value+".");
            }
            
            var ind = value.indexOf(".");
            if (ind != -1 && ind <= value.length-1-2 && !isSelection)//-1表示转为索引,-2表示两位小数
                return Z.E.cancel(e);
        }
    },
    onDiscount: function(e)
    {
        var value = this.$elem.val();
        if (!/^[0-9.]*$/.test(value)){
            value = value.replace(/[^0-9.]/g, "");
        }
            
        //删除前缀0,第二个点后数据,如果首符是.则加为0.
        value = Z.S.prefixZeroRemove(value);
        value = Z.S.removeSecondDot(value);
        if (value.length > 0 && value.charAt(0) == '.'){
            value = "0" + value;
        }
        
        //折扣还要增加2位小数限制
        var ind = value.indexOf(".");
        if (ind != -1 && ind <= value.length-1-2){
            value = value.substring(0, ind+1+2);
        }
        
        //再比较不允许大于10,大于10则置空
        this.$elem.val((parseFloat(value) > 10)?"":value);
    },
    chDiscount: function(e)
    {
        this.onDiscount(e);
        
        //打折抹零
        var value = this.$elem.val();
        value = Z.S.removeAmountZero(value);
        this.$elem.val(value);
    },
    
    /************************************************/
    //日期(yyyy-MM-dd)判断,替换和粘贴
    /************************************************/
    isDate: function(e)
    {//是否是小时:分钟
        var key = Z.E.key(e);
        if (!Z.V.isDigitOrMinus(key))
            return Z.E.cancel(e);

        var isSelection = Z.EL.isSelection(this.$elem[0]);
        var value = this.$elem.val();
        if (value.length >= 10 && !isSelection)
            return Z.E.cancel(e);
            
        var regexp = null;
        switch(value.length)
        {
            case 0:regexp = /^[0-9]$/;break;
            case 1:regexp = /^[0-9]{2}$/;break;
            case 2:regexp = /^[0-9]{3}$/;break;
            case 3:regexp = /^[0-9]{4}$/;break;
            case 4:regexp = /^[0-9]{4}\-$/;break;
            case 5:regexp = /^[0-9]{4}\-[0-1]$/;break;
            case 6:regexp = /^[0-9]{4}\-(0[1-9]|1[0-2])$/;break;
            case 7:regexp = /^[0-9]{4}\-(0[1-9]|1[0-2])\-$/;break;
            case 8:regexp = /^[0-9]{4}\-(0[1-9]|1[0-2])\-[0-3]$/;break;
            case 9:
            case 10:regexp = Z.R.DATE;break;
            default:return Z.E.cancel(e);
        }

        if (value.length < 10)
            value += String.fromCharCode(key);
        if (!regexp.test(value))
            return Z.E.cancel(e);
    },
    onDate: function(e)
    {
        var value = this.$elem.val();
        if (!/^[0-9\-]*$/.test(value))
            value = value.replace(/[^0-9\-]/g, "");
            
        //再比较是否有效,有效则加入,否则置空
        var regexp = null;
        switch(value.length)
        {
            case 1:regexp = /^[0-9]$/;break;
            case 2:regexp = /^[0-9]{2}$/;break;
            case 3:regexp = /^[0-9]{3}$/;break;
            case 4:regexp = /^[0-9]{4}$/;break;
            case 5:regexp = /^[0-9]{4}\-$/;break;
            case 6:regexp = /^[0-9]{4}\-[0-1]$/;break;
            case 7:regexp = /^[0-9]{4}\-(0[1-9]|1[0-2])$/;break;
            case 8:regexp = /^[0-9]{4}\-(0[1-9]|1[0-2])\-$/;break;
            case 9:regexp = /^[0-9]{4}\-(0[1-9]|1[0-2])\-[0-3]$/;break;
            case 10:regexp = Z.R.DATE;break;
        }
        
        //再比较是否有效,有效则加入,否则置空
        this.$elem.val((!regexp || !regexp.test(value))?"":value);
    },
    
    /************************************************/
    //小时分钟(00:00)判断,替换和粘贴
    /************************************************/
    isHourMinute: function(e)
    {//是否是小时:分钟
        var key = Z.E.key(e);
        if (!Z.V.isDigitOrColon(key))
            return Z.E.cancel(e);

        var isSelection = Z.EL.isSelection(this.$elem[0]);
        var value = this.$elem.val();
        if (value.length >= 5 && !isSelection)
            return Z.E.cancel(e);
            
        var regexp = null;
        switch(value.length)
        {
            case 0:regexp = /^[0-2]$/;break;
            case 1:regexp = /^([0-1][0-9]|[2][0-3])$/;break;
            case 2:regexp = /^([0-1][0-9]|[2][0-3]):$/;break;
            case 3:regexp = /^([0-1][0-9]|[2][0-3]):([0-5])$/;break;
            case 4:
            case 5:regexp = /^([0-1][0-9]|[2][0-3]):([0-5][0-9])$/;break;
            default:return Z.E.cancel(e);
        }

        if (value.length < 5)
            value += String.fromCharCode(key);
        if (!regexp.test(value))
            return Z.E.cancel(e);
    },
    onHourMinute: function(e)
    {
        var value = this.$elem.val();
        if (!/^[0-9:]*$/.test(value))
            value = value.replace(/[^0-9:]/g, "");
            
        //再比较是否有效,有效则加入,否则置空
        var regexp = null;
        switch(value.length)
        {
            case 1:regexp = /^[0-2]$/;break;
            case 2:regexp = /^([0-1][0-9]|[2][0-3])$/;break;
            case 3:regexp = /^([0-1][0-9]|[2][0-3]):$/;break;
            case 4:regexp = /^([0-1][0-9]|[2][0-3]):([0-5])$/;break;
            case 5:regexp = /^([0-1][0-9]|[2][0-3]):([0-5][0-9])$/;break;
        }
        
        //再比较是否有效,有效则加入,否则置空
        this.$elem.val((!regexp || !regexp.test(value))?"":value);
    }
}

Z.Input.load = function(target)
{//加载函数
    //如果传入了目标,则在目标中查找,否则查找全部
    Z.$selector("input", target).each(function(elem)
    {
        if (Z.B.msie)
        {//IE处理成灰色和主流一致
            Z.placeholder(elem);
        }
        
        if (Z.EL.get(elem, "readonly") != null)
        {//如果有只读属性时不响应回退等按键,注意element里有readonly属性,默认=null
            Z.E.add(elem, "keydown", Z.E.forbidden);
            return;
        }
        
        if (!Z.EL.has(elem, "data-options"))
            return;
        
        //解析表达式并放置到哈唏表中
        var expression = Z.EL.get(elem, "data-options");
        var options = Z.AR.toObject(expression, ";");
        if (!options.type || !Z.AR.contains(Z.Input.types, options.type))
        {//不支持的类型不处理
            return;
        }
        
        //关闭输入法,chrome不支持,ie和firefox支持
        Z.EL.addClass(elem, "z-ime-disabled");
        new Z.Input({elem: elem, options: options});
    });
};

Z.onload(Z.Input.load);


/******************************************************/
//支持button组之间点击切换active
/******************************************************/
Z.ButtonGroup = {};
Z.ButtonGroup.map = new Z.HashMap();
Z.ButtonGroup.load = function(target)
{//加载
    //1.先清除以前的缓存
    if (target == null)
        Z.ButtonGroup.map.clear();
    
    //2.查找到符合条件的加到缓存
    var elements = Z.$selector("button", target);
    if (!elements || elements.length == 0)
        return;
        
    Z.each(elements, function(elem)
    {
        var group = Z.ButtonGroup.getGroupName(elem);
        if (!group){
            return;
        }
        
        if (!Z.ButtonGroup.map.containsKey(group))
            Z.ButtonGroup.map.put(group, [elem]);
        else
            Z.ButtonGroup.map.get(group).push(elem);
        
        Z(elem).click(Z.ButtonGroup.onclick);
    });
};

Z.ButtonGroup.getGroupName = function(elem)
{//获取组名
    if (!Z.EL.has(elem, "data-options"))
        return null;
        
    var expression = Z.EL.get(elem, "data-options");
    var options = Z.AR.toObject(expression, ";");
    return options.group;
};

Z.ButtonGroup.onclick = function(e)
{//点击事件
    var elem = Z.E.current(e);
    var group = Z.ButtonGroup.getGroupName(elem);
    if (!group){
        return;
    }
        
    Z.each(Z.ButtonGroup.map.get(group), function(btn){
        Z(btn).removeClass("z-active");
    });
    
    Z(elem).addClass("z-active");
}

Z.onload(Z.ButtonGroup.load);


/******************************************************/
//支持radio变成.radio,并支持点击切换active
/******************************************************/
Z.Radio = function(e)
{
    var $input = this;
    var clickFun = $input.onclick;
    if (typeof clickFun === 'function')
    {
        var oldCheck = $input.checked;
        var clickDone = true;
        $input.click();
        if (oldCheck === $input.checked){
            return;
        }
    }
    
    var $role = Z(Z.E.current(e));
    var name = Z.S.trim($role.attr("data-name"));
    var doThisTrue = function()
    {
        if (!Z.V.isEmpty(name))
        {//如果名称不为空,则把相同名称的都关掉
            Z("input[type=radio][name="+name+"]").attr("checked", false);
            Z("i.z-radio[data-name="+name+"]").removeClass("z-active");
        }
        $input.checked = true;
        $role.addClass("z-active");
    }
    
    //设置当前状态
    if (clickDone)
    {
        if($input.checked) {
            doThisTrue();
        } else {
            $role.removeClass("z-active");
        }
    }
    else
    {    
        doThisTrue();
        if ($input.onchange){
            $input.onchange();
        }
    }
};

Z.Radio.load = function(target)
{
    Z.$selector(".z-role-radio", target).each(function(elem)
    {//先删除目标范围内的数据
        Z(elem).remove(); 
    });
    
    Z.$selector("input[type=radio][data-role=z-radio]", target).each(function(elem)
    {//再加载目标范围内的数据
        var random = "Z_Radio_"+Z.random(10);
        var $elem = Z(elem).hidden().attr("data-id", random);
        var $cover = Z.$cover($elem).on('click', Z.E.stop);
        
        var width = $elem.offsetWidth();
        var id = Z.S.trim($elem.attr("id"));
        var name = Z.S.trim($elem.attr("name"));
        var checked = Z.S.trim($elem.attr("checked"));
        var classes = (checked == "true"?"z-active ":"") + Z.S.trim($elem.attr("data-class"));
        
        //新建.radio替换原来的radio,并设置name,data-class和点击事件
        var $role = Z('<i class="z-radio z-role-radio"></i>').appendTo($cover)
            .cssMaybe("padding-left", $elem.css("paddingLeft"))
            .cssMaybe("padding-right", $elem.css("paddingRight"))
            .cssMaybe("padding-top", $elem.css("paddingTop"))
            .cssMaybe("padding-bottom", $elem.css("paddingBottom"))
            .addClass("z-relative").css("margin-left", -width).addClass(classes)
            .attr("id", random).attr("data-id", id).attr("data-name", name)
            .click(Z.Radio, elem);
    });
};

Z.Radio.setChecked = function(elem, val)
{
    var $elem = Z.$elem(elem, "Z.Radio.setChecked");
    
    $elem = Z($elem[0]);
    
    var elemType = $elem.attr('type');
    if (!elemType || elemType.trim().toLowerCase() !== 'radio')
        return Z.alert('[Z.Radio.setChecked]参数[elem]对象类型为radio!');
        
    if (typeof val !== 'boolean')
        return Z.alert('[Z.Radio.setChecked]第二个参数必须是布尔值!');
    
    //同组radio
    var radioName = Z.S.trim($elem.attr("name"));
    if (val && !Z.V.isEmpty(radioName))
    {
        Z("input[type=radio][name="+radioName+"]").attr("checked", false);
        Z("i.z-radio[data-name="+radioName+"]").removeClass("z-active");
    }
    $elem.attr("checked", val);
    
    //Z样式修改
    var dataRole = $elem.attr("data-role");
    var $role = $elem.parent().find('i.z-radio');
    if (!dataRole || dataRole !== "z-radio" || !$role[0])
        return;
    
    if (val)
        $role.addClass("z-active");
    else
        $role.removeClass("z-active");
}

Z.onload(Z.Radio.load);


/******************************************************/
//支持checkbox变成.checkbox,并支持点击切换active
/******************************************************/
Z.Checkbox = function(e)
{
    var $input = this;
    var clickFun = $input.onclick;
    if (typeof clickFun === 'function')
    {
        var oldCheck = $input.checked;
        var clickDone = true;
        $input.click();
        if (oldCheck === $input.checked){
            return;
        }
    }

    var $role = Z(Z.E.current(e));
    var checked = $role.hasClass("z-active");
    
    //设置当前状态
    if (clickDone)
    {
        if($input.checked) {
            $role.addClass("z-active");
        } else {
            $role.removeClass("z-active");
        }
    }
    else
    {
        //切换active
        $input.checked = !checked;
        $role.toggleClass("z-active");
        if ($input.onchange){
            $input.onchange();
        }
    }
};

Z.Checkbox.load = function(target)
{
    Z.$selector(".z-role-checkbox", target).each(function(elem)
    {//先删除目标范围内的数据
        Z(elem).remove(); 
    });
    
    Z.$selector("input[type=checkbox][data-role=z-checkbox]", target).each(function(elem)
    {//再加载目标范围内的数据
        var random = "Z_Checkbox_"+Z.random(10);
        var $elem = Z(elem).hidden().attr("data-id", random);
        var $cover = Z.$cover($elem).on('click', Z.E.stop);
        
        var width = $elem.offsetWidth();
        var id = Z.S.trim($elem.attr("id"));
        var name = Z.S.trim($elem.attr("name"))
        var checked = Z.S.trim($elem.attr("checked"));
        var classes = (checked == "true"?"z-active ":"") + Z.S.trim($elem.attr("data-class"));
        
        //新建.checkbox替换原来的checkbox,并设置name,data-class和点击事件
        var $role = Z('<i class="z-checkbox z-role-checkbox"></i>').appendTo($cover)
            .cssMaybe("padding-left", $elem.css("paddingLeft"))
            .cssMaybe("padding-right", $elem.css("paddingRight"))
            .cssMaybe("padding-top", $elem.css("paddingTop"))
            .cssMaybe("padding-bottom", $elem.css("paddingBottom"))
            .addClass("z-relative").css("margin-left", -width).addClass(classes)
            .attr("id", random).attr("data-id", id).attr("data-name", name)
            .click(Z.Checkbox, elem);
    });
};

Z.Checkbox.click = function(role)
{
    var $role = Z.$elem(role, "Z.Checkbox.click");
    var $elem = Z("input[type=checkbox][data-role=z-checkbox][data-id="+$role.attr("id")+"]");
    
    //切换active
    var checked = $role.hasClass("z-active");
    $role.toggleClass("z-active");
    $elem.attr("checked", !checked);
    
    if ($elem[0].onchange){
        $elem[0].onchange();
    }
};

Z.Checkbox.setChecked = function(elem, val)
{
    var $$elem = Z.$elem(elem, "Z.Checkbox.setChecked");
    var inputLength = $$elem.length;
    var $$checkBox = Z("");
    var i = 0, j = 0, $elem, elemType;
    for (i;i < inputLength;i++)
    {
        $elem = $$elem[i];
        elemType = Z($elem).attr('type');
        if (elemType && elemType.trim().toLowerCase() === 'checkbox')
        {
            $$checkBox[j] = $elem;
            j++;
        }
    }
    inputLength = j;
    if (inputLength === 0)
        return Z.alert('[Z.Checkbox.setChecked]参数[elem]对象类型为checkbox!');
    
    if (typeof val !== 'boolean')
        return Z.alert('[Z.Checkbox.setChecked]第二个参数必须是布尔值!');
    
    var dataRole, $role;
    for (i = 0;i < inputLength;i++)
    {
        $elem = Z($$checkBox[i]);
        $elem.attr('checked', val);
        
        dataRole = $elem.attr("data-role");
        $role = $elem.parent().find('i.z-checkbox');
        if (!dataRole || dataRole !== "z-checkbox" || !$role[0])
            continue;
            
        if (val)
            $role.addClass("z-active");
        else
            $role.removeClass("z-active");
    }
    
}

Z.onload(Z.Checkbox.load);

/******************************************************/
//支持textarea的maxlength和placeholder
/******************************************************/

Z.Textarea = {};
Z.Textarea.load = function(target)
{//加载函数
    //如果传入了目标,则在目标中查找,否则查找全部
    Z.$selector("textarea", target).each(function(elem)
    {
        var $elem = Z(elem);
        
        //1.检查placeholder
        if (Z.B.msie || $elem.attr("data-role") == "z-placeholder")
        {//IE处理成灰色和主流一致,指定了要求处理的描述
            Z.placeholder(elem);
        }
        
        //2.检查maxlength
        var maxlength = $elem.attr("maxlength");
        if (Z.V.isInteger(maxlength))
        {
            maxlength = parseInt(maxlength);
            $elem.keypress = function(e)
            {//键按下事件
                if (Z.E.isBackspace(e) || Z.E.isEnter(e) || Z.E.isCtrl(e))
                {//firefox退格键时也会触发,ie和chrome不会,如果按到Ctrl键不处理
                    return;
                }
                if ($elem.val().length >= maxlength)
                {
                    return Z.E.cancel(e);
                }
            }
        }
    });
};

Z.onload(Z.Textarea.load);

/******************************************************/
//支持form使用iframe调用
/******************************************************/
Z.CallFrame = {};
Z.CallFrame.load = function()
{
    Z("form[data-role=z-call-frame]").each(function(form)
    {
        //1.先判断是否存在<iframe name="zCallFrame"></iframe>
        var $frame = Z('iframe[name="zCallFrame"]');
        if ($frame.length == 0)
            $frame = Z('<iframe name="zCallFrame" style="display:none;"></iframe>').prependTo("body");
            
        //2.设置form的target
        form.target = "zCallFrame";
        
        //3.设置zFormIndex
        if (!form.zFormIndex)
        {
            var zFormIndex = document.createElement("input");
            zFormIndex.name = "zFormIndex";
            zFormIndex.type = "hidden";
            form.insertBefore(zFormIndex, form.firstNode);
        }
        var ind = -1;
        for (var i=0;i<document.forms.length;i++)
        {
            if (form == document.forms[i])
            {
                ind = i;
                break;
            }
        }
        form.zFormIndex.value = ind;
        
        //4.设置zCallFrame
        if (!form.zCallFrame)
        {
            var zCallFrame = document.createElement("input");
            zCallFrame.name = "zCallFrame";
            zCallFrame.type = "hidden";
            form.insertBefore(zCallFrame, form.firstNode);
        }
        form.zCallFrame.value = "true";
    });
};

Z.onload(Z.CallFrame.load);

/*************************************************************************************/
//描述对象
/*************************************************************************************/
Z.placeholder = function(elem)
{
    var $elem = Z.$elem(elem);
    var ph = $elem.attr("placeholder");
    if (Z.V.isEmptyBlank(ph))
        return;
    
    $elem.removeAttr("placeholder");
    var width = $elem.offsetWidth();
    var height = $elem.offsetHeight();

    //创建一个封套把input/textarea和placeholder包含在一起
    var $cover = Z.$cover($elem);
    
    //创建描述对象
    var $placeholder = Z('<div class="z-placeholder">'+ph+'</div>');
    $placeholder.appendTo($cover)
                .opacity(0.8)
                .css({width: width, height: height})
                .cssMaybe("padding-left", $elem.cssNum("paddingLeft")+2)//保留光标2像素位置
                .cssMaybe("padding-right", $elem.css("paddingRight"))
                .cssMaybe("padding-top", $elem.css("paddingTop"))
                .cssMaybe("padding-bottom", $elem.css("paddingBottom"))
                .cssMaybe("font-family", $elem.css("fontFamily"))
                .cssMaybe("font-size", $elem.css("fontSize"))
                .cssMaybe("line-height", $elem.css("lineHeight"))
                .cssMaybe("text-indent", $elem.css("textIndent"));
                
    if ($elem.val().length > 0){
        $placeholder.hide();
    }

    //事件隐藏和显示描述
    $elem.keydown(function(){$placeholder.hide();});
    $elem.keyup(function()
    {
        if ($elem.val().length > 0)
            $placeholder.hide();
        else
            $placeholder.show();
    });
}

/*************************************************************************************/
//<pre>对象
/*************************************************************************************/
Z.preRemoveBR = function()
{//定义了.z-text-prewrap和.z-text-preline样式且不是pre标签的首字符\n删除
    Z(".z-text-preline:not(pre),.z-text-prewrap:not(pre)").each(function(elem)
    {
        var $elem = Z(elem);
        var html = $elem.html();
        if (Z.V.isEmpty(html))
            return;
            
        if (html.charAt(0) == '\n'){
            $elem.html(html.substring(1));
        }
    });
}

Z.onload(Z.preRemoveBR);

//END
})(zhiqim);