教你定制 nice Validator 表单验证的主题样式

JonyZhang 发布于 2013/08/03 18:36
阅读 2K+
收藏 4

所谓主题,是通过配置表单的class、消息模板以及其他一些参数实现的不同展现效果。
有了主题,可以帮助简化很多UI方面的配置,也可以作为一些特殊的配置存在。
关于参数的更多了解,参见参数配置

nice Validator 的主题具有以下特点:
  1. 简单,js配置,stylus生成样式,少量代码便可以配置出新的主题
  2. 独立,不同表单可以应用不同主题
  3. 自由,除了用于配置主题的msg开头的参数,其他大部分参数也都可以配置到主题中
  4. 灵活,主题配置本质上是在传参,优先级高于全局配置,但是又会被调用时的传参覆盖

准备工作

  1. 你需要安装Node.js环境,并且在validator目录执行npm install命令安装依赖
  2. 你需要知道Stylus的语法,很简单的,一旦你学会Stylus,你以后写样式的时候肯定会离不开它!

你说你不想花时间来学习Stylus?
那好吧,硬写css也是能搞定的,你可以省略这一步直接说:我已经准备好了!Ready? Go!

编写主题

所有主题配置文件放置在src/themes目录,然后通过src/jquery.validator.styl文件导入,编译该文件就得到根目录下的jquery.validator.css文件。
该文件默认代码如下:

@import "themes/base";

/*********************
 * Themes
 *********************/
@import "themes/default";
@import "themes/simple";
@import "themes/yellow";

themes/simple的styl文件代码如下:

/* theme: simple */
.n-simple {
    .msg-wrap {
        .n-icon {
            background-image: url(images/validator_simple.png);
        }
    }
    .n-left, .n-right {
        margin-top: 5px;
    }
    .n-bottom .msg-wrap {
        margin-top: 3px;
    }
    .n-tip {
        .n-icon {display:none;}
    }
}

别小看这一点css代码哦!它可是包含了上下左右四个方向的消息,原理就是.n-position中的position是哪个方向,消息就会自动显示在输入框的周围哪个位置。

`.n-right`会使消息显示在输入框右边;  
`.n-bottom`会使消息显示在输入框下边;  
`.n-top`会使消息显示在输入框上边;  
`.n-left`会使消息显示在输入框左边;

怎么样是不是很简单?
再来看下js配置文件中的代码吧:

$.validator.setTheme({
    'simple_right': {
        formClass: 'n-simple',
        msgClass: 'n-right'
    },
    'simple_bottom': {
        formClass: 'n-simple',
        msgClass: 'n-bottom'
    }
});

    其中的formClass是用于控制该主题css的命名空间,会自动添加到初始化后的表单上面。msgClass是控制每条消息方向的类。也就是说这个参数四选一,不用你起名字了。
    当你写完上面那段样式后,就可以配置出同一款主题的4个方向的样式了。上面js配置中simple_right和simple_bottom是用于调用的时候传递的主题名字。

最后,附上自动生成的msg-box的DOM结构,你在写样式的时候也可以利用谷歌或者火狐的开发者工具查看,会更直观:

<span class="msg-box n-right" style="" data-for="user[name]"> 
    <span class="msg-wrap n-error" role="alert"> 
        <span class="n-icon"></span> 
        <span class="n-msg">不能为空</span> 
    </span> 
</span>
加载中
0
云轩
云轩

不错不错支持

返回顶部
顶部