Foundation JavaScript Plugins

HTML Data Attributes Method (Recommended):

<!-- Auto-initialization with data attributes -->
<div data-accordion>
  <div data-accordion-item>
    <a href="#" data-accordion-title>Accordion Item 1</a>
    <div data-accordion-content>
      Content for item 1
    </div>
  </div>
</div>

<!-- Tabs with data attributes -->
<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active">
    <a href="#panel1" aria-selected="true">Tab 1</a>
  </li>
</ul>

JavaScript Initialization:

// Initialize all Foundation plugins
$(document).foundation();

// Initialize specific plugin
$('#myAccordion').foundation('_init');

// Initialize with options
$('.tooltip').foundation({
  hoverDelay: 100,
  fadeInDuration: 150
});

Setting Options via Data Attributes:

<!-- Accordion with options -->
<div data-accordion 
     data-multi-expand="true"
     data-allow-all-closed="true">
  <!-- accordion items -->
</div>

<!-- Slider with options -->
<div class="slider" 
     data-slider 
     data-initial-start="50"
     data-end="200"
     data-step="5">
  <span class="slider-handle" data-slider-handle></span>
  <span class="slider-fill" data-slider-fill></span>
</div>

<!-- Tooltip with options -->
<button class="button" 
        data-tooltip 
        data-position="bottom" 
        data-alignment="center"
        data-hover-delay="200"
        title="Tooltip text">
  Hover me
</button>

JavaScript Configuration:

// Global plugin defaults
Foundation.Abide.defaults.patterns = {
  alpha: /^[a-zA-Z]+$/,
  alpha_numeric: /^[a-zA-Z0-9]+$/
};

// Plugin-specific initialization with options
$('[data-accordion]').foundation({
  slideSpeed: 500,
  multiExpand: false,
  allowAllClosed: false
});

// Reflow plugin when content changes
$(document).foundation('reflow', 'accordion');

JavaScript API Methods:

// Accordion Methods
var accordion = new Foundation.Accordion($('#myAccordion'));
accordion.down($('#panel1'));  // Open panel
accordion.up($('#panel1'));    // Close panel
accordion.toggle($('#panel1')); // Toggle panel

// Reveal (Modal) Methods
var modal = new Foundation.Reveal($('#myModal'));
modal.open();                  // Open modal
modal.close();                 // Close modal
modal.toggle();                // Toggle modal

// Tabs Methods
var tabs = new Foundation.Tabs($('#myTabs'));
tabs.selectTab($('#tab2'));    // Select specific tab

// Dropdown Methods
var dropdown = new Foundation.Dropdown($('#myDropdown'));
dropdown.open();               // Open dropdown
dropdown.close();              // Close dropdown
dropdown.toggle();             // Toggle dropdown

// Get plugin instance
var instance = $('#myPlugin').data('zfPlugin');
instance.someMethod();

Foundation Plugin Events:

// Accordion Events
$('#myAccordion').on('down.zf.accordion', function(event, element) {
  console.log('Accordion opened:', element);
});

$('#myAccordion').on('up.zf.accordion', function() {
  console.log('Accordion closed');
});

// Modal Events
$('#myModal').on('open.zf.reveal', function() {
  console.log('Modal opened');
});

$('#myModal').on('closed.zf.reveal', function() {
  console.log('Modal closed');
});

// Tabs Events
$('#myTabs').on('change.zf.tabs', function(event, tab) {
  console.log('Tab changed to:', tab);
});

// Dropdown Events
$('#myDropdown').on('show.zf.dropdown', function() {
  console.log('Dropdown shown');
});

$('#myDropdown').on('hide.zf.dropdown', function() {
  console.log('Dropdown hidden');
});

// Tooltip Events
$('[data-tooltip]').on('show.zf.tooltip', function() {
  console.log('Tooltip shown');
});

Foundation Utility Plugins:

// Equalizer - Equal height elements
<div data-equalizer data-equalize-on="medium">
  <div class="column" data-equalizer-watch>
    <!-- content -->
  </div>
  <div class="column" data-equalizer-watch>
    <!-- content -->
  </div>
</div>

// Toggler - Show/hide elements
<button class="button" data-toggle="targetElement">
  Toggle Element
</button>
<div id="targetElement" class="hide">
  Content to toggle
</div>

// Match Height - Match element heights
<div data-match-height="items">
  <div class="item" data-match-height-item>
    Variable height content
  </div>
  <div class="item" data-match-height-item>
    Different height content
  </div>
</div>

// Sticky - Sticky positioning
<div data-sticky-container>
  <div data-sticky data-margin-top="0">
    <!-- sticky content -->
  </div>
</div>

// Smooth Scroll
<a href="#section" data-smooth-scroll>
  Smooth scroll to section
</a>

Dynamic Content & Reinitialization:

// Dynamically add accordion item
$('#myAccordion').append(
  '<div class="accordion-item" data-accordion-item>' +
    '<a href="#" class="accordion-title">New Item</a>' +
    '<div class="accordion-content">New Content</div>' +
  '</div>'
);

// Reinitialize Foundation on new content
Foundation.reInit($('#myAccordion'));

// Or reflow specific plugin
$(document).foundation('reflow', 'accordion');

// Destroy and recreate plugin
var $accordion = $('#myAccordion');
Foundation.destroy($accordion);
// Modify $accordion content
Foundation.reInit($accordion);

// AJAX content loading example
$.ajax({
  url: '/api/content',
  success: function(data) {
    $('#content-container').html(data);
    // Reinitialize Foundation plugins in new content
    Foundation.reInit($('#content-container'));
  }
});

Custom Plugin Integration:

// Extending Foundation plugins
(function($, Foundation) {
  'use strict';
  
  // Custom accordion with additional features
  class CustomAccordion extends Foundation.Accordion {
    _init() {
      super._init();
      this._addCustomFeatures();
    }
    
    _addCustomFeatures() {
      // Custom functionality
      this.$element.on('customEvent', this._handleCustom.bind(this));
    }
    
    _handleCustom() {
      // Handle custom event
    }
  }
  
  // Register custom plugin
  Foundation.plugin(CustomAccordion, 'CustomAccordion');
  
})(jQuery, Foundation);

// Using the custom plugin
$('#customAccordion').foundation('_init');