jquery实现点击按钮左右移动的菜单

原创 2012年03月25日 20:23:10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右菜单</title>
<script src="jquery/jquery-1.7.1.js"></script>
<script>
$(document).ready(function (){
	//处理向右侧添加一个选项的事件
	$('#right_one').click(function (){
		//向右侧添加一个
		$('#second').append($('#first option:selected'));
		});
	//------------处理向右插入的内容全部
		$('#right_all').click(function (){
		//向右侧添加一个
		$('#second').append($('#first option'));
		});
		
		//处理向左侧添加一个选项的事件
	$('#left_one').click(function (){
		//向左侧添加一个
		$('#first').append($('#second option:selected'));
		});
	//------------处理向左插入的内容
		$('#left_all').click(function (){
		//向左侧添加一个
		$('#first').append($('#second option'));
		});
		//双击事件
	$('#first').dblclick(function (){
		//向左侧添加一个
		$('#second').append($('#first option:selected'));
		});
	$('#second').dblclick(function (){
		//向左侧添加一个
		$('#first').append($('#second option:selected'));
		});
	});
</script>
</head>

<body>
<table width="300" border="1">
  <tr>
    <td><select id='first' style="width:100px;" size="10" multiple="multiple">
                <option>aa</option> 
                <option>aa</option>
        </select>
      </td>
    <td>
    <input type="button" id="right_one" value="->"> 
    <input type="button" id="left_one" value="<-"> 
    <input type="button" id="right_all" value="=>"> 
    <input type="button" id="left_all" value="<="> 
    </td>
    <td><select id='second' style="width:100px;" size="10" multiple="multiple">
                <option>aa</option> 
                <option>aa</option>
        </select>
        </td>
  </tr>
</table>

</body>
</html>


Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Jquery 动画效果 左右移动

移动位置的动画 body{fo

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery 实现左移、右移

我们实现一个如下图所示的功能: 选中左侧的数据,把选中的数据右移到右侧的div中: html代码如下: > " title="...

近20个绚丽实用的jQuery/CSS3侧边栏菜单

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数...
  • yipanbo
  • yipanbo
  • 2016年03月09日 10:20
  • 5685

利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜...

jquery实现select框内容的左右移动【经典】

select选框 #div1{ position:relative; margin-right:10px; float:left; } $(...

JS控制点击按钮图片向左或向右循环移动滚动效果

JS控制点击按钮图片向左或向右移动效果 演示 TABLE { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORD...

用JQuery写一个三级可收缩菜单

用JQ写的一个三级收缩菜单 html代码: 顶级菜单1 顶级菜单2 二级菜单...
  • FOR_LVP
  • FOR_LVP
  • 2016年12月06日 00:12
  • 1105

jQuery高亮当前选中菜单

假如页面中有以下菜单 首页 归档 分类 关于 如果不是Bootstrap自行定义active CSS样式 $(document).ready(function(){ $...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现点击按钮左右移动的菜单
举报原因:
原因补充:

(最多只允许输入30个字)