Many may have questions about whether conflicts or exceptions occur when Jscex is used together with other class libraries or when syntax is mixed? Let's try it!
We use the tab plug-in:
- $(function () {
- $("#tabs").tabs({ event: "mouseover" });
- });
Later, the official website helped the tab plug-in expand a function of automatic switch, just write it like this:
- $(function ()
- {var t = $("#tabs").tabs();
- t.tabs("rotate", 3000, false);
- });
The extension code is as follows:
- $.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;
- }
- });
Still so confusing code! Before official expansion, we can use Jscex to describe:
- 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();
- });
As you can see, Jscex does not intervene in JqueryUI. Jscex is only a shell of external control. In this way, we cannot test whether Jscex can conflict with or be abnormal. Therefore, we can use Jscex to rewrite the official extension method!
- $.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;
- }
- });
However, the continuing parameter does not take effect for the moment. This parameter determines whether the user can continue the loop after the user selects the parameter. You can complete this parameter by yourself ~~~~
New Jscex library. please upload.