devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

自定义导航栏（navigation-bar.1.0.0.js）_javascript:navigate_tabs

作者：知新_RL | 2024-02-08 12:31:35

赞

踩

javascript:navigate_tabs

自定义导航栏

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
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

1.2 效果图

这里写图片描述

2. 简单图片

本示例也是一种简单的导航栏形式，每个选项卡只显示一张图片，点击不同的导航栏的选项卡，切换不同的内容。

2.1 演示代码

<!DOCTYPE html>
<!-- saved from url=(0045)http://down.admin5.com/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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

2.2 效果图

这里写图片描述

3. 文字和图片

本示例是1 和 2 的结合，算是稍微复杂点的导航栏形式；同样点击不同的导航栏的选项卡，切换不同的文字和图片。

3.1 演示代码

<!DOCTYPE html>
<!-- saved from url=(0045)http://down.admin5.com/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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77

3.2 效果图

这里写图片描述

4. 自适应布局

本示例是演示自适应布局，能够实现导航栏的自适应大小，不过下划线的适应有些问题，欢迎各位讨论交流~~

4.1 演示代码

<!DOCTYPE html>
<!-- saved from url=(0045)http://down.admin5.com/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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

4.2 效果图

这里写图片描述

5. 核心JS代码

/**
 * navigation-bar.1.0.0.js
 * 自定义导航栏插件
 * (1). 依赖jQuery第三方库，详细请至官网了解：http://jquery.com/
 * (2). 依赖Handlebars第三方库，详细请至官网了解：http://handlebarsjs.com/
 *
 * Author: Huazie
 * Date: 2016/10/15
 * Version: 1.0.0
 */
(function( $, undefined ) {
	
	/*
	 * NavigationBar object.
	 */
	$.NavigationBar 			= function( options, element ) {
	
		this.$el	= $( element );
		this._init( options );
		
	};
	
	$.NavigationBar.defaults 	= {
		currPosition	: 1,				// 当前被选中的标签，默认为1
		navWidth  		: 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 = Handlebars.compile(source);
		this.html(template(data));
		
		var nav = $.data( this, 'navigationBar' );
		if ( !nav ) {
			$.data( this, 'navigationBar', new $.NavigationBar( options, this ) );
		}
		
		return this;
		
	};
	
})( jQuery );

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/69103
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号