JQuery-UI - Exemplos de Uso

Os exemplos abaixo foram retirados direto da página JQUERY-UI

Este parágrafo e o logo abaixo estão dentro de uma div com a classe class="ui-widget".

Esta página demonstra os widgets e o tema que você selecionou no Download Builder. Certifique-se de que os está usando com uma versão compatível do jQuery.

Componentes do JQUery-UI:

Accordion

Primeira aba

Conteúdo dentro da primeira aba.

Segunda aba

Conteúdo dentro da segunda aba.

Terceira aba

Conteúdo dentro da terceira aba.

Autocomplete

O autocomplete busca o texto dentro de uma lista que fazemos.
Na lista desta página temos as seguintes palavras :
ActionScript,AppleScript,Asp,BASIC,C,C++,Clojure,COBOL,ColdFusion,Erlang,Fortran,Groovy, Haskell,Java,JavaScript,Lisp,Perl,PHP,Python,Ruby,Scala,Scheme

Button

Checkboxradio

Controlgroup

Aluguel de Veículos

Tabs

Conteúdo da primeira Aba.
Conteúdo da segunda Aba.
Conteúdo da terceira Aba.

Dialog

Este é o conteúdo do diálogo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Overlay and Shadow Classes

Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.

Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.

Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.

Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ícones do Framework

Slider

No html temos o input type range mas não consegue definir um limite mínimo e um máximo.

Seleção de data - Datepicker

Uma grande falha deste componente é que não dá pra setar nativamente o idioma com o do browser.
Você vai precisar anexar um script que altera o componente para o idioma desejado.

Progressbar

Selectmenu

Spinner

Menu

Tooltip

Este componente dá uma dica quando passamos o mouse sobre ele e pode ser anexado a qualquer elemento. Quando você passa o mouse sobre o elemento, o atributo title é exibido em uma pequena caixa ao lado do elemento, como uma dica de ferramenta nativa.

Destaques - Highlight / Error

Ola! Exemplo do estilo ui-state-highlight.


Alerta: Exemplo do estilo de erro ui-state-error.