HTML与jQuery菜单插件-优快云博客

本文链接：https://blog.youkuaiyun.com/dongsdh/article/details/97248791

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		
		.bar{margin: 20px;}
		.bar span{
			display: inline-block;
		    border: 1px solid #D3D5EB;
		    height: 26px;
		    line-height: 26px;
		    width: 80px;
		    text-align: center;
		    color: #313E61;
		    cursor: pointer;
		    border-bottom: 0;
		    /* margin-left: 7px; */
		}
	</style>
</head>
<body>
	<p class='bar bar1'></p>
	<p class='bar bar2'></p>
	<script src="jquery.min.js"></script>
	<script>
		function sdhpage(element,option){
			this.element  = element;
			this.option = option;
			this.init();
		}
		sdhpage.prototype ={
			init: function() {
				this.creatHtml();
				this.bindsd();
			},
			creatHtml:function (){
				var me=this;
				var arr = this.option.menu;
				console.log(arr);
				var shtml=''
				for(var i=0,len=arr.length;i<len;i++){
					shtml+='<span>'+arr[i]+'</span>';
				}
				me.element.html(shtml);
			},
			bindsd:function(){
				var me = this;
				me.element.off('click', 'span');
				me.element.on('click', 'span', function() {
					var num = $(this).text()
					me.option.callback(num);
				});
			}
		}
		
		
		$.fn.sdhpage=function(option){
			return new sdhpage($(this),option)
		}
		$('.bar1').sdhpage({
			menu:['菜单1','菜单2','菜单3'],
			totlepage:6,
			callback:function(num){
				console.log(num);
			}
		})
		$('.bar2').sdhpage({
			menu:['菜单6','菜单7','菜单8'],
			totlepage:7,
			callback:function(num){
				console.log(num);
			}
		})
	</script>
</body>
</html>

效果:

回调函数style