https://github.com/yannickebongue/jquery-ui-pinpad

An interactive Pinpad widget for point of sale (POS) or encrypted pinpad (EPP) simulation
https://github.com/yannickebongue/jquery-ui-pinpad

jquery jquery-plugin jquery-ui pinpad ui widget

Last synced: about 2 months ago
JSON representation

An interactive Pinpad widget for point of sale (POS) or encrypted pinpad (EPP) simulation

• Host: GitHub
• URL: https://github.com/yannickebongue/jquery-ui-pinpad
• Owner: yannickebongue
• License: mit
• Created: 2016-09-18T18:43:27.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-09-18T17:27:16.000Z (over 7 years ago)
• Last Synced: 2024-04-26T20:03:55.222Z (9 months ago)
• Topics: jquery, jquery-plugin, jquery-ui, pinpad, ui, widget
• Language: JavaScript
• Homepage:
• Size: 436 KB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# jQuery UI Pinpad

[![npm version][npm-badge]][npm] [![license][license-badge]][license]

The jQuery UI Pinpad is a jQuery UI widget to simulate on a web browser screen a Point Of Sale (POS) or an Encrypted PIN Pad (EPP). The aim of this widget is to display a numeric pad with optionally a decimal point key and the three basic commands Cancel, Clear and Confirm.

## Installation

Include the following Javascript and CSS:

```html

```

## Usage

### Default functionality

The jQuery UI Pinpad is tied to a standard form input field.

Insert an input text where to apply the PIN pad feature

```html

```

Create the pinpad widget for the input text

```javascript

$( "#pinpad" ).pinpad();

```

This will generate an interactive pinpad which will be initially hidden. The user just have to focus the input (click inside or use the tab key) to open the interactive pinpad in small overlay.

### Display inline

The jQuery UI Pinpad can also be displayed embedded in the page instead of an overlay.

Insert an input text where to apply the PIN pad feature

```html

```

Insert the div that will contain the interactive pinpad

```html



```


Create the pinpad widget for the input text

```javascript

$( "#pinpad" ).pinpad( {

    appendTo: "#container"

} );

```

This will generate an interactive pinpad inside element specified by the `appendTo` option to use during the pinpad widget initialization.

## License

Copyright (c) 2016 Yannick Ebongue

Released under the MIT License (see [LICENSE.txt](LICENSE.txt))

[npm]: https://www.npmjs.org/package/jquery-ui-pinpad

[npm-badge]: https://img.shields.io/npm/v/jquery-ui-pinpad.svg?style=flat-square

[license]: https://opensource.org/licenses/MIT

[license-badge]: https://img.shields.io/github/license/yannickebongue/jquery-ui-pinpad.svg?style=flat-square