用avalon和jquery做基础网页导航
一、目录结构
<!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>
/**
* 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‘
])
/**
* 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();
})
})
[
{"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:"}
]
*{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;
}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。