JGUI源码：JS菜单动态绑定

Posted 2021-02-11 ZGJ

我们知道Jquery绑定事件后的新添加的对象是不响应事件的，为了解决这个问题，动态添加的对象需要从新绑定，使用一个init方法实现代码如下

//Accordion封装
(function($) {
  J.Accordion = function($p_selector) {
    init = function(p_options, p_datas, p_param) {
      return $p_selector.each(function() {
        var $accordion = $(this);
        var datas = $accordion.extend(
          {
            _sumdelta: 0,
            _mouseintervalhandle: undefined,
            _startmousewheeldatetime: null
          },
          p_datas
        );
        var events = {
          onNavItemClick: undefined
        };
        $accordion.data("datas", datas);
        $accordion.data("events", events);
        //Accordion目录点击绑定
        $accordion.find("dt.jgui-accordion-navitem").unbind("click"); //先解绑
        $accordion.find("dt.jgui-accordion-navitem").click(function(event) {
          var $accordionnavitem = $(this);
          if ($accordion.data("events").onNavItemClick != undefined) {
            var ret = $accordion.data("events").onNavItemClick(this);
            if (ret == false) return;
          }
          $accordionnavitem.removeClass("selected");
          $accordionnavitem.siblings("dd").slideToggle(300, function() {
            if ($(this).is(":hidden")) {
              $(this)
                .siblings("dt")
                .children()
                .children(".jgui-accordion-navitem-more")
                .removeClass("expanded", 0);
            } else {
              $(this)
                .siblings("dt")
                .children()
                .children(".jgui-accordion-navitem-more")
                .addClass("expanded", 0);
            }
          });
          $accordionnavitem
            .closest(".jgui-accordion")
            .find(".jgui-accordion-navitem")
            .removeClass("selected");
          $accordionnavitem
            .closest(".jgui-accordion")
            .find(".jgui-accordion-navitem-child")
            .removeClass("selected");
          $accordionnavitem.addClass("selected");
          stopPropagation(event);
        });
        //Accordion内容条目点击绑定
        $accordion.find(".jgui-accordion-navitem-child").unbind("click");
        $accordion.find(".jgui-accordion-navitem-child").click(function(event) {
          var $accordionnavitemchild = $(this);
          $accordionnavitemchild
            .closest(".jgui-accordion")
            .find(".jgui-accordion-navitem")
            .removeClass("selected");
          $accordionnavitemchild
            .closest(".jgui-accordion")
            .find(".jgui-accordion-navitem-child")
            .removeClass("selected");
          $accordionnavitemchild.addClass("selected");
          stopPropagation(event);
        });
        //手机端鼠标拖动事件,手机端可以屏蔽下面改成用css3隐藏滚动条，毕竟手机端不用考虑兼容性
        $accordion.unbind("touchstart");
        $accordion.on("touchstart", function(e) {
          startY = e.originalEvent.changedTouches[0].pageY;
        });
        $accordion.unbind("touchmove");
        $accordion.on("touchmove", function(e) {
          e.preventDefault();
          (moveEndY = e.originalEvent.changedTouches[0].pageY),
            (Y = moveEndY - startY);
          startY = moveEndY;
          var cur_top = $accordion.scrollTop(); //当前滚过的高度
          $accordion.stop().animate({ scrollTop: -Y + cur_top }, 0);
        });
      });
    };
    //折叠成工具条样式
    fold = function() {
      return $p_selector.each(function() {
        var $accordion = $(this);
        $accordion
          .find(".jgui-accordion-navitem")
          .siblings("dd")
          .slideUp();
        $accordion.find(".jgui-accordion-navitem span").hide();
        $accordion
          .find(".jgui-accordion-navitem .jgui-accordion-navitem-more")
          .hide();
      });
    };
    //展开成面板样式
    unfold = function() {
      return $p_selector.each(function() {
        var $accordion = $(this);
        $accordion
          .find(".jgui-accordion-navitem-more.expanded")
          .closest(".jgui-accordion-navitem")
          .siblings("dd")
          .slideDown();
        $accordion.find(".jgui-accordion-navitem span").show();
        $accordion
          .find(".jgui-accordion-navitem .jgui-accordion-navitem-more")
          .show();
      });
    };
    return {
      init: init,
      fold: fold,
      unfold: unfold
    };
  };
})(J.$); 

当使用ajax向according里添加html数据后，可以调用一次init即可实现从新绑定（先unbind,再bind）。

示例：J.Accordion($(".jgui-accordion")).init();

如果后期优化，可以判断哪些绑定过的不再绑定。另外为了通知外部页面点击了NavItem操作，做了一个回调函数

  //NavItem点击事件
 var events = $(‘#menuaccordion‘).data("events");
 events.onNavItemClick=function (obj)
  {
      if (!$("#leftpanel").is(".unfold")) {//折叠状态展开
        $("#leftpanel").width(300);
        $("#centerpanel").css("left", "300px");
        $("#mainlogo").html("JGUI DEMO");
        J.Accordion($(obj).closest(".jgui-accordion")).unfold();
        $("#leftpanel").toggleClass("unfold");
        $("#folderbtn").toggleClass("icon-menu-unfold icon-menu-fold");
        return false;
      }
  };

这样就可以在外部响应点击事件。