ふふ、自分の最初のJS類の応用
3325 ワード
<!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="<<" onclick="" />
<br/>
<input id="bu2" type="button" value=">>" onclick="" />
</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>