Pickli

jQuery Plug-in - Carousel Picker for li tags

See exemples at http://molosc.github.io/pickli

Features

• Carousel Picker for list.
• Horizontal or vertical orientation.
• Align on left / center / right or top / medium / bottom.
• Custom class for selected and unselected items.
• Responsive with onResize event.
• Custom data key.
• Call data with ajax.
• Interactivity with custom events and cursor.
• Animated change with custom transitions.

Written by: R. Romain - http://molosc.com

License

Released under the MIT license - http://opensource.org/licenses/MIT

Let's get on with it!

Installation

Step 1: Link required files

First and most important, the jQuery library needs to be included. Next, download the package from this site and link the Pickli Javascript file.

<!-- jQuery library --> <script src="http://code.jquery.com/jquery.min.js"></script>  <!-- Pickli Javascript file --> <script src="jquery.pickli.min.js"></script>

Step 2: Create HTML markup

Create a <ul> element, with a <li> for each item. An item can contain any HTML content and need a value attribute.

<ul>   <li value="1">Item 1</li>   <li value="2">Item 2</li>   <li value="3">Item 3</li>   <li value="4">Item 4</li> </ul>

Step 3: Call the Pickli

Call .pickli() on target <ul>. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){   $('ul').pickli(); });

That's all !

But you can configure Pickli a lot. See exemples at http://molosc.github.io/pickli

Configuration options

Data

default The default selected value.

default: null options: string 

index The selected index.

default: -1 options: integer 

value The selected value.

default: null options: string 

labelKey The key used for the label in data collection.

default: 'label' options: string 

valueKey The key used for the value in data collection.

default: 'value' options: string 

autoErase If true, empty the slider when data is updated. If false, merge data with current collection.

default: false options: boolean (true / false) 

data A collection of data (label / value) to fill the slider.

default: [] options: array ([{label:"Item 1",value:1}, {label:"Item 2",value:2}, ...]) 

remote Options for ajax data load. (See the Remote configuration options)

default: Remote options options: object (Remote options) 

Aspect

orientation Display the slider horizontaly or verticaly.

default: 'horizontal' options: string ('horizontal' / 'vertical') 

size If orientation == 'horizontal', size will affect width wrapper property. If orientation == 'vertical', size will affect height wrapper property.

default: '100%' options: string (width or height css value) 

selectAlign Alignment of selected item. If orientation == 'vertical', use 'left' for top, 'center' for middle and 'right' for bottom.

default: 'center' options: string ('left' / 'center' / 'right') 

unselectAlign Alignment when no item is selected. If orientation == 'vertical', use 'left' for top, 'center' for middle and 'right' for bottom.

default: 'center' options: string ('left' / 'center' / 'right') 

wrapperClass A class name used for the <div> wrapper.

default: 'pickli' options: string 

selectClass Class name of the selected item.

default: 'active' options: string 

unselectClass Class name of the unselected items.

default: '' options: string 

autoResize Refresh the position slider on window resize.

default: false options: boolean (true / false) 

Interactivity

interaction Mouse or Touch Events for select an item.

default: 'click' options: string 

transition How animate the slider when the selection change. If false, desactive animations. (See the Transition configuration options)

default: Transition options options: object (Transition options) 

cursor The cursor used on the slider.

default: 'pointer' options: string (A CSS cursor value) 

loop If true, clicking "Next" while on the last item will transition to the first item and vice-versa.

default: false options: boolean (true / false) 

Callbacks

onChange Executes immediately after a item is selected (or unselected)

default: null options: function(value){ // your code here } arguments:   value: value of the selected item (string) 

onFill Executes immediately after the data collection change.

default: null options: function(data){ // your code here } arguments:   data: current data collection (array) 

Remote options

Used for call a json data file or service with ajax.

How use it ?

You can load data when you initialize the slider:

slider = $('#target').pickli({   remote: {     url:'http://...',     ...   } });

Or latter with the public method:

slider.remote('http://...'); // or slider.remote({   url: 'http://...',   type: 'GET',   ... });

Options

url The url used for load JSON data.

default: '' options: string 

type The type of request to make

default: 'GET' options: string ('POST' / 'GET') 

data Data to be sent to the server. (see the jQuery.ajax() documentation)

default: null options: string or object or array 

crossDomain If you wish to force a crossDomain request on the same domain.

default: false options: boolean 

loader A jQuery object witch will be occulted or visible when data are loaded. loader.show() when dispatch onRemoteStart, loader.hide() when dispatch onRemoteSuccess or onRemoteError.

default: null options: jQuery object 

Callbacks

onRemoteStart Executes immediately before the data ajax call.

default: null options: function(){ // your code here } 

onRemoteSuccess Executes on jQuery ajax success event.

default: null options: function(data){ // your code here } arguments:   data: loaded data collection (array) 

onRemoteError Executes on jQuery ajax error event.

default: null options: function(data){ // your code here } arguments:   e: error (object) 

Transition options

If you set the transition to false, it will desactivate the animation.

Options:

duration A string or number determining how long the animation will run. (see jQuery.animate documentation)

default: 'normal' options: integer or string ('slow' / 'normal' / 'fast') 

easing A string indicating which easing function to use for the transition. (see jQuery.animate documentation or http://api.jqueryui.com/easings/ for the list of easing)

default: 'swing' options: string ('linear' / 'swing' / 'easeInQuad' / 'easeOutCubic' / 'easeInOutQuart' / ...) 

Callbacks

onTransitionStart Executes on jQuery animate start event.

default: null options: function(){ // your code here } 

onTransitionComplete Executes on jQuery animate complete event.

default: null options: function(data){ // your code here } 

Public Getter / Setter methods

Each option have a getter / setter public function. (except for the orientation)

Public methods

next Select next item. Do nothing if there is not item selected.

example: slider = $('#target').pickli(); slider.next(); 

prev Select previous item. Do nothing if there is not item selected.

example: slider = $('#target').pickli(); slider.prev(); 

first Select first item.

example: slider = $('#target').pickli(); slider.first(); 

last Select last item.

example: slider = $('#target').pickli(); slider.last(); 

jump Jump to an item adding o substracting a value to the current index. Do nothing if there is not item selected.

example: slider = $('#target').pickli(); slider.jump(-3); 

refresh Refresh the slider with the current selection.

example: slider = $('#target').pickli(); slider.refresh(); 

For the next versions

• Add Getter / Setter for the orientation mode
• Add options by data tag attributes

Changelog

Version 0.0.2

• Add comments and documentation

Version 0.0.1

• Add vertical feature

Version 0.0.0

• First commit