用avalon和jquery做基础网页导航

url：http://zjingwen.github.io/SetTimeOutGoBlog/demoAvalon/navone/index.html

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

一、目录结构

二、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结构，就可以简单的完成重复性工作。简单高效。

来自为知笔记(Wiz)

时间： 2024-10-05 15:38:31

用avalon和jquery做基础网页导航的相关文章

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 滚动图片 广告特效 选项卡特效 鼠标特效 表单按钮 表格图层 窗口特效 文字特效 色彩特效 图像特效 日期特效 导航菜单 在线客服 当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery背景跟随鼠标移正文 jQuery背景跟

利用jquery制作网页导航定位

我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品.那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息.例如图中所示,左侧是商品列表,右侧是商品分类导航栏. 我们现在需要做到的效果是: 1.点击某个商品分类,自动跳转至具体的商品列表. 2.在鼠标滚动浏览商品的同时,根据左侧的商品信息的变化情况,右侧的分类名称会自动标红.表示现在浏览的商品正是该分类下的商品. 实现的基本思路: 1.设置锚点.在导航栏的<a>标签中,设置"href"属性为

阮一峰：jQuery官方基础教程笔记

jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果. 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多.初学者常常感到,入门很方便

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

jQuery官方基础教程笔记(转载)

本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果. 虽然jQuery上手简单,比其他

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

jquery.mobile手机网页简要

先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应用程序开发框架推荐 最终选择的是 jQuery Mobile ,官方地址:http://jquerymobile.com jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架.能工作在现有主流的智能手机和平板电脑上,且构建于 jQuery 以及 jQuery UI类库之上,用极少的

关于网页导航栏制作的几种方法与常见问题解决（新人向）

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

jquery学习基础(二)

今天继续学习jquery的基础.直接看栗子吧. jquery操作checkbox demoOne 这里我点击超链接的时候,使用alert将所有已经checked的checkbox的value值打印出来,先看下效果: 关键的html和jquery代码: <div> <a href="#">获得被选中的元素</a> <input type="checkbox" checked value="111">c