用avalon和jquery做基础网页导航

（如果打开过慢，或者打不开，原因你懂得。）

一、目录结构

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





posted @ 2015-05-07 23:31  静文  阅读(498)  评论(0)  编辑  收藏  举报