自定义导航栏
navigation-bar.1.0.0.js前言1. 简单文字1.1 演示代码1.2 效果图 2. 简单图片2.1 演示代码2.2 效果图 3. 文字和图片3.1 演示代码3.2 效果图 4. 自适应布局4.1 演示代码4.2 效果图 5. 核心JS代码navigation-bar.1.0.0.js
前言
之前做了一个项目中，使用了类似手机中选项卡切换的导航栏，想着能够整理出来，写了一个demo，放在了Github中，欢迎大家提出意见啊^_^
本Demo源地址请点击这里
本站下载地址请点击这里
下面，我们分别介绍下面的四种应用场景：
简单文字简单图片文字和图片自适应布局
1. 简单文字
首先是最简单的导航栏形式，只显示最简单的文本，点击文本可以自动切换对应的内容，本例是自动展示导航栏的标题描述。
1.1 演示代码
<!DOCTYPE html><html><head><meta charset="utf-8" /> <title>自定义导航栏_简单文字</title><link rel="stylesheet" href="./css/main.css" ><script src="./js/common/jquery/1.8.3/jquery-1.8.3.min.js"></script><script src="./js/common/handlebars/1.0.6/handlebars.js"></script><script src="./js/common/handlebars/1.0.6/helpers.js"></script><script src="./js/common/navigationbar/1.0.0/navigation-bar.1.0.0.js"></script></head><body><div id="find_nav" class="find_nav"></div><div id="content" class="content"><h1>Title1</h1></div><script id="tpl_navigationbar" type="text/x-handlebars-template"><div class="navigationbar_list">{{#nav_list nav}}<a href="javascript:;"><label>{{title}}</label></a>{{/nav_list}}</div></script><script type="text/javascript">var json = {nav:[{title:"Title1"},{title:"Title2"},{title:"Title3"},{title:"Title4"},{title:"Title5"},{title:"Title6"}]}$(function() {$('#find_nav').navigationBar({initLayout: layout},json);});/***这里设置标签对应布局，根据index来决定* * @param index * 标签的索引值*/var layout = function handleClickEvent(index){$('#content h1').html(json.nav[index - 1]['title']);}</script></body></html>
1.2 效果图
2. 简单图片
本示例也是一种简单的导航栏形式，每个选项卡只显示一张图片，点击不同的导航栏的选项卡，切换不同的内容。
2.1 演示代码
<!DOCTYPE html><!-- saved from url=(0045)/demo/code_pop/19/2069/ --><html><head><meta charset="utf-8" /> <title>自定义导航栏_简单图片</title><link rel="stylesheet" href="./css/main.css" ><script src="./js/common/jquery/1.8.3/jquery-1.8.3.min.js"></script><script src="./js/common/handlebars/1.0.6/handlebars.js"></script><script src="./js/common/handlebars/1.0.6/helpers.js"></script><script src="./js/common/navigationbar/1.0.0/navigation-bar.1.0.0.js"></script></head><body><div id="find_nav" class="find_nav"></div><div id="content" class="content"><img src=""/></div><script id="tpl_navigationbar" type="text/x-handlebars-template"><div class="navigationbar_list">{{#nav_list nav}}<a href="javascript:;"><img src="{{url}}"/></a>{{/nav_list}}</div></script><script type="text/javascript">var json = {nav:[{url:"./image/11.png"},{url:"./image/12.png"},{url:"./image/13.png"},{url:"./image/14.png"},{url:"./image/15.png"},{url:"./image/16.png"}]}$(function() {$('#find_nav').navigationBar({initLayout: layout},json);});/***这里设置标签对应布局，根据index来决定* * @param index * 标签的索引值*/var layout = function handleClickEvent(index){$('#content img').attr("src", json.nav[index - 1]['url']);}</script></body></html>
2.2 效果图
3. 文字和图片
本示例是1 和 2 的结合，算是稍微复杂点的导航栏形式；同样点击不同的导航栏的选项卡，切换不同的文字和图片。
3.1 演示代码
<!DOCTYPE html><!-- saved from url=(0045)/demo/code_pop/19/2069/ --><html><head><meta charset="utf-8" /> <title>自定义导航栏_文字和图片</title><link rel="stylesheet" href="./css/main.css" ><script src="./js/common/jquery/1.8.3/jquery-1.8.3.min.js"></script><script src="./js/common/handlebars/1.0.6/handlebars.js"></script><script src="./js/common/handlebars/1.0.6/helpers.js"></script><script src="./js/common/navigationbar/1.0.0/navigation-bar.1.0.0.js"></script></head><body><div id="find_nav" class="find_nav"></div><div id="content" class="content"><img src=""/><h1>Title1</h1></div><script id="tpl_navigationbar" type="text/x-handlebars-template"><div class="navigationbar_list">{{#nav_list nav}}<a href="javascript:;"><img src="{{url}}" /><label>{{title}}</label></a>{{/nav_list}}</div></script><script type="text/javascript">var json = {nav:[{title:"Title1", url:"./image/11.png"},{title:"Title2", url:"./image/12.png"},{title:"Title3", url:"./image/13.png"},{title:"Title4", url:"./image/14.png"},{title:"Title5", url:"./image/15.png"},{title:"Title6", url:"./image/16.png"}]}$(function() {$('#find_nav').navigationBar({navWidth : 150,navHeight : 60,initLayout: layout},json);//var navigationBar = new $.NavigationBar( {}, $('#find_nav') );});/***这里设置标签对应布局，根据index来决定* * @param index * 标签的索引值*/var layout = function handleClickEvent(index){$('#content h1').html(json.nav[index - 1]['title']);$('#content img').attr("src", json.nav[index - 1]['url']);}</script></body></html>
3.2 效果图
4. 自适应布局
本示例是演示自适应布局，能够实现导航栏的自适应大小，不过下划线的适应有些问题，欢迎各位讨论交流~~
4.1 演示代码
<!DOCTYPE html><!-- saved from url=(0045)/demo/code_pop/19/2069/ --><html><head><meta charset="utf-8" /> <title>自定义导航栏_简单文字自适应大小</title><link rel="stylesheet" href="./css/main.css" ><script src="./js/common/jquery/1.8.3/jquery-1.8.3.min.js"></script><script src="./js/common/handlebars/1.0.6/handlebars.js"></script><script src="./js/common/handlebars/1.0.6/helpers.js"></script><script src="./js/common/navigationbar/1.0.0/navigation-bar.1.0.0.js"></script></head><body><p>这个可以根据屏幕分辨率适应大小，不过下划线的适应有些问题，欢迎大家帮忙解决</p><div id="find_nav" class="find_nav"></div><div id="content" class="content"><h1>Title1</h1></div><script id="tpl_navigationbar" type="text/x-handlebars-template"><div class="navigationbar_list">{{#nav_list nav}}<a href="javascript:;"><label>{{title}}</label></a>{{/nav_list}}</div></script><script type="text/javascript">var json = {nav:[{title:"Title1"},{title:"Title2"},{title:"Title3"},{title:"Title4"},{title:"Title5"},{title:"Title6"}]}$(function() {$('#find_nav').navigationBar({autoAdaptation : true,initLayout: layout},json);});/***这里设置标签对应布局，根据index来决定* * @param index * 标签的索引值*/var layout = function handleClickEvent(index){$('#content h1').html(json.nav[index - 1]['title']);}</script></body></html>
4.2 效果图
5. 核心JS代码
/*** navigation-bar.1.0.0.js* 自定义导航栏插件* (1). 依赖jQuery第三方库，详细请至官网了解：/* (2). 依赖Handlebars第三方库，详细请至官网了解：/** Author: Huazie* Date: /10/15* Version: 1.0.0*/(function( $, undefined ) {/** NavigationBar object.*/$.NavigationBar = function( options, element ) {this.$el= $( element );this._init( options );};$.NavigationBar.defaults = {currPosition: 1,// 当前被选中的标签，默认为1navWidth : 100,// 导航栏标签的宽度navHeight: 50,// 导航栏标签的高度sideLineHeight : 3,// 导航栏的下边线的高度sideLineColor : '#48a5f4', // 导航栏的下边线的颜色textSize : 18,// 导航栏标签文字的大小textColor: '#666',// 导航栏标签文字的颜色autoAdaptation: false,// 标签宽度是否自动适应所在容器大小initLayout: function(index){}// 标签内容展示函数，需要自行定义实现};$.NavigationBar.prototype = {_init : function( options ) {this.options = $.extend( true, {}, $.NavigationBar.defaults, options );// 父容器this.$el.css({height : this.options.navHeight,'position' : 'relative'});// 导航栏容器this.$list= this.$el.find('.navigationbar_list');this.$list.css({left: 0,height : this.options.navHeight,margin: 0,padding: 0});// ul 标签this.$ul= this.$list.find('ul');this.$ul.css({'white-space': 'nowrap',margin: 0,padding: 0});// ul 下的 li 标签this.$li = this.$ul.children();this.$li.css({'display': 'inline-block',margin: 0,padding: 0});// a 标签this.$a = this.$ul.find('li a');this.$a.css({'display': 'block','line-height': this.options.navHeight + 'px','font-size' : this.options.textSize + 'px','text-align' : 'center','color' : this.options.textColor,'text-decoration' : 'none',margin: 0,padding: 0});// 导航线this.$sideline = this.$list.find('ul .sideline');this.$sideline.css({'position' : 'absolute','background-color' : this.options.sideLineColor,height : this.options.sideLineHeight,left: 0,top : (this.options.navHeight - this.options.sideLineHeight),margin: 0,padding: 0});// 导航图片标签this.$image = this.$a.find('img');if(this.$image.length > 0){this.$image.css({'vertical-align' : 'middle','cursor' : 'pointer',margin: 0,padding: 0});}// 导航文字标签this.$label = this.$a.find('label');if(this.$label.length > 0){this.$label.css({'vertical-align' : 'middle','cursor' : 'pointer',margin: 0,padding: 0});}this.count= this.$a.length; // 导航标签的数目if(this.options.autoAdaptation){// 开启自动适应，将以父容器大小决定每个导航标签的大小this.navWidth = (1 / this.count) * 100 + '%'; // 能够根据父容器大小改变自身大小}else{// 关闭自动适应，则使用定义的宽度决定整个导航栏的大小this.navWidth = this.options.navWidth;this.$el.width(this.navWidth * this.count);}this.$sideline.width(this.navWidth);this._each();// 初始化导航标签页this._click();// 绑定导航页点击事件},_each: function(){var _self= this;var num = 0;this.$li.each(function(){num++;if(num == _self._getCurrentPosition()){_self.$sideline.css({left:$(this).position().left});$(this).addClass("current").siblings().removeClass("current");}$(this).css({width:_self.navWidth});});this.options.initLayout(_self._getCurrentPosition()); // 展示对应标签的内容},_click: function(){var _self= this;this.$li.on('click', function(){var _li = this;_self.navWidth = $(this).width();_self.$sideline.stop(true);_self.$sideline.animate({left:$(this).position().left},300);$(this).addClass("current").siblings().removeClass("current");var num = 0;_self.$li.each(function(){num++;if(this == _li){// 判断是不是点击的对象_self._setCurrentPosition(num);}});_self.options.initLayout(_self._getCurrentPosition()); // 展示对应标签的内容});},_setCurrentPosition : function(currPosition){sessionStorage.setItem(this.$el.selector, currPosition);this.options.currPosition = currPosition; },_getCurrentPosition : function(){var currPosition = sessionStorage.getItem(this.$el.selector);if(currPosition){this.options.currPosition = currPosition;}return this.options.currPosition;}};$.fn.navigationBar= function( options, data) {if (arguments.length == 1){data = options;options = {};}var source = $('#tpl_navigationbar').html();var template = pile(source);this.html(template(data));var nav = $.data( this, 'navigationBar' );if ( !nav ) {$.data( this, 'navigationBar', new $.NavigationBar( options, this ) );}return this;};})( jQuery );
