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

kevin-ying · 发表于 2015-9-23 02:16:16

[HTML] 纯文本查看 复制代码

<html xml:lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="Copyright" content="www.kevin-ying.com" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link href="http://www.kevin-ying.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>网页中嵌入输入框可点击“运行代码”DIV+JS模块 | 源与生活 站长工具 by:文歌提供([url]www.kevin-ying.com[/url])</title>
<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.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>

		自动登录	找回密码
密码			免费注册

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

相关帖子