嘻嘻，自己的第一个JS 类应用啊

最新推荐文章于 2022-03-12 14:16:50 发布

iteye_9367

最新推荐文章于 2022-03-12 14:16:50 发布

阅读量87

点赞数

分类专栏： JS 文章标签： CSS jQuery JavaScript HTML C ViewUI

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>test</title>
	<script src="jquery-1.2.6.js" type="text/javascript"></script>
</head>
<body>
<style>
.menu {list-style-image:none;list-style-position:outside;list-style-type:none;}
.menu li {width:50px;background:#dcdcdc;text-align:center;margin:5px 0}

.act {background:#FFFFFF}
.selected {border:solid 4px #eeeeee}
</style>
	
	
	<div style="height:200px;width:500px;position:absolute;top:50px;left:250px;background-color:#cccccc">
		<div style="float:left">
		<ul class="menu" id="menu1">
			<li>a</li>
			<li>b</li>
			<li>c</li>
			<li>d</li>
			<li>e</li>
			<li>f</li>			
		</ul>
		</div>
	
	<div style="float:left; width:340px;margin-left:20px;height:50px;margin-top:20px;background:#cdcdcd;text-align:center">
		
		<input id="bu1" type="button" value="<<" οnclick="" />
		<br/>
		<input id="bu2" type="button" value=">>" οnclick="" />
		
	</div>
	
	
		<div style="float:right">
		<ul class="menu" id="menu2">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>			
		</ul>
		</div>
		
	</div>
	
	
	
</body>
</html>
<script>
var Menu={
	menu:null,
	select:null,
	bt1:null,
	bt2:null,
	left:"",
	right:"",
};

Menu.Init = function(left,right,bu1,bu2){
	this.left=left;
	this.right=right;
	this.menu=$("#"+left+" >li");
	this.select=$("#"+right+" >li");
	this.bt1=$("#"+bu1);
	this.bt2=$("#"+bu2);
	this.Decorator();
	this.Attech();
}

Menu.Decorator = function(){
	this.menu.mouseover(function(){
		$(this).css("cursor", "pointer");
		$(this).css("background","#FFFFFF");
	});
	this.menu.mouseout(function(){
		$(this).css("cursor", "auto");
		$(this).css("background","#dcdcdc");
	});
	this.menu.toggle(function(){
		$(this).addClass("selected");
	},function(){
		$(this).removeClass("selected");
	});
	
	this.select.mouseover(function(){
		$(this).css("cursor", "pointer");
		$(this).css("background","#FFFFFF");
	});
	this.select.mouseout(function(){
		$(this).css("cursor", "auto");
		$(this).css("background","#dcdcdc");
	});
	this.select.toggle(function(){
		$(this).addClass("selected");
	},function(){
		$(this).removeClass("selected");
	});
};

Menu.Attech = function(){
	this.bt1.click( function () { $("#menu2 >li.selected").remove();}); 
	this.bt2.click( function () {
		$("#menu1 >li.selected").clone(true).appendTo($("#menu2"));
		this.select=$("#"+right+" >li");
		this.Decorator();
	}); 
};

Menu.Init("menu1","menu2","bu1","bu2");


</script>