改造matrix_admin模版后台——登录（二）

一、添加CSS

1）想先把CSS给挪过来一点，发现有好几个CSS文件，一个个的看了。

　　

 

2）最后那个调用google字体css的，非常影响我打开的速度，调试了下，发现会影响英文字体，但中文不受影响；下面的Lost password那里有区别。

　　　　这是加了字体CSS的时候。

　　　　这是没加字体CSS的时候。

 

3）有两个bootstrap的压缩CSS，都不知道里面写的是啥，这个得到官网去看看有没有不压缩的，不然以后都改不了了。

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />

用chrome查看了下代码，是V2.3.0的CSS，打开搜索引擎找到了一份没压缩过的，也是这个版本的CSS。

　　

 

4）先看看未复制matrix-login.css之前的样子。

　　

　　然后把login专用的CSS，复制过来。像模像样啦。顺便把logo.png图片复制到images文件夹下面。

<link rel="stylesheet" href="css/matrix-login.css" />

　　

 

5）还差个icon字体显示。font-awesome下面存放的就是第三方字体。

<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

 

二、添加JavaScript

根据matrix.login.js文件的内容，可以看到就40行左右的代码，这里我决定将所有不用登录的操作封装在一个js文件夹中，名字就叫public吧。

经过一阵折腾后，创建了四个基本的空文件，分别是：models/publicModel.js，views/publicView.js，app/public/app.js，app/public/main.js。下图是在合并文件的时候显示的文件列表：

1）先实现隐藏与显示找回密码按钮

　　在publicView.js中写入逻辑代码，然后在App文件中引用这个visibleForgetPage方法。顺利实现。点击backup to login也能返回。

visibleForgetPage: function() {//显示或隐藏找回密码页面
                $('#to-recover').click(function() {
                        $("#loginform").slideUp();
                        $("#recoverform").fadeIn();
                        return false;
                });
                $('#to-login').click(function() {
                        $("#recoverform").hide();
                        $("#loginform").fadeIn();
                        return false;
                });
        }

 

2）低版本IE浏览器实现placeholder

　　由于有些浏览器不支持placeholder这个属性，所以就要模拟出来。我打算把这段模拟代码放到util/view.js文件中，这样调用起来也方便。

placeholder: function() {//IE浏览器实现placeholder属性
                if($.browser.msie == false || $.browser.version.slice(0,3) >= 10) {
                    return;
                }
            $('input[placeholder]').each(function() {
                var input = $(this);
                $(input).val(input.attr('placeholder'));
                $(input).focus(function(){
                     if (input.val() == input.attr('placeholder')) {
                         input.val('');
                     }
                });
                $(input).blur(function(){
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }

　　然后在views/publicView.js中直接在initialize方法中引用即可。效果如下图：

initialize: function() {
            viewUtil.model.push(this.model);
            viewUtil.placeholder();
            //viewUtil.errorSelector = '#prompt';
        }

 

3）firefox碰到个奇怪的问题，如下：

不喜欢出现这种乱七八糟的提示，所以就排查了一下，原来是因为form的原因，去掉就木有了，但是会少一点样式。

<form id="loginform" class="form-vertical">

果断修改matrix-login.css中的form样式，把form改成article标签。提示马上消失，样式也继续存在。

 

4）绑定登录与找回密码的事件。

中间为了与我原先写的结构能够更好的兼容，又修改了一下原来的代码。util/view.js、util/model.js

login: function() {//登录操作
            var _model = this.model;
            $('#btnLogin').click(function() {
                    var fn = function(json) {
                        if(_model.isSuccess(json)) //跳转到首页
                            location.href = _model.webHome;
                        viewUtil.setError(json.msg);
                    };
                    //传参数
                    _model.post(_model.ajaxLogin, $(this), {}, fn);
            });
        },
        revocer: function() {//找回密码
                $('#btnRecover').click(function() {

                });
        }

 

 

demo下载地址：

http://download.csdn.net/detail/loneleaf1/8336579