Parts Selector

A design pattern, and jQuery plugin for choosing items from a list.

Demos

• Simple example
• Real world example

Use

Include jQuery, parts-selector.css and parts-selector.js.

Markup:

<div class="parts-selector" id="my-parts-selector">   <div class="parts list">     <h3 class="list-heading">Available items</h3>     <ul>       <li>         Nut       </li>       <li>         Bolt       </li>     </ul>   </div>   <div class="controls">     <a class="moveto selected"><span class="icon"></span><span class="text">Add</span></a>     <a class="moveto parts"><span class="icon"></span><span class="text">Remove</span></a>   </div>   <div class="selected list">     <h3 class="list-heading">Chosen items</h3>     <ul>     </ul>   </div> </div>

Initialise:

$( "#my-parts-selector" ).partsSelector();

Options

• added: Message displayed when an item is moved to "selected" list. (Default: Item added)
• removed: Message displayed when an item is moved to "parts" list. (Default: Item removed)
• noneSelected: Message displayed when controls are clicked, but nothing is selected. (Default: Click on items below to select them)
• itemButtons: Boolean, to enable inline buttons. (Default: false)
• callback: Function called after an item is moved. (See below)

Example

$( "#my-parts-selector" ).partsSelector({   itemButtons: true,   callback: function() {     // do something   } });

Dev

There are a few dependencies, so do npm install.

grunt will watch for changes to your SCSS and JS files.