JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

selectable

Interaction — Allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements..

The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

Examples

Default functionality

<style>
	#feedback { font-size: 1.4em; }
	#_Default .ui-selecting { background: #FECA40; }
	#_Default .ui-selected { background: #F39814; color: white; }
	#_Default { list-style-type: none; margin: 0; padding: 0; width: 40%; }
	#_Default li { margin: 6px; padding: 0.4em; font-size: 1em; height: 18px; }
</style>

<ol id="_Default" runat="server" ClientIDMode="Static">
	<li class="ui-widget-content">Item 1</li>
	<li class="ui-widget-content">Item 2</li>
	<li class="ui-widget-content">Item 3</li>
	<li class="ui-widget-content">Item 4</li>
	<li class="ui-widget-content">Item 5</li>
	<li class="ui-widget-content">Item 6</li>
	<li class="ui-widget-content">Item 7</li>
</ol>
<juice:selectable TargetControlID="_Default" runat="server" />

<p><em>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. Click in the whitespace between elements to remove all selections.</em></p>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. Click in the whitespace between elements to remove all selections.

Properties

Events

All events are currently of the type EventHandler. The "sender" parameter is a reference to the control, and should be cast appropriately to access the widget's properties and methods.