87,924
社区成员
发帖
与我相关
我的任务
分享
<style type="text/css">
#list div,#list .on{
width:200px;
border: 1px solid #ddd;
margin: 2px;
cursor: pointer;
}
#list .on{
border: 1px solid red;
background-color: #fff731
}
</style>
<div id="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
$(function(){
var key=0;
var ind=new Array();
function shiftSelect(a,b){
for(i=a;i<b;i++){
$("#list div").eq(i).addClass("on");
if(!ind.inArray(i)){
ind.push(i);
ind.sort(function(a,b){return b-a})
}
}
}
$(window).keydown(function(e){
key=e.keyCode||e.which||e.charCode;
}).keyup(function(){key=0});
$("#list div").bind({
"keydown":function(e){
key=e.keyCode||e.which||e.charCode;
},
"keyup":function(){
key=0;
},
"click":function(){
var index=$(this).index();
$(this).toggleClass("on");
if($(this).attr("class")=="on" && !ind.inArray(index)){
ind.push(index);
ind.sort(function(a,b){return b-a})
}
if(key==16){
if(index>ind[ind.length-1]){
shiftSelect(ind[ind.length-1],index);
}else if(index<ind[0]){
shiftSelect(index,ind[0]);
}
}
}
})
})
</script>
<script type="text/javascript">
$(document).ready(function(){
var key=false; //记录shift键
var val=",";//记录已经选择的值
var ibe =-1; //记录初始值
$(window).keydown(function(e){
if(e.shiftKey)key=true;
}).keyup(function(){
key=false;
});
$("#list div").click(function(){
var i=$(this).index();
if(ibe!=-1&&key){
$(this).siblings().removeAttr("class");
val=",";
for(var ii=Math.min(i,ibe);ii<=Math.max(i,ibe);ii++){
val+=ii+",";
$("#list div").eq(ii).addClass("on");
}
}else{
if(val.indexOf(","+i+",")!=-1){
val=val.replace(","+i+",",",");
$(this).removeAttr("class");
}else{
val+=i+",";
$(this).addClass("on");
ibe=i;
}
}
$("#tt").val(val);
});
});
</script>
运行前确保你连接了jquery.js<style type="text/css">
#list div,#list .on{
width:200px;
border: 1px solid #ddd;
margin: 2px;
cursor: pointer;
}
#list .on{
border: 1px solid red;
background-color: #fff731
}
</style>
<div id="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<input type="text" id="tt" style="width:200px" />
<script type="text/javascript">
$(document).ready(function(){
var key=0; //记录ctrl/shift键
var val=",";//记录已经选择的值
var ibe =-1; //记录初始值
$(window).keydown(function(e){
if(e.ctrlKey){
key=1;
}else if(e.shiftKey){
key=2;
}
$("#bb").val("初始值:"+ibe+" key:"+key);
}).keyup(function(){
key=0;
});
$("#list div").click(function(){
var i=$(this).index();
if(ibe!=-1&&key==2){
$(this).siblings().removeAttr("class");
val=",";
for(var ii=Math.min(i,ibe);ii<=Math.max(i,ibe);ii++){
val+=ii+",";
$("#list div").eq(ii).addClass("on");
}
}else if(key==1){
if(val.indexOf(","+i+",")!=-1){
val=val.replace(","+i+",",",");
$(this).removeAttr("class");
}else{
val+=i+",";
$(this).addClass("on");
ibe=i;
}
}else{
$(this).addClass("on").siblings().removeAttr("class");
ibe=i;
val=","+i+",";
}
$("#tt").val(val);
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#list div,#list .on{
width:200px;
border: 1px solid #ddd;
margin: 2px;
cursor: pointer;
}
#list .on{
border: 1px solid red;
background-color: #fff731
}
</style>
<div id="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
$(function(){
var key=0;
var ind=new Array();
function shiftSelect(a,b){
for(i=a;i<=b;i++){
$("#list div").eq(i).addClass("on");
if(!ind.inArray(i)){
ind.push(i);
ind.sort(function(a,b){return b-a})
}
}
}
$(window).keydown(function(e){
key=e.keyCode||e.which||e.charCode;
}).keyup(function(){key=0});
$("#list div").bind({
"keydown":function(e){
key=e.keyCode||e.which||e.charCode;
},
"keyup":function(){
key=0;
},
"click":function(){
var index=$(this).index();
if(key==16){
if(index>ind[0]){
shiftSelect(ind[0],index);
}else if(index<ind[ind.length-1]){
shiftSelect(index,ind[ind.length-1]);
}
}else{
$(this).toggleClass("on");
if($(this).attr("class")=="on" && !ind.inArray(index)){
ind.push(index);
ind.sort(function(a,b){return b-a})
}
}
}
})
})
</script>