jQuery UI Tabs - Basic Setup (Haml,Coffeescript)

gistfile1.txt

Tested on: jquery-ui-1.8.16

To set up, need:
1) an HTML div enclosing the tabs (as a ul) and pages, 
2) Javascript initialization function $("..").tabs({options})

HTML:
- consists of enclosing div, a %ul which has links to pages, and tab pages as divs
- link hrefs correspond to tab page ids

(the html in haml)

#tabs
  %ul
    %li
      %a{:href=>"#someTab1"}
        %span Some Tab Page
    %li
      %a{:href=>"#someTab2"}
        %span Another Tab Page
  #someTab1
    I am the first tab page
  #someTab2
    I am the other tab page

Coffeescript:

  #most simple setup
  $( "#tabs" ).tabs()

  or

  #with custom settings
  $( "#tabs" ).tabs
    #i.e. do something on show tab
    show: (event, ui) ->
      #optional if want to do something based on tab selection
      whichSelected = $("#tabs").tabs('option', 'selected')
      #do something


Troubleshooting
1. Make sure jquery and jquery ui javascript files and jquery ui css files installed
2. Make sure all ids are correct
3. Make sure all your list item links are correctly formatted
   %li
      %a


Reference:
http://jqueryui.com/demos/tabs/