jQueryUi的ajax tabs刷新问题

首先，参照例子我们可以很容易的做出这样的效果：

PHPInfo这个选项卡是采用jQuery默认的ajax方式获取的页面内容，正如图中所示，内容是一个表单。

需求的情景如下：

1、在打开PHPInfo选项卡之后，我又打开了收件箱的选项卡，这时收件箱选项激活。

2、收件箱的邮件查看完毕，准备切换回PHPInfo选项卡，发现这个表单居然刷新了，也就是说我们之前在表单当中填好的数据都会丢失。

先给出选项卡的html结构：

            <div id="tabs">
                <ul>

                </ul>

            </div>

为了防止ajax选项卡在每次被激活之时都要进行刷新，我们需要实现下面的函数：

            $("#tabs").tabs().on( "tabsbeforeload", function( event, ui ) {
                var key = ui.tab.find("a").text();
                  if(tabArr[key]!=undefined){
                      if(tabArr[key+"_loaded"] != undefined){
                        ui.jqXHR.abort();
                      }
                  }
            } );

            $("#tabs").tabs().on("tabsload", function (event, ui) {
                var key = ui.tab.innerHTML;
                tabArr[key+"_loaded"] = 1;
            });

也就是要对tabs的beforeload和load事件进行处理。关于这两个事件，可以参见官方文档：http://api.jqueryui.com/tabs/#event-beforeLoad

简单说一下自己遇到的问题和解决办法：

1、我需要在一个数组当中记录对应的选项卡是否已经打开，每次beforeload的时候都要检查一下这个值；不过请注意，由于我这里用到的是可以关闭的选项卡，所以在关闭选项卡的时候需要把数组当中的这些记录清空，不然会引起逻辑上的混乱。

2、在数组当中存放标志位的时候，我使用了选项卡的内容作为key，当然选择什么并不重要，我在这里想要提到的是beforeload和load两个事件的处理函数当中的ui居然不是同样的结构，所以我们可以看到在beforeload当中使用ui.tab.find（“a").text()，而在load当中则使用了ui.tab.innerHTML这两种完全不同的方式来获取选项卡的内容。

3、取消ajax请求可以使用ui.jqXHR.abort()函数。