美文网首页
【八】前端小工具

【八】前端小工具

作者: 吴里庆庆 | 来源:发表于2018-05-11 10:51 被阅读0次

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

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

var MaskUtil = (function(){

        var $mask,$maskMsg;

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

        function init(){
            if(!$mask){
                $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");
            }
            if(!$maskMsg){
                $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")
                    .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

相关文章

  • 【八】前端小工具

    1.防止表单重复提交,制作友情提示模态框 js中定义MaskUtil变量如下所示 : 显示 MaskUtil.ma...

  • 前端怎么才能找到项目做?

    推荐 20 个适合新手的前端练手项目。 难度层层递进,内容也很有趣,以游戏和小工具为主。 如果你还没有前端基础,推...

  • 5天时间搭建一个复杂的微信小程序

    如何5天时间快速搭建了一个包含前端后台的微信小程序【找微群小工具】。 01 小程序【找微群小工具】介绍 这个小程序...

  • 前端好用小工具

    一、素材 千库网: 网站链接:https://588ku.com/ 17素材: 网站链接:https://www....

  • 前端构建小工具

    前言   因公司项目需要,目前主要工作是在原有基础上不断的新增一些页面因为vue、react等框架虽然很好用,但是...

  • linux部署Vue项目血泪经验

    前言 来啦老铁! 笔者近期在团队开发个小工具,后端语言python,对应框架为flask,前端框架vue,笔者对v...

  • 前端开发小工具集合

    1、调试工具:spy-debugger 在平时开发中, 经常会遇到 微信调试,各种WebView样式调试、手机浏览...

  • 实用的前端小工具

    1. jQuery-spinner插件 简单的定制输入框旁边的按钮 http://www.dengwz.com/?...

  • 前端开发实用小工具

    以下为我这几年用到过感觉比较好用的工具,记录下来分享给大家。希望对大家有用。如有大家有更实用的东西,欢迎补充~ 代...

  • web前端常用小工具

    Snipaste可以用来拾色(f1 选中颜色 c复制 ctrl+v 粘贴),可以用来截图(快捷键f1),钉图方便...

网友评论

      本文标题:【八】前端小工具

      本文链接:https://www.haomeiwen.com/subject/yexfdftx.html