Menu icon Foundation
Pass in Options to Plugins via JS

After reviewing the documentation on http://foundation.zurb.com/sites/docs/javascript.html#configuring-plugins , I failed to find any examples of how I should write my JavaScript when I want to pass in some options to a plugin (in this instance, Dropdown Menu) for a single instance (unique element), without changing the global defaults. I'm aware I can pass in options using the data attribute in the HTML tag, but I'd like to manage it via JS where I have more than two options I'd like to manage. The best I can do is this:

$(document).foundation(
  $('#one-off-dropdown').foundation({
    disableHover: true,
    // more options
  });
);
                 

Can anyone correct my code and point in a better direction as far as handling plugin options are concerned?

Side note: I'm not impressed with the documentation for Foundation 6. It's not nearly as detailed as 5 was.

dropdown-menujavascriptpluginsettingsconfigurationfoundation 6

After reviewing the documentation on http://foundation.zurb.com/sites/docs/javascript.html#configuring-plugins , I failed to find any examples of how I should write my JavaScript when I want to pass in some options to a plugin (in this instance, Dropdown Menu) for a single instance (unique element), without changing the global defaults. I'm aware I can pass in options using the data attribute in the HTML tag, but I'd like to manage it via JS where I have more than two options I'd like to manage. The best I can do is this:

$(document).foundation(
  $('#one-off-dropdown').foundation({
    disableHover: true,
    // more options
  });
);
                 

Can anyone correct my code and point in a better direction as far as handling plugin options are concerned?

Side note: I'm not impressed with the documentation for Foundation 6. It's not nearly as detailed as 5 was.

Brian Tan almost 4 years ago

For static options (1 or more), you can pass via data-options

data-options="disableHover:true; closeOnClick:false;"

For dynamic options via js, this works for me.

  $(document).foundation();
  var foo = new Foundation.DropdownMenu($("#one-off-dropdown"));
  console.log("static options=%o", foo.options);
  foo = new Foundation.DropdownMenu($("#one-off-dropdown"), {
    disableHover:false, closeOnClick:true});
  console.log("dynamic options=%o", foo.options);

Daniel almost 4 years ago

Thanks, Brian, for getting back to me. Your code makes sense to me. I went ahead and plugged that into my app.js file. And while the console log shows that the changes were passed in, the desired settings have not taken effect.

I did notice in the inspector that there was an additional data attribute being added to my <ul> tag like so:

<nav class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" id="one-off-dropdown" data-dropdown-menu data-dropdownmenu="cn9ggf-dropdownmenu">

And, that data-dropdownmenu has a different value each time I refresh the page. Do I need to remove some things from my <ul> tag?

Brian Tan almost 4 years ago

If you are not going to change the options after it is set (static), the easiest way is to use data-options="option1:xxx;option2:yyy".

What are the desired effects that you are looking for? Does it work the way you want with individually data-option1="xxx" data-option2="yyy" ?

If console log show option is changed, but you are not getting "desired" effect, could it be you perhaps misunderstood how the options were supposed to work? In DropdownMenu plugin, some options work in conjunction with another.

Chris Oyler almost 4 years ago

The attribute data-dropdownmenu shouldn't be there, it should add a random id string the data-dropdown-menu attribute. But that's a different thing, and not what your question is about.

A more succinct way to show what Brian was point out, is the options is just an object. So you can do this:

var opts = {disableHover: false, closeOnClick: true};
var menu = new Foundation.DropdownMenu($('#some-menu'), opts);

Daniel almost 4 years ago

Again, thank you for looking into this for me. Just to make sure I had a sterile environment to test this in, I spun up a new static site using Yeti Launch. But the same issue as before is still present. Here is the index page:

<header data-sticky-container>
  <section class="sticky" data-sticky data-stick-to="top" data-margin-top="0" data-margin-bottom="0" data-btm-anchor="the-bottom: bottom">
    <div class="row">
      <div class="small-12">
        <nav class="top-bar" style="z-index: 50;">
          <div class="tob-bar-left">
            <ul class="dropdown menu" id="one-off-dropdown" data-dropdown-menu>
              <li><a href="#">Item One</a></li>
              <li class="has-submenu"><a href="#">Item 2</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Users</a></li>
                  <li><a href="#">Departments</a></li>
                  <li><a href="#">Security</a></li>
                </ul>
              </li>
              <li><a href="#">Item Three</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </section>
</header>

<div id="the-bottom">
 the bottom
</div>

And here is app.js:

 $(document).foundation();

var opts = {disableHover: true, alignment: 'right', closeOnClick: true};
var menu = new Foundation.DropdownMenu($('#one-off-dropdown'), opts);

I added in alignment: 'right' just to more quickly see a visual change, to which there is none. Could it be that the other plugins I'm using (such as top bar) be creating the issue. Or might it be related to what Chris pointed out what shouldn't be in the <ul> tag?

At this point, I'm fine going the way of just listing the options in a data-options string in the <ul>.

Brian, in answer to your question, both ways of using the data attribute in the <ul> work. It's this method of passing them in via app.js that still seems to be an issue.

Daniel almost 4 years ago

By way of update, I just tried using data-options="disableHover: true;" and the option on page load was still false. It seems that the only method that returns desired results is to use the option by name (i.e. data-disable-hover="true"