Fork me on GitHub

Mesour Selection

Selection component

Packagist

  • jQuery 2.0+ Download
  • Twitter bootstrap 3.2+ Download
  • Font Awesome (in default, can change) 4.5+ Download
  • mesour.components.min.js
  • mesour.selection.min.js

Installation

Suggests

  • None

Demo

Initializing

$selection = new \Mesour\UI\Selection('test');

$items = array(
    1 => 'active',
    2 => 'inactive',
    3 => 'inactive',
    4 => 'active',
    5 => 'inactive',
);

$selection->setItems($items);

$selection->addStatus('active', 'Active');

$selection->addStatus('inactive', 'Inactive');

echo $selection->render();

foreach($items as $id => $status) {
    echo $selection->createItem($id);
    echo " ID: $id, Status: $status";
}

Using JS API

Getting values

mesour.selection.getValues('test')
  • Example output: Object { 1: true, 2: false, 3: true, 4: false, 5: false } (Keys from given items)

Getting items for selection with name "test"

mesour.selection.getItems('test'); //returns array with html nodes

Getting main checkbox HTML node

mesour.selection.getMainCheckbox('test');

Demo


     ID: 1, Status: active

     ID: 2, Status: inactive

     ID: 3, Status: inactive

     ID: 4, Status: active

     ID: 5, Status: inactive