我认为它是通过属性来实现的，例如在下拉列表中：

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

有类似但更复杂的东西：

if ($('div').attr('data-dropdown-menu')) {
// Create component
}

可能的解决方案

我能想到的一种方法是使用一个包含组件属性和组件创建的函数的数组 . 然后启动一个初始进程，收集html的所有属性，如果它与现有属性匹配，则创建组件 .

我想知道

我想知道哪个 function launches the process that looks for the attributes ，如果属性对应一个组件，它会创建组件 .

初始化插件Zurb Foundation

谢谢 Ross 我发现这也想创建我自己的插件初始化程序 .

/**
   * Initialize plugins on any elements within `elem` (and `elem` itself) that aren't already initialized.
   * @param {Object} elem - jQuery object containing the element to check inside. Also checks the element itself, unless it's the `document` object.
   * @param {String|Array} plugins - A list of plugins to initialize. Leave this out to initialize everything.
   */
  reflow: function(elem, plugins) {

    // If plugins is undefined, just grab everything
    if (typeof plugins === 'undefined') {
      plugins = Object.keys(this._plugins);
    }
    // If plugins is a string, convert it to an array with one item
    else if (typeof plugins === 'string') {
      plugins = [plugins];
    }

    var _this = this;

    // Iterate through each plugin
    $.each(plugins, function(i, name) {
      // Get the current plugin
      var plugin = _this._plugins[name];

      // Localize the search to all elements inside elem, as well as elem itself, unless elem === document
      var $elem = $(elem).find('[data-'+name+']').addBack('[data-'+name+']');

      // For each plugin found, initialize it
      $elem.each(function() {
        var $el = $(this),
            opts = {};
        // Don't double-dip on plugins
        if ($el.data('zfPlugin')) {
          console.warn("Tried to initialize "+name+" on an element that already has a Foundation plugin.");
          return;
        }

        if($el.attr('data-options')){
          var thing = $el.attr('data-options').split(';').forEach(function(e, i){
            var opt = e.split(':').map(function(el){ return el.trim(); });
            if(opt[0]) opts[opt[0]] = parseValue(opt[1]);
          });
        }
        try{
          $el.data('zfPlugin', new plugin($(this), opts));
        }catch(er){
          console.error(er);
        }finally{
          return;
        }
      });
    });
  }

谢谢

1 回答

Foundation对JS组件使用插件类型方法 . 每个插件都使用registerPlugin函数进行注册和初始化 . 以DropDown组件为例，这个调用 Foundation.plugin(Dropdown, 'Dropdown'); 让DropDown滚动 .

/**
    * @function
    * Populates the _uuids array with pointers to each individual plugin instance.
    * Adds the `zfPlugin` data-attribute to programmatically created plugins to allow use of $(selector).foundation(method) calls.
    * Also fires the initialization event for each plugin, consolidating repetitive code.
    * @param {Object} plugin - an instance of a plugin, usually `this` in context.
    * @param {String} name - the name of the plugin, passed as a camelCased string.
    * @fires Plugin#init
    */
registerPlugin: function (plugin, name) {
    var pluginName = name ? hyphenate(name) : functionName(plugin.constructor).toLowerCase();
    plugin.uuid = this.GetYoDigits(6, pluginName);

    if (!plugin.$element.attr('data-' + pluginName)) {
    plugin.$element.attr('data-' + pluginName, plugin.uuid);
    }
    if (!plugin.$element.data('zfPlugin')) {
    plugin.$element.data('zfPlugin', plugin);
    }
    /**
    * Fires when the plugin has initialized.
    * @event Plugin#init
    */
    plugin.$element.trigger('init.zf.' + pluginName);

    this._uuids.push(plugin.uuid);

    return;
}

回复于 2024-04-20T23:07:39+08:00

Zurb Foundation如何检测javascript组件？

可能的解决方案

我想知道

初始化插件Zurb Foundation

1 回答

相关问题