PHP博客-为了忘却的纪念 $bestmost->save("多多益善")-随笔分类-ajaxhttp://www.phpweblog.net/fuyongjie/category/503.html言己及众zh-cnThu, 02 Sep 2010 17:04:48 GMTThu, 02 Sep 2010 17:04:48 GMT60Google AJAX Language API开发者参考http://www.phpweblog.net/fuyongjie/archive/2008/11/19/6094.htmlbestmostbestmostTue, 18 Nov 2008 16:51:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/11/19/6094.htmlhttp://www.phpweblog.net/fuyongjie/comments/6094.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/11/19/6094.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/6094.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/6094.html

使用AJAX Language API，你可以仅使用JavaScript来完成对某个网页上某个区域的语言进行翻译和检测的工作。这个API是新开发的，因此相对于一个完美的文档来说，可能有一些bug和微小的不足。我们会修补这些漏洞，因此请谅解、你可以加入AJAX APIs开发者论坛来给我们反馈和讨论这个API。

面向读者

本文档是面向对JavaScript编程和面向对象编程概念有所了解的人准备的。在互联网上有很多JavaScript教程。

介绍

在Google Ajax Language API上的“Hello,World”程序

开始学习本API的最简单方法是来看一个简单的例子，一下案例将检测给定语言，并且将其翻译为英文。

  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("language", "1");
    function initialize() {
      var text = document.getElementById("text").innerHTML;
      google.language.detect(text, function(result) {
        if (!result.error && result.language) {
          google.language.translate(text, result.language, "en",
                                    function(result) {
            var translated = document.getElementById("translation");
            if (result.translation) {
              translated.innerHTML = result.translation;
            }
          });
        }
      });
    }
    google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="text">你好，很高興見到你。</div>
    <div id="translation"></div>
  </body>

你可以在这里查看该案例，并且随意修改和运行它。

在你的网页中包含Ajax Language API

为了在你的网页中加入AJAX Language API，你需要利用Google AJAX API Loader。该公有加载类允许你加载你所需要的所有AJAX API，包括这里的language API。你需要同时包含Google AJAX APIs的script标签并且调用google.load(”language”,”1″);。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("language", "1");
</script>

第一个script标签加载了google.load函数，这个函数允许你加载特定的 Google API。google.load(”language”,”1″)加载了Language API的第一版。当前，AJAX Language API的版本为1，但是不久后新版本将可以使用。参考下面的版本讨论来获得更多信息。

API 更新

google.load函数的第二个参数实际上是你所使用的AJAX Language API的版本。当前，AJAX Language API的版本为1，但是不久后新版本将可以使用。如果以后我们对API进行重要更新，我们将改变版本号，并且在Google Code和AJAX APIS 讨论中发布通知。当该事件发生后，我们预期会在至少一个月的时间内继续支持所有版本来使你有足够的时间来迁移你的代码。

AJAX Language API团队对于最近日较的Bug修复和平台优化进行定期更新。这些Bug修复应当仅提高表现和修复Bug，但是我们有可能不小心破坏某些API用户、请使用AJAX APIs 讨论组来报告这样的问题。

实例

语言翻译

本案例展示了一个简单的对一个JavaScript字符串变量进行翻译的过程。

google.language.translate("Hello world", "en", "es", function(result) {
  if (!result.error) {
    var container = document.getElementById("translation");
    container.innerHTML = result.translation;
  }
});

查看案例（translate.html）

语言检测

这个案例展示了对于一个JavaScript字符串的语言检测。将返回语言代码。

var text = "?Dónde está el ba?o?";
google.language.detect(text, function(result) {
  if (!result.error) {
    var language = 'unknown';
    for (l in google.language.Languages) {
      if (google.language.Languages[l] == result.language) {
        language = l;
        break;
      }
    }
    var container = document.getElementById(”detection”);
    container.innerHTML = text + ” is: ” + language + “”;
  }
});

查看案例 (detection.html)

翻译时源检测

如下的案例类似于基本的翻译案例，但是它展示了如何在不知道源语言时对文本进行翻译。通过传入一个空字符串来表示未知的源语言，系统将在一次调用中自动检测和翻译。

google.language.translate("Hello world", "", "es", function(result) {
  if (!result.error) {
    var container = document.getElementById("translation");
    container.innerHTML = result.translation;
  }
});

查看案例 (autotranslate.html)

更多案例

这里有进行交互作用的两个附加案例：

第一个案例对预输入的文本字符串进行语言检测，同时也允许输入其他的文本。它同时也显示信任和可靠因数（confidence and reliability factors—译者注）。
查看案例(detect.html)

第二个附加案例进行翻译。同时他也允许与上述类似的交互作用。
查看案例(translate.html)

API细节

支持的语言

Google AJAX Language API现在支持下列语言。该技术正在不断的提高，同时我们的团队也在努力的扩展这个列表，因此请经常回来看看。你也可以访问Google Translate来查看最近更新的列表。

    * Arabic （阿拉伯语）
    * Chinese (Simplified and Traditional) （中文简体）
    * Dutch （荷兰语）
    * English （英语）
    * French （法语）
    * German （德语）
    * Greek （希腊语）
    * Italian （意大利语）
    * Japanese （日语）
    * Korean （韩语）
    * Portuguese （葡萄牙语）
    * Russian （俄语）
    * Spanish（西班牙语）

支持的语言翻译对

Google AJAX Language API现在支持下列语言翻译对。该技术正在不断的提高，同时我们的团队也在努力的扩展这个列表，因此请经常回来看看。你也可以访问Google Translate来查看最近更新的列表。

    * Arabic to English （阿拉伯语到英语）
    * Chinese to English （中文到英语）
    * Chinese (Simplified to Traditional) （简体中文到繁体中文）
    * Chinese (Traditional to Simplified) （繁体中文到简体中文）
    * Dutch to English （荷兰语到英语）
    * English to Arabic （英语到阿拉伯语）
    * English to Chinese (Simplified) （英语到简体中文）
    * English to Chinese (Traditional) （英语到繁体中文）
    * English to Dutch （英语到荷兰语）
    * English to French （英语到法语）
    * English to German （英语到德语）
    * English to Greek （英语到希腊语）
    * English to Italian （英语到意大利语）
    * English to Japanese （英语到日语）
    * English to Korean （英语到韩语）
    * English to Portuguese （英语到葡萄牙语）
    * English to Russian （英语到俄语）
    * English to Spanish （英语到西班牙语）
    * French to English （法语到英语）
    * French to German （法语到德语）
    * German to English （德语到英语）
    * German to French （德语到法语）
    * Greek to English （希腊语到英语）
    * Italian to English （意大利语到英语）
    * Japanese to English （日语到英语）
    * Korean to English （韩语到英语）
    * Portuguese to English （葡萄牙语到英语）
    * Russian to English （俄语到英语）
    * Spanish to English（西班牙语到英语）

问题解决

如果在你的代码中遇到了问题：

   1. 检查代码。请牢记JavaScript是对大小写敏感的语言。
   2. 使用JavaScript调试器、在Firefox中，你可以使用JavaScript控制台或者FireBug扩展。在IE中，你可以使用Microsoft Script Debugger。
   3. 在AJAX APIs讨论组中搜索。如果你找不到回答你问题的帖子，那么可以在讨论组中发布你的问题，并且包含指向你出问题的页面的链接。



bestmost 2008-11-19 00:51 发表评论
]]>【转】[JGTranslation] - 基于GOOGLE AJAX API的jQuery页面即时翻译插件http://www.phpweblog.net/fuyongjie/archive/2008/11/19/6093.htmlbestmostbestmostTue, 18 Nov 2008 16:45:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/11/19/6093.htmlhttp://www.phpweblog.net/fuyongjie/comments/6093.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/11/19/6093.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/6093.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/6093.html

平常上网遇见不懂单词和句子的时候，都喜欢用翻译软件来翻译一下，一般都用有道和google。这几天看google API的时候发现他好像早就提供了翻译的方法，不过好像没什么人用 :( 那我来用，呵呵。

写了个jquery的小插件，结合google ajax API，提供页面文字的即时翻译功能，只要你指定要使用即时翻译的模块ID并指定翻译语言（如果不指定就按照操作系统默认语言进行翻译。）就能简单调用，非常方便。

如果你的blog是中文但是很多国外访问者那你可以用了试试，如果你的是英文blog，但是很多用中文的用户访问，你也可以使用。总之都是为了大家提供便利，呵呵。

 

可以选择下面的两段文字看看效果

曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电一般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了
Now that I’ve lost everything to you,
you say you want to start something new,
and it’s breaking my heart you’re leaving,
baby I’m grieving.
But if you wanna leave take good care,
hope you have a lot of nice things to wear,
but then a lot of nice things turn bad out there.

一、你必须引用google提供的API 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
</script>

二、翻译控件用到的默认样式

.JGTranslationPopStyle{font : normal normal normal 12px Verdana, Arial, Helvetica, sans-serif;border:2px solid #C5D7EF;background:#fff;}
.JGTranslationPopStyle p{padding:3px;margin:0px;line-height:150%;}
.JGTranslationPopStyle div{text-align:right;background:#E5ECF9;}

三、调用方法

$(selector).JGTranslation(options)
//可选参数
//Language:string(default = "userLanguage")
//PopStyle: string(default = "JGTranslationPopStyle")
//Branding:boolean(default = true)

示例：

<div id="TS1">
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电一般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了
</div>
<div id="TS2">
Now that I've lost everything to you,
you say you want to start something new,
and it's breaking my heart you're leaving,
baby I'm grieving.
But if you wanna leave take good care,
hope you have a lot of nice things to wear,
but then a lot of nice things turn bad out there.
</div>
$('#TS1').JGTranslation({Language:'en'})
$('#TS2').JGTranslation()
原文加演示：http://www.evlook.com/?p=126





bestmost 2008-11-19 00:45 发表评论
]]>通过鼠标定位和html元素坐标及宽高实现对ajax层的隐藏与显示http://www.phpweblog.net/fuyongjie/archive/2008/08/25/5653.htmlbestmostbestmostMon, 25 Aug 2008 01:29:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/08/25/5653.htmlhttp://www.phpweblog.net/fuyongjie/comments/5653.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/08/25/5653.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/5653.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/5653.html来自：http://www.phpweblog.net/fuyongjie/admin/EditPosts.aspx?postid=5653
功能：
    鼠标经过img通过ajax异步生成一个层(如：ajax_famous3），鼠标移开img但不悬浮在ajax_famous3层上，则ajax_famous3隐藏,若悬浮在了ajax_famous3上，该层不隐藏，当鼠标又移开ajax_famous3时，ajax_famous3又隐藏了

1.JS代码：
function ajax_post(id) {
//alert(id);
    showDiv("famous"+id);
    if(document.getElementById("ajax_famous"+id)) {//如果已经Ajax过了,就不再去Ajax
        showDiv("ajax_famous"+id);
    } else {
        loading = "div[@name=loading"+id+"]";
        $.ajax({
            type: "get",
            url: "{{url c=Post a=ACompanyPosts}}",
            data: "member_id="+id,
            beforeSend: function(){$(loading).show()},
            success: function(a){if(document.getElementById("ajax_famous"+id)){return false;}else{$("#famous"+id).append(a)}}//再次确保前面没有ajax过 ,
            complete: function(){$(loading).hide()}    
            })
    }
    
}



function   getAbsPoint(e)  //e为元素对象,获得此元素的左上角坐标(x,y)和宽、高
{  
    var   x = e.offsetLeft, y = e.offsetTop,h = e.clientHeight,w = e.clientWidth;  
    
    while(e=e.offsetParent)
    {
       x += e.offsetLeft;  
       y += e.offsetTop;
      // h += e.clientHeight;
    }
    //document.getElementById('x').
    //$("#x").val(x+","+(x+w));
    //$("#y").val(y+","+(y+h));
    var ePoint = {"l":x,"t":y,"h":h,"w":w};
    return ePoint;
}  

function getMousePosition(event) {//获得鼠标坐标
    var x = event.clientX;
    var y = event.clientY;
    if(!document.all){//适用firefox
        mouse_x=event.pageX;
        mouse_y=event.pageY;    
    }else{//适用ie
        mouse_x=document.documentElement.scrollLeft+event.clientX;
        mouse_y=document.documentElement.scrollTop+event.clientY;
        //alert(document.documentElement.scrollTop); 滚动条滚过的高度，+ 显示页面的高度原因是声明后document.body.scrollTop的值永远等于0，解决办法是只需把document.body用 document.documentElement替换即可。
    }
    var mouseP = {"mouse_x":mouse_x,"mouse_y":mouse_y};
    return mouseP;
    
}


function hiddenDiv(id,event) {   
    //alert(id);
    mouseP = getMousePosition(event);
    //alert("x:"+mouse_x+",y:"+mouse_y);
    //$("#mx").val(mouse_x);
   // $("#my").val(mouse_y);
    ajax_id = 'ajax_'+id;
    if(ajax_div=document.getElementById(ajax_id)) {
        ePoint = getAbsPoint(ajax_div);
    } else {
        other_hiddenDiv(id); //ajax取消请求时，需隐藏要请求的内容
        return false;
    }
    //此if语句表示鼠标在此元素范围以外，则隐藏某个层
    if(mouseP.mouse_x < ePoint.l || mouseP.mouse_x > (ePoint.l + ePoint.w) || mouseP.mouse_y < ePoint.t || mouseP.mouse_y > (ePoint.t + ePoint.h)) {
         document.getElementById("ajax_"+id).style.display = "none";          
    }   
}

function other_hiddenDiv(id) {
     document.getElementById(id).style.display = "none";   
}
function showDiv(id) {
    document.getElementById(id).style.display = "";    
}

2.HTML代码：
<img title="{{$famous[i].emco_company}}" onmouseover="ajax_post('{{$famous[i].emco_member_id}}')"
onmouseout="hiddenDiv('famous{{$famous[i].emco_member_id}}',event)">鼠标经过这显示或隐藏生成的ajax层</img>
<div id="famous{{$famous[i].emco_member_id}}" style="margin_top:-20px;margin-left:50px;background-color:blue" width="100px"><!--ajax层-->
    <div name="loading{{$famous[i].emco_member_id}}" style="display:none;position:absolute;z-index:999;">Loading...</div>
    <!--AJAX层将会在此处产生-->
</div>

3.php后台：（生成ajax层 ）
function actionACompanyPosts() { //生成ajax层
        $posts = $this->_post->mACompanyPost();
        //dump($posts);

        $posts_div = "<div id=ajax_famous".$_GET['member_id']." width=300px style=\"position:absolute;z-index:999;background-color:#fff;border:1px solid black;margin-top:-30px\" onmouseout=\"hiddenDiv('famous".$_GET['member_id']."',event)\">";
        if(!empty($posts)) {
            $len = count($posts);
            for($i = 0 ; $i < $len ; $i++) {
                $posts_div .= ($i+1).". ".$posts[$i]['empo_name']."<br/>";
               
            }
        } else {
            $posts_div .= "暂无职位";
        }
        $posts_div .= "</div>";
        echo $posts_div;

    }




bestmost 2008-08-25 09:29 发表评论
]]>处理ajax 时应注意的问题http://www.phpweblog.net/fuyongjie/archive/2008/08/23/5651.htmlbestmostbestmostSat, 23 Aug 2008 09:42:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/08/23/5651.htmlhttp://www.phpweblog.net/fuyongjie/comments/5651.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/08/23/5651.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/5651.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/5651.html
    if(document.getElementById("ajax_famous"+id)) {//如果已经Ajax过了,就不再去Ajax
        showDiv("ajax_famous"+id);
    } else {
        loading = "div[@name=loading"+id+"]";
        $.ajax({
            type: "get",
            url: "{{url c=Post a=ACompanyPosts}}",
            data: "member_id="+id,
            beforeSend: function(){$(loading).show()},
            success: function(a){$("#famous"+id).append(a)},
            complete: function(){$(loading).hide()}    
            })
    }
2.判断一个元素是否已存在当前文档中用
     if(document.getElementById("ajax_famous"+id)）
 而非
    if($("#ajax_famous"+id)) // 即使不存在这个元素，jquery也不认为是false



bestmost 2008-08-23 17:42 发表评论
]]>jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例 http://www.phpweblog.net/fuyongjie/archive/2008/08/07/5539.htmlbestmostbestmostWed, 06 Aug 2008 16:04:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/08/07/5539.htmlhttp://www.phpweblog.net/fuyongjie/comments/5539.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/08/07/5539.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/5539.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/5539.html
升级记录

bug描述:ajaxValidator函数在提交后发生错误，停留在本页面后,再次触发校验会让提示内容一直处于onload状态。

这个bug已经修复，请重新下载。

 

2008/7/17 14:12:00 jQuery formValidator 3.1ver


1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。
该属性是个对象，默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror：出现该错误的时候的提示，如果为null，则利用onerror属性来提示错误。
注：只能在type:"size"的时候使用，即比较长度的时候。

2、修改自动构建提示层的语法。为formValidator函数增加relativeid属性。
relativeid：表示提示层相对定位的控件ID，如果为空，则用当前校验控件的ID。
tipid：表示自动创建的提示层的ID，如果为空，则用当前校验控件的ID+"Tip"来命名。

3、修正ajaxValidator函数里beforesend属性的bug。代码忘记传递它的唯一参数。

4、修正ajaxValidator函数在后台无法获取中文的bug。

5、更新了升级记录、用户手册、增加了2个提问。


更多的升级记录，请点击这里


1、现场演示


http://www.yhuan.com/formvalidator/demo1.htm

 

2、jQuery pageValidator插件主要功能

 

  1. 支持所有类型客户端控件的校验
  2. 支持jQuery所有的选择器语法，只要控件有唯一ID和type属性
  3. 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。
  4. 支持2种校验模式。第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)
  5. 支持多个校验组。如果一个页面有多个提交按钮，分别做不同得提交，提交前要做不同的校验，所以你得用到校验组的功能。
  6. 支持4种状态的信息提示功能，可以灵活的控制4种状态是否显示。第一种：刚打开网页的时候进行提示；第二种：获得焦点的时候进行提示；第三种：失去焦点时，校验成功时候的提示；第四种：失去焦点时，校验失败的错误提示。
  7. 支持自动构建提示层。可以进行精确的定位。
  8. 支持自定义错误提示信息。
  9. 支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型；选择的个数支持radio/checkbox/select三种控件
  10. 支持2个控件值的比较。目前可以比较字符串和数值型。
  11. 支持服务器端校验。
  12. 支持输入格式的校验。

 

3、jQuery formValidator插件 API帮助文档

帮助文档请点击这里 


4、下载API帮助、源码、示例

http://files.cnblogs.com/wzmaodong/formValidator3.1.rar

http://files.cnblogs.com/wzmaodong/formValidator2.4.rar

校验代码升级器


5、示例代码

<script type="text/javascript">
$(document).ready(function(){
 $.formValidator.initConfig({onError:function(){alert("校验没有通过，具体错误请看错误提示")}});
 $("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});

 $("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});

 $("#test3").formValidator({onshow:"请选择你的兴趣爱好（至少选一个）",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});

 $("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});

 $("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});

 $("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间，请确认"});

 $("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱，反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国？你给我选！！！！"});

 $("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码，可以为空哦",onfocus:"你要是输入了，必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊？"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});

 $("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话，可以为空哦",onfocus:"你要是输入了，必须输入正确，格式例如：0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗？"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});

 $("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>


6、特别说明

如果你在使用过程中碰到什么问题请给我留言，发现bug请不要自行修改，也请留言，达到完善插件的目的，真正服务每个程序开发人员 .
请保留插件的版权申明，谢谢



bestmost 2008-08-07 00:04 发表评论
]]>（转）ajax+jquery+flea下拉列表动态显示相应的数据http://www.phpweblog.net/fuyongjie/archive/2008/07/26/5480.htmlbestmostbestmostSat, 26 Jul 2008 06:57:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/07/26/5480.htmlhttp://www.phpweblog.net/fuyongjie/comments/5480.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/07/26/5480.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/5480.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/5480.html这只是一些实现代码的片段,仅供参考[来源Fleaphp]

function selectDisplay()  用来读取通过改变下拉列表要显示的数据  

      

        $model=&FLEA::getSingleton(‘Table_modelInfo’);//引入要用到的数据表类  

        $condition=array(‘RegID’=>5);//显示的条件  

        $rows=$model->find($condition);//查询数据  

        foreach ($rows as $item)  

        {  

            echo $item.‘|’;  打印出查找出来的数据并以“|”为分隔符来分隔数据用于读取  

        }  

         

    }  

http://localhost/index.php/Default/SelectDisplay  

function actionDisplay()  

{  

      $this->selectDisplay();//调用执行selectDisplay()  

}  

  

test.html  

<script lanuage="javascript" src=js/jquery.js></script>  

<script lanuage="javascript">  

$().ready(function(){  

         //mould下拉列表的ID  

       $(‘#mould’).change(function(){  

        $.ajax({  

            type:"GET",  

            data:"modelID="+$("#mould").val(),//获取下拉列表的值  

            url:"../../index.php/Default/SelectDisplay",  

            success:change,//执行javasctip函数change()  

        })      

    });  

})  

  

function change(value)  

{  

       

    var result=value;   

    data=result.split("|");//获取url指的页面打印出来的值，用split("|")以数组形式读取出来的  

//赋值中主要是单选框、复选框赋值有所不同  

    $("#p_title").val(data[2]);  

    $("input[@name=p_KIND]").get(data[0]).checked=true;//对单选框赋值  

    $("#p_NUM").val(data[1]);  

其他赋值都一样了  

  

}  

  

</script>  

 <select name="mould" id="mould">  

 {{html_options options=$rows}}      用smarty模板里html_options填充的数据  

  </select>  


bestmost 2008-07-26 14:57 发表评论
]]>AJAX中同时发送多个请求XMLHttpRequest对象处理方法http://www.phpweblog.net/fuyongjie/archive/2008/05/21/3657.htmlbestmostbestmostWed, 21 May 2008 08:06:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/05/21/3657.htmlhttp://www.phpweblog.net/fuyongjie/comments/3657.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/05/21/3657.html#Feedback2http://www.phpweblog.net/fuyongjie/comments/commentRss/3657.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/3657.html在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖 掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有 空闲的对象，则使用此对象，否则将创建一个新的对象。

下面是我最近写的一个简单的类：
* XMLHttpRequest Object Pool
 *
 * @author    legend <legendsky@hotmail.com>
 * @link      http://www.ugia.cn/?p=85
 * @Copyright www.ugia.cn
 */ 
var XMLHttp = {
    _objPool: [],
    _getInstance: function ()
    {
        for (var i = 0; i < this._objPool.length; i ++)
        {
            if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
            {
                return this._objPool[i];
            }
        }
        // IE5中不支持push方法
        this._objPool[this._objPool.length] = this._createObj();
        return this._objPool[this._objPool.length - 1];
    },
    _createObj: function ()
    {
        if (window.XMLHttpRequest)
        {
            var objXMLHttp = new XMLHttpRequest();
        }
        else
        {
            var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
            for(var n = 0; n < MSXML.length; n ++)
            {
                try
                {
                    var objXMLHttp = new ActiveXObject(MSXML[n]);
                    break;
                }
                catch(e)
                {
                }
            }
         }          
        // mozilla某些版本没有readyState属性
        if (objXMLHttp.readyState == null)
        {
            objXMLHttp.readyState = 0;
            objXMLHttp.addEventListener("load", function ()
                {
                    objXMLHttp.readyState = 4;
                    if (typeof objXMLHttp.onreadystatechange == "function")
                    {
                        objXMLHttp.onreadystatechange();
                    }
                },  false);
        }
        return objXMLHttp;
    },
    // 发送请求(方法[post,get], 地址, 数据, 回调函数)
    sendReq: function (method, url, data, callback)
    {
        var objXMLHttp = this._getInstance();
        with(objXMLHttp)
        {
            try
            {
                // 加随机数防止缓存
                if (url.indexOf("?") > 0)
                {
                    url += "&randnum=" + Math.random();
                }
                else
                {
                    url += "?randnum=" + Math.random();
                }
                open(method, url, true);
                // 设定请求编码方式
                setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                send(data);
                onreadystatechange = function ()
                {
                    if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
                    {
                        callback(objXMLHttp);
                    }
                }
            }
            catch(e)
            {
                alert(e);
            }
        }
    }
}; 

示例：

<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript">
function test(obj)
{
    alert(obj.statusText);
}
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
alert('Pool length:' + XMLHttp._objPool.length);
</script> 

http://blog.csdn.net/lee576/archive/2008/01/07/2029445.aspx


bestmost 2008-05-21 16:06 发表评论
]]>Ajax 同一页面同时执行多个 XMLHTTPhttp://www.phpweblog.net/fuyongjie/archive/2008/05/21/3654.htmlbestmostbestmostWed, 21 May 2008 08:03:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/05/21/3654.htmlhttp://www.phpweblog.net/fuyongjie/comments/3654.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/05/21/3654.html#Feedback4http://www.phpweblog.net/fuyongjie/comments/commentRss/3654.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/3654.html        Ajax 同一页面如何同时执行多个 XMLHTTP 呢，比如博客页，需要同时利用 Ajax 读取作者信息、文章信息、评论信息……

我们的第一反应可能是创建多个全局 XMLHTTP 对象，但这并不现实。其实实现方式非常简单，就是给 onreadystatechange 对应的回调函数加上参数，以下代码是解决方案中一个函数中的一段代码。

xmlhttp.open("GET", "ajax_process.aspx?a=" + a, true);
xmlhttp.onreadystatechange = function () { OnReadyStateChng(xmlhttp, a); };
xmlhttp.send(null);

只是改写 onreadystatechange 的属性值，这样就可以为 OnReadyStateChng 函数赋参数了。如是我们写作 xmlhttp.onreadystatechange = OnReadyStateChng;，那么 OnReadyStateChng 就不能有参数了，也就无法获得是哪个 xmlhttp 的响应，也就无法获得是响应后要对哪个控件进行设置。

我们可以看一个完整的示例，前台页面是普通的 Ajax 技术的 HTML 页面，后台使用的是 ASP.NET 的 .aspx 文件，之所以采用 ASP.NET，是为了演示延时处理功能。

前台程序


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Ajax Test</title>

<script type="text/javascript" language="javascript">
<!--


// 1.创建XMLHttpRequest对象
function CreateHTTPObject()
{
    var xmlhttp;
    
    try
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            xmlhttp = false;
        }
    }
    
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        try
        {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
    
    if (!xmlhttp && window.createRequest)
    {
        try
        {
            xmlhttp = window.createRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
    
    return xmlhttp;
}





// 2.浏览器 -> 服务器  (提交请求信息)
function SubmitMsg(a)
{
    var xmlhttp = CreateHTTPObject();
    //alert(xmlhttp);
    if (!xmlhttp)
    {
        return; //无法创建 xmlhttp 对象
    }
    //Ajax 提交   
            xmlhttp.open("GET", "ajax_process.aspx?a=" + a, true);
    xmlhttp.onreadystatechange = function () { OnReadyStateChng(xmlhttp, a); };
    xmlhttp.send(null);
}







// 3.服务器 -> 浏览器  (正确时返回数据)
function OnReadyStateChng(xmlhttp, a)
{
    if (xmlhttp.readyState == 4)
    {
        if (xmlhttp.status == 200)
        {
            document.getElementById(a).innerHTML = xmlhttp.responseText;
        }
        else
        {
            alert("HTTP 错误，状态码：" + xmlhttp.status);
        }
    } 
    else {//显示一个等待响应的图片
        document.getElementById(a).innerHTML = "<img src=tpl/1-0.gif align=absmiddle>";
    }
}


function loadall(){
SubmitMsg("a1");
SubmitMsg("a2");
SubmitMsg("a3");

}

-->
</script>

</head>
<body onload=loadall()>
<div id="a1" style="border:1px solid red;float:left">1</div>
<div id="a2" style="border:1px solid green;float:left">2</div>
<div id="a3" style="border:1px solid yellow">3</div>

</body>
</html>

后台程序

<%@ Page Language="C#" %>
<%Response.Expires = 0; %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["a"] == "a1")
        {
            System.Threading.Thread.Sleep(3000); //延时 3 秒
        }
        else if (Request.QueryString["a"] == "a2")
        {
            System.Threading.Thread.Sleep(1000); //延时 1 秒
        }
        else if (Request.QueryString["a"] == "a3")
        {
            System.Threading.Thread.Sleep(2000); //延时 2 秒
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax Test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

演示解说

前台页面发出三个异步回送请求，分别为 a1、a2、a3 请求值，在后台页面中，通过延时模拟处理 a1 需要 3 秒，处理 a2 需要 1 秒，处理 a3 需要 2 秒。通过演示发现最先有变化的是 a2，然后是 a3、a1，顺序并没有乱，也没有出现显示混乱的情况。注意后台页面需要 Response.Expires = 0; 这么一句代码指示页面立即过期，否则刷新时请求的是缓存的页面，演示也就没有效果了。

另外

每个 xmlhttp 的 onreadystatechange 对应的函数名称也可以不同，不仅限于参数不同。



bestmost 2008-05-21 16:03 发表评论
]]>