2014.01.17 笔记 (对于列表实现 Ctrl+a全选，Shift连选，Ctrl连选)

最新推荐文章于 2024-11-10 15:10:09 发布

weixin_30477293

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/juancreate2014/p/3524721.html

版权

对于列表实现，Ctrl+a全选，Shift连选，Ctrl连选

代码：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 <!--
  8 body {
  9     font: 100% 宋体, 新宋体;
 10     background: #666666;
 11     margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
 12     padding: 0;
 13     text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
 14     color: #000000;
 15 }
 16 .oneColFixCtr #container {
 17     width: 780px;  /* 使用比最大宽度 (800px) 小 20px 的宽度可显示浏览器界面元素，并避免出现水平滚动条 */
 18     background: #FFFFFF;
 19     margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */
 20     border: 1px solid #000000;
 21     text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
 22 }
 23 .oneColFixCtr #mainContent {
 24     padding: 0 20px; /* 请记住，填充是 div 方块内部的空间，边距则是 div 方块外部的空间 */
 25 }
 26 .cell{
 27     float:left;
 28     clear:both; 
 29     width:100%;
 30     border-bottom:1px solid #999;
 31     padding-left:30px;
 32     }
 33 .cell a{ 
 34     background-color:#6599CB; 
 35     border:1px solid #6599CB; 
 36     color:#FFF;  
 37     cursor:pointer; 
 38     float:left;  
 39     font-size:15px; 
 40     margin-left:1px; 
 41     padding:3px 4px; 
 42     -moz-border-radius:3px 3px 0 0;
 43     -webkit-border-radius:3px 3px 0 0;
 44     border-radius:5px 5px 0 0
 45 }
 46 .cell a:hover{
 47     background-color:#5C82AB;
 48     border-color:#5C82AB;
 49 }
 50 .cell .t{
 51     background-color:#FFF!important; 
 52     border-color:#999;
 53     border-style:solid;
 54     border-width:1px 1px 0; 
 55     color:#4c4c4c; 
 56     margin-bottom:-1px; 
 57     padding:4px 4px 5px;
 58     font-weight:bold;
 59     }
 60 #ListDiv li{
 61     height:40px;
 62     background-color:#F2CDF5;
 63     border-bottom: solid 1px #699;
 64 }
 65 #ListDiv li div{
 66     width:400px;
 67     font-size:16px; 
 68     padding-top:10px;
 69     padding-left:40px;
 70 }
 71 .select{
 72     background-color:#8E84EC !important;
 73     font-weight:200;
 74 }
 75 -->
 76 </style>
 77 
 78 <script type="text/javascript" src="js/jquery.js"></script>
 79 <script type="text/javascript">
 80 $(function(){
 81     
 82     //先画个列表
 83     var  pageLode=function(){
 84         var htmls=[];
 85         for(var i=1;i<11;i++){
 86             htmls.push('<li id="testli'+i+'" LiIndex="'+i+'"><div>span style==Index='+i+'</div></li>');
 87         }
 88         $("#ListDiv").append(htmls.join(""));
 89     };
 90 
 91 
 92  pageLode();
 93  
 94  
 95      //开始绑定事件    
 96     var testObj=(function(){
 97         this.pressCtrl=false;
 98         this.pressShift=false;
 99         this.startLiId=0;
100         this.endLiId=0;        
101     });
102  
103  
104    $("#ListDiv li").bind({
105      "mousedown":function(){
106          if(event.keyCode==0){
107             if(testObj.pressCtrl){
108                 $(this).addClass("select");
109             }else if(testObj.pressShift){                
110                 event.preventDefault();
111                 var asc=false;
112                 //testObj.startLiId=(testObj.startLiId||parseInt($("li.select").attr("LiIndex")));
113                 testObj.startLiId=parseInt($("li.select").attr("LiIndex"));
114                 if(testObj.startLiId&&!testObj.endLiId){//点击选择--shift--再点击选择
115                    testObj.endLiId=parseInt($(this).attr("LiIndex"));
116                    asc=testObj.startLiId<testObj.endLiId;
117                    
118                 }else if(!testObj.startLiId&&!testObj.endLiId){//shift--点击选择--再点击选
119                     testObj.startLiId=parseInt($(this).attr("LiIndex"));
120                     $(this).addClass("select");
121                     
122                 }else{
123                     testObj.endLiId=parseInt($(this).attr("LiIndex"));
124                     asc=testObj.startLiId<testObj.endLiId;
125                     $("li.select").removeClass("select");//这里还有一点问题
126                     //$("li.select").not($("li[LiIndex="+testObj.startLiId+"]")).removeClass("select"); //或者可以这样
127                 }
128                 if(testObj.startLiId&&testObj.endLiId){
129                     if(asc){
130                            for(var j=testObj.startLiId;j<=testObj.endLiId;j++){
131                                $("#testli"+j).addClass("select");
132                             }
133                        }else{
134                            for(var j=testObj.startLiId;j>=testObj.endLiId;j--){
135                                $("#testli"+j).addClass("select");
136                             }
137                         }
138                 }
139             }
140             else{
141                 $("li.select").removeClass("select");
142                 $(this).addClass("select");
143             }
144             //显示出所选择的行：  +selectLi.join("，")
145             var $selectLi= $("#ListDiv .select");
146             var ids=[];
147             $selectLi.each(function(){
148                  ids.push($(this).attr("LiIndex"));    
149             });
150             $("#showRs").html("所选择的行："+ids.join("、"));
151          }
152      }
153     });
154 
155    $(document).bind({
156     "keydown":function(event){        
157         if(event.keyCode==16){//Shift 键
158             testObj.pressShift=true;
159         }else if(event.ctrlKey && event.which ==65){//Ctrl+a 全选键
160             $("#ListDiv li").addClass("select");
161             event.preventDefault();
162         }else if(event.keyCode==17){//Ctrl 键
163             testObj.pressCtrl=true;
164         }
165     },
166     "keyup":function(event){
167         if(event.keyCode==16){//Shift 键
168             testObj.pressShift=false;
169         }else if(event.keyCode==17){//Ctrl 键
170             testObj.pressCtrl=false;
171         }
172     }
173     
174     });
175    
176    $(".cell a").click(function(){
177       $("a.t").removeClass("t");
178       $(this).addClass("t");
179     });
180 
181 });
182 </script>
183 </head>
184 
185 <body class="oneColFixCtr">
186 <div id="container">
187   <div id="mainContent">
188   
189 <P></P><P></P><P></P>
190 <h2>自适应宽度的HTML5横向圆角菜单</h2>
191 <div class="cell">
192     <a>自适应宽度的HTML5横向圆角菜单</a>
193     <a class="t">Html</a>
194     <a>Javascript</a>
195     <a>Document</a>
196     <a>Jquery</a>
197     <a>Asp.net</a>
198     <a>C++</a>
199     <a>Ajax</a>
200     <a>网页特效</a>
201 </div><br>
202 <div>
203 <ul id="ListDiv" style="list-style:none;">
204 </ul>
205 <br>
206 <div id="showRs"></div><br>
207 </div>
208 
209 </div></div>
210 </body>
211 </html>