glowOrderedList jQuery Plugin

Ben Tiedt — Fri, 08 Mar 2024 17:51:47 GMT

Current Revision posted to API Documentation by Ben Tiedt on 03/08/2024 17:51:47

jQuery.fn.glowOrderedList

This plugin presents a sortable list which supports ordering, adding, and removing items

Usage

Initiate an orderable list of items

$('selector').glowOrderedList(options)

where selector contains select element(s) and options is an optional object argument

Options

width: width of the ordered list
- default: 200
height: height of the ordered list
- default: 300
itemsHtml: array of html element strings to render as items in the ordered list
- default: []
draggableOrderedLists:
- default: null

Events

glowOrderedListItemSelected: triggered when an item is selected
glowOrderedListItemRemoved: triggered when an item is removed
glowOrderedListItemMoved: triggered when an item is moved
glowOrderedListItemAdded: triggered when an item is addeds

Methods

getIndexByPosition

Returns the index of item by an absolute x, y pixel position

var x = 100, y = 200;
$('selector').glowOrderedList('getIndexByPosition', x, y)

highlight

Boolean value which sets whether the items are highlighted

$('selector').glowOrderedList('getIndexByPosition', true)

addDraggedItem

Adds a dragged item at a given index

var index = 2;
var item = $('selector').glowOrderedList('createItem', {value: 'value', text: 'text', html: 'html', orderable: true, selectable: true});
$('selector').glowOrderedList('addDraggedItem', item, index, event);

selectedIndex

Returns the current selected index

var index = $('selector').glowOrderedList('selectedIndex');

moveTop

Moves the currently selected item to the beginning of the list

$('selector').glowOrderedList('moveTop');

moveUp

Moves the currently selected item up by one position

$('selector').glowOrderedList('moveUp');

moveDown

Moves the currently selected item down by one position

$('selector').glowOrderedList('moveDown');

moveBottom

Moves the currently selected item to the end of the list

$('selector').glowOrderedList('moveBottom');

resize

Resizes the ordered list to a given pixel width and height

var x = 400;
var y = 300;
$('selector').glowOrderedList('resize', x, y);

disabled

Gets and/or sets whether the ordered list is disabled

var isDisabled = $('selector').glowOrderedList('disabled');
$('selector').glowOrderedList('disabled', true);

select

Selects an item by index

var index = 4;
$('selector').glowOrderedList('select', index);

add

Add a new ordered list item

var item = $('selector').glowOrderedList('createItem', {value: 'value', text: 'text', html: 'html', orderable: true, selectable: true});
$('selector').glowOrderedList('add', item);

remove

Removes an ordered list item

$('selector').glowOrderedList('remove', item);

clear

Removes all items

$('selector').glowOrderedList('clear');

insert

Add a new ordered list item at a specific index

var item = $('selector').glowOrderedList('createItem', {value: 'value', text: 'text', html: 'html', orderable: true, selectable: true});
$('selector').glowOrderedList('insert', item, 4);

getByIndex

Returns an item at a specific index

var item = $('selector').glowOrderedList('getByIndex', 4);

count

Returns the count of items

var count = $('selector').glowOrderedList('count');

createItem

Creates a new ordered list item suitable for adding/inserting

var item = $('selector').glowOrderedList('createItem', {value: 'value', text: 'text', html: 'html', orderable: true, selectable: true});