通用侧边导航开发

侧边栏网页

新建网页view /layout/nav-side.html

打开View/index.html

在<%= require('html-loader!./layout/header.html')  %>下面添加 添加:

 <div class="page-wrap w">
  			<%= require('html-loader!./layout/nav-side.html')  %>
  			<div class="content with-nav">test</div>
  		</div>

03:08 在view /layout/nav-side.html添加：

<ul class="nav-side">
    <li class="nav-item">
    	<a class="link" href="">个人中心</a>
    </li>
    <li class="nav-item">
    	<a class="link" href="">我的订单</a>
    </li>
    <li class="nav-item">
    	<a class="link" href="">关于mmall</a>
    </li>
</ul>

创建js和css文件

4:22 common/nav-side/index.js和index.css

common/nav-side/index.js添加：

'use strict';
require('./index.css');
var _mm             = require('util/mm.js');
// 侧边导航
var navSide = {
    
    init : function(){
                
    }
    
};

module.exports = navSide.init();

05:24 page/index/index.js 添加：

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

编辑CSS

06:26 为nav-side/index.css添加内容

/* 导航主体 */
.nav-side{
    float: left;
    width: 130px;
    min-height: 100px;
}
.nav-side .nav-item{
    line-height: 25px;
    font-size: 13px;
}
.nav-side .nav-item .link{
    color: #888;
}
.nav-side .nav-item.active .link{
    color: #c60023;
}
/* 右侧内容区 */
.content.with-nav{
    float: left;
    width: 950px;
}

08:33 view/layout/nav-side.html做如下改动：

<a class="link" href="">我的订单</a>

创建网页模板

16:21 把nav-side.html改成这样：

<ul class="nav-side">
 
</ul>

18:05 创建模板：page/nav-side/index.string

{{#navList}}
{{#isActive}}
<li class="nav-item active">
{{/isActive}}
{{^isActive}}
<li class="nav-item">
{{/isActive}}
    <a class="link" href="{{href}}">{{desc}}</a>
</li>
{{/navList}} 

18:27 在nav-side/index.js中引用这个模板：

 'use strict';
require('./index.css');
var _mm             = require('util/mm.js');
var templateIndex   = require('./index.string');

09:13 nav-side 下index.js添加内容：

/*
* @Author: Rosen
* @Date:   2017-05-19 17:39:14
* @Last Modified by:   Rosen
* @Last Modified time: 2017-05-24 16:46:02
*/
'use strict';
require('./index.css');
var _mm             = require('util/mm.js');
var templateIndex   = require('./index.string');
// 侧边导航
var navSide = {
    option : {
        name : '',
        navList : [
            {name : 'user-center', desc : '个人中心', href: './user-center.html'},
            {name : 'order-list', desc : '我的订单', href: './order-list.html'},
            {name : 'user-pass-update', desc : '修改密码', href: './user-pass-update.html'},
            {name : 'about', desc : '关于MMall', href: './about.html'}
        ]
    },
    init : function(option){
        // 合并选项
        $.extend(this.option, option);
        this.renderNav();
    },
    // 渲染导航菜单
    renderNav : function(){
        // 计算active数据
        for(var i = 0, iLength = this.option.navList.length; i < iLength; i++){
            if(this.option.navList[i].name === this.option.name){
                this.option.navList[i].isActive = true;
            }
        };
        // 渲染list数据
        var navHtml = _mm.renderHtml(templateIndex, {
            navList : this.option.navList
        });
        // 把html放入容器
        $('.nav-side').html(navHtml);
    }
};

module.exports = navSide;

修改webpack.config.js文件

20:21 修改webpack.config.js文件

module: {
        loaders: [
          { test: /\.css$/,loader:Ex.extract('style-loader', 'css-loader')  },
          { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,loader:'url-loader?limit=100&name=resource/[name].[ext]'  },
          { test: /\.string$/,loader:'html-loader'  }
        ]
},

执行npm run dev

试验：

21:15 page/index/index.js改为：

 'use strict';
require('page/common/nav/index.js');
require('page/common/header/index.js');
var navSide =require('page/common/nav-side/index.js');

var _mm = require('util/mm.js');

navSide.init({
	name:'user-center'
});