New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/pickli-carousel-list-picker/
Pickli - Carousel List Picker
Download Demo
Pickli – Carousel Picker for li tags 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.
1. INCLUDE JS FILES 2. HTML Create a
element, with a
for each item. An item can contain any HTML content and need a value attribute.
Item 1
Item 2
Item 3
Item 4
3. JAVASCRIPT Call .pickli() on target
. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work! $(document).ready(function() $(‘ul’).pickli(); ); 4. 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
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) 5. 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) 6. 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) 7. 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 8. 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();
