JGUI源码：组件及函数封装方法(7)

以Accordion为例
1、在base.js定义一个对象，这样可以和JQuery对象区分开，用户使用组件时比较清晰一点，也可以在这里引用多个库。

var JGUI = J = {
  version : '0.01',
  $ : window.jQuery
};

2、Accordion.js修改Init,fold,unfold如下，之前全局方法，现在改成下面的写法,里边的selector要换成$(this)。

/**
 * Accordion封装
 */
J.Accordion = (function($) {
  init = function(selector,p_options, p_datas, p_param) {
    return selector.each(function() {
      var datas = selector.extend(
        {
          _sumdelta: 0,
          _mouseintervalhandle: undefined,
          _startmousewheeldatetime: null
        },
        p_datas
      );
      selector.data("datas", datas);
    });
  };
  //折叠
  fold = function(selector) {
    return selector.each(function() {
      selector
        .find(".jgui-accordion-navitem")
        .siblings("dd")
        .slideUp();
        selector.find(".jgui-accordion-navitem span").hide();
        selector.find(".jgui-accordion-navitem .jgui-accordion-navitem-more").hide();
    });
  };
  //展开
  unfold = function(selector) {
    return selector.each(function() {
      selector
        .find(".jgui-accordion-navitem-more.expanded")
        .closest(".jgui-accordion-navitem")
        .siblings("dd")
        .slideDown();
        selector.find(".jgui-accordion-navitem span").show();
        selector.find(".jgui-accordion-navitem .jgui-accordion-navitem-more").show();
    });
  };
  return {
    init : init,
    fold : fold,
    unfold : unfold
}
})(J.$);
J.Accordion.init($('.jgui-accordion'));//(".jgui-accordion").init();

3、示例使用方法

J.Accordion.unfold($('#menuaccordion'));

     如果内部方法都不带参数的话，改为最外成传入selector的话，可以用如下写法。

J.Accordion($('#menuaccordion')).unfold();

4、说明：

(function($){})(J.$);

等价于

function a(J.$){}
a(selector)

助记：两个()()相当于(定义)+(执行)。

静态生成菜单基本上没问题了，如果使用js创建的菜单需要动态绑定，下面将解决这个问题。

另一种写法：(function($){...})(jQuery) 相当于定义后直接执行。

转载于:https://www.cnblogs.com/zhaogaojian/p/10441998.html