注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

JavaScript如何通过Ctrl和Shift键的实现多选  

2010-12-31 00:12:15|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1.先看一个JQuery UI 中的Selectable 的Ctrl和Shift多选的例子

   http://jqueryui.com/demos/selectable/

  如图

  JavaScript如何通过Ctrl和Shift键的实现多选 - zhenghaoju700 - zhenghaoju700 的博客

 

 

 2. 再看一个YUI中的DataTable的Ctrl和Shift 多选的例子

    http://developer.yahoo.com/yui/examples/datatable/dt_complex.html

    如图
  JavaScript如何通过Ctrl和Shift键的实现多选 - zhenghaoju700 - zhenghaoju700 的博客


3.那么 我们如何使用YUI2.8 实现上面的效果?


们需要的行为

1. 按Ctrl  选中不连续的li
2. 按shift 选中连续的li
3. 按shift  点击li  如果有多个选中  则优先找下一个最近高亮元素 
    如果没有 则在找上一个最近高亮元素 

    高亮它们之间的元素


直接看code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>multiple select</title>

<style type="text/css">
body {
    margin:10px;
    padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/selector/selector-min.js"></script>


<style type="text/css">

.multipleSelect{
      background:#F2AE1C;
}

.mylist {
    position: relative;
    width: 350px;
    height:500px;
    background: #f7f7f7;
    border: 1px solid gray;
    list-style: none;
    margin:0;
    padding:0;
}

.mylist li{
    padding-left:10px;
    margin: 5px;
    cursor: pointer;
    zoom: 1;
    border:1px solid #7EA6B2;
    font-size:35px;
}
</style>



</head>

<body >


<h1>multiple select</h1>


<div id="test">
   <ul >
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
  </ul>
</div>


<script>

function multipleSelect(){
    //对每个li注册click事件
    var lis = YAHOO.util.Selector.query('#test ul li');
    for(var i in lis){
        var li = lis[i];
        YAHOO.util.Event.addListener(li,'click',clickLi,li);
    }
}

function clickLi(e){
    //最关键的一步 确定shift 和 ctrl 是否被按住
    var bSHIFT = e.shiftKey;
    var bCTRL = e.ctrlKey;
    //如果ctrl 为 true
    if(bCTRL){
        YAHOO.util.Dom.addClass(this,'multipleSelect');
    }
    //如果shift 为 true
    if(bSHIFT){        
        
        YAHOO.util.Dom.addClass(this,'multipleSelect');
        
        var allNodes =  YAHOO.util.Selector.query('ul li',this.parent);
        
        var nodes = [];
        
        var nextSiblingNode = YAHOO.util.Dom.getNextSibling(this);
        
        while(nextSiblingNode){
            nodes.push(this);
            nodes.push(nextSiblingNode);
            if(YAHOO.util.Dom.hasClass(nextSiblingNode,'multipleSelect')){
                YAHOO.util.Dom.removeClass(allNodes,'multipleSelect');    
                YAHOO.util.Dom.addClass(nodes,'multipleSelect');
                return;
            }
            nextSiblingNode = YAHOO.util.Dom.getNextSibling(nextSiblingNode);
        }
    
        
        nodes = [];
        
        var previousSiblingNode = YAHOO.util.Dom.getPreviousSibling(this);
        
        while(previousSiblingNode){
            nodes.push(this);
            nodes.push(previousSiblingNode);
            if(YAHOO.util.Dom.hasClass(previousSiblingNode,'multipleSelect')){
                YAHOO.util.Dom.removeClass(allNodes,'multipleSelect');
                YAHOO.util.Dom.addClass(nodes,'multipleSelect');
                return;
            }
            previousSiblingNode = YAHOO.util.Dom.getPreviousSibling(previousSiblingNode);
        }
        
        
    }
    //shift 和 ctril 都为 false 时
    if((!bCTRL)&&(!bSHIFT)){
        YAHOO.util.Dom.removeClass(YAHOO.util.Selector.query('#test ul li'),'multipleSelect');
        YAHOO.util.Dom.addClass(this,'multipleSelect');    
    }
}

multipleSelect();
</script>
</body>

</html>

 

实现的效果截图 (不信的话 可以拷贝代码 保存成html文件运行)

  JavaScript如何通过Ctrl和Shift键的实现多选 - zhenghaoju700 - zhenghaoju700 的博客

  评论这张
 
阅读(2533)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017