Installation

No additional libraries required

Using dist

You can include the compiled ooima.min.js from ./dist directory and use it within your application as

<script src="ooima.min.js"></script>

Using CDN

<script src="https://cdn.jsdelivr.net/gh/gokuney/ooima-js@master/dist/ooima.min.js" async></script>

Usage

The bare basic setup requires passing just the element selector for the UL tag.

HTML

<ul id="ooima-list">
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
  <li> Item 4 </li>
  <li> Item 5 </li>  
</ul>

Javascript

Ensure that the code is executed on body load/DOM ready

const ooimaApp = new ooima('#ooima-list');

VIEW DEMO

Options

The ooima constructor accepts an optional seconds parameter as JSON of settings.

const ooimaApp = new ooima('#ooima-list', 
      { optionKey: optionValue });

Option	Type	Description
listClassSelector	String	Class name that gets appended to the child "li" items. Default: ooima-list-item
hotkey	Number	KeyCode that enables multi-select. Default 17 (Control Key)
selectedBG	String	Background color when an item is selected. Default: #00ff00
animation	String	Name of the animation that is used for touch based multi-select. Default: ''. It accepts all animation values from animate.css
listStyle	JSON Object	Additional styling that gets appended to the list items. Default: `{}`

Getting selected items

You can use the ooima instance to interact with the plugin instance. As in the examples above, we’ll use ooimaApp instance.

Getting list values

Following example will return an array of list values (Eg. ["Item 1", "Item 2"])

ooimaApp.choosenItems()

If you want to get the array of list DOM objects, pass true to the choosenItems as:

ooimaApp.choosenItems(true)

Above will return [ "<li> Item 1 </li>", "<li> Item 2 </li>" ]

ooimaApp.selectedItems()