Biblioteca de JavaScript de acordeón semántica habilitada para AJAX-Jaccordion

Vista prévia

Descripción

Jaccordion es un componente de acordeón simple, suave, semántico y amigable con SEO escrito en JavaScript puro (ES6).

Funcionamiento

Instale & descargar.

# NPM
$ npm install @giodelabarrera/jaccordion --save

Importa el Jaccordion como un módulo.

import Jaccordion from '@giodelabarrera/jaccordion'

Importe la hoja de estilos.

@import 'node_modules/@giodelabarrera/jaccordion/dist/sass/jaccordion'

O incluir directamente el JavaScript y la hoja de estilos de CDN.

<link href="https://unpkg.com/@giodelabarrera/[email protected]/dist/css/jaccordion.css" rel="stylesheet">
<script src="https://unpkg.com/@giodelabarrera/[email protected]/dist/jaccordion.js"></script>

Construya la estructura HTML para el acordeón.

<dl>

<dt>Section 1</dt>

<dd>


<p>Section 1 Content</p>

</dd>

<dt>Section 2</dt>

<dd>


<p>Section 2 Content</p>

</dd>

<dt>Section 3</dt>

<dd>


<p>Section 3 Content</p>

</dd>
</dl>

Inicialice el Jaccordion y listo.

new Jaccordion(document.querySelector('dl')).mount()

Configuración del acordeón:

new Jaccordion(document.querySelector('dl'), {



/**


 * Identifier of the item that appears open by default


 * @type {Number}


 */


openAt: 0,



/**


 * Determines if there may be more than one item open


 * @type {Boolean}


 */


multiple: false,



/**


 * Entries to make items


 * @type {Object[]}


 */


entries: [],



/**


 * Object for make items by request


 * @type {Object}


 */


ajax: {



url: '',



processResults: function processResults(data) {




return data;



}


},



/**


 * Object with classes for styles


 * @type {Object}


 */


classes: {



root: 'jaccordion',



header: 'jaccordion__header',



opened: 'jaccordion__header--opened',



content: 'jaccordion__content'


}

})

More API methods.

// Disable the accordion
instance.disable()

// Enable the accordion
instance.enable()

// Toogle an item
instance.toggle(id)

// Check if is open
instance.isOpen(id)

// Open an item
instance.open(id)

// Close an item
instance.close(id)

// Append an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
instance.append(entry)

// Prepand an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
instance.prepend(entry)

// Append an item before an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
// @param: Number referenceId
instance.appendBefore(entry, referenceId)

// Append an item after an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
// @param: Number referenceId
instance.appendAfter(entry, referenceId)

// Remove an item
instance.remove(id)

// Unmout the accordion
instance.unmount()

Event handlers.

instance.on('mount.before', () => {

// do something
})

instance.on('mount.after', () => {

// do something
})

instance.on('open.before', (item) => {

// do something
})

instance.on('open.after', (item) => {

// do something
})

instance.on('close.before', (item) => {

// do something
})

instance.on('close.after', (item) => {

// do something
})

instance.on('append', (item) => {

// do something
})

instance.on('prepend', (item) => {

// do something
})

instance.on('appedn.before', (item) => {

// do something
})

instance.on('appedn.after', (item) => {

// do something
})

instance.on('remove.before', (item) => {

// do something
})

instance.on('remove.after', (item) => {

// do something
})

instance.on('unmount', () => {

// do something
})

instance.on('ajaxEntries.before', () => {

// do something
})

instance.on('ajaxEntries.after', () => {

// do something
})