Imagemap
O que é?Conjunto de componentes visuais para Jav ...slidercalendárioPermite implementar comportamentos compl ...drag&dropordenaçãoetc...Baseado no jQuery100% não intrusivo$"write less, do more"Extende os efeitos padrão do jQueryshowhide...100% customizável Via CSSVia editor de temasSemelhante a outros frameworksAprenda um framework, entenda todosYahoo! User Interfaceótimos componentesscript.aculo.usótimos efeitos de animaçãoMooToolsOOPDojoSuporteIBMSunetcMuito "grande"ExtJsNão OOPFuncionalidadesInteraçõesDraggableElemento que pode ser arrastado$(".arrasteMe").draggable(); ExemplosMarcar elemento como "arrastável"Elemento arrastável dentro de um contain ...DroppableElemento que pode ser foco de um compone ...$("#lixeira").droppable({ drop: function ...ExemplosArrastar um elemento dentro de outroDescobrir qual é o elemento que foi arra ...Eliminar um elemento ao ser arrastado em ...ResizableElemento que pode ser redimensionado$(".redimensionavel").resizable(); ExemplosMarcar um elemento como "redimensionável ...Marcar um elemento como "redimensionável ...SelectableLista que pode ser selecionada$(".selecionavel").selectable(); ExemplosMarcar um elemento como "selecionável"Indicar os itens que foram selecionadosSortableLista que pode ser reordenada$(".ordenavel").sortable(); ExemplosMarcar um elemento como "reordenável"Marcar mais de um elemento como "reorden ...Permitir a conexão entre duas listas ord ...ComponentesAccordion$("#accordion").accordion(); ExemplosCriar um accordionDatepicker$("#data").datepicker(); ExemplosAssociar um DatePicker a uma caixa de te ...DatePicker em Português do BrasilDialog$("#dialogo").dialog(); <div id="dialogo" title="Sou uma janela ...ExemplosCriar uma janelaProgressbar$("#barradeprogresso").progressbar({ val ...ExemplosCriar uma ProgressBarCriar uma ProgressBar temporizadaSlider$("#slider").slider(); ExemplosCriar um sliderExibir o valor selecionado em um sliderCriar slider com intervalo inicial e fin ...TabsEfeitosExtendem jQuery padrãoMétodosShowHide...TiposBounceExplodePuff...Documentação e FerramentasGuia de usoConstrutor de temaInstalaçãoFazer Download em:http://jqueryui.com/downloadSelecionar o tema desejadoOUConstruir um novo temaTheme Rollerhttp://jqueryui.com/themeroller/Selecionar quais componentes serão usado ...Verificar o tamanho final do códigoRealizar o download!TesteCriar uma nova página HTMLFazer o link para o CSS do tema escolhid ...<link type="text/css" href="css/themenam ...Fazer o link para o script do jQuery<script type="text/javascript" src="js/j ...Fazer o link para o script do jQuery UI<script type="text/javascript" src="js/j ...Para testar o draggableCriar um div qualquer<div class="arrasteMe">Ei, eu posso ser ...Criar o código JavaScript de teste<script type="text/javascript"> $(docume ...
hide
hidefull-1
O que é?
hide

Conjunto de componentes visuais para JavaScript

leaf
slider
leaf
calendário
hide

Permite implementar comportamentos complexos em elementos HTML já existentes

leaf
drag&drop
leaf
ordenação
leaf
etc...
hide

Baseado no jQuery

leaf
100% não intrusivo
leaf
$
leaf
"write less, do more"
hide

Extende os efeitos padrão do jQuery

leaf
show
leaf
hide
leaf
...
hideksmiletris

100% customizável 

leaf
Via CSS
leaf
Via editor de temas User Link
hideksmiletris

Semelhante a outros frameworks

leaf
Aprenda um framework, entenda todos
hide
Yahoo! User Interface User Link
leaf
ótimos componentes
hide
script.aculo.us User Link
leaf
ótimos efeitos de animação
hide
MooTools User Link

Apesar de MooTools ser mais OOP...

leaf
OOP
hide
Dojo User Link
hide
Suporte
leaf
IBM
leaf
Sun
leaf
etc
leaf
Muito "grande"
leaf
ExtJs User Link
leafsmily_bad
Não OOP
hidefull-2
Funcionalidades
hide
Interações
hide
Draggable User Link
leaf
Elemento que pode ser arrastado
leaf
$(".arrasteMe").draggable();
hidewizard
Exemplos
leaf
Marcar elemento como "arrastável" User Link
leaf
Elemento arrastável dentro de um container User Link
hide
Droppable User Link
leaf
Elemento que pode ser foco de um componente Draggable
leaf
$("#lixeira").droppable({
                drop: function() { alert("Oi!"); }
            });
hidewizard
Exemplos
leaf
Arrastar um elemento dentro de outro User Link
leaf
Descobrir qual é o elemento que foi arrastado dentro do outro User Link
leaf
Eliminar um elemento ao ser arrastado em uma "lixeira" User Link
hide
Resizable User Link
leaf
Elemento que pode ser redimensionado
leaf
$(".redimensionavel").resizable();
hidewizard
Exemplos
leaf
Marcar um elemento como "redimensionável" User Link
leaf
Marcar um elemento como "redimensionável" e acompanhar a sua posição futura User Link
hide
Selectable User Link
leaf
Lista que pode ser selecionada
leaf
$(".selecionavel").selectable();
hidewizard
Exemplos
leaf
Marcar um elemento como "selecionável" User Link
leaf
Indicar os itens que foram selecionados User Link
hide
Sortable User Link
leaf
Lista que pode ser reordenada
leaf
$(".ordenavel").sortable();
hidewizard
Exemplos
leaf
Marcar um elemento como "reordenável" User Link
leaf
Marcar mais de um elemento como "reordenável" User Link
leaf
Permitir a conexão entre duas listas ordenáveis User Link
hide
Componentes
hide
Accordion User Link
leaf
leaf
$("#accordion").accordion();
hidewizard
Exemplos
leaf
Criar um accordion User Link
hide
Datepicker User Link
leaf
leaf
$("#data").datepicker();
hidewizard
Exemplos
leaf
Associar um DatePicker a uma caixa de texto User Link
leaf
DatePicker em Português do Brasil User Link
hide
Dialog User Link
leaf
leaf
$("#dialogo").dialog();
leaf
<div id="dialogo" title="Sou uma janela de diálogo">Sou o conteúdo da janela de diálogo!</div>
hidewizard
Exemplos
leaf
Criar uma janela User Link
hide
Progressbar User Link
leaf
leaf
$("#barradeprogresso").progressbar({ value: 50 });
hidewizard
Exemplos
leaf
Criar uma ProgressBar User Link
leaf
Criar uma ProgressBar temporizada User Link
hide
Slider User Link
leaf
leaf
$("#slider").slider();
hidewizard
Exemplos
leaf
Criar um slider User Link
leaf
Exibir o valor selecionado em um slider User Link
leaf
Criar slider com intervalo inicial e final User Link
leaf
Tabs User Link
hide
Efeitos
leaf
Extendem jQuery padrão
hidelist
Métodos
leaf
Show User Link
leaf
Hide User Link
leaf
...
hidelist
Tipos
leaf
Bounce User Link
leaf
Explode User Link
leaf
Puff User Link
leaf
...
hide
Documentação e Ferramentas User Link
leaf
Guia de uso User Link
leaf
Construtor de tema User Link
hide
Instalação
hidefull-1
Fazer Download em:
leaf
http://jqueryui.com/download User Link
hidefull-2
Selecionar o tema desejado
Arrow Link
leaf
leaf
OU
Arrow Link
hidefull-2
Construir um novo tema
hide
Theme Roller User Link
leaf
http://jqueryui.com/themeroller/
leaf
hidefull-3
Selecionar quais componentes serão usados
leaf
hidefull-4
Verificar o tamanho final do código
leaf
leaffull-5
Realizar o download!
hide
Teste
leaf
leaffull-1
Criar uma nova página HTML
hidefull-2
Fazer o link para o CSS do tema escolhido
leaf
<link type="text/css" href="css/themename/jquery-ui-1.7.custom.css" rel="Stylesheet" />
hidefull-3
Fazer o link para o script do jQuery
leaf
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
hidefull-4
Fazer o link para o script do jQuery UI
leaf
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
hidefull-5
Para testar o draggable
hide
Criar um div qualquer
leaf
<div class="arrasteMe">Ei, eu posso ser arrastado!</div>
hide
Criar o código JavaScript de teste
leaf
 <script type="text/javascript">
        $(document).ready(function() {
            // Transforma o div 'arrasteMe' em um elemento que pode ser arrastado!
            $(".arrasteMe").draggable();
        });
    </script>