j-Button

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

A simple button component with great features.

fully responsive
supports validation

Configuration:

exec {String} required a path to the function(el, path) method
icon {String} Total JS icons (default: undefined)
color {String} An icon color (default: undefined)
validation {Boolean} Enables validation for all components on the path (default: true)
delay {Number} a timeout for validation (default: 100)
name {String} a name for the name attribute (default: submit)
size {String} a size:
- small
- normal (default)
- large
- big
ddos {String} A simple DDOS prevetion for multiple clicks, possible values:
- undefined disables prevention
- 10 seconds
- session
- 1 day
- etc.
if {String} can contain JS condition for evaluation(optional)
- value {Object} contains entire model
- path {String} contains changed path
- must return boolean
track {String} can contain paths divided by comma which evaluate validation (executors for paths aren't components, but these methods SET(), UPD(), INC(), etc.)
validonly {Boolean} skips dirty state (default: false)

Use it with <ui-component name="button">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div class="row">
	<div class="col-md-3 col-xs-6">
		<ui-component name="button" config="exec:clickme" class="hidden">Show me</ui-component>
	</div>
</div>

<script>

	function clickme() {
		alert('Clicked!');
	}

</script>