New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FAQ: 详解主题机制 #12

Closed
niceue opened this Issue Jul 2, 2013 · 0 comments

Comments

Projects
None yet
1 participant
@niceue
Copy link
Owner

niceue commented Jul 2, 2013

所谓主题,是通过配置表单的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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment