JS异步编程三：Jscex无创痕切入jQUI

很多人可能会有个疑问，Jscex和其他类库共同使用或者语法混用时，会不会出现冲突或者异常？那么我们就来做个尝试吧!

创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目成都做网站、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元云和做网站,已为上家服务,为云和各地企业和个人服务,联系电话:18982081108

我们使用tab插件：

 
 
 

  
  
  
$(function () { 
  
  
  
$("#tabs").tabs({ event: "mouseover" }); 
  
  
  
}); 
 
 
 

后来，官网帮这个tab插件扩展了一个自动切换的功能，只需要这样写就行：

 
 
 

  
  
  
$(function ()  
  
  
  
{var t = $("#tabs").tabs(); 
  
  
  
t.tabs("rotate", 3000, false); 
  
  
  
});
 
 
 

扩展的代码如下：

 
 
 

  
  
  
$.extend($.ui.tabs.prototype, { 
  
  
  
            rotation: null, 
  
  
  
            rotate: function (ms, continuing) { 
  
  
  
                var self = this, 
  
  
  
o = this.options; 
  
  
  
                var rotate = self._rotate || (self._rotate = function (e) { 
  
  
  
                    clearTimeout(self.rotation); 
  
  
  
                    self.rotation = setTimeout(function () { 
  
  
  
                        var t = o.selected; 
  
  
  
                        self.select(++t < self.anchors.length ? t : 0); 
  
  
  
                    }, ms); 
  
  
  
                    if (e) { 
  
  
  
                        e.stopPropagation(); 
  
  
  
                    } 
  
  
  
                }); 
  
  
  
                var stop = self._unrotate || (self._unrotate = !continuing 
  
  
  
? function (e) { 
  
  
  
    if (e.clientX) { // in case of a true click 
  
  
  
        self.rotate(null); 
  
  
  
    } 
  
  
  
} 
  
  
  
: function (e) { 
  
  
  
    t = o.selected; 
  
  
  
    rotate(); 
  
  
  
}); 
  
  
  
                // start rotation 
  
  
  
                if (ms) { 
  
  
  
                    this.element.bind("tabsshow", rotate); 
  
  
  
                    this.anchors.bind(o.event + ".tabs", stop); 
  
  
  
                    rotate(); 
  
  
  
                    // stop rotation 
  
  
  
                } else { 
  
  
  
                    clearTimeout(self.rotation); 
  
  
  
                    this.element.unbind("tabsshow", rotate); 
  
  
  
                    this.anchors.unbind(o.event + ".tabs", stop); 
  
  
  
                    delete this._rotate; 
  
  
  
                    delete this._unrotate; 
  
  
  
                } 
  
  
  
                return this; 
  
  
  
            } 
  
  
  
        });
 
 
 

依然是那么费解的代码！在官方没有扩展之前，我们可以用Jscex介样子实现：

 
 
 

  
  
  
var swicthAsync = eval(Jscex.compile("async", function () { 
  
  
  
            var tabCount = $("#tabs ul li").length; 
  
  
  
            while (true) { 
  
  
  
                for (var i = 0; i < tabCount; i++) { 
  
  
  
                    $await(Jscex.Async.sleep(2000)); 
  
  
  
                    $('#tabs').tabs({ selected: i }); 
  
  
  
                } 
  
  
  
            } 
  
  
  
        })); 
  
  
  
        $(function () { 
  
  
  
            $("#tabs").tabs(); 
  
  
  
            swicthAsync().start(); 
  
  
  
        });
 
 
 

可以看得出来，这样的话Jscex没有对JqueryUI做任何介入，Jscex只是外部控制的一层壳。这样无法对测试出Jscex是否能与冲突或者异常，那么，我们就来用Jscex重写官方的扩展方法吧！

 
 
 

  
  
  
$.extend($.ui.tabs.prototype, { 
  
  
  
            rotation: null, 
  
  
  
            rotate: function (ms, continuing) { 
  
  
  
                var self = this, 
  
  
  
o = this.options; 
  
  
  
                var swicthAsync = eval(Jscex.compile("async", function () { 
  
  
  
                    while (true) { 
  
  
  
                        for (var i = 0; i < self.anchors.length; i++) { 
  
  
  
                            $await(Jscex.Async.sleep(ms)); 
  
  
  
                            self.select(i); 
  
  
  
                        } 
  
  
  
                    } 
  
  
  
                })); 
  
  
  
                swicthAsync().start(); 
  
  
  
                return this; 
  
  
  
            } 
  
  
  
        });
 
 
 

但是continuing参数暂时没有起作用，该参数是决定用户在选中后是否继续循环下去，这个就留个大家自己去完善吧~~~~

新的Jscex 库，请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载。

本文名称：JS异步编程三：Jscex无创痕切入jQUI
当前地址：http://www.csdahua.cn/qtweb/news34/238934.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网