之前是先上传头像到服务器，然后再在另一个页面显示并通过jcrop剪辑，最终生成用户头像。

这个过程多了一步页面刷新，如果使用ajaxForm做异步文件提交，那么返回json数据直接处理，方便不少。

但是有一个问题那就是之前好多人遇到的问题，ajaxForm上传文件时，页面中的js无法回调success方法，导致出现下载框，昨天对这个问题深入做了测试，一般解决方式：

1. 选对jquery版本和jform版本，并不是最新的版本都可以，推荐经测试肯定可以用的版本：jquery-1.5.1.min.js 和 jquery.form-2.67.js
2. 如果出现下载框，可以尝试将服务器返回json的ContentType 改为text/html

使用struts-json插件的，可以如下设置：

<result name="success" type="json">
    <param name="contentType">
           text/html
    </param>
</result>

直接在页面输出的，可以如下设置：

HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");

无觅猜您也喜欢：
利用JSON插件进行数据交换格式(includeProperties和excludeProperties用法)	[09/50周主题] – JQuery入门	jQuery图像剪裁插件 – Jcrop	[翻译] Simple Tooltip with jQuery & CSS	[10/22 周主题] – 强悍的JQuery Validate 插件
无觅

在线Demo

标记 – HTML

我想尽可能保持标记简单，但又足够的灵活，以适应不同的场景。主链接将通过添加 class=”tip_trigger” 来启动提示，通过 class=”tip”来保存在提示内容，例如：

<a href="#" class="tip_trigger">Your Link Key Word
    <span class="tip">This will show up in the tooltip</span>
</a>

样式 – CSS

样式很简单，我想鼓励你创建与你项目相关的样式。
提示工具默认是隐藏的，当你在它上面悬停时由jQuery触发显示。
我们给它一个绝对位置和一个z-index=”1000″属性，以确保它在你的元素之上停留。

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;
    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

魔术 – jQuery

对于那些不熟悉jQuery的朋友，建议你们先去JQuery的网站了解一下它是如何工作的。我之前也分享了一些技巧，你们也可以去看看。

起步 – 引用 jQuery 文件

您可以选择下载jQuery文件，或者使用在谷歌托管的jQuery文件。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
</script>

紧接着上面，另起一行 script 标记，通过 $(document).ready 事件来开始你的代码，它将保证你的代码在dom元素准备好之后运行。

$(document).ready(function() {
    $(".tip_trigger").hover(function(){
        $(this).find('.tip').show(); //Show tooltip
    }, function() {
        $(this).find('.tip').hide(); //Hide tooltip
    }).mousemove(function(e) {
          var mousex = e.pageX + 20; //Get X coodrinates
          var mousey = e.pageY + 20; //Get Y coordinates
          var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
          var tipHeight = $(this).find('.tip').height(); //Find height of tooltip

         //Distance of element from the right edge of viewport
          var tipVisX = $(window).width() - (mousex + tipWidth);
         //Distance of element from the bottom edge of viewport
          var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport (Exceeds the right side of viewport)
            mousex = e.pageX - tipWidth - 20; //Set new X coordinate
            $(this).find('.tip').css({  top: mousey, left: mousex }); //Move tooltip element to the left side
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport (Exceeds the bottom of the viewport)
            mousey = e.pageY - tipHeight - 20; //Set new Y coordinate
            $(this).find('.tip').css({  top: mousey, left: mousex }); //Move tooltip element on top
        } else { //By Default have the tooltip on the bottom right
            $(this).find('.tip').css({  top: mousey, left: mousex });
        }
    });
});

实现逻辑：

• 1、悬停入和悬停出触发区域

  当悬停入触发区域时显示 .tip，悬停出时隐藏 .tip

• 2、鼠标滑过

  当鼠标进入触发区域, 开始通过 e.pageX and e.pageY来获取你鼠标的X和Y坐标。 注意，我们给鼠标点和提示之间留了20px的空间。

• 3、设置变量

  我们考虑到了如果提示工具的X和Y坐标超出了屏幕的情况，当这种情况发生时我们将提示工具反向显示。为了获取新的坐标位置，我们必须拿到提示工具的宽度和高度 (tipWidth and tipHeight)。如果检测到提示工具超出了屏幕，我们会从屏幕的宽度和高度重减去X坐标和Y坐标的宽度和高度

• 4、如果提示工具，超出了屏幕的宽

  如果提示工具超出了屏幕的宽，我们将把提示工具显示在鼠标的左侧，我们通过鼠标的X坐标位置减去提示工具的宽度来计算显示位置。

• 5、如果提示工具，超出了屏幕的高

  如果提示工具超出了屏幕的高，我们将把提示工具显示在鼠标的上方，我们通过鼠标的Y坐标位置减去提示工具的高度来计算显示位置。

• 6、默认情况下

  如果提示工具没有超出屏幕的宽和高，我们就在鼠标的下方显示提示工具。

原文地址：http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/

无觅猜您也喜欢：
jQuery图像剪裁插件 – Jcrop	[10/22 周主题] – 强悍的JQuery Validate 插件	[09/50周主题] – JQuery入门	分享：CSS3渐变按钮	[10/08周主题] – JQuery分页导航条插件
无觅

下面就介绍下简单的使用方法：

1、下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/，本文章发布时最新版是1.7。

2、在页面里面加载JQuery和JQuery Validate

<script type="text/javascript" src="theme/default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="theme/default/js/jquery.validate.min.js"></script>

3、写一个表单提交页面，form id 为 login，两个提交域email和password。域提供相应的id。为了完善demo，我在里面也提供了一个注册的form，同时提供了自定义验证方法和ajax提交。

4、在页面或者单独写个js文件，输入如下代码：

$().ready(function() {
    //身份证验证
    jQuery.validator.addMethod("isIdCardNo", function(value, element) {
        return this.optional(element) || isIdCardNo(value);
    }, "请正确输入您的身份证号码");
    // 电话号码验证
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的电话号码");
    //昵称验证
    jQuery.validator.addMethod("nickName", function(value, element) {
        return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
    }, "昵称只能由中文，英文字母、数字和下划线组成");
    //手机验证
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    // 邮政编码验证
    jQuery.validator.addMethod("isZipCode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的邮政编码");

    $("#login").validate({
        //        submitHandler: function() {
        //            $("#error_tip").hide();
        //            $.ajax({
        //                data:$("#login").serialize(),
        //                // The url you are going to submit to
        //                url: "login.action",
        //                dataType: 'json',
        //                timeout: 10000,
        //                // Sends a message to the console if it failed for testing purposes.
        //                error: function() {
        //                    $("#error_tip").html("<span>服务器忙，请稍后重试。</span>")
        //                },
        //                // If successful you can do something here. You can change elements, update text, or  simply alert the response to first test to see if it worked.
        //                success: function(response) {
        //                        $("#error_tip").html("<span>"+ response.result +"</span>")
        //                        $("#error_tip").show();
        //                }
        //            });
        //        },
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true
            }
        },
        messages: {
            password: {
                required: "请输入密码"
            },
            email: {
                required:"请输入邮件地址",
                email:"请输入有效的邮件地址"
            }
        }
    });

    $("#reg").validate({
        rules: {
            email: {
                required: true,
                email: true,
                remote:"checkEmail.action"
            },
            password: {
                required: true,
                minlength: 6,
                maxlength:12
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            answer:{
                required: true
            },
            agree: "required"
        },
        messages: {
            password: {
                required: "请输入密码",
                minlength: "密码长度在6-12个字符之间",
                maxlength: "密码长度在6-12个字符之间"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "密码长度在6-12个字符之间",
                equalTo: "你输入的密码不一致"
            },
            email: {
                required:"请输入有效的邮件地址",
                email: "请输入有效的邮件地址",
                remote: "邮件地址已存在"
            },
            answer:"请输入安全问题答案",
            agree: "请接受我们的条款"
        }
    });
}

上面的代码基本上包含了大部分JQuery Validate的使用功能：

1、基本验证

2、自定义验证 – 自定义验证跟其他官方的验证类似，加入rules即可，message上面已经定义，可以不加。

3、页面ajax提交。

4、ajax验证Emai帐户是否可用，需要注意的是remote仅支持返回true和false，也就是checkEmail.php只能返回true和false代表Email是否可用

更多Demo，请查看JQuery Validate的官方文档，很好理解：
1、http://docs.jquery.com/Plugins/Validation
2、http://jquery.bassistance.de/validate/demo/

无觅猜您也喜欢：
jQuery图像剪裁插件 – Jcrop	[翻译] Simple Tooltip with jQuery & CSS	[10/08周主题] – JQuery分页导航条插件	[09/50周主题] – JQuery入门	Ubuntu 9.04 下为Flock安装Flash插件
无觅

下面提供两种解决方案：

一、通过 W3C standard 来定义，例如：

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

上面的代码表示：当访问网站的设备浏览器宽度大于等于800px时，将使用800.css这个样式。

又如：

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

上面的代码表示：当访问网站的设备浏览器宽度在701px和900px之间时，将使用medium.css这个样式。

目前Mozilla， Opera和WebKit等浏览器的当前版本都支持这个标准，不幸的是IE浏览器并不支持此标准，包括IE8，以及IE9 Previous。

不要着急，方案二将解决此问题。

二、通过JQuery来动态调整页面样式
1、首先定义两个link，当然你也可以是一个，第二个是要更改的css

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

2、下面的JavaScript代码将根据不同的浏览器大小，更改css

unction adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

查看例子：

英文原址：http://css-tricks.com/resolution-specific-stylesheets/

无觅猜您也喜欢：
[翻译] Simple Tooltip with jQuery & CSS	测试你的浏览器对HTML5的支持情况	分享：CSS3渐变按钮	跨浏览器的HTML5 placeholder 实现	jQuery图像剪裁插件 – Jcrop
无觅

还是先看demo吧，

大体看了下JS文件， 主要使用了JQuery的animate方法，让标签1，标签2，标签3被点击时，获取不同的随机速率。

原文地址：http://css-tricks.com/slot-machine-tabs/

没有深入研究，仅仅记录下来，以备后用。

无觅猜您也喜欢：
[翻译] Simple Tooltip with jQuery & CSS	[10/22 周主题] – 强悍的JQuery Validate 插件	jQuery图像剪裁插件 – Jcrop	[09/50周主题] – JQuery入门	[10/08周主题] – JQuery分页导航条插件
无觅

之前在做Web项目时，分页功能的处理是放在服务器端，客户端只是用来显示分页导航条内容。 虽然将服务器端的分页功能进行封装，页码显示代码也进行了整理，但是总归不是很方便，做分页功能还是要做不少工作。

后来去看一些将分页功能放在客户端处理的例子，最后发现了这个比较不错的JQuery组件（如果你有好的方案也欢迎分享啊），原文章在这里：http://lym6520.javaeye.com/blog/540580，我就不做过多介绍了。

通过这个组件做分页功能，服务器端几乎不做什么处理，只需要显示数据列表时把总数传给该组件即可。至于分页组件的样式你完全可以自己去定制。

下面分享下自己的一些优化工作：

1、Loading和错误提示

Loading和错误信息的显示在获取数据时控制，这里用到了Ajax的几个状态来判断，比如beforeSend，success以及error。

2、分页组件的翻页和获取数据是异步的，这样如果出现服务器问题，无法获取翻页后的信息，但是分页导航条已经做了翻页了。由于服务器出错是在Ajax里面捕获的，这样就只能做个hack，通过dom操作来让翻页返回去，最终的效果会是这样的：假如现在在第三页，要跳转到第四页，点 “4” 翻页了，然后发现翻页后无法获取数据，出现服务器问题了，接着就又返回第三页了，显示错误信息。

无觅猜您也喜欢：
jQuery图像剪裁插件 – Jcrop	[10/22 周主题] – 强悍的JQuery Validate 插件	[翻译] Simple Tooltip with jQuery & CSS	[09/50周主题] – JQuery入门	[10/02周主题] – 仿Gmail头像上传剪辑
无觅

分页组件稍后有时间可以分享一下，今天分享下仿Gmail头像上传剪辑的功能。

本周主题：仿Gmail头像上传剪辑

这个功能是参考了Gmail的头像上传功能，并参照其流程实现的，因此叫仿Gmail头像上传剪辑，建议想用类似功能的朋友先看看Gmail的头像上传流程。

使用到的工具：

1、JQuery

2、Jquery.Form.JS (JQuery的一个form插件)，这里主要是在层里面用到它的ajaxSubmit功能。

3、JCrop（JQuery头像剪辑插件），之前有篇博文讲到。

场景，思路和做法：

1、比如更新用户信息时，要更新用户的头像，这里只是更新头像地址，而不是在更新用户信息页面时上传头像，头像上传和剪辑的处理交给其他组件完成，比如这个上传剪辑功能。

2、给一个链接，比如叫“上传照片”， 如下图：

点击该链接会弹出一个层， 如下图：

3、头像上传的事情在这个层内完成，先上传到系统的temp目录，因为这个图片最后是要删除的，JCrop 剪辑后的图片才是真正想要的。

4、将图片上传完后，进行同比例的显示缩放(注意我这里叫显示缩放，而不是真正的缩放，即仅在该层内等比例显示下即可，当然你也可以不显示缩放，结果是图片巨大个，显示不下或者出现滚动条)，显示在该页面，然后加载JCrop插件，进行图片剪辑处理（这里为了简单，没有放像Gmail那样的预览小图，需要的朋友可以参照JCrop加上），如下图：

5、点击“应用更改”时，将在服务器上进行原图片的剪辑工作，JCrop需要的是剪辑框的x,y,w,h四个参数，但是剪辑是在原图片上进行的，因此此处的x,y,w,h需要做映射，将缩略后的x,y,w,h映射到原图片的x,y,w,h上，新图片剪辑后保存到你的头像目录，最后别忘记删除temp文件夹下的图片。如下图效果：

总结：

此功能的实现上没有什么新颖的东西，主要是将几个插件的使用揉合在一块，然后形成一个用起来比较顺手的功能，实现过程可能稍感麻烦，但是最终的效果还是不错！

无觅猜您也喜欢：
jQuery图像剪裁插件 – Jcrop	[10/22 周主题] – 强悍的JQuery Validate 插件	[09/50周主题] – JQuery入门	[翻译] Simple Tooltip with jQuery & CSS	550 5.4.5 Daily sending quota exceeded
无觅

强烈建议使用前，先去官网看看Demo：http://deepliquid.com/projects/Jcrop/demos.php

实现的流程大体如下：

1. 通过JCrop获取剪辑框的位置x, y 和 剪辑框的大小 w , h。
2. 将图片和剪辑框的四个参数传到服务器端，由服务器完成图片的剪辑工作。
3. 保存剪辑好的图片。

具体使用方法，看官网的手册，简单易懂：http://deepliquid.com/content/Jcrop_Manual.html

无觅猜您也喜欢：
[10/02周主题] – 仿Gmail头像上传剪辑	[翻译] Simple Tooltip with jQuery & CSS	[09/50周主题] – JQuery入门	[10/22 周主题] – 强悍的JQuery Validate 插件	[10/08周主题] – JQuery分页导航条插件
无觅

本周主题：JQuery

一、JQuery核心认识

$ 表示JQuery类，$(…) 构造一个JQuery类，这里的JQuery类是一个集合数组对象，而非Dom对象。

jQuery(expression,[context])

$("div > p");
$("input:radio", document.forms[0]);
$("div", xml.responseXML);

jQuery( html )

$("<div>Hello</div>").appendTo("body");

主要用来加载html

jQuery( elements )

$(document.body).css("background-color", "black");
$(myForm.elements).hide();

jQuery( callback )

$(function(){
  alert('hello');
});

JQuey中执行方法是在页面加载结束后，官方解释是：A shorthand for $(document).ready().

二、JQuery选择器

JQuery选择器是JQuery的一大亮点，快捷，高效的遍历整个HTML文档，常用的如下面几种：

$("#id");
$("div");
$(".className");
$("div,span,p.myClass")
$("form input")
$("form > input")

强烈建议直接看官方文档：http://docs.jquery.com/Selectors

三、JQuery事件

$("p").bind("click", function(e){});
$("p").click(function() {})
trigger( event, data ) //触发事件
triggerHandler( event, data ) //触发事件，但不触发浏览器的默认事件
$("p").live("click", function(){ //在p以及p的下面的子elements上都加上click事件
      $(this).after("<p>Another paragraph!</p>");
});

更多，参见官方文档：http://docs.jquery.com/Events

四、JQuery Ajax

ajax这块感觉和其他框架没多少差别，用起来基本类似：
1、$.post(…) 和 $.get(…)

$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

2、$.ajax(…)

$.ajax({
    url: 'getdata.action',
    type: 'GET',
    dataType: 'html',
    Timeout: 1000,
    beforeSend: function(){
     // Handle the beforeSend event
   },
    success: function(html){
     // do something with html
   },
    complete: function(){
     // Handle the complete event
   },
    error: function(){
     alert('Error loading HTML document');
    },
});

五、推荐阅读

1、http://jquery.com/
2、jQuery 1.3 API 中文参考文档
3、http://jqueryui.com/
4、http://jquery.org.cn/
5、有关Ajax的一个中文文章

无觅猜您也喜欢：
[翻译] Simple Tooltip with jQuery & CSS	jQuery图像剪裁插件 – Jcrop	[10/22 周主题] – 强悍的JQuery Validate 插件	[10/08周主题] – JQuery分页导航条插件	[09/51-52周主题] – Java Net and XML parser
无觅