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;

      });

  • 相关阅读:
    Silverlight OA系统(Silverlight办公自动化系统)
    Silverlight 3把多点触摸带进Web世界
    风云的银光志Silverlight4.0教程之使用CompositeTransform复合变形特效实现倒影
    最近团队完成的Silverlight 在线棋牌网络游戏
    Silverlight 3 多点触摸功能在Windows 7 中的应用
    风云的银光志Silverlight4.0教程之遍历访问客户端用户的本地文件
    网上Silverlight项目收集
    彻底解决Windowless=true情况下TextBox不能输入的问题
    相约微软大厦,Silverlight4.0技术分享线下活动明天下午正式开始!
    Silverlight WebOS(Web操作系统)
  • 原文地址:https://www.cnblogs.com/pengpeng1208/p/9099221.html
Copyright © 2011-2022 走看看