常用的JS工具类
1、层拖动对象类,原理:
需拖动的层包括两类对象,主移动区域,鼠标拖动事件区域(可与主移动区域一致),鼠标在事件区域按下时为其注册鼠标移动及鼠标释放事件,非IE浏览器需为document注册事件,同时为其设置捕获事件(关键事件setCapture),鼠标移动时重置主区域Style中的位置属性(left,top),释放鼠标后移除事件绑定。
$.extend({
ObjMove: function (op) {
var settings = $.extend({
containerId: 'divPopWindow', //容器编号
dragIds: ['divPopWindowDragTop', 'divPopWindowDragBottom'], //拖动层编号集
onMouseDownEvent: null, //鼠标按下时执行的附加事件
onMouseMoveEvent: null, //鼠标移动时执行的附加事件
onMouseUpEvent: null //鼠标释放时执行的附加事件
}, op || {});
var containerObj = null;
var left = 0;
var top = 0;
init();
function init() {
containerObj = document.getElementById(settings.containerId);
containerObj.style.position = 'absolute';
$(settings.dragIds).each(function () {
$('#' + this).bind('mousedown', function (ev) {
onMouseDown(this, ev);
});
});
}
//鼠标左键事件
function onMouseDown(o, ev) {
var event = window.event || ev;
if (o.setCapture){
o.setCapture();
//IE下事件绑定
$(o).bind('mousemove', function(ev){
onMouseMove(ev);
});
$(o).bind('mouseup', function(o){
onMouseUp(this);
});
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
//Chrome、Firefox下事件绑定
document.addEventListener('mousemove', onMouseMove, true);
document.addEventListener('mouseup', onMouseUp, true);
}
//计算弹出层的相对初始位置
left = event.clientX - containerObj.offsetLeft;
top = event.clientY - containerObj.offsetTop;
if(settings.onMouseDownEvent != null){
settings.onMouseDownEvent();
}
}
//鼠标移动事件
function onMouseMove(ev){
var event = window.event || ev;
if(!event.pageX){
event.pageX = event.clientX;
}
if(!event.pageY){
event.pageY = event.clientY;
}
containerObj.style.left = (event.pageX - left) + 'px';
containerObj.style.top = (event.pageY - top) + 'px';
if(settings.onMouseMoveEvent != null){
settings.onMouseMoveEvent();
}
}
//鼠标左键释放事件
function onMouseUp(o){
if (o.releaseCapture){
o.releaseCapture();
//IE下事件释放
$(o).unbind('mousemove');
$(o).unbind('mouseup');
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
//Chrome、Firefox下事件释放
document.removeEventListener("mousemove", onMouseMove, true);
document.removeEventListener("mouseup", onMouseUp, true);
}
if(settings.onMouseUpEvent != null){
settings.onMouseUpEvent();
}
}
}
})
示例:
<div id="divPopWindow" style="width: 200px; height: 200px;">
<div id="divDragTop" style="width: 100%; height: 24px; background-color: gray; cursor: move;"></div>
<div style="width: 100%; height: 152px; background-color: black;"></div>
<div id="divDragBottom" style="width: 100%; height: 24px; background-color: gray; cursor: move;"></div>
</div>
<script type="text/javascript">
$.ObjMove({
containerId: 'divPopWindow',
dragIds: ['divDragTop', 'divDragBottom']
});
</script>
2、弹出窗口:
$.extend({
OpenWindow: function (op) {
var settings = $.extend({
title: '提示', //弹出窗口标题
content: '', //弹出窗口内容:内容或URL地址
contentType: 'frame', //弹出窗口内容区类型:frame或文本
width: 300, //宽度
height: 300 //高度
}, op || {});
var windowObj = null; //主窗口
var dragTopObj = null; //拖动对象
var shadowObj = null; //阴影对象
var normalColor = '#336699';
var activeColor = 'orange';
init();
function init() {
windowObj = $('#divPopWindow');
if(windowObj.length == 0){
var content = '';
if(settings.contentType == 'frame') {
content = '<iframe id="divPopWindowFrame" name="divPopWindowFrame" style="width: 100%; height: ' + (settings.height - 20 - 4) + 'px;" frameborder="0px" scrolling="scrolling" src="' + settings.content + '"></iframe>';
} else {
content = settings.content;
}
var fixW = 8; //宽度修正值
if(!$.browser.msie){
fixW = 12;
}
var windowHtml = '<div id="divPopWindow" style="z-index: 1000; width: ' + settings.width + 'px; height: ' + settings.height + 'px; '
+ 'background-color: ' + normalColor + '; color: ' + normalColor + '; font-size: 8pt; font-family: Tahoma; position: absolute; cursor: move; border: 2px solid ' + normalColor + ';">'
+ ' <div id="divPopWindowDragTop" style="background-color: ' + normalColor + '; width: ' + (settings.width - (2 * 2)) + 'px; height: 20px; color: white;" ondblclick="">'
+ ' <span style="float: left; display:block; width: ' + (settings.width - (2 * 12) - 4 - fixW) + 'px; margin-left: 5px; margin-top: 3px">' + settings.title + '</span>'
+ ' <span id="spPopWindowMin" style="width: 12px; border-width: 0px; color: white; font-family: webdings; cursor: default;">0</span>'
+ ' <span id="spPopWindowClose" style="width: 12px; border-width: 0px; color: white; font-family: webdings; cursor: default;">r</span>'
+ ' </div>'
+ ' <div id="divPopWindowContent" style="width: 100%; height: ' + (settings.height - 20) + 'px; background-color: white; line-height: 14px; word-break: break-all;">'
+ ' <div id="divPopWindowContentBox" style="width: 100%; height: ' + (settings.height - 20) + 'px; overflow: auto;">'
+ ' </div>'
+ ' </div>'
+ "</div>"
+ '<div id="divPopWindowShadow" style="display: none; width: ' + settings.width + 'px; height:' + settings.height + 'px; top: 0px; left: 0px; '
+ 'z-index: 999; position: absolute; background-color: black; filter:alpha(opacity=40);">'
+ '</div>';
$(windowHtml).appendTo('body');
$('#spPopWindowMin').bind('click', switchContentArea);
$('#spPopWindowClose').bind('click', close);
}
windowObj = $('#divPopWindow');
dragTopObj = $('#divPopWindowDragTop');
shadowObj = $('#divPopWindowShadow');
$('#divPopWindowContentBox').html(content);
/*初始化窗口容器位置*/
var left = (document.body.clientWidth - settings.width) / 2;
var top = document.documentElement.clientHeight;
var topscroll = document.body.clientHeight;
if (topscroll > top) {
top = topscroll;
}
top = (top - settings.height) / 2;
if (top < 20) {
top = 20;
}
windowObj[0].style.left = left + 'px';
windowObj[0].style.top = top + 'px';
windowObj.show();
$.ObjMove({
containerId: 'divPopWindow',
dragIds: ['divPopWindowDragTop'],
onMouseDownEvent: onMouseDown,
onMouseMoveEvent: onMouseMove,
onMouseUpEvent: onMouseUp
});
}
//鼠标按下时执行的事件
function onMouseDown(){
windowObj.css({ backgroundColor: activeColor, borderColor: activeColor});
dragTopObj.css({ backgroundColor: activeColor});
shadowObj.show();
shadowObj[0].style.left = (windowObj.position().left + 12) + 'px';
shadowObj[0].style.top = (windowObj.position().top + 12) + 'px';
}
//鼠标移动时执行的事件
function onMouseMove(){
shadowObj[0].style.left = (windowObj.position().left + 12) + 'px';
shadowObj[0].style.top = (windowObj.position().top + 12) + 'px';
}
//鼠标释放时执行的事件
function onMouseUp(){
windowObj.css({ backgroundColor: normalColor, borderColor: normalColor});
dragTopObj.css({ backgroundColor: normalColor});
shadowObj.hide();
}
//切换内容显示区
function switchContentArea(){
if($('#divPopWindowContent').css('display') != 'none'){
$('#divPopWindowContent').hide();
$('#spPopWindowMin').html('2')
windowObj.height(24);
shadowObj.height(24);
}else{
$('#divPopWindowContent').show();
$('#spPopWindowMin').html('0')
windowObj.height(settings.height);
shadowObj.height(settings.height);
}
}
//关闭窗口
function close(){
windowObj.unbind().hide();
dragTopObj.unbind();
$('#divPopWindowFrame').attr('src', '');
}
}
})
调用:
$.OpenWindow({
content: 'window.html'
});
3、表单验证工具类,原理:
利用控件自定义属性绑定验证类型、提示说明,验证时通过验证类型调用验证方法,返回真假值:
function ValidObj(op) {
var obj = new Object;
obj.Valid = valid;
var settings = $.extend({
containerId: 'tbInfo' //容器编号
}, op);
function valid() {
var isSuccess = 1;
var inputObj = null;
var types = '';
var msgs = '';
$('#' + settings.containerId).find('[valid]').each(function () {
inputObj = $(this);
types = $(eval($(this).attr('valid')));
msgs = $(eval($(this).attr('msg')));
$(eval($(this).attr('valid'))).each(function(n){
isSuccess = run(inputObj, this.toLowerCase());
if(isSuccess == -1){
alert('系统错误,验证类型不存在,请联系开发人员!');
return false;
}
if(isSuccess == 0){
alert(msgs[n]);
inputObj.focus();
return false;
}
});
if(isSuccess != 1){
return false;
}
});
return isSuccess == 1;
}
//运行表单验证,返回值:-1 验证类型不存在,0 验证失败,1 验证成功
function run(o, type) {
var pattern = null;
var val = o.val();
switch (type) {
case 'null':
//为空验证
if ($.trim(val).length == 0) {
return 0;
}
return 1;
case 'numeric':
//数值验证
pattern = /^[-+]?[0-9]+(\.[0-9]+)?$/;
break;
case 'notchinese':
//不能包含中文验证
pattern = /^[u4E00-u9FA5]+$/;
break;
case 'email':
//邮箱验证
pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
break;
}
if (pattern == null) {
//未找到验证类型
return -1;
}
if (!pattern.test(val)) {
return 0;
}
return 1;
}
return obj;
}
调用:
<table id="tbTest" cellspacing="1" cellpadding="0" style="background-color: black; width: 100%;">
<tr>
<td>非空及数值验证</td>
<td><input name="tbNotNullAndNumeric" value="" size="20" valid="['null', 'numeric']" msg="['不能为空,请输出', '必须为数值类型,请重新输入']"></td>
</tr>
<tr>
<td>邮件验证</td>
<td><input name="tbEmail" value="" size="20" valid="['email']" msg="['邮件格式不正确,请重新输入']"></td>
</tr>
<tr>
<td colspan="2"><input type="button" onclick="Valid();" value="验证输入框" /></td>
</tr>
</table>
<script type="text/javascript">
function Valid(){
var obj = new ValidObj({
containerId: 'tbTest' //容器编号
});
if(obj.Valid()){
alert('验证成功。');
}
}
</script>