-
Notifications
You must be signed in to change notification settings - Fork 2
Options
Type: Selector
Default: "body"
The element containing the pinpad widget. If not set, the pinpad will be appended to the document body element and displayed as an overlay.
Code examples:
Initialize the pinpad with the appendTo
option specified:
$( ".selector" ).pinpad( {
appendTo: "#container"
} );
Get or set the appendTo
option, after initialization:
// Getter
var container = $( ".selector" ).pinpad( "option", "appendTo" );
// Setter
$( ".selector" ).pinpad( "option", "appendTo", "#container" );
Type: Boolean
Default: false
Specify whether the confirm event is triggered when the pin pad input value length reach its max length.
Code examples:
Initialize the pinpad with the autoComplete
option specified:
$( ".selector" ).pinpad( {
autoComplete: true
} );
Get or set the autoComplete
option, after initialization:
// Getter
var autoComplete = $( ".selector" ).pinpad( "option", "autoComplete" );
// Setter
$( ".selector" ).pinpad( "option", "autoComplete", true );
Type: Object
Default:
{
"ui-pinpad": "ui-corner-all"
}
Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes
option.
Code examples:
Initialize the pinpad with the classes
option specified, changing the theme for the ui-pinpad
class:
$( ".selector" ).pinpad( {
classes: {
"ui-pinpad": "highlight"
}
} );
Get or set a property of the classes
option, after initialization, here reading and changing the theming for the ui-pinpad
class:
// Getter
var themeClass = $( ".selector" ).pinpad( "option", "classes.ui-pinpad" );
// Setter
$( ".selector" ).pinpad( "option", "classes.ui-pinpad", "highlight" );
Type: Boolean
Default: false
Specify whether the correct command of the pinpad widget must clear the input content. If set to true
, the correct command clears the pin pad input content, otherwise only the last inserted character is removed.
Code examples:
Initialize the pinpad with the clear
option specified:
$( ".selector" ).pinpad( {
clear: true
} );
Get or set the clear
option, after initialization:
// Getter
var clear = $( ".selector" ).pinpad( "option", "clear" );
// Setter
$( ".selector" ).pinpad( "option", "clear", true );
Type: Array
Default:
[
{
position: 0,
name: "cancel",
options: { icon: "ui-icon-close", iconPosition: "end" }
},
{
position: 1,
name: "correct",
options: { icon: "ui-icon-caret-1-w", iconPosition: "end" }
},
{
position: 2,
name: "confirm",
options: { icon: "ui-icon-radio-off", iconPosition: "end" }
}
]
Defines the command buttons of the pinpad. The pinpad widget can handle at most four commands. Each command is described by the following settiongs:
-
position
: The zero based position of the command. Possible values[0-3]
-
name
: The name of the command. -
options
: Additional options for the command. Use the options of the Button Widget
Code examples:
Initialize the pinpad with the commands
option specified:
$( ".selector" ).pinpad( {
commands: [
{
position: 0,
name: "cancel",
options: { icon: "ui-icon-close", iconPosition: "end" }
},
{
position: 1,
name: "correct",
options: { icon: "ui-icon-caret-1-w", iconPosition: "end" }
},
{
position: 2,
name: "confirm",
options: { icon: "ui-icon-radio-off", iconPosition: "end" }
}
]
} );
Get or set the commands
option, after initialization:
// Getter
var commands = $( ".selector" ).pinpad( "option", "commands" );
// Setter
$( ".selector" ).pinpad( "option", "commands", [
{
position: 0,
name: "cancel",
options: { icon: "ui-icon-close", iconPosition: "end" }
},
{
position: 1,
name: "correct",
options: { icon: "ui-icon-caret-1-w", iconPosition: "end" }
},
{
position: 2,
name: "confirm",
options: { icon: "ui-icon-radio-off", iconPosition: "end" }
}
] );
Type: Boolean
Default: false
Specify whether the pin pad input accept only digits. If set to true
, the pin pad input should not accept the decimal point.
Code examples:
Initialize the pinpad with the digitOnly
option specified:
$( ".selector" ).pinpad( {
digitOnly: true
} );
Get or set the digitOnly
option, after initialization:
// Getter
var digitOnly = $( ".selector" ).pinpad( "option", "digitOnly" );
// Setter
$( ".selector" ).pinpad( "option", "digitOnly", true );
Type: Object
Default:
{
decPoint: ".",
cancel: "Cancel",
correct: "Correct",
confirm: "Confirm"
}
Specify settings for localization.
Code examples:
Initialize the pinpad with the display
option specified:
$( ".selector" ).pinpad( {
display: {
decPoint: ",",
cancel: "Annuller",
correct: "Corriger",
confirm: "Confirmer"
}
} );
Get or set the display
option, after initialization:
// Getter
var display = $( ".selector" ).pinpad( "option", "display" );
// Setter
$( ".selector" ).pinpad( "option", "display", {
decPoint: ",",
cancel: "Annuller",
correct: "Corriger",
confirm: "Confirmer"
} );
Type: Boolean or Number or String or Object
Default: true
If and how to animate the hiding of the pinpad.
Multiple types supported:
-
Boolean: When set to
false
, no animation will be used and the pinpad will be hidden immediately. When set totrue
, the pinpad will fade out with the default duration and the default easing. - Number: The dialog will fade out with the specified duration and the default easing.
-
String: The pinpad will be hidden using the specified effect. The value can either be the name of a built-in jQuery animation method, such as
"slideUp"
, or the name of a jQuery UI effect, such as"fold"
. In either case the effect will be used with the default duration and the default easing. -
Object: If the value is an object, then
effect
,delay
,duration
, andeasing
properties may be provided. If theeffect
property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. Ifduration
oreasing
is omitted, then the default values will be used. Ifeffect
is omitted, then"fadeOut"
will be used. Ifdelay
is omitted, then no delay is used.
Code examples:
Initialize the pinpad with the hide
option specified:
$( ".selector" ).pinpad( {
hide: { effect: "explode", duration: 1000 }
} );
Get or set the hide
option, after initialization:
// Getter
var hide = $( ".selector" ).pinpad( "option", "hide" );
// Setter
$( ".selector" ).pinpad( "option", "hide", { effect: "explode", duration: 1000 } );
Type: Array
Default:
[
"1 2 3",
"4 5 6",
"7 8 9",
"{empty} 0 {dec}"
]
Defines the layout of the pinpad. The layout is described by an array of strings. Each string of the array represents a row of the numpad of the pinpad. The row must have three columns separated by one space. A column can only have one of the following values:
- A digit between 0 to 9
- The decimal point represented by the string
{dec}
- An empty key represented by the string
{empty}
Code examples:
Initialize the pinpad with the keys
option specified:
$( ".selector" ).pinpad( {
keys: [
"1 2 3",
"4 5 6",
"7 8 9",
"{empty} 0 {dec}"
]
} );
Get or set the keys
option, after initialization:
// Getter
var keys = $( ".selector" ).pinpad( "option", "keys" );
// Setter
$( ".selector" ).pinpad( "option", "keys", [
"1 2 3",
"4 5 6",
"7 8 9",
"{empty} 0 {dec}"
] );
Type: Integer
Default: 0
The minimum number of characters the user must insert to enable the confirm command.
Code examples:
Initialize the pinpad with the minLength
option specified:
$( ".selector" ).pinpad( {
minLength: 1
} );
Get or set the minLength
option, after initialization:
// Getter
var minLength = $( ".selector" ).pinpad( "option", "minLength" );
// Setter
$( ".selector" ).pinpad( "option", "minLength", 1 );
Type: Integer
Default: Number.POSITIVE_INFINITY
The maximum number of characters allowed by the pinpad input.
Code examples:
Initialize the pinpad with the maxLength
option specified:
$( ".selector" ).pinpad( {
maxLength: 5
} );
Get or set the maxLength
option, after initialization:
// Getter
var maxLength = $( ".selector" ).pinpad( "option", "maxLength" );
// Setter
$( ".selector" ).pinpad( "option", "maxLength", 5 );
Type: Boolean or Number or String or Object
Default: true
If and how to animate the showing of the pinpad.
Multiple types supported:
-
Boolean: When set to
false
, no animation will be used and the pinpad will be shown immediately. When set totrue
, the pinpad will fade in with the default duration and the default easing. - Number: The pinpad will fade in with the specified duration and the default easing.
-
String: The pinpad will be shown using the specified effect. The value can either be the name of a built-in jQuery animation method, such as
"slideDown"
, or the name of a jQuery UI effect, such as"fold"
. In either case the effect will be used with the default duration and the default easing. -
Object: If the value is an object, then
effect
,delay
,duration
, andeasing
properties may be provided. If theeffect
property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. Ifduration
oreasing
is omitted, then the default values will be used. Ifeffect
is omitted, then"fadeIn"
will be used. Ifdelay
is omitted, then no delay is used.
Code examples:
Initialize the pinpad with the show
option specified:
$( ".selector" ).pinpad( {
show: { effect: "blind", duration: 800 }
} );
Get or set the show
option, after initialization:
// Getter
var show = $( ".selector" ).pinpad( "option", "show" );
// Setter
$( ".selector" ).pinpad( "option", "show", { effect: "blind", duration: 800 } );
Type: String
Default: ""
The last confirmed value of the pinpad.
Code examples:
Initialize the pinpad with the value
option specified:
$( ".selector" ).pinpad( {
value: "10"
} );
Get or set the value
option, after initialization:
// Getter
var maxLength = $( ".selector" ).pinpad( "option", "value" );
// Setter
$( ".selector" ).pinpad( "option", "value", "10" );