【八】前端小工具

1.防止表单重复提交，制作友情提示模态框

js中定义MaskUtil变量如下所示 ：

var MaskUtil = (function(){

        var $mask,$maskMsg;

        var defMsg = '正在处理，请稍待。。。';

        function init(){
            if(!$mask){
                $mask = $("
").appendTo("body");
            }
            if(!$maskMsg){
                $maskMsg = $("
"+defMsg+"
")
                    .appendTo("body").css({'font-size':'12px'});
            }

            $mask.css({width:"100%",height:$(document).height()});

            var scrollTop = $(document.body).scrollTop();

            $maskMsg.css({
                left:( $(document.body).outerWidth(true) - 190 ) / 2
                ,top:( ($(window).height() - 45) / 2 ) + scrollTop
            });

        }

        return {
            mask:function(msg){
                init();
                $mask.show();
                $maskMsg.html(msg||defMsg).show();
            }
            ,unmask:function(){
                $mask.hide();
                $maskMsg.hide();
            }
        }

    }());

• 显示

MaskUtil.mask("别急哦,正在加速处理中...");

• 取消

MaskUtil.unmask();

2.年月控件自定义

 function getYears() {
        var curYear = new Date().getFullYear();
        (function () {
            var years = [];
            for (var i = curYear + 1; i >= curYear - 10; i--) {
                years.push({key: i, value: i + '年'});
            }
            $('#billYear').combobox({
                data: years,
                valueField: 'key',
                textField: 'value'
            });
            $('#billYear').combobox("setValue", curYear);
        })();
    }
    function getMonths() {
        var curMonth = new Date().getMonth() + 1;
        (function () {
            var months = [];
            for (var i = 12; i >= 1; i--) {
                months.push({billMonthId: i, billMonthName: i + '月'});
            }
            $('#billMonth').combobox({
                data: months,
                valueField: 'billMonthId',
                textField: 'billMonthName'
            });
            $('#billMonth').combobox("setValue", curMonth);
        })();
    }

效果图

2.1 年月自定义效果图.png