(如果打开过慢,或者打不开,原因你懂得。)
一、目录结构
![](http://7xitvn.com1.z0.glb.clouddn.com/demonavone5d29e947-c122-4bc2-9dc3-4cc6fd48724c.png)
二、index.html部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script defer async="true" data-main="main" src="../../bower_components/requirejs/require.js"></script>
<link rel="stylesheet" href="app/nav.css"/>
<title>用avalon制作导航</title>
</head>
<body>
<div class="navColor" ms-controller="demo">
<ul class="_navCenter">
<li ms-repeat-el="nav" ms-click="show()"><a ms-attr-href="el.src" ms-text="el.Navname"></a></li>
</ul>
</div>
</body>
</html>
三、main.js部分
/**
* Created by s9-1102 on 2015/5/7.
*/
require.config({
paths:{
'avalon':'../../bower_components/avalon.oniui/avalon.min',
'jquery':'../../bower_components/jquery/dist/jquery.min'
}
})
require([
'app/nav'
])
四、nav.js部分
/**
* Created by s9-1102 on 2015/5/7.
*/
define(['avalon','jquery'],function(){
avalon.ready(function(){
var navdemo = avalon.define({
$id:'demo',
nav:[],
show:function(){
$(this).addClass('navHover').siblings().removeClass('navHover');
}
})
$.get('app/nav.json',function(json){
navdemo.nav=json;
$("._navCenter li").eq(0).addClass('navHover');
});
console.log(navdemo.nav);
avalon.scan();
})
})
五、nav.json部分
[
{"Navname":"首页","src":"javascript:"},
{"Navname":"个性玩法","src":"javascript:"},
{"Navname":"门票","src":"javascript:"},
{"Navname":"美食","src":"javascript:"},
{"Navname":"交通","src":"javascript:"},
{"Navname":"签证","src":"javascript:"},
{"Navname":"游玩","src":"javascript:"},
{"Navname":"讨论","src":"javascript:"},
{"Navname":"关于我们","src":"javascript:"}
]
六、nav.css部分
*{margin:0;padding:0;font-family:"Microsoft YaHei","Myriad Pro","Hiragino Sans GB",Calibri,Helvetica, tahoma, arial, simsun, sans-serif}
.navColor{
height:35px;
background-color:#ff6600;
line-height:35px;
font-size:15px;
}
._navCenter{
padding:050px;
list-style: none;
}
._navCenter li{
float: left;
}
._navCenter li a{
display:inline-block;
padding:030px;
color:#fff;
text-decoration: none;
}
._navCenter li a:hover{
background-color:#ff9b59;
}
.navHover{
background-color:#ff9b59;
}
总结:通过利用avalon的循环输出能力,和jquery对dom节点强大的操作能力,来制作导航条,不需要重复书写html结构,就可以简单的完成重复性工作。简单高效。