Skip to content

Options

Jump to bottom
Yannick Ebongue edited this page Sep 10, 2017 · 8 revisions

appendTo

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" );

autoComplete

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 );

classes

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" );

clear

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 );

commands

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" }
    }
] );

digitOnly

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 );

display

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"
} );

hide

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 to true, 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, and easing properties may be provided. If the effect 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. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeOut" will be used. If delay 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 } );

keys

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}"
] );

minLength

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 );

maxLength

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 );

show

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 to true, 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, and easing properties may be provided. If the effect 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. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeIn" will be used. If delay 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 } );

value

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" );
Clone this wiki locally