BlogJava-黑夜里的狼-随笔分类-JavaScripthttp://www.blogjava.net/hellxoul/category/51193.htmlzh-cnSat, 10 Jan 2015 15:44:30 GMTSat, 10 Jan 2015 15:44:30 GMT60iframe高度自适应http://www.blogjava.net/hellxoul/archive/2015/01/05/422054.htmlhellxoulhellxoulMon, 05 Jan 2015 03:52:00 GMThttp://www.blogjava.net/hellxoul/archive/2015/01/05/422054.htmlhttp://www.blogjava.net/hellxoul/comments/422054.htmlhttp://www.blogjava.net/hellxoul/archive/2015/01/05/422054.html#Feedback0http://www.blogjava.net/hellxoul/comments/commentRss/422054.htmlhttp://www.blogjava.net/hellxoul/services/trackbacks/422054.html阅读全文

hellxoul 2015-01-05 11:52 发表评论
]]>js验证框架http://www.blogjava.net/hellxoul/archive/2013/10/10/404823.htmlhellxoulhellxoulThu, 10 Oct 2013 02:37:00 GMThttp://www.blogjava.net/hellxoul/archive/2013/10/10/404823.htmlhttp://www.blogjava.net/hellxoul/comments/404823.htmlhttp://www.blogjava.net/hellxoul/archive/2013/10/10/404823.html#Feedback0http://www.blogjava.net/hellxoul/comments/commentRss/404823.htmlhttp://www.blogjava.net/hellxoul/services/trackbacks/404823.htmlone js validation framework

http://niceue.com/validator/demo/twitter-js.php?theme=yellow_right_effect



hellxoul 2013-10-10 10:37 发表评论
]]>jquery 获取td中的值http://www.blogjava.net/hellxoul/archive/2012/03/22/372447.htmlhellxoulhellxoulThu, 22 Mar 2012 04:07:00 GMThttp://www.blogjava.net/hellxoul/archive/2012/03/22/372447.htmlhttp://www.blogjava.net/hellxoul/comments/372447.htmlhttp://www.blogjava.net/hellxoul/archive/2012/03/22/372447.html#Feedback2http://www.blogjava.net/hellxoul/comments/commentRss/372447.htmlhttp://www.blogjava.net/hellxoul/services/trackbacks/372447.html1  $(document).ready(function () {
2    $('#test tr').each(function (){    
3        alert($(this).children('td').eq(1).html());
4             });
5         });

hellxoul 2012-03-22 12:07 发表评论
]]>jquery Ajax 提交http://www.blogjava.net/hellxoul/archive/2012/03/22/372445.htmlhellxoulhellxoulThu, 22 Mar 2012 04:04:00 GMThttp://www.blogjava.net/hellxoul/archive/2012/03/22/372445.htmlhttp://www.blogjava.net/hellxoul/comments/372445.htmlhttp://www.blogjava.net/hellxoul/archive/2012/03/22/372445.html#Feedback1http://www.blogjava.net/hellxoul/comments/commentRss/372445.htmlhttp://www.blogjava.net/hellxoul/services/trackbacks/372445.html鉴于项目需要，开始边看Demo边使用JQuery。现将项目中暂时遇到的三种使用JQuery进行Ajax提交的方式做个总结。因为没有系统学习，有点山寨，只求在项目中实现功能。
    1.URL+GET参数提交
       这种方式是最普遍的，只要包含jquery.js就可以正常使用。
     
Java代码  收藏代码
  1. $.ajax({  
  2.     type: "get",  
  3.     url: "/openshop/control/getCustomerAddress",  
  4.     data:"customerId="+$.trim($("#customerId")[0].value),  
  5.     cache: false,  
  6.     success: function(msg){  
  7.           $("#addressInfo")[0].innerHTML = msg;  
  8.           showTipWindow(newid,oldid,0,e);  
  9.     }  
  10. });   
  11.      


    2.整个form的提交
        如果不使用JQuery的form ajax提交，则必须手动组装所有的表单元素键值对。现在使用JQuery的一个插件：jquery.form.js。将jquery.js，jquery.form.js文件都包含到项目中。然后使用如下代码：
      
Java代码  收藏代码
  1. $('#'+newid+'_frmNewAddr').ajaxForm({ beforeSubmit: validate ,success: showResponse});  
  2.   
  3. ....  
  4.   
  5. function validate(formData, jqForm, options){  
  6.     var form = jqForm[0];   
  7.     if (!form.new_recipient.value ) {   
  8.         alert('收件人必须填写！');   
  9.         return false;   
  10.     }   
  11.     if (!form.new_address.value ) {   
  12.         alert('收件地址必须填写！');   
  13.         return false;   
  14.     }   
  15.   
  16.    ....  
  17.   
  18.    return true;   
  19. }  
  20.   
  21. function showResponse(responseText, statusText, xhr, $form){  
  22.     var address = eval("("+removeDivTag(responseText)+")");   
  23.     $("#address_recipient")[0].innerHTML = address.recipient;  
  24.     $("#address_address")[0].innerHTML = address.address;  
  25.     $("#address_organization")[0].innerHTML = address.organization;  
  26.          ......  
  27. }  
  28.          

      其中$('#'+newid+'_frmNewAddr')获取表单对象，其中beforeSubmit对应的validate()是一个表单提交前调用 的方法，可以在此方法中做表单验证，只有该方法返回true，表单才会提交。而success对应的showResponse则是ajax对象成功返回后 的回调方法，可以将回调得到的内容无刷新呈现到当前页面的相应区域中。较方便的做法是在服务器端以JSON格式返回数据，然后在回调函数中使用 eval("("+removeDivTag(responseText)+")")方法获取具有指定结构的js对象。

     3.使用JQuery做文件上传的ajax提交
     本人寻找并比较了多种ajax或类ajax方式上传文件的做法,譬如使用iframe等。最终觉得使用JQuery是最方便的，不知各位使用后是否与我有 同感。我将我目前的做法总结如下，首先须在项目中包含jquery.js，ajaxfileupload.js，ajaxfileupload.css。
Java代码  收藏代码
  1. <script type="text/javascript">  
  2. function ajaxFileUpload(imgName)  
  3. {  
  4.     $("#loading")  
  5.     .ajaxStart(function(){  
  6.         $(this).show();  
  7.     })  
  8.     .ajaxComplete(function(){  
  9.         $(this).hide();  
  10.     });  
  11.   
  12.     $.ajaxFileUpload  
  13.     (  
  14.         {  
  15.             url:'/productmgr/control/uploadProductImg',  
  16.             secureuri:false,  
  17.             fileElementId: imgName+'File',  
  18.             dataType: 'text',  
  19.             success: function (data, status)  
  20.             {  
  21.                 data = removeDivTag(data);  
  22.                 if(data=="ImgEmptyErr"){  
  23.                     alert("请选择上传图片！");  
  24.                     return;  
  25.                 }  
  26.                 if(data=="sysErr"){  
  27.                     alert("上传失败，请重试！");  
  28.                     return;  
  29.                 }  
  30.                 $("#"+imgName)[0].value = data;  
  31.                 $("#"+imgName+"Div")[0].innerHTML = "上传成功！"  
  32.                 //alert($("#"+imgName)[0].value);  
  33.             },  
  34.             error: function (data, status, e)  
  35.             {  
  36.                 alert("添加产品图片时发生如下错误："+e);  
  37.             }  
  38.         }  
  39.     )     
  40.     return false;  
  41.   
  42. }  
  43. </script>  

      本人服务器端使用的是beanshell脚本，代码如下：
Java代码  收藏代码
  1. /* 
  2.  * 产品图片上传 
  3.  *  
  4.  * author : Emerson 
  5.  * 
  6.  * Yiihee , Inc. */  
  7.   
  8.   
  9. import org.ofbiz.base.util.*;  
  10. import org.ofbiz.base.util.string.*;  
  11. import org.ofbiz.entity.*;  
  12. import java.text.SimpleDateFormat;  
  13. import java.util.*;  
  14. import java.io.*;  
  15. import org.apache.commons.fileupload.disk.*;  
  16. import org.apache.commons.fileupload.servlet.*;  
  17. import org.apache.commons.fileupload.*;  
  18.   
  19.   
  20.     configProperties = UtilProperties.getProperties("opencommon.properties");  
  21.     String imageUploadServerPath = configProperties.get("openb2c.image.upload.server.path");  
  22.   
  23.     //SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");     
  24.     //Date date = new Date();     
  25.     //String filename = sf.format(date);  
  26.     String fileName;  
  27.   
  28.     File uploadPath = new File(imageUploadServerPath);//上传文件目录  
  29.     if (!uploadPath.exists()) {  
  30.        uploadPath.mkdirs();  
  31.     }  
  32.     // 临时文件目录  
  33.     File tempPathFile = new File(imageUploadServerPath+"\\temp\\");  
  34.     if (!tempPathFile.exists()) {  
  35.        tempPathFile.mkdirs();  
  36.     }  
  37.     try {  
  38.        // Create a factory for disk-based file items  
  39.        DiskFileItemFactory factory = new DiskFileItemFactory();  
  40.    
  41.        // Set factory constraints  
  42.        factory.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb  
  43.        factory.setRepository(tempPathFile);//设置缓冲区目录  
  44.    
  45.        // Create a new file upload handler  
  46.        ServletFileUpload upload = new ServletFileUpload(factory);  
  47.    
  48.        // Set overall request size constraint  
  49.        upload.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB  
  50.    
  51.        List items = null;  
  52.        items = upload.parseRequest(request);//得到所有的文件  
  53.          
  54.        if(items==null||items.size()==0){  
  55.            String msg = "ImgEmptyErr";  
  56.            context.put("result", msg);  
  57.            return;  
  58.        }  
  59.          
  60.        Iterator i = items.iterator();  
  61.          
  62.        //此处实际只有一个文件  
  63.        while (i.hasNext()) {  
  64.            FileItem fi = (FileItem) i.next();  
  65.            fileName = fi.getName();  
  66.            if (!UtilValidate.isEmpty(fileName)) {  
  67.                File fullFile = new File(fi.getName());  
  68.                //File fullFile = new File(filename);  
  69.                File savedFile = new File(uploadPath, fullFile.getName());  
  70.                int j = 0;  
  71.                while(savedFile.exists()){  
  72.                    j++;  
  73.                    savedFile = new File(uploadPath, savedFile.getName().substring(0,savedFile.getName().lastIndexOf(".")-1)+"("+j+")"+savedFile.getName().substring(savedFile.getName().lastIndexOf("."),savedFile.getName().length()));  
  74.                }  
  75.                fi.write(savedFile);  
  76.                fileName = savedFile.getName();  
  77.            }else{  
  78.                String msg = "ImgEmptyErr";  
  79.                context.put("result", msg);  
  80.                return;  
  81.            }             
  82.        }  
  83.        context.put("result", fileName);  
  84.     } catch (Exception e) {  
  85.         Debug.log("上传产品图片发生错误:"+e);  
  86.         String msg = "sysErr";  
  87.         context.put("result", msg);  
  88.         return;  
  89.     }  

  然后将result结果渲染到freemarker模板，并经回调函数解析后展示给用户。

总结：JQuery强大异常，本文仅从自身使用角度列举了其部分用法，未曾深究最新最优最简用法，暂以此文作为经验总结，以待日后参考修正。代码片段山寨之处实属本人技拙，而非JQuery之过。   

hellxoul 2012-03-22 12:04 发表评论
]]>jquery 上下移动表格元素，并保持顺序不变http://www.blogjava.net/hellxoul/archive/2012/03/22/372444.htmlhellxoulhellxoulThu, 22 Mar 2012 04:02:00 GMThttp://www.blogjava.net/hellxoul/archive/2012/03/22/372444.htmlhttp://www.blogjava.net/hellxoul/comments/372444.htmlhttp://www.blogjava.net/hellxoul/archive/2012/03/22/372444.html#Feedback0http://www.blogjava.net/hellxoul/comments/commentRss/372444.htmlhttp://www.blogjava.net/hellxoul/services/trackbacks/372444.html    <html>  
    <head>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <title>表格</title>  
    <style type="text/css">  
    .editText  
    {  
        border-width:1px;  
        border-top-style:none;  
        border-left-style:none;  
        border-right-style:none;  
        border-bottom-style:solid;  
        border-color:#030;  
        width:100%;  
    }  
    </style>  
    <script src="jquery-1.3.2.js" type="text/javascript">  
    </script>  
    <script type="text/javascript">  
    function moveUp(obj)  
    {  
        var current=$(obj).parent().parent();  
        var prev=current.prev();  
        if(prev)  
        {  
            current.insertBefore(prev);  
        }  
    }  
    function moveDown(obj)  
    {  
        var current=$(obj).parent().parent();  
        var next=current.next();  
        if(next)  
        {  
            current.insertAfter(next);  
        }  
    }  
    </script>  
    </head>  
    <body>  
    <table class="grid" width="100%" border="1" cellspacing="0" cellpadding="0">  
      <tr>  
        <td>字段英文名</td>  
        <td>字段中文名</td>  
        <td>字段数据类型</td>  
        <td>列宽</td>  
        <td>是否显示</td>  
        <td>是否作为查询条件</td>  
        <td>调整顺序</td>  
      </tr>  
      <tr>  
        <td>1</td>  
        <td><input type="text" name="textfield" class="editText" id="textfield"></td>  
        <td> </td>  
        <td><input type="text" name="textfield5" id="textfield5"></td>  
        <td><input type="checkbox" name="checkbox" id="checkbox"></td>  
        <td><input type="checkbox" name="checkbox5" id="checkbox5"></td>  
        <td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>  
      </tr>  
      <tr>  
        <td>2</td>  
        <td><input type="text" name="textfield2" id="textfield2"></td>  
        <td> </td>  
        <td><input type="text" name="textfield6" id="textfield6"></td>  
        <td><input type="checkbox" name="checkbox2" id="checkbox2"></td>  
        <td><input type="checkbox" name="checkbox6" id="checkbox6"></td>  
        <td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>  
      </tr>  
      <tr>  
        <td>3</td>  
        <td><input type="text" name="textfield3" id="textfield3"></td>  
        <td> </td>  
        <td><input type="text" name="textfield7" id="textfield7"></td>  
        <td><input type="checkbox" name="checkbox3" id="checkbox3"></td>  
        <td><input type="checkbox" name="checkbox7" id="checkbox7"></td>  
        <td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>  
      </tr>  
      <tr>  
        <td>4</td>  
        <td><input type="text" name="textfield4" id="textfield4"></td>  
        <td> </td>  
        <td><input type="text" name="textfield8" id="textfield8"></td>  
        <td><input type="checkbox" name="checkbox4" id="checkbox4"></td>  
        <td><input type="checkbox" name="checkbox8" id="checkbox8"></td>  
        <td><a href="javascript:void(0)" onClick="moveUp(this)">上移</a><a href="javascript:void(0)" onClick="moveDown(this)">下移</a></td>  
      </tr>  
    </table>  
    </body>  
    </html> 

hellxoul 2012-03-22 12:02 发表评论
]]>jquery判断对象是否存在 http://www.blogjava.net/hellxoul/archive/2012/03/22/372443.htmlhellxoulhellxoulThu, 22 Mar 2012 04:01:00 GMThttp://www.blogjava.net/hellxoul/archive/2012/03/22/372443.htmlhttp://www.blogjava.net/hellxoul/comments/372443.htmlhttp://www.blogjava.net/hellxoul/archive/2012/03/22/372443.html#Feedback1http://www.blogjava.net/hellxoul/comments/commentRss/372443.htmlhttp://www.blogjava.net/hellxoul/services/trackbacks/372443.htmlif($ ("#id")){

}else{}

jquery不管对象存不存在都会返回object。

应该用

if($ ("#id").length>0){}else{}

or     

 if($ ("#id")[0]){    } else {   }

or 

 if(document.getElementById("id")){} else {}



hellxoul 2012-03-22 12:01 发表评论
]]>