通用导航开发（UI层）

来自CloudWiki
跳转至： 导航， 搜索

准备工作

新建文件nav-simple.html

在view/layout中新建文件nav-simple.html 

<div class="nav-simple">123</div>

然后在index.html中引用： 

 <!doctype html>
  <html lang="en">
    <head>
  	   <%= require('html-loader!./layout/head-common.html')  %>
  	   <title>我的第一个 HTML 页面</title>
    </head>
  
  	<body>
  		 <%= require('html-loader!./layout/nav-simple.html')  %>
  		<div>
  			<i class="fa fa-user"></i>
  		</div>
  		 
  		 <%= require('html-loader!./layout/footer.html')  %>
  	</body>
  </html>

新建js和css文件

在page/common下新建文件夹nav-simple

在其中新建文件index.css和index.js

在index.js中将css文件引用一下： 

'use strict'
require('./index.css');

同时，在index/index.js中把它引用一下，该文件修改为： 

'use strict';
require('page/common/nav-simple/index.js');

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

简单导航的建立

在nav-simple.html中建立： 

<div class="nav-simple">
	<div class="w">
		<a class="logo">MMALL</a>
	</div>
</div>

同时，在common/nav-simple/index.css中建立： 

.nav-simple{
	height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #ddd;
	background: #fff;

}

.nav-simple .logo{
	font-size: 26px;
	font-weight: bold;
	color:#c60023;
}

复杂导航的建立

在view/layout中，新建文件nav.html： 

<div class="nav">
	<div class="w">
		<div class="user-info">
			<span class="user not-login">
				<span class="link js-login">登录</span>
				<span class="link js-register">注册</span>
			</span>
			<span class="user login">
				<span class="link-text ">欢迎，
					<span class="username"></span></span>
				<span class="link js-logout">退出</span>
			</span>
		</div> 
		<ul class="nav-list">
			<li class="nav-item">
				<a class="link" href="./cart.html">
				<i class="fa fa-shopping-cart"></i>
				购物车 (<span class="cart-cont">0</span>)
				</a>
			</li>
			<li class="nav-item">
				<a class="link" href="./order-list.html">我的订单</a>
				<a class="link" href="./user-center.html">我的MMALL</a>
				<a class="link" href="./about.html">关于MMALL</a>
			</li>
		</ul>
	</div>
</div>

修改view/index.html中下面一行改为对nav.html的引用： 

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

样式设计

common下新建目录nav,其下新建文件index.js,index.css

index.js: 

'use strict'
require('./index.css');

在page/index/index.js中换成对nav的引用： 

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

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

在nav/css中写： 

.nav{
	background: #eee;
	height: 30px;
	line-height: 30px;

}
/*用户部分*/
.nav .user{
	float: left;

}
.nav .user.login{
	display: none;

}
.nav .user .link{
	margin-left: 5px;
}
/*链接部分*/
.nav  .nav-list{
	float: right;
}

.nav  .nav-list .nav-item{
	display: inline-block;
	margin-left: 5px;
}

这样复杂样式也就写成了。

取自“http://www.openbrains.net/mediawiki/index.php?title=通用导航开发（UI层）&oldid=10267”