拖動鼠標全選/反選表格的代碼_表單按鈕特效

仿Windows系統的選取功能，在表格上拖動鼠標就可將鼠標經過區域的表格選中，點擊也可選擇，并可查看當前哪些表格被選中，比較另類的鼠標選擇功能。

<html>
 <head>另類的全選/反選效果</head>
 <style>
  body{padding-top:50px;padding-left:100px;padding-right:150px;}
  .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #eeeeee;margin-right:10px;margin-bottom:10px;}
  .seled{border:1px solid #ff0000;background-color:#D6DFF7;} 
 </style>
 <script type="text/javascript">

Array.prototype.remove = function( item ){
  for( var i = 0 ; i < this.length ; i++ ){
   if( item == this[i] )
    break;
  }
  if( i == this.length )
   return;
  for( var j = i ; j < this.length - 1 ; j++ ){
   this[ j ] = this[ j + 1 ];
  }
  this.length--;
  } 
  
String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);}
 
function getAllChildren(e) {
  return e.all ? e.all : e.getElementsByTagName('*');
}

document.getElementsBySelector = function(selector) {
  if (!document.getElementsByTagName) {
    return new Array();
  }

var tokens = selector.split(' ');
  var currentContext = new Array(document);
  for (var i = 0; i < tokens.length; i++) {
    token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');;
    if (token.indexOf('#') > -1) {

var bits = token.split('#');
      var tagName = bits[0];
      var id = bits[1];
      var element = document.getElementById(id);
      if (tagName  &&  element.nodeName.toLowerCase() != tagName) {

return new Array();
      }
      currentContext = new Array(element);
      continue; 
    }
    if (token.indexOf('.') > -1) {

var bits = token.split('.');
      var tagName = bits[0];
      var className = bits[1];
      if (!tagName) {
        tagName = '*';
      }

function showSelDiv(){
   var selInfo = "";
   var arr = getSelectedRegions();
   for(var i=0; i<arr.length;i++){
       selInfo += arr[i].innerHTML+"\n";
   }

alert("您當前共選擇 "+arr.length+" 個文件，它們是：\n"+selInfo);
   
 }
 
  </script> 
 <body>
<button onclick="showSelDiv();">點擊查看你選擇的文件</button>
<div class="fileDiv">file1</div>
<div class="fileDiv">file2</div>
<div class="fileDiv">file3</div>
<div class="fileDiv">file4</div>
<div class="fileDiv">file5</div>
<div class="fileDiv">file6</div>

<div style="float:left;width:100%;"><button onclick="showSelDiv();">點擊查看你選擇的文件</button></div>
 </body> 
 <script>
    new RegionSelect({
     region:'div.fileDiv',
     selectedClass: 'seled'
    }).select();
 </script>
</html>

所屬頻道：表單按鈕特效/更新時間：2012-12-26

[收藏][報錯][返回列表]

相關表單按鈕特效：

拖動鼠標全選/反選表格的代碼_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些