Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://tom-select.js.org/docs/plugins/ below:

Plugin API - Tom Select

Feature can be added to Tom Select without modifying via the microplugin interface. This helps protect against code bloat, allows for leaner builds and allows for addons to be sanely isolated The plugin system is lean, makes very few assumptions, and gives the developer complete control.

Plugin Examples

new TomSelect('#select',{
	plugins: ['plugin_a', 'plugin_b']
});

new TomSelect('#select',{
	plugins: {
		'plugin_a': {  },
		'plugin_b': {  }
	}
});

For a more detailed description of plugin option formats and how the plugin system works, check out the microplugin documentation.

Plugins can be included in your projects in four different ways:

Using tom-select.complete.js in your projects will give you immediate access to all plugins

Save some bandwidth with a bundle that's about 4kb smaller. tom-select.popular.js includes dropdown_input, remove_button, no_backspace_delete, and restore_on_backspace plugins.

If you don't need any plugins, or want to load plugins individually, use tom-select.base.js.

Add plugins to your project by including their js files and calling TomSelect.define.

import TomSelect from 'tom-select/base';
import TomSelect_remove_button from 'tom-select/plugins/remove_button.js';
import TomSelect_dropdown_header from 'tom-select/dropdown_header.js';

TomSelect.define('remove_button', TomSelect_remove_button);
TomSelect.define('dropdown_header', TomSelect_dropdown_header);

Alternatively you can require plugins directly if your build tool supports it.

import TomSelect from 'tom-select/base';

TomSelect.define('remove_button', require('tom-select/plugins/remove_button.js'));
TomSelect.define('dropdown_header', require('tom-select/plugins/dropdown_header.js'));

Use NPM to hand-pick plugins and create /dist/js/tom-select.custom.js

git clone https://github.com/orchidjs/tom-select.git
cd tom-select


npm install


npm run build -- --plugins=remove_button,restore_on_backspace

A few notes:

• All plugins live in their own folders in "src/plugins".
• Plugin names should follow the format: /[a-z_]+$
• JS source should live in a "plugin.js" file (required).
• CSS should live in a "plugin.scss" file (optional). It will be bundled at build time.
• Plugins should not call TomSelect.define directly, this is done when importing the plugin.
• Plugins are initialized right before the control is setup. This means that if you want to listen for events on any of the control's elements, you should override the setup() method (see "DOM Events").

export default function(plugin_options) {
	
	
};

export default function(plugin_options) {
	this.require('another_plugin');
};

Execute plugin code 'before' or 'after' existing methods

export default function(plugin_options) {
	this.hook('after', 'setup', function() {
		
	});
};

Use the 'instead' hook to override existing methods.

Note: If the method you're overriding returns a value, make sure the overridden function returns a value as well.

export default function(plugin_options) {
	var original_setup = this.setup;
	this.hook('instead', 'setup', function() {
		
		return original_setup.apply(this, arguments);
	});
};

If you want to add event listeners to dom elements, add them after the setup() method.

export default function(plugin_options) {
	this.hook('after', 'setup', function() {
		this.control.addEventListener('click',function(evt){
			alert('the control was clicked');
		});
	});
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4