jQuery UI Functional Test Suite

Say it in Smalltalk, Do it with jQuery

Icon Theming

For additional documentation and examples please visit the official web-site.

Demo

Smalltalk

JQIconsFunctionalTest>>renderContentOn: html
   html unorderedList
      class: 'icons';
      class: 'ui-widget';
      class: 'ui-helper-clearfix';
      script: (html jQuery new
         find: 'li';
         hover: (html jQuery new
            addClass: 'ui-state-hover')
         out: (html jQuery new
            removeClass: 'ui-state-hover'));
      with: [ self renderIconsOn: html ]

JQIconsFunctionalTest>>renderIconsOn: html
   self iconClasses do: [:each |
      html listItem
         title: each;
         class: 'ui-corner-all';
         class: 'ui-state-default';
         with: [
            html span
               class: 'ui-icon';
               class: each ] ]

Source

< = =>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
  < = =>
    < =></>
  </>
</>
< =>/*<![CDATA[*/$("#id24").find("li").hover(function(){$(this).addClass("ui-state-hover")},function(){$(this).removeClass("ui-state-hover")});/*]]>*/</>