网上摘抄的JS

转自：http://www.cnblogs.com/zengqs/archive/2006/11/06/551603.html
Posted on 2006-11-06 13:03 看海的人

Javascript & Ajax

/** Cookie **/
//定义全局变量Cookie
//eg:Cookie.setCookie('user','jack',{expireDays:1,expireHours:20,path:"/"}
var Cookie={//默认以秒为单位
     setCookie:function(name,value,option){
      var str=name+"="+escape(value);
      if (option){
         var ms=0;
         
         if (option.expireDays)        { try { ms+=option.expireDays*24*3600*1000;}catch(e){}}//天数
         if (option.expireHours)    { try { ms+=option.expireHours*3600*1000;} catch(e){}}//小时
         if (option.expireMinutes)    { try { ms+=option.expireMinutes*60*1000;}catch(e){}}//分钟
         if (option.expireSeconds)    { try { ms+=option.expireSeconds*1000;} catch(e){}}//秒钟
         if (ms==0)                    { try { ms=option*1000;} catch(e){}}//默认以秒为单位传入时间
         
         if (ms!=0){  
            var date=new Date();
            date.setTime(date.getTime()+ms);
            str+="; expires="+date.toGMTString();
         }
         if (option.path) str+="; path="+path;
         if (option.domain) str+="; domain="+domain;
         if (option.secure) str+="; true";
         
       }
       document.cookie=str;
     }, 
     getCookie:function(name)
     {
       var cookieArray=document.cookie.split("; ");
       var cookie=new Object();
       for (var i=0;i<cookieArray.length;i++) {
        var arr=cookieArray[i].split("=");
        if (arr[0]==name) return unescape(arr[1]);
       }
       return "";
     },
     deleteCookie:function(name){
       this.setCookie(name,"",{expireDays:-1});
     }
 }//COOKIE

//功能介绍：ToolTips
//代码文件：tooltip.js
//作者：曾青松，Jack zeng(pypzengqs@126.com),2006.11.5
//版本：1.0.0
//依赖关系：需要prototype.js库

/* tooltip.js - Small tooltip library on top of Prototype 
 *
 * Usage: 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *   </script>
 * 
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears. 
 * 
 * Example:
 * 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1.<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *   以下代码应该放在所有的element定义之后，一般放置在页面的底部。
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip');//使用默认的CSS,将忽略自定义的CSS
*      var my_tooltip = new Tooltip('product_1', 'tooltip',false);//使用自定义的CSS
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

//需要使用prototype.js文件
var Tooltip = Class.create();
Tooltip.prototype = {
    version:'1.0.0',//版本
    //default_css:true,
    style:{
        marging:"0px",
        padding:"5px 8px 3px 8px",
        backgroundColor:"#FFFFFF",//"#d6d6fc",
        color:"#349045",
        borderWidth:"1px",
        borderStyle:"solid",
        borderColor:"gray",
        filter:"progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)"
      },
       initialize: function(element, tool_tip) {
           this.initialize(element,tool_tip,true);
       },
      initialize: function(element, tool_tip,default_css) {
          if (default_css==false) {
              this.default_css=false; 
          }else {
              this.default_css=true;
          }
  
        var options = Object.extend({
          delta_x: 5,
          delta_y: 5,
          zindex: 1000//足够大的数，使层能够显示在最前面
        }, arguments[1] || {});
    
        this.element      = $(element);
        this.tool_tip     = $(tool_tip);    
        this.options      = options;    
        this.tool_tip.hide();        // hide the tool-tip by default    
        this.eventMouseOver = this.showTooltip.bindAsEventListener(this);//绑定事件处理程序
        this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
    
        this.registerEvents();
      },
    
      destroy: function() {//解除事件处理
        Event.stopObserving(this.element, "mouseover", this.eventMouseOver);//停止对事件的观察（监听）
        Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
      },
    
      registerEvents: function() {//注册事件处理
        Event.observe(this.element, "mouseover", this.eventMouseOver);
        Event.observe(this.element, "mouseout", this.eventMouseOut);
      },
    
      showTooltip: function(event){
        Event.stop(event);
        // get Mouse position
        var mouse_x = Event.pointerX(event);
        var mouse_y = Event.pointerY(event);
        
        // decide if wee need to switch sides for the tooltip
        var dimensions = Element.getDimensions( this.tool_tip );
        var element_width = dimensions.width;
        var element_height = dimensions.height;
        
        if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.delta_x) ){ // too big for X
            mouse_x = mouse_x - element_width;
            // apply delta to make sure that the mouse is not on the tool-tip
            mouse_x = mouse_x - this.options.delta_x;
        } else {
            mouse_x = mouse_x + this.options.delta_x;
        }
        
        if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.delta_y) ){ // too big for Y
            mouse_y = mouse_y - element_height;
            // apply delta to make sure that the mouse is not on the tool-tip
            mouse_y = mouse_y - this.options.delta_y;
        } else {
            mouse_y = mouse_y + this.options.delta_y;
        } 
        
        // now set the right styles
        this.setStyles(mouse_x, mouse_y);
        
        // finally show the Tooltip
        //new Effect.Appear(this.tool_tip);
        new Element.show(this.tool_tip);
      },
      
      setStyles: function(x, y){
        // set the right styles to position the tool tip
        Element.setStyle(this.tool_tip, { position:'absolute',
                                          top:y + "px",
                                          left:x + "px",
                                          zindex:this.options.zindex
                                        });
        
        // apply default theme if wanted
        if (this.default_css==true){//应用缺省的css
                    Element.setStyle(this.tool_tip, this.style);    
        }    
      },

      hideTooltip: function(event){
        //new Effect.Fade(this.tool_tip);
        new Element.hide(this.tool_tip);
      },
    
      getWindowHeight: function(){
        var innerHeight;
        if (navigator.appVersion.indexOf('MSIE')>0) {
            innerHeight = document.body.clientHeight;
        } else {
            innerHeight = window.innerHeight;
        }
        return innerHeight;    
      },
     
      getWindowWidth: function(){
        var innerWidth;
        if (navigator.appVersion.indexOf('MSIE')>0) {
            innerWidth = document.body.clientWidth;
        } else {
            innerWidth = window.innerWidth;
        }
        return innerWidth;    
      }
}

/*
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/prototype.js" language="javascript" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
</head>
<body>
    <div id='tooltip1' style="display:none; margin: 5px; background-color: red;">
     <h1>HOTDON</h1>
     Detail infos on product 1.<br />
     Detail infos on product 1.<br />
   </div>
    <div id='tooltip2' style="display:none; margin: 5px; background-color: red;">
     <h1>INFO</h1>
     Detail infos on product 1.<br />
     Detail infos on product 1.<br />
   </div>
   <a href="http://www.hotdon.com.cn" id="hotdon">hotdon</a>
   <div id='info' style="cursor:hand;">
     信息列表
   </div>
</body>
</html>
    <script type="text/javascript">
          new Tooltip('info', 'tooltip1');
          new Tooltip('hotdon', 'tooltip2');
   </script>
*/

//功能介绍：UrlParams分析Url参数
//代码文件：UrlParams-1.0.0.js
//作者：曾青松，Jack zeng(pypzengqs@126.com),2006.11.5
//版本：1.0.0
//依赖关系：需要prototype-1.4.0.js库

/*<script language="javascript" type="text/javascript">
    var params=new UrlParams("http://www.pyp.edu.cn?id=1&name=zengqs");
    alert(params.get("name"));
    alert(params.get("id"));
    alert(params.getArguments().length);
    alert(params.getArguments()[1]);
</script>*/

var UrlParams = Class.create();

UrlParams.prototype={
    args:new Object(),
    args_name:new Array(),
    initialize:function(query)
    {
        //this.args = new Object();
        if (query.indexOf("?")!=-1)//如果包含?则取？之后的部分，以保持兼容性
        {
            query=query.substring(query.indexOf("?")+1);
        }
        var pairs = query.split("&"); //Break at &
        this.args_name=new Array(pairs.length);
        
        for(var i = 0; i < pairs.length; i++) 
        {
            var pos = pairs[i].indexOf('='); //Look for "name=value"
            if (pos == -1) continue; //If not found, skip
            var argname = pairs[i].substring(0,pos); //Extract the name
            var value = pairs[i].substring(pos+1); //Extract the value
            this.args[argname] = unescape(value); //Store as a property
            this.args_name[i]=argname;//保存参数名
              // In JavaScript 1.5, use decodeURIComponent(  ) 
              // instead of escape(  )
        }
    },
    get:function(name)
    {
        return this.args[name];
    },
    getArguments:function()//获取所有的参数的名称的列表
    {
        return this.args_name;
    }
};

//功能介绍：窗体表单验证程序
//代码文件：FormValidate-1.0.0.js
//作者：曾青松，Jack zeng(pypzengqs@126.com),2006.11.5
//版本：1.0.0
//依赖关系：需要prototype-1.4.0.js库

//
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 功能:通用验证所有的表单元素.
// 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
// 
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 正则表达式用例
// 1、^"S+[a-z A-Z]$ 不能为空 不能有空格 只能是英文字母
// 2、"S{6,} 不能为空 六位以上
// 2、"S{1,} 不能为空
// 3、^"d+$ 不能有空格 不能非数字
// 4、(.*)(".jpg|".bmp|".gif|.png|".jpeg)$ 只能是jpg和bmp格式
// 5、^"d{4}"-"d{1,2}-"d{1,2}$ 只能是2004-10-22格式
//
//6-7用于select控件
//
// 6、^0$ 至少选一项
// 7、^0{2,}$ 至少选两项
//
// 8、^["s|"S]{20,}$ 不能为空 二十字以上
// 9、^"+?[a-z0-9](([-+.]|[_]+)?[a-z0-9]+)*@([a-z0-9]+(".|"-))+[a-z]{2,6}$邮件
// 10、"w+([-+.]"w+)*@"w+([-.]"w+)*"."w+([-.]"w+)*([,;]"s*"w+([-+.]"w+)*@"w+([-.]"w+)*"."w+([-.]"w+)*)* 
//输入多个地址用逗号或空格分隔邮件
// 11、^("([0-9]+"))?[0-9]{7,8}$电话号码7位或8位或前面有区号例如（022）87341628
// 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(".[a-z A-Z 0-9 _]+)+(",[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(".[a-z A-Z 0-9 _]+)+)*$
// 只能是字母、数字、下划线；必须有@和.同时格式要规范 邮件
// 13 ^"w+@"w+("."w+)+(","w+@"w+("."w+)+)*$上面表达式也可以写成这样子，更精练。
//14 ^"w+((-"w+)|("."w+))*"@"w+((".|-)"w+)*"."w+$ 
//


//例子：
// <input type="text" id="text1" checkReg=""S{2,4}" warning="姓名不能为空，长度为2-4个字母（汉字）!" value />
//<select name="type_show" id="type_show" checkReg=""S{1,}" warning="至少选择一项!">
//    <option value selected>--请选择-- </option>
//    <option value="1">男</option>
//    <option value="0">女</option>
//</select>

//调用实例  if (false==new FormValidate().validate($('form_main'))) return false;
function FormValidate(){};

//以下构造方法需要使用prototype-1.4.0.js库
//var FormValidate=Class.create();
FormValidate.prototype={
    //initialize:function(){},//Constructor function，prototype-1.4.0.js库类的构造函数，必须重载
    validate:function(oForm)//类的公开的主要方法，oForm为要验证的表单的名称
    {
        var All_ele = oForm.elements;
        //遍历所有表元素
        for(var i=0;i<All_ele.length;i++)
        {
            //是否需要验证
            //if(All_ele[i].checkReg)
            if(All_ele[i].getAttribute('checkReg'))
            {
                //取得验证的正则字符串
                //var sReg = All_ele[i].checkReg;//FireFox中不能工作
                var sReg = All_ele[i].getAttribute('checkReg');//FireFoxzhong
                //取得表单的值,用通用取值函数
                var sVal = this.Getcheck_value(All_ele[i]);
                //字符串->正则表达式,不区分大小写
                var reg = new RegExp(sReg,"i");
                if(!reg.test(sVal))
                {
                    //验证不通过,弹出提示warning
                    //alert(All_ele[i].warning);
                    alert(All_ele[i].getAttribute('warning'));
                    //该表单元素取得焦点,用通用返回函数
                    this.check_GoBack(All_ele[i]);
                    return false;
                }
            }
        }
        return true;
    },
    
    //======================================以下均为帮助方法=================================
    
    //通用取值函数分三类进行取值:文本输入框,直接取值el.value
    //单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个,
    //单、多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
    
    Getcheck_value:function (el)
    {
        //取得表单元素的类型
        var sType = el.type;
        var ret="";
        switch(sType)
        {
            case "text":
            case "hidden":
            case "password":
            case "file":
            case "textarea": {ret=el.value; break;}
            case "checkbox":
            case "radio": { ret=this.GetValueChoose(el); break;}
            case "select-one":
            case "select-multiple": { ret=this.GetValueSel(el); break;}
        }
        return ret;
    },
    
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    GetValueChoose:function (el)
    {
        var sValue = "";
        //取得第一个元素的name,搜索这个元素组
        var tmpels = document.getElementsByName(el.name);
        for(var i=0;i<tmpels.length;i++)
        {
            if(tmpels[i].checked)
            {
                sValue += "0";
            }
        }
        return sValue;
    },
    
    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    
    GetValueSel:function (el)
    {
        var svalue = "";
        for(var i=0;i<el.options.length;i++)
        {
            //单选下拉框提示选项设置为value=""
            if(el.options[i].selected && (el.options[i].value!=""))
            {
                svalue += "0";
            }
        }
        return svalue;
    },
    
    //通用返回函数,验证没通过返回的效果.分三类进行取值
    //文本输入框,光标定位在文本输入框的末尾
    //单多选,第一选项取得焦点
    //单多下拉菜单,取得焦点
    
    check_GoBack:function (el)
    {
        if (el==null) {return;}
        
        try
        {
            //取得表单元素的类型
            
            var sType = el.type;
            switch(sType)
            {
                case "text":
                case "hidden":
                case "password":
                case "file":
                case "textarea": 
                {
                    el.focus();
                    var rng=el.createTextRange(); 
                    rng.collapse(false); 
                    rng.select(); 
                    break;
                }
                case "checkbox": 
                case "radio":
                { 
                    var All_ele=document.getElementsByName(el.name);
                    All_ele[0].focus();
                    break;
                }
                case "select-one":
                case "select-multiple":
                {
                    el.focus();
                    break;
                }
            }//switch
        }
        catch(e){}
    },
    
    //checkReg field
    checkRegField:function (Field)
    {
        //是否需要验证
        if(Field.checkReg)
        {
            //取得验证的正则字符串
            var sReg = Field.checkReg;
            //取得表单的值,用通用取值函数
            var sVal = this.Getcheck_value(Field);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg);
            if(!reg.test(sVal))
            {
                //验证不通过,弹出提示warning
                alert(Field.warning);
                //该表单元素取得焦点,用通用返回函数
                this.check_GoBack(Field);
                return false;
            }
        }
        return true;
    }
}