自定义nice-validator的theme

工作中使用到nice-validator.js,发现默认的theme无法满足要求,默认theme的提示框是在控件的右方,但是实际的页面中那个位置不一定可以放得下提示框,所以想到可以放在空间内部的右边(也可以浮动在上方,使用默认的“yellow_right_effect”进行调整)

因此研究了下nice-validator.js自带的theme,找到了修改的办法,下面是将提示框放在控件内部的右方的代码:

$.validator.setTheme({
    'inner-right': {
        formClass: 'n-inner-right', // 修改form的class
        msgClass: 'n-inner-right', // 修改msg-box的class
        msgShow: function ($msgbox, type) { // 重新定义msg-box的位置,可以参见zh-CN.js的代码
            $msgbox.css({
                'line-height': '0',
                'display': 'inline-block',
                'vertical-align': 'top',
                'outline': '0',
                // '+5px' 是为了更好看
                'left': -($msgbox.width() + 5) + 'px',
                // '5px' 是为了更好看
                'margin-top': '5px'
            });
            // 改变了msg-box的class,所以默认的css样式失效,需要重新设置
            $msgbox.find('.n-icon').css('background-image', 'url(../component/nice-validator-1.1.1/images/validator_default.png)');
        }
        //,
        // 这里还可以设置其他更多的方法,可以参见文档
        //msgHide: function(){}
    }
    /*
     ,
     更多主题可以在这里设置
     */
});

将代码保存到custom_theme.js中,并在nice-validator.js的下方引入,调用方法就是 {theme: ‘inner-right’}

这里给出了DEMO,可以F12研究下,这里是文档地址:https://niceue.com/validator,搜索“setTheme()”即可找到

本文《自定义nice-validator的theme》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!