常用的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>



JS Demo
 

  

posted @ 2011-07-28 20:25  flysoul  阅读(1855)  评论(0编辑  收藏