Overview
Dialer is an exclusive plugin of Good that enables user-friendly click based dialing functionality for any text input.
Usage
Dialer's CSS and Javascript files are bundled in the global style and scripts bundles and are globally included in all pages:
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
Initialization
- Dialer does not come with its own custom CSS and it uses global input controls and related elements.
- Dialer instances are automatically initialized through
data-kt-dialer="true"HTML attribute on document ready event. - Dialer instances can be created programmatically without using the above HTML attribute. See below for more info.
Basic
Basic example of Dialer based on Input Group:
<!--begin::Dialer-->
<div class="input-group w-md-300px"
data-kt-dialer="true"
data-kt-dialer-min="1000"
data-kt-dialer-max="50000"
data-kt-dialer-step="1000"
data-kt-dialer-prefix="$">
<!--begin::Decrease control-->
<button class="btn btn-icon btn-outline btn-outline-secondary" type="button" data-kt-dialer-control="decrease">
<i class="bi bi-dash fs-1"></i>
</button>
<!--end::Decrease control-->
<!--begin::Input control-->
<input type="text" class="form-control" readonly placeholder="Amount" value="$10000" data-kt-dialer-control="input"/>
<!--end::Input control-->
<!--begin::Increase control-->
<button class="btn btn-icon btn-outline btn-outline-secondary" type="button" data-kt-dialer-control="increase">
<i class="bi bi-plus fs-1"></i>
</button>
<!--end::Increase control-->
</div>
<!--end::Dialer-->
Custom
The Look and feel can be easily customized by using any input, button or icon variations:
<!--begin::Dialer-->
<div class="position-relative w-md-300px"
data-kt-dialer="true"
data-kt-dialer-min="1000"
data-kt-dialer-max="50000"
data-kt-dialer-step="1000"
data-kt-dialer-prefix="$"
data-kt-dialer-decimals="2">
<!--begin::Decrease control-->
<button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">
<span class="svg-icon svg-icon-1"><svg></svg></span>
</button>
<!--end::Decrease control-->
<!--begin::Input control-->
<input type="text" class="form-control form-control-solid border-0 ps-12" data-kt-dialer-control="input" placeholder="Amount" name="manageBudget" readonly value="$36,000.00" />
<!--end::Input control-->
<!--begin::Increase control-->
<button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase">
<span class="svg-icon svg-icon-1"><svg></svg></span>
</button>
<!--end::Increase control-->
</div>
<!--end::Dialer-->
While customizing the look and feel, ensure to maintain the control attributes(
data-kt-dialer-control="*") in order Dialer to function as expected.Javascript
An example of Dialer initialized in Javascript:
// Dialer container element
var dialerElement = document.querySelector("#kt_dialer_example_1");
// Create dialer object and initialize a new instance
var dialerObject = new KTDialer(dialerElement, {
min: 1000,
max: 50000,
step: 1000,
prefix: "$",
decimals: 2
});
<!--begin::Dialer-->
<div class="position-relative w-md-300px" id="kt_dialer_example_1">
<!--begin::Decrease control-->
<button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">
<span class="svg-icon svg-icon-1"><svg></svg></span>
</button>
<!--end::Decrease control-->
<!--begin::Input control-->
<input type="text" class="form-control form-control-solid border-0 ps-12" data-kt-dialer-control="input" name="manageBudget" readonly value="$36,000.00" />
<!--end::Input control-->
<!--begin::Increase control-->
<button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase">
<span class="svg-icon svg-icon-1"><svg></svg></span>
</button>
<!--end::Increase control-->
</div>
<!--end::Dialer-->
Options
All options can be passed via HTML attributes
data-kt-dialer-{option}as well the
optionbelow that represents the Javascript options object key:| Name | Type | Default | Description |
|---|---|---|---|
min
|
Number | null | Seta a minimum value of the input. |
max
|
Number | null | Sets a maximum value of the input. |
step
|
Number | 1 | Sets a step value for dialing. |
decimals
|
Integer | 0 | Sets a decimals number for float value formating. |
prefix
|
String | ' ' | Displays the formatted input value with a prefix string. |
suffix
|
String | ' ' | Displays the formatted input value with a suffix string. |
Methods
The following are the Dialer's functionality methods for more control.
| Name | Description |
|---|---|
| Static Methods | |
createInstances(DOMString selector)
|
Initializes Bootstrap Dialer instances by selector. Default value of
selectoris
[data-kt-dialer="true"]. This method can be used to initialize dynamicly populated Bootstrap Dialer instances(e.g: after Ajax request).
|
getInstance(DOMElement element)
|
Get the Dialer instance created
|
| Public Methods | |
KTDialer(DOMElement element, Object options)
|
Constructs a new instance of
KTDialerclass and initializes a Dialer control:
Remove
data-kt-dialer="true"attribute to avoid lazy initializes.For
optionsobject refer to above Options Reference section. |
increase()
|
Increases the input value with the configured step value.
|
decrease()
|
Decreases the input value with the configured step value.
|
setValue(Number value)
|
Sets a new value.
|
getValue()
|
Gets current value.
|
setMinValue(Number value)
|
Sets a new
minvalue.
|
setMaxValue(Number value)
|
Sets a new
maxvalue.
|
update()
|
Updates current value with
minand
maxvalues validation.
|
getElement()
|
Returns the Dialer's attached DOM element.
|
destroy()
|
Removes the component instance from element.
|
Events
Below are few events for hooking into the Dialer functionality.
| Event Type | Description |
|---|---|
kt.dialer.increase
|
This event fires before running the
increasemethod |
kt.dialer.increased
|
This event fires after running the
increasemethod |
kt.dialer.decrease
|
This event fires before running the
decreasemethod |
kt.dialer.decreased
|
This event fires before after the
decreasemethod |
var dialerElement = document.querySelector("#kt_dialer_example_1");
var dialerObject = new KTDialer(dialerElement, { /* options */ });
dialerObject.on('kt.dialer.increase', function(){
// do something...
});
2022©
Keenthemes
