2014.01.17 笔记 (对于列表实现 Ctrl+a全选，Shift连选，Ctrl连选)
对于列表实现，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>
还包含了：自适应宽度的HTML5横向圆角菜单
