jQuery插件封装（单个插件含多个分支函数）-CFANZ编程社区

jQuery插件封装（单个插件含多个分支函数）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="js/jquery.tooltip.js" ></script>
  </head>
  <body>
    <div class="tooltip"></div>
  </body>
</html>

(function($) {

  var methods = {
    init: function(options) {

      var $settings = $.extend(true, {
        'id': ''
      }, options);

      $(this).append("<br/>函数 init，参数id:" + $settings.id);
    },
    show: function() {
      $(this).append("<br/>函数show，无参数");
    },
    hide: function() {
      $(this).append("<br/>函数hide，无参数");

    },
    update: function(content) {
      $(this).append("<br/>函数update，参数内容:" + content);
    }
  }

  $.fn.extend({
    tooltip: function(method) {
      if(methods[method]) {
        methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
      } else if(typeof method == 'object' || !method) {
        methods.init.apply(this, arguments);
      } else {
        $(this).append('<br/>Method [' + method + '] does not exist on jquery.tooltip');
      }
    }
  });

})(jQuery);

$(document).ready(function() {
  $(".tooltip").tooltip();
  $(".tooltip").tooltip({id: 1});
  
  $(".tooltip").tooltip("show");
  $(".tooltip").tooltip("hide");
  
  $(".tooltip").tooltip("update", "这是新的内容工具提示！");
  
  $(".tooltip").tooltip("alert");
});

执行结果：

函数 init，参数id:
函数 init，参数id:1
函数show，无参数
函数hide，无参数
函数update，参数内容:这是新的内容工具提示！
Method [alert] does not exist on jquery.tooltip

0 条评论