主题特性
- 简单,js 配置 className,css 定义主题样式
- 独立,不同表单可以应用不同主题
- 自由,除了主题参数,其他参数也都可以配置到主题中
- 灵活,主题配置本质上是在传参,优先级高于全局配置,但是又会被调用时的传参覆盖
配置主题
(1). 调用 $.validator.setTheme()
接口
$.validator.setTheme("themeName", {
formClass: "nice-flat",
msgClass: "n-right"
});
其中的 formClass
参数定义了 CSS 的名称空间,表单初始化后自动添加到 form 上面。msgClass
参数定义了每条消息拥有的 CSS 类。虽然这两个参数没有要求,但是建议 msgClass
按照以下 4 个类名命名:
n-top
:使消息显示在输入框上边n-right
:使消息显示在输入框右边n-bottom
:使消息显示在输入框下边n-left
:使消息显示在输入框左边
nice-validator 对 msgClass
有一个方向的检测机制,包含 top|right|bottom|left
的名称可以控制消息插入的位置。
(2). 配置更多参数
- 每个主题可以配置所有参数,互不干扰
- 配置优先级:
data-validator-option
>options
>theme options
>global options
编写主题样式
主题 CSS 样式可以写在 jquery.validator.css 文件中,也可以定义在你的其他样式表中。
官方的主题样式使用 stylus 工具开发,所有主题配置文件放置在 src/themes 目录,然后通过src/jquery.validator.styl 文件导入,编译该文件就得到 dist 目录下的 jquery.validator.css 文件。
以下是 simple 系列主题代码:
// local/zh-Cn.js 中的配置
$.validator.setTheme({
'simple_right': {
formClass: 'n-simple',
msgClass: 'n-right'
},
'simple_bottom': {
formClass: 'n-simple',
msgClass: 'n-bottom'
}
});
/* src/themes/simple.styl */
.n-simple {
.msg-wrap {
position: absolute;
z-index: 1;
.n-icon {
background-image: url(images/validator_simple.png);
}
}
.n-top {
.msg-wrap {
bottom: 100%;
}
}
.n-bottom {
.msg-wrap {
top: 100%;
}
}
.n-left, .n-right {
margin-top: 5px;
}
.n-bottom .msg-wrap {
margin-top: 3px;
}
.n-tip {
.n-icon {display:none;}
}
}
自定义消息结构
参见 msgMaker 参数
添加新评论 ( 支持 GFM 和 Gravatar )