通用header开发

新建html文件

1:44 view/layout/header.html

<div class="header">
    <div class="w">
        <a class="logo" href="./index.html">MMall</a>
        <div class="search-con">
            <input class="search-input" id="search-input" placeholder="请输入商品名称"/>
            <button class="btn search-btn" id="search-btn">搜索</button>
        </div>
    </div>
</div>

2:02 view/index.html

原先的nav.html改为
<%= require('html-loader!./layout/header.html')  %>

新建css和js文件

2:22 common中新建一个folder,header

 Index.js,index.css
 Index.js:

3:55 header/index.js

/*
* @Author: Rosen
* @Date:   2017-05-18 19:30:12
* @Last Modified by:   Rosen
* @Last Modified time: 2017-05-27 19:46:42
*/

'use strict';
require('./index.css');
var _mm     = require('util/mm.js');
// 通用页面头部
var header = {
    init : function(){
        
        this.bindEvent();
    },
    
    bindEvent : function(){
       
    },

};

header.init();

4:05 Page/index/index.js:

nav改为require('page/common/header/index.js');

填充css样式

9:18 Header/index.css:

/* 通用头部导航 */
.header .logo{
    position: absolute;
    left: 60px;
    top: 34px;
    display: block;
    font-size: 36px;
    color: #c60023;
    font-weight: bold;
    text-decoration: none;
}

.header .search-con{
    padding: 40px 0 30px 250px;
}
.header .search-con .search-input{
    width: 550px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 15px;
    border: 2px solid #c60023;
    outline: none;
}
.header .search-con .search-btn{
    position: absolute;
    height: 44px;
    width: 80px;
}

填充js样式

10:18

12：28 header/index.js

/*
* @Author: Rosen
* @Date:   2017-05-18 19:30:12
* @Last Modified by:   Rosen
* @Last Modified time: 2017-05-27 19:46:42
*/

'use strict';
require('./index.css');
var _mm     = require('util/mm.js');
// 通用页面头部
var header = {
    init : function(){
        this.onLoad();
        this.bindEvent();
    },
    onLoad : function(){
        var keyword = _mm.getUrlParam('keyword');
        // keyword存在，则回填输入框
        if(keyword){
            $('#search-input').val(keyword);
        };
    },
    bindEvent : function(){
        var _this = this;
        // 点击搜索按钮以后，做搜索提交
        $('#search-btn').click(function(){
            _this.searchSubmit();
        });
        // 输入会车后，做搜索提交
        $('#search-input').keyup(function(e){
            // 13是回车键的keyCode
            if(e.keyCode === 13){
                _this.searchSubmit();
            }
        });
    },
    // 搜索的提交
    searchSubmit : function(){
        var keyword = $.trim($('#search-input').val());
        // 如果提交的时候有keyword,正常跳转到list页
        if(keyword){
            window.location.href = './list.html?keyword=' + keyword;
        }
        // 如果keyword为空，直接返回首页
        else{
            _mm.goHome();
        }
    }
};

header.init();

15：37

17：29

恢复导航页面

18:37 view /index.html

添加：<%= require('html-loader!./layout/nav.html')  %>

Page/index/index.js 添加：

require('page/common/nav/index.js');