All of the demo's ive been able to find follow this pattern:
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
..
</ol>
I've tried changing the ID of the list to something unique but it doesn't seem to work. Is it a requirement that the selectable element have and id of "selectable" and if so, how can you make more than one list selectable?
It is not a requirement to use an id. In fact, you aren't required to use html lists either.
The following example uses a <div>
as the container and <span>
elements as the selectable items.
<div class="group">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<script>
$(".group").selectable({ filter: 'span' });
</script>
The next example uses a data attribute selector [data-album]
to target multiple containers. Each of these <p>
elements will be converted into a separate selectable with their child <img>
elements as selectees.
<p data-album="Vacation">
<img src="..." />
<img src="..." />
<img src="..." />
</p>
<p data-album="Birthdays">
<img src="..." />
<img src="..." />
<img src="..." />
</p>
<script>
$("[data-album]").selectable({ filter: 'img' });
</script>