zoukankan      html  css  js  c++  java
  • 手把手教你开发jquery插件

      I have said that i dislike jQuery UI’s unified API, so i want to

      get the instance of the component after invoke like this:

      $(function() {

      var tabs = $("div.tabs").tabs();

      // Note: Now tabs is the instance of the component

      window.setTimeout(function() {

      tabs.clickTab(2);

      }, 2000);

      });

      To achieve this, i modified the plugin code:

      (function($) {

      function Tabs(tabs, panes) {

      var that = this;

      this.tabs = tabs;

      this.panes = panes;

      this.current = 0;

      this.clickTab(0);

      this.tabs.click(function() {

      that.clickTab(that.tabs.index(this));

      });

      }

      Tabs.prototype = {

      clickTab: function(index) {

      this.current = index;

      this.tabs.removeClass("current").eq(this.current).addClass("current");

      this.panes.hide().eq(this.current).show();

      }

      };

      $.fn.tabs = function() {

      var tabs = this.children("ul").find("li > a");

      var panes = this.children("div");

      return new Tabs(tabs, panes);

      };

      })

      Note that Tabs is defined in the self-execution function, so it will be hidden

      from the outside world.

      And we public the clickTab metod in the prototype. I works well.

      This article is over, below is some advance topics.

      ====================================================

      How to extend Tabs class?

      It maybe a little difficult because it’s a private function.

      Never mind, just change the prototype of $.fn.tabs:

      (function($) {

      function Tabs(tabs, panes) {

      // ...

      }

      Tabs.prototype = {

      // ...

      };

      $.fn.tabs = function() {

      // ...

      };

      $.fn.tabs.prototype = Tabs.prototype;

      });

      We can extend the Tabs class like this:

      $.fn.tabs.prototype.getLength = function() {

      return this.tabs.length;

      };

      $(function() {

      var tabs = $("div.tabs").tabs();

      alert(tabs.getLength());

      });

      Or we can use the method introduced in jQuery core, which is described in

      my last post.

      (function($) {

      $.fn.tabs = function() {

      var tabs = this.children("ul").find("li > a");

      var panes = this.children("div");

      return new $.fn.tabs.prototype.init(tabs, panes);

      };

      $.fn.tabs.prototype = {

      init: function(tabs, panes) {

      var that = this;

      this.tabs = tabs;

      this.panes = panes;

      this.current = 0;

      this.clickTab(0);

      this.tabs.click(function() {

      that.clickTab(that.tabs.index(this));

      });

      },

      clickTab: function(index) {

      this.current = index;

      this.tabs.removeClass("current").eq(this.current).addClass("current");

      this.panes.hide().eq(this.current).show();

      }

      };

      $.fn.tabs.prototype.init.prototype = $.fn.tabs.prototype;

      });

  • 相关阅读:
    $resource详解
    大白话讲解Promise(一)
    《AngularJS》5个实例详解Directive(指令)机制
    Openstack实现共有云VPC的SDN网络
    Openstack实现共有云多flat网络
    Openstack使用NFS作为后端存储
    Openstack块存储cinder安装配置
    Openstack创建镜像
    Openstack深入了解虚拟机
    Python全栈day26-27(面向对象进阶)
  • 原文地址:https://www.cnblogs.com/pengpeng1208/p/9099221.html
Copyright © 2011-2022 走看看