bootstrap-popover-picker
Generic jQuery plugin template for building pickers using Bootstrap popovers,
fully customizable with a powerful base API, including jQuery.UI position plugin.
View demos
How to use the plugin without inputs
Instantiation
You can call the plugin in several ways:
$('.my').picker();
$('.my').picker({ });
$('.my').data('picker').pickerProperty;
$('.my').data('picker').pickerMethod('methodArg1', 'methodArg2' );
$.picker.batch('.my', 'pickerMethod', 'methodArg1', 'methodArg2' ); ->
Options
These are the default options
{
title: false,
selected: false,
defaultValue: false,
placement: 'bottom',
collision: 'none',
animation: true,
hideOnSelect: false,
showFooter: false,
searchInFooter: false,
mustAccept: false,
selectedCustomClass: 'bg-primary',
items: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'],
itemProperty: null,
input: 'input',
component: '.input-group-addon',
container: false,
updateComponentOnChange: true,
pickerItemClass: "picker-item",
itemValueSelector: "i",
templates: {
popover: '<div class="picker-popover popover"><div class="arrow"></div>' +
'<div class="popover-title"></div><div class="popover-content"></div></div>',
footer: '<div class="popover-footer"></div>',
buttons: '<button class="picker-btn picker-btn-cancel btn btn-default btn-sm">Cancel</button>' +
' <button class="picker-btn picker-btn-accept btn btn-primary btn-sm">Accept</button>',
search: '<input type="search" class="form-control picker-search" placeholder="Type to filter" />',
picker: '<div class="picker"><div class="picker-items"></div></div>',
pickerItem: '<div class="picker-item"><i></i></div>',
}
}
Triggered Events
All of them exposes the plugin instance through event.pickerInstance
In order of call:
- pickerCreate
- pickerCreated
- pickerShow
- pickerShown
- pickerSelect (also exposes event.pickerItem and event.pickerValue)
- pickerUpdate
- pickerInvalid (also exposes event.pickerValue)
- pickerSetValue (also exposes event.pickerValue)
- pickerSetSourceValue (also exposes event.pickerValue)
- pickerUpdated
- pickerSelected (also exposes event.pickerItem and event.pickerValue)
- pickerHide
- pickerHidden
- pickerDestroy
- pickerDestroyed
Popover placement extensions
This plugin comes with more placement options than the original Bootstrap Popover.
Here are all the possibilities in detail:
1 2 3 4 5
G 6
F 7
E 8
D C B A 9
0. inline (no placement, display as inline-block)
1. topLeftCorner
2. topLeft
3. top (center)
4. topRight
5. topRightCorner
6. rightTop
7. right (center)
8. rightBottom
9. bottomRightCorner
A. bottomRight
B. bottom (center)
C. bottomLeft
D. bottomLeftCorner
E. leftBottom
F. left (center)
G. leftTop
Note: The position plugin is embedded with the picker plugin, but uses a different
namespace: $.fn.pos
, for avoiding other plugin issues.
To-Do