`
shake863
  • 浏览: 661154 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • JS
阅读更多
<!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>
 
分享到:
评论

相关推荐

    ormlite包嘻嘻嘻

    1. **数据对象映射**:定义一个Java类,通过注解或配置文件指定为数据库表,类的属性与表的字段相对应。例如,一个User类可以映射到users表,User的属性id、name、email分别对应users表的id、name、email字段。 2. ...

    曼波曼波 绘图表 嘻嘻嘻嘻嘻嘻嘻

    曼波曼波 绘图表 嘻嘻嘻嘻嘻嘻嘻

    影院售票系统(嘻嘻嘻)

    总之,“影院售票系统(嘻嘻嘻)”项目充分运用了C#语言和面向对象编程的优势,构建了一个高效、易用的票务管理系统。它不仅满足了电影院日常运营的需求,也为观众提供了流畅的购票体验。在实际开发中,开发者还需考虑...

    js宝方法方法法笑嘻嘻典

    1. **ActionForward的作用**:ActionForward是用来定义请求处理后的目标路径,它可以将一个逻辑路径映射到实际的URI。它负责在处理完一个Action之后,指示控制器如何将请求转发到下一个页面或者处理程序。 2. **...

    lingo.rar 嘻嘻 造福人民

    标题中的"lingo.rar 嘻嘻 造福人民"表明这是一个名为"lingo"的RAR压缩文件,RAR是一种常见的文件压缩格式,用于打包多个文件或文件夹为一个单一的可下载单元。"嘻嘻"可能是用户为了表达分享该资源的喜悦或者轻松心情...

    基于半监督LDA的文本分类应用研究_郑世卓1

    文本分类是信息处理和自然语言处理中的一个重要问题,旨在对文本进行分类,自动地抽取关键信息和主题。LDA模型是一种常用的无监督学习模型,能够发现隐性的主题,但其存在一些局限性。本文提出的基于半监督LDA的文本...

    仿嘻嘻哈哈右下角固定的二维码代码,无JS,纯CSS代码,兼容主流浏览器.rar

    在这个压缩包文件“仿嘻嘻哈哈右下角固定的二维码代码,无JS,纯CSS代码,兼容主流浏览器.rar”中,我们主要探讨的是如何使用CSS实现一个固定在页面右下角的二维码,而且这个实现完全不依赖JavaScript,只用CSS代码...

    FreeCommunication(期翼嘻嘻)开源语音聊天软件

    FreeCommunication (嘻嘻)可以让您迅速搭建自己的通讯运营平台。  软件中文名称:嘻嘻, 英文名称:FreeCommunication体积小,功能多,易部署,性能高,操作易的一款免费软件,它分为客户端和服务器端。采用 C/S...

    嘻嘻FreeCommunication v7.8.1228官方安装版.zip

    嘻嘻FreeCommunication体积小,功能多,易部署,性能高,操作易的一款免费软件,它分为客户端和服务器端。采用 C/S, B/S 的模式提供服务。客户端支持灵活配置,包括皮肤,多语言,支持插件,自身又是控件,可以二次...

    手机wrap网站仿嘻嘻哈哈手机wap笑话网站模板

    通过以上几个方面的详细介绍,我们可以看出,“手机wrap网站仿嘻嘻哈哈手机wap笑话网站模板”不仅是一款实用的网站模板,更是承载着丰富功能和应用场景的强大工具。无论是个人还是企业用户,都能从中找到适合自己...

    期翼嘻嘻(FreeCommunication) v7.6 build2013.10.25

    FreeCommunication (嘻嘻)可以让您迅速搭建自己的通讯运营平台。  嘻嘻FreeCommunication体积小,功能多,易部署,性能高,操作易的一款免费软件,它分为客户端和服务器端。采用 C/S, B/S 的模式提供服务。客户端...

    js特效脚本含源码和说明仿嘻嘻哈哈右下角固定的二维码代码

    js特效脚本含源码和说明仿嘻嘻哈哈右下角固定的二维码代码本资源系百度网盘分享地址

    pdf.js在web项目中的使用

    PDF.js是Mozilla开发的一个开源库,它允许在Web浏览器中以纯JavaScript实现PDF文档的解析和渲染。这个库的目标是提供一个与浏览器无关、高质量的查看PDF文档的解决方案。在这个"pdf.js在web项目中的使用"的资源包中...

    Json转实体类

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端交互,而实体类是C#中表示业务数据的类。这个功能使得开发者能够快速地将接收到的JSON字符串映射到对应的C#类实例,从而方便数据处理...

    c代码-嘻嘻嘻嘻嘻嘻嘻

    在给定的信息中,我们可以看到一个与C语言编程相关的压缩包文件,名为“c代码-嘻嘻嘻嘻嘻嘻嘻”。虽然标题和描述中没有提供具体的技术细节,但我们可以根据标签“代码”以及包含的文件来推测其内容。这个压缩包内有...

    000000000000000

    这里我们有两个幻灯片资源,一个专注于JavaScript,另一个聚焦于jQuery,这将帮助我们深入理解这两个库的核心概念和应用。 首先,让我们讨论JavaScript。JavaScript是一种轻量级的解释型编程语言,它在浏览器端运行...

    聊天软件--期翼嘻嘻

    IM + VOIP + P2P + 群 + 聊天室 + 会议室 + 直播 + 点播(VOD) 打造自己的即时通讯平台; 电子白板 + 远程控制 + 邮件 + 企业架构 + 截屏 + 音视频 + 短信 + 协同浏览 + 窗口抖动 + 魔法传情等 组建自己的网络视频...

    jasperreports的mvn的依赖包olap4j-0.9.7.309-JS-3下载 2积分(意思一下,嘻嘻)

    当项目中加载这个jasperreports-chart-themes-5.2.0.jar包时,会默认加载olap4j-0.9.7.309-JS-3.jar包,maven中央库中没有些包,只需下载些包,执行mvn install:install-file -Dfile=D:\olap4j-0.9.7.309-JS-3.jar -...

    可爱图片,我挺喜欢的,嘻嘻嘻嘻嘻

    可爱图片,我挺喜欢的,嘻嘻嘻嘻嘻

Global site tag (gtag.js) - Google Analytics