Declarative jQuery plugin initialization on DOM elements. Finds elements, which has data-plugin attribute and calls jQuery plugins on them passing settings/options as first argument.
On repeated .app()
calls if plugin already was initialized on the element then it will be ignored.
Install with npm or yarn:
$ npm install jquery-app --save
$ yarn add jquery-app
List of plugins which will be called are defined by settings data-plugin="PLUGIN_NAMES"
attribute on elements. Plugin names are either comma or space separated list of plugin names.
<!-- data-PLUGIN_NAME="JSON_CONFIGURATION" -->
<input
type="text"
data-plugin="datepicker"
/>
Settings/options for plugin can be set either using data-PLUGIN_NAME="JSON_CONFIGURATION"
attribute
<!-- data-PLUGIN_NAME="JSON_CONFIGURATION" -->
<input
type="text"
data-plugin="datepicker"
data-datepicker='{"numberOfMonths": 3, "showButtonPanel": true}'
/>
or specific data-PLUGIN_NAME-PROPERTY="VALUE"
attribute
<input
type="text"
data-plugin="datepicker"
data-datepicker-number-of-months="3"
data-datepicker-show-button-panel="true"
/>
In this example under the hood jquery-app will call plugin passing options as
$(INPUT_ELEMENT).datepicker({
"numberOfMonths": 3,
"showButtonPanel": true
});
$(function () {
// Find all elements with data-plugin attribute inside body and initialize plugins
$('body').app();
});
In some cases you may want to use different attribute name than data-plugin
, that can be done using namespace
property when calling $.fn.app
$(function () {
// Find all elements with data-attach attribute inside body and initialize plugins
$('body').app({
'namespace': 'attach'
});
});
Multiple plugins can be defined using space or comma separated list and since options are prefixed there won't be collision between options/settings for each plugin.
<div
data-plugin="pluginA, pluginB"
data-pluginA-option-a="alpha"
data-pluginA-option-b="beta"
data-pluginB-option-a="gamma"
data-pluginB-option-c="delta"
></div>
Under the hood jquery-app will call plugins as
$(DIV_ELEMENT).pluginA({
"optionA": "alpha",
"optionB": "beta"
});
$(DIV_ELEMENT).pluginB({
"optionA": "gamma",
"optionC": "delta"
});
Name | Type | Usage | Default |
---|---|---|---|
namespace | String | Data attribute name using which list of plugin names are defined | "plugin" |
namespaceOptions | Boolean | Pass to plugin only data from attributes starting with plugin name, eg. data-datepicker. If set to false all data is passed to plugin as options and without removing prefixes |
true |
debug | Boolean or String | Output all successful and failed plugin initialization calls to the console. If value is "error" then output only failed plugin initialization calls | false |
Using namespaceOptions: true
(default)
<div data-plugin="datepicker" data-datepicker-number-of-months="3">
Using namespaceOptions: false
<div data-plugin="datepicker" data-number-of-months="3">
Install dev dependencies:
$ npm install -d && npm test
Copyright © 2018, Kaspars Zuks. Released under the MIT license.