之前在写 [10/02周主题] – 仿Gmail头像上传剪辑 时说，还有个JQuery的分页组件分享给大家，这个组件是别人设计的，我只是在其基础上，进行一些改动，以符合自身项目的需求。

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

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

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

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

1、Loading和错误提示

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

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

本周关注比较多的是JQuery部分，优化了一个分页组件，实现了一个仿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的插件，蛮好用的，记录一下。

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

实现的流程大体如下：

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

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

周三赶鸭子上架的组织了一次JQuery入门培训，由于时间上的原因，自己没做Demo，拿官方现成的，主要是认识JQuery，了解JQuery核心函数，介绍一些常用的选择器，还有事件处理，以及Ajax的使用，这里简单分享下：

本周主题：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的一个中文文章