自定义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()”即可找到

Echarts自定义Legend按钮实现以及Demo

前段时间,一个朋友问能不能做出这样的Echarts图,大概是这样:

他有个需求,有4条线分别代表:缓存100时方案A的曲线,缓存200时方案A的曲线,缓存100时方案B的曲线,缓存200时方案B的曲线,按常规模式这个时候Echarts的Legend会有4个按钮(缓存100方案A,缓存200方案A,缓存100方案B,缓存200方案B),它们分别控制一条线,但是他不想这样,他想要这样的4个按钮:缓存100,缓存200,方案A,方案B,每个按钮可以关闭对应的两条线。相当于他想要的展示维度和Echarts不一样,他的展示效果在分类上更合理。

当时之前我也没有做过,我也不知道能不能实现,直到后面有一天突然看到Echarts3.0的API,发现Echarts是提供了Legend点击事件方法的!然后马上去翻看2.0的,结果发现在用户手册上方一点的位置也明确写了的,只是从来没有注意到罢了…(-_-|||),不仅如此,Echarts还提供了线条开关的API!

既然这样,那这个需求就有可能实现了,可以自定义4个Legend按钮,然后在自己写方法来控制曲线,于是,没过多久,就有了这篇文章,先看看DEMO。下面开始解释代码:

继续阅读