HTML5网页设计

导航菜单

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

时间:2014-12-01 10:13来源:未知作者:user点击:
点击按钮左右移动选择菜单

<!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>左右菜单 - ShejiCool.com</title>  
<script src="http://www.shejicool.com/demo/jquery.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>bb</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>cc</option>   
                <option>dd</option>  
        </select>  
        </td>  
  </tr>  
</table>  
</body>  
</html>
上一篇:上一篇:jquery实现动态切换导航插件 上一篇:下一篇:jQuery向下滑动展开的菜单
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐