改造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