zoukankan
html css js c++ java
js 模拟选择文件效果
代码来自网络
<
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 #cccccc
;
margin-right
:
10px
;
margin-bottom
:
10px
;
}
.seled
{
}
{
border
:
1px solid #ff0000
;
background-color
:
#D6DFF7
;
}
</
style
>
<
script
type
="text/javascript"
>
/**/
/*
--------------------------------- 以下4个方法 摘自网络 ----------------------------------------
*/
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
=
'
*
'
;
}
var
found
=
new
Array;
var
foundCount
=
0
;
for
(
var
h
=
0
; h
<
currentContext.length; h
++
)
{
var
elements;
if
(tagName
==
'
*
'
)
{
elements
=
getAllChildren(currentContext[h]);
}
else
{
elements
=
currentContext[h].getElementsByTagName(tagName);
}
for
(
var
j
=
0
; j
<
elements.length; j
++
)
{
found[foundCount
++
]
=
elements[j];
}
}
currentContext
=
new
Array;
var
currentContextIndex
=
0
;
for
(
var
k
=
0
; k
<
found.length; k
++
)
{
if
(found[k].className
&&
found[k].className.match(
new
RegExp(
'
\\b
'
+
className
+
'
\\b
'
)))
{
currentContext[currentContextIndex
++
]
=
found[k];
}
}
continue
;
}
if
(token.match(
/
^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$
/
))
{
var
tagName
=
RegExp.$
1
;
var
attrName
=
RegExp.$
2
;
var
attrOperator
=
RegExp.$
3
;
var
attrValue
=
RegExp.$
4
;
if
(
!
tagName)
{
tagName
=
'
*
'
;
}
var
found
=
new
Array;
var
foundCount
=
0
;
for
(
var
h
=
0
; h
<
currentContext.length; h
++
)
{
var
elements;
if
(tagName
==
'
*
'
)
{
elements
=
getAllChildren(currentContext[h]);
}
else
{
elements
=
currentContext[h].getElementsByTagName(tagName);
}
for
(
var
j
=
0
; j
<
elements.length; j
++
)
{
found[foundCount
++
]
=
elements[j];
}
}
currentContext
=
new
Array;
var
currentContextIndex
=
0
;
var
checkFunction;
switch
(attrOperator)
{
case
'
=
'
:
checkFunction
=
function
(e)
{
return
(e.getAttribute(attrName)
==
attrValue); }
;
break
;
case
'
~
'
:
checkFunction
=
function
(e)
{
return
(e.getAttribute(attrName).match(
new
RegExp(
'
\\b
'
+
attrValue
+
'
\\b
'
))); }
;
break
;
case
'
|
'
:
checkFunction
=
function
(e)
{
return
(e.getAttribute(attrName).match(
new
RegExp(
'
^
'
+
attrValue
+
'
-?
'
))); }
;
break
;
case
'
^
'
:
checkFunction
=
function
(e)
{
return
(e.getAttribute(attrName).indexOf(attrValue)
==
0
); }
;
break
;
case
'
$
'
:
checkFunction
=
function
(e)
{
return
(e.getAttribute(attrName).lastIndexOf(attrValue)
==
e.getAttribute(attrName).length
-
attrValue.length); }
;
break
;
case
'
*
'
:
checkFunction
=
function
(e)
{
return
(e.getAttribute(attrName).indexOf(attrValue)
>
-
1
); }
;
break
;
default
:
checkFunction
=
function
(e)
{
return
e.getAttribute(attrName); }
;
}
currentContext
=
new
Array;
var
currentContextIndex
=
0
;
for
(
var
k
=
0
; k
<
found.length; k
++
)
{
if
(checkFunction(found[k]))
{
currentContext[currentContextIndex
++
]
=
found[k];
}
}
continue
;
}
tagName
=
token;
var
found
=
new
Array;
var
foundCount
=
0
;
for
(
var
h
=
0
; h
<
currentContext.length; h
++
)
{
var
elements
=
currentContext[h].getElementsByTagName(tagName);
for
(
var
j
=
0
; j
<
elements.length; j
++
)
{
found[foundCount
++
]
=
elements[j];
}
}
currentContext
=
found;
}
return
currentContext;
}
/**/
/*
--------------------------------------------------------------------------------------------------------
*/
/**/
/*
*
* author: 王永山
* version: 1.1 beta
* date: 2008-09-09
* email: [email]wangys0927@163.com[/email]
*
* update:
* 1. 针对前2个beta版,该版本修复了前两个版本出现的 bug ,
* 2. 进行了代码的简单封装(由于本人初学js,对js掌握的很浅,因此面向对象的理解很差,封装的不好);
* 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样,还不能达到仿windows的选区Shift键的功能)。
* 4. 增加了获取“被选区选中元素”的方法,可以点击按钮“getRegions”看效果。
*/
function
addEvent(eventType, eventFunc, eventObj)
{
eventObj
=
eventObj
||
document;
if
(window.attachEvent) eventObj.attachEvent(
"
on
"
+
eventType, eventFunc);
if
(window.addEventListener) eventObj.addEventListener(eventType, eventFunc,
false
);
}
function
clearEventBubble(evt)
{
evt
=
evt
||
window.event;
if
(evt.stopPropagation) evt.stopPropagation();
else
evt.cancelBubble
=
true
;
if
(evt.preventDefault) evt.preventDefault();
else
evt.returnValue
=
false
;
}
function
posXY(event)
{
event
=
event
||
window.event;
var
posX
=
event.pageX
||
(event.clientX
+
(document.documentElement.scrollLeft
||
document.body.scrollLeft));
var
posY
=
event.pageY
||
(event.clientY
+
(document.documentElement.scrollTop
||
document.body.scrollTop));
return
{ x: posX, y: posY }
;
}
//
----------- 区域选择关键方法 -----------------------
var
_selectedRegions
=
[];
function
RegionSelect(selRegionProp)
{
this
.regions
=
[];
var
_regions
=
document.getElementsBySelector(selRegionProp[
"
region
"
]);
if
(_regions
&&
_regions.length
>
0
)
{
var
_self
=
this
;
for
(
var
i
=
0
; i
<
_regions.length; i
++
)
{
_regions[i].onmousedown
=
function
()
{
var
evt
=
window.event
||
arguments[
0
];
if
(
!
evt.shiftKey
&&
!
evt.ctrlKey)
{
//
清空所有select样式
_self.clearSelections(_regions);
this
.className
+=
"
"
+
_self.selectedClass;
//
清空selected数组,并加入当前select中的元素
_selectedRegions
=
[];
_selectedRegions.push(
this
);
}
else
{
if
(
this
.className.indexOf(_self.selectedClass)
==
-
1
)
{
this
.className
+=
"
"
+
_self.selectedClass;
_selectedRegions.push(
this
);
}
else
{
this
.className
=
this
.className.replaceAll(_self.selectedClass,
""
);
_selectedRegions.remove(
this
);
}
}
clearEventBubble(evt);
}
this
.regions.push(_regions[i]);
}
}
this
.selectedClass
=
selRegionProp[
"
selectedClass
"
];
this
.selectedRegion
=
[];
this
.selectDiv
=
null
;
this
.startX
=
null
;
this
.startY
=
null
;
}
RegionSelect.prototype.select
=
function
()
{
var
_self
=
this
;
addEvent(
"
mousedown
"
,
function
()
{
var
evt
=
window.event
||
arguments[
0
];
_self.onBeforeSelect(evt);
clearEventBubble(evt);
}
, document);
addEvent(
"
mousemove
"
,
function
()
{
var
evt
=
window.event
||
arguments[
0
];
_self.onSelect(evt);
clearEventBubble(evt);
}
, document);
addEvent(
"
mouseup
"
,
function
()
{
_self.onEnd();
}
, document);
}
RegionSelect.prototype.onBeforeSelect
=
function
(evt)
{
//
创建模拟 选择框
if
(
!
document.getElementById(
"
selContainer
"
))
{
this
.selectDiv
=
document.createElement(
"
div
"
);
this
.selectDiv.style.cssText
=
"
position:absolute;0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;
"
;
this
.selectDiv.id
=
"
selContainer
"
;
document.body.appendChild(
this
.selectDiv);
}
else
{
this
.selectDiv
=
document.getElementById(
"
selContainer
"
);
}
this
.startX
=
posXY(evt).x;
this
.startY
=
posXY(evt).y;
this
.isSelect
=
true
;
}
RegionSelect.prototype.onSelect
=
function
(evt)
{
var
_self
=
this
;
if
(_self.isSelect)
{
if
(_self.selectDiv.style.display
==
"
none
"
) _self.selectDiv.style.display
=
""
;
var
posX
=
posXY(evt).x;
var
poxY
=
posXY(evt).y;
_self.selectDiv.style.left
=
Math.min(posX,
this
.startX);
_self.selectDiv.style.top
=
Math.min(poxY,
this
.startY);
_self.selectDiv.style.width
=
Math.abs(posX
-
this
.startX);
_self.selectDiv.style.height
=
Math.abs(poxY
-
this
.startY);
var
regionList
=
_self.regions;
for
(
var
i
=
0
; i
<
regionList.length; i
++
)
{
var
r
=
regionList[i], sr
=
_self.innerRegion(_self.selectDiv, r);
if
(sr
&&
r.className.indexOf(_self.selectedClass)
==
-
1
)
{
r.className
=
r.className
+
"
"
+
_self.selectedClass;
_selectedRegions.push(r);
}
else
if
(
!
sr
&&
r.className.indexOf(_self.selectedClass)
!=
-
1
)
{
r.className
=
r.className.replaceAll(_self.selectedClass,
""
);
_selectedRegions.remove(r);
}
}
}
}
RegionSelect.prototype.onEnd
=
function
()
{
if
(
this
.selectDiv)
{
this
.selectDiv.style.display
=
"
none
"
;
}
this
.isSelect
=
false
;
//
_selectedRegions = this.selectedRegion;
}
//
判断一个区域是否在选择区内
RegionSelect.prototype.innerRegion
=
function
(selDiv, region)
{
var
s_top
=
parseInt(selDiv.style.top);
var
s_left
=
parseInt(selDiv.style.left);
var
s_right
=
s_left
+
parseInt(selDiv.offsetWidth);
var
s_bottom
=
s_top
+
parseInt(selDiv.offsetHeight);
var
r_top
=
parseInt(region.offsetTop);
var
r_left
=
parseInt(region.offsetLeft);
var
r_right
=
r_left
+
parseInt(region.offsetWidth);
var
r_bottom
=
r_top
+
parseInt(region.offsetHeight);
var
t
=
Math.max(s_top, r_top);
var
r
=
Math.min(s_right, r_right);
var
b
=
Math.min(s_bottom, r_bottom);
var
l
=
Math.max(s_left, r_left);
if
(b
>
t
+
5
&&
r
>
l
+
5
)
{
return
region;
}
else
{
return
null
;
}
}
RegionSelect.prototype.clearSelections
=
function
(regions)
{
for
(
var
i
=
0
; i
<
regions.length; i
++
)
{
regions[i].className
=
regions[i].className.replaceAll(
this
.selectedClass,
""
);
}
}
function
getSelectedRegions()
{
return
_selectedRegions;
}
/**/
/*
-------------------------------------- 区域选择方法结束 --------------------------------------------
*/
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();"
>
getRegions
</
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
class
="fileDiv"
>
file7
</
div
>
<
div
class
="fileDiv"
>
file8
</
div
>
<
div
class
="fileDiv"
>
file9
</
div
>
<
div
class
="fileDiv"
>
file10
</
div
>
<
div
class
="fileDiv"
>
file11
</
div
>
<
div
class
="fileDiv"
>
file12
</
div
>
<
div
class
="fileDiv"
>
file13
</
div
>
<
div
class
="fileDiv"
>
file14
</
div
>
<
div
class
="fileDiv"
>
file15
</
div
>
<
div
class
="fileDiv"
>
file16
</
div
>
<
div
class
="fileDiv"
>
file17
</
div
>
<
div
class
="fileDiv"
>
file18
</
div
>
<
div
class
="fileDiv"
>
file19
</
div
>
<
div
class
="fileDiv"
>
file20
</
div
>
<
div
class
="fileDiv"
>
file21
</
div
>
<
div
class
="fileDiv"
>
file22
</
div
>
<
div
class
="fileDiv"
>
file23
</
div
>
<
div
class
="fileDiv"
>
file24
</
div
>
<
div
class
="fileDiv"
>
file25
</
div
>
<
div
class
="fileDiv"
>
file26
</
div
>
<
div
class
="fileDiv"
>
file27
</
div
>
<
div
class
="fileDiv"
>
file28
</
div
>
<
div
class
="fileDiv"
>
file29
</
div
>
<
div
class
="fileDiv"
>
file30
</
div
>
<
div
class
="fileDiv"
>
file31
</
div
>
<
div
class
="fileDiv"
>
file32
</
div
>
<
div
class
="fileDiv"
>
file33
</
div
>
<
div
class
="fileDiv"
>
file34
</
div
>
<
div
class
="fileDiv"
>
file35
</
div
>
<
div
class
="fileDiv"
>
file36
</
div
>
<
div
class
="fileDiv"
>
file37
</
div
>
<
div
class
="fileDiv"
>
file38
</
div
>
<
div
class
="fileDiv"
>
file39
</
div
>
<
div
class
="fileDiv"
>
file40
</
div
>
<
div
class
="fileDiv"
>
file41
</
div
>
<
div
class
="fileDiv"
>
file42
</
div
>
<
div
class
="fileDiv"
>
file43
</
div
>
<
div
class
="fileDiv"
>
file44
</
div
>
<
div
class
="fileDiv"
>
file45
</
div
>
<
div
class
="fileDiv"
>
file46
</
div
>
<
div
class
="fileDiv"
>
file47
</
div
>
<
div
class
="fileDiv"
>
file48
</
div
>
<
div
class
="fileDiv"
>
file49
</
div
>
<
div
class
="fileDiv"
>
file50
</
div
>
<
div
class
="fileDiv"
>
file51
</
div
>
<
div
class
="fileDiv"
>
file52
</
div
>
<
div
class
="fileDiv"
>
file53
</
div
>
<
div
class
="fileDiv"
>
file54
</
div
>
<
div
class
="fileDiv"
>
file55
</
div
>
<
div
class
="fileDiv"
>
file56
</
div
>
<
div
class
="fileDiv"
>
file57
</
div
>
<
div
class
="fileDiv"
>
file58
</
div
>
<
div
class
="fileDiv"
>
file59
</
div
>
<
div
class
="fileDiv"
>
file60
</
div
>
<
div
style
="float: left; 100%;"
>
<
button
onclick
="showSelDiv();"
>
getRegions
</
button
></
div
>
</
body
>
<
script
>
new
RegionSelect(
{
region:
'
div.fileDiv
'
,
selectedClass:
'
seled
'
}
).select();
</
script
>
</
html
>
查看全文
相关阅读:
博客迁移.
win10不能睡眠问题
我多希望没有遇见你
打印队列 UVA12100
理科工具——数值分析计算相关软件及下载地址
用原生js完成鼠标点击显示滑入滑出效果
javascript:用原生js模拟贪吃蛇游戏练习
阅读css官方参考手册的关键点
翻滚吧骰子!——flex布局加css3动画综合练习
flexible box布局微博客户端发现页面练习
原文地址:https://www.cnblogs.com/yiki/p/1585911.html
最新文章
Luogu P3150 【pb的游戏(1)】
Noip(pj)2015 t2 扫雷游戏
[AHOI2009]中国象棋
更快速将你的页面展示给用户[前端优化篇]
[原创]CSS3打造动态3D气球
[原创]webapp/css3实战,制作一个《炉石传说》宣传页
[原创]zepto打造一款移动端划屏插件
移动端网页设计经验与心得
[原创]jquery+css3打造一款ajax分页插件
[原创]css3简单几步画一个乾坤图
热门文章
将博客搬至CSDN
js 一个关于图片onload加载的事
想从事数据科学家的自我修炼(浪叫兽的书单)一年之内从零基础入门(以不抱大腿的姿势)拿下数据竞赛 一等奖 ,二等奖,三等奖
浪叫兽的自我介绍 (完整版) 讲述一段如何进入大数据行业
浪叫兽大数据工作经验简介
Scipy学习笔记 矩阵计算
python 版 mldivide matlab 反除(左除)《数学建模算法与程序》Python笔记
使用Python scipy linprog 线性规划求最大值或最小值(使用Python学习数学建模笔记)
Python array,list,dataframe索引切片操作 2016年07月19日——智浪文档
VScode调试Python
Copyright © 2011-2022 走看看