<!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>
分享到：
相关推荐
这里我们有两个幻灯片资源，一个专注于JavaScript，另一个聚焦于jQuery，这将帮助我们深入理解这两个库的核心概念和应用。 首先，让我们讨论JavaScript。JavaScript是一种轻量级的解释型编程语言，它在浏览器端运行...
MongoDB 是一个高性能、开源、无模式的分布式文档型数据库，由 C++ 语言编写，设计目标是为了处理海量数据，并提供高可用性和可扩展性。MongoDB 的主要特点包括其面向集合、文档存储的特性，高效二进制数据存储以及...
微信小程序提供了自己的开发工具和框架，开发者可以使用JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）进行编程。这些技术使得小程序能够与微信平台深度集成，实现页面跳转、数据交互、网络...
在信息技术领域，登录和授权是两个重要的概念，它们涉及到用户在应用程序中的身份验证和权限管理。登录主要是确认用户身份，而授权则涉及到用户基于其身份享有的特定权限。在实际应用中，这两个概念常常交织在一起。...
本章内容主要通过JavaScript shell进行演示，对于涉及复杂逻辑的应用级更新，可能会使用Ruby等编程语言。学习完本章，读者将能够全面掌握MongoDB的CRUD操作，并了解如何利用其数据库接口和数据模型的优势进行设计。
汉化包通常由第三方进行翻译，目的是使非英文用户能更好地理解和操作软件。 HttpWatch的注册码是激活软件的关键，它通常由一串字母和数字组成，用于验证用户是否具有合法使用权。在提供的描述中提到，这个注册码是...
在本篇“java网上图书商城（5）购物车模块2”中，我们主要探讨的是Java实现网上图书商城购物车功能的第二部分。购物车模块是电商系统中的关键组成部分，它负责处理用户添加商品、查看购物车内容以及进行结算等操作。...