码迷,mamicode.com
首页 > 其他好文 > 详细

怎样在博客园中添加自己的导航栏

时间:2018-09-02 00:04:45      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:move   for   var   简单   com   items   jquery插件   cti   typeof   

原本想在博客园中添加自己的导航栏,摸索一番后才发现,博客园没有提供添加自己导航栏的功能。要是能自己写js来添加应该也是可以的,于是申请了js权限,申请了好多次都不通过,~~o(>_<)o ~~,今天终于审核通过了,自己尝试来添加导航。

准备导航栏js

我自己写了一个简单的jquery插件来添加或者移除导航,好,不多说了,贴出代码:

(function(jQuery) {
	
	var arr = [], slice = arr.slice;
	
	var methods = {
		init: function() {
		},
		addNav: function(index, name, url) {
			var $nav = $(this), $items = $nav.children(),
				$item = $(‘<li><a class="menu" href="‘ + url + ‘">‘ + name + ‘</a></li>‘);
			if (index < $items.length) {
				$items.eq(index).before($item);
			} else {
				$nav.append($item);
			}
			return this;
		},
		removeNav: function(index) {
			var $nav = $(this);
			$nav.children(‘:eq(‘ + index + ‘)‘).remove();
			return this;
		}
	};
	
	$.fn.cnblogsNav = function(method) {
		if (methods[method]) {
			return methods[method].apply(this, slice.call(arguments, 1));
		} else if (typeof method === ‘object‘ || !method) {
			return methods.init.apply(this, arguments);
		} else {
			$.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.cnblogsNav‘ );
		}
	};
})(jQuery);

楼楼已经将该插件的代码上传到博客园了,有需要的同学可以直接引用:

<script src="//blog-static.cnblogs.com/files/zhangfengxian/cnblogs-nav.js"></script>

添加移除导航

添加移除导航的代码比较简单,如下:

<script>
	$(function() {
		var $navList = $(‘#navList‘);
		$navList.cnblogsNav(‘addNav‘, 4, ‘读书书单‘, ‘//www.cnblogs.com/zhangfengxian/p/my-book-list.html‘);
		$navList.cnblogsNav(‘addNav‘, 4, ‘我的AI之路‘, ‘//www.cnblogs.com/zhangfengxian/p/my-ai-trip.html‘);
		$navList.cnblogsNav(‘removeNav‘, 2);	
	});
</script>
addNav方法有三个参数:
  • index:添加的导航的索引,从0开始
  • name:导航的名称
  • url:导航的url
removeNav只有一个参数index:删除的导航的索引,从0开始。
怎么样?很简单是吧,赶快在你的博客上用起来吧。

怎样在博客园中添加自己的导航栏

标签:move   for   var   简单   com   items   jquery插件   cti   typeof   

原文地址:https://www.cnblogs.com/zhangfengxian/p/cnblogs-add-my-nav.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!