item-quantity-dropdown jQuery plugin
Dropdown menu to select items with quantities
Dependencies:
- jquery: ^3.0.0
Installation
Direct Download
- Download the script here and include it as shown below
- Download the stylesheet here and include it as shown below
··· ···
Yarn + Bower
yarn add item-quantity-dropdown# or bower install item-quantity-dropdown --save
Then import/require it:
;;;;
Usage
Markup
Item 1 A short description Item 2 A short description Item 3 A short description
JavaScript
;
Config options
Dropdown options using data attributes
...
Item specific using data attributes
···
Globals on initialization
// max total items maxItems: Infinity // min total items minItems: 0 // text to show on the dropdown override data-selection-text attribute selectionText: 'item' // text to show for multiple items textPlural: 'items' // optionally can use setSelectionText function to override selectionText { /* return string */ } // buttons to increment/decrement controls: position: 'right' displayCls: 'iqdropdown-item-display' controlsCls: 'iqdropdown-item-controls' counterCls: 'counter' // fires when an item quantity changes {} // return false to prevent an item decrement {} // return false to prevent an item increment {}
Selection text
Default value.
` item` // if total items is 1` items` // if total items is not 1
Data attribute data-selection-text
override default value.
Property selectionText
override data attribute
optionsselectionText = 'item';optionstextPlural = 'items';
Function setSelectionText
override selectionText
property.
options
Arguments:
- itemCount - keys - items data-id; values - items count
- totalCount - total items count
Return selection text .
Demo
A demo is included here
Contributing
Running
# install dependencies yarn# start the project yarn start
Now open up http://localhost:8080
Build
# install dependencies yarn# make a css and js bundle yarn build
The build script outputs the following (minified) files:
- item-quantity-dropdown.min.js
- item-quantity-dropdown.min.css