$.singleSelectable()

by rosenfeld

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="selectable">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

CSS

.selectable > .ui-selected { background: #95BCF2; }
.selectable > * { margin: 0.5em; border-bottom: solid 1px black; cursor: pointer; }

CoffeeScript

$.widget "matterhorn.singleSelectable",
  options: { selected: null }
  _create: ->
    self = this
    @element.addClass 'ui-selectable'
    @element.delegate '> *', 'click', ->
      self.element.find('> *').removeClass('ui-selected')
      $(this).addClass('ui-selected')
      self.options.selected?(this)

$('.selectable').singleSelectable(selected: (selected)-> console.log selected).append '<div>Item 4</div>'