jquery组件开发

一个简单的侧边栏导航组件。
/**
 * Created by Px.T on 6/22/15.
 */
(function($) {

  'use strict';


  $.fn.navBar = function(options) {

    var defaults = {
        menuData: [],
        menuClass: 'menu-list',
        subMenuClass: 'subMenu-list',
        onMenu: onMenu
      },
      settings = $.extend({}, defaults, options);


    return this.each(function() {

      var dom = this;

      this.options = settings;
      this.init = function(settings) {
        createDOM(dom, settings);
      };
      this.init(settings);
    });

    function createDOM(parentElem, settings) {

      var dl = $('<dl></dl>');
      dl.appendTo(parentElem);
      $.each(settings.menuData, function(i, item) {
        var dt = $('<dt><h2>' + item.html + '</h2><span></span></dt>');
        dt.addClass(settings.menuClass).attr('id', item.id).appendTo(dl);
        settings.onMenu.call(dt);

        var dd = $('<dd><ul></ul></dd>');
        dd.attr('id', item.subMenu.id);
        dl.append(dd);

        $.each(item.subMenu, function(i, item) {
          var li = $('<li></li>', {
            html: item.html
          });
          li.addClass(settings.subMenuClass).appendTo(dd.find('ul'));
        });

      });


    }

    function onMenu() {

    }




  };

}(jQuery));

 

转载于:https://www.cnblogs.com/byronvis/p/4659352.html