Source

jqui / test / index.haml

!!! 5
%html
  %head
    %title jQUI Test
    %link{:rel=>:stylesheet, :href=>"../css/jqui.css", :type=>"text/css"}
    %script{:src=>"../js/jquery-1.4.2.min.js"}
    %script{:src=>"../js/jqui.js"}
    
  %body
    %div.tab-demo
      %h2 Tab Demo
      %ul{:role=>"tabbed-browser"}
        - 1.upto(5) do |i|
          %li
            %a{:href=>"tab#{i}.html"} Tab #{i}
        %div{:role=>"tab-content"} Tab content goes here.

      %h3 HTML5 Tab bar
      %section{:role=>"tabbed-browser"}
        %header{:role=>"tab-bar"}
          - 1.upto(5) do |i|
            %li
              %a{:href=>"tab#{i}.html"} Tab #{i}
              
        %section{:role=>"tab-content"}
          Tab content goes here
      
    %div.button-demo
      %h2 Button Demo
      %h3 Buttons
      %button Button
      %button{:disabled=>:disabled} Disabled Button
      %button.default Default Button
      %br
      %div.button Div Button
      %div.button.disabled Disabled Div Button
      %div.button.default Default Div Button
      %br
      %input{:type=>:button, :value=>"Input Button"}
      %input{:type=>:button, :value=>"Disabled Input Button", :disabled=>:disabled}
      %input.default{:type=>:button, :value=>"Default Input Button"}
      %input{:type=>:submit, :value=>"Input Submit"}
      %input{:type=>:submit, :value=>"Disabled Input Submit", :disabled=>:disabled}
      
      %h3 Icon buttons
      %button{"left-icon"=>:action} Left Icon
      %button{"left-icon"=>:action, "right-icon"=>:close} Left & Right Icons
      
      %h3 Button set
      %div.button-set
        %input#radio1{:type=>:radio, :name=>"button-set"}
        %label{:for=>:radio1} Choice 1
        %input#radio2{:type=>:radio, :name=>"button-set", :checked=>:checked}
        %label{:for=>:radio2} Choice 2
        %input#radio3{:type=>:radio, :name=>"button-set"}
        %label{:for=>:radio3} Choice 3
        %input#radio4{:type=>:radio, :name=>"button-set", :disabled=>:disabled}
        %label{:for=>:radio4} Disabled
      
      %h3 Radio buttons
      %input#radio-a{:type=>:radio, :name=>"radio"}
      %input#radio-b{:type=>:radio, :name=>"radio", :checked=>:checked}
      %input#radio-c{:type=>:radio, :name=>"radio"}
      
      %h3 Disabled radio buttons
      %input{:type=>:radio, :name=>"radio-dis", :disabled=>:disabled}
      %input{:type=>:radio, :name=>"radio-dis", :disabled=>:disabled, :checked=>:checked}
      
      %h3 Checkboxes
      %input{:type=>:checkbox}
      %input{:type=>:checkbox, :checked=>:checked}
      
      %h3 Disabled checkboxes
      %input{:type=>:checkbox, :disabled=>:disabled}
      %input{:type=>:checkbox, :checked=>:checked, :disabled=>:disabled}
  
  %div.dialog-demo
    %h2 Dialog demo
    %h3 Modal dialog
    %button{:role=>"dialog-source", :href=>"dialog.html", :modal=>:true} Open Modal Dialog
    
    %h3 Non-modal dialog
    %button{:role=>"dialog-source", :href=>"dialog.html"} Open Non Modal Dialog
    
  %div.html5-demo
    %h2 HTML5 demo
    %h3 Number fields
    %input{:type=>:range, :style=>"width:350px", :value=>"26"}
    %br
    %input{:type=>:range, :style=>"width:350px", :value=>"26", :disabled=>:disabled}
    %br
    %input{:type=>:number, :min=>0, :max=>21, :value=>11}
  
    %h3 Placeholder
    %input{:type=>:text, :placeholder=>"Placeholder text"}
    
    %h3 Email, URL
    %input{:type=>:email, :placeholder=>"Enter email address"}
    %br
    %input{:type=>:url, :placeholder=>"Enter website address"}
    
    %h3 Datepicker
    %h2 Datepicker fields
    %input{:type=>:date}
    input type='date'
    %br
    %input{:type=>:month}
    input type='month'
    %br
    %input{:type=>:week}
    input type='week'
    %br
    %input{:type=>:time}
    input type='time'
    %br
    %input{:type=>:datetime}
    input type='datetime'
    %br
    %input{:type=>"datetime-local"}
    input type='datetime-local'
    %br
    %h2 Datepicker inline

        
    %h3 Search
    %input{:type=>:search, :placeholder=>:Google}
    
    %h3 Colour picker
    %input{:type=>:color}
  
  %div.scrollbar-demo
    %h2 Scrollbars
    %div
      %p Text goes here
  
  %div.status-demo
    %h2 Highlight / Error / Success
    %p.error
      %b Error:
      needs more cowbell.
    %p.success
      %b Success:
      your data was saved.
    %p.notice
      %b Did you know:
      that bananas are seedless, and thus likely to go extinct.
    %p.help
      %b Help:
      These boxes contain useful help.
  
  %div.progress-bar-demo
    %h2 Progress bar
    %div.progress{:max=>100, :value=>22}
      %div
    
    %progress{:max=>100, :value=>22}
    
    %script
      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 5 + "%";})}, 1000);
      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 3 + "%";})}, 700);
      setInterval(function(){$('.progress div').css('width', function(i, w){ if (parseInt(w) > 110) return 0; return parseInt(w) + 1 + "%";})}, 1200);
      
    %h2 Spinner
    %div.spinner
  
  %div.resizeable-demo
    %h2 Resizeable demo
    %div{:role=>:resizeable, :left=>:true, :right=>:true}
      %div.handle.left
      %div.handle.right
  
  %div.disclosure-demo
    %h2 Disclosure demo
    %div{:role=>:disclosure}
      %div.header Disclose
      %div.content
        %p
          Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.