UI do jQuery e ThemeRoller

• Pode 1, 2024

Se você deseja uma maneira fácil e rápida de projetar a interface do usuário para um site ou aplicativo da Web e também incluir o jQuery, consulte a interface do usuário do jQuery. Lá você encontrará um pacote combinado de funções CSS e jQuery prontos para uso que facilita a adição desses recursos ao seu novo projeto.

Vamos dar uma volta pelo site. No link Demonstrações e Documentos, você encontrará uma lista dos plug-ins interativos do jQuery, como arrastar e soltar, guias e transições. Para cada plug-in, há uma demonstração, documentação e código de recortar e colar de amostra para teste.

Se você quiser pegar os arquivos chave na mão, clique no link Temas para o jQuery ThemeRoller. O css padrão é um tema branco e cinza básico. Você pode clicar no botão de download e usar como está, mas também há uma Galeria de temas coloridos para você começar. Na área da Galeria, existem várias miniaturas de temas. Basta clicar no que você gosta. Você pode baixar esse tema como está clicando na guia Rolar o seu próprio e, em seguida, no botão Baixar tema. Mas a diversão começa quando você começa a twittar o tema com o mecanismo ThemeRoller. Existem 11 opções que você pode personalizar. A maioria das opções permite alterar a textura e a cor do plano de fundo, a cor da borda e as cores do texto e do ícone.

Você tem várias opções para twittar o tema.

• Configurações de fonte: Você pode alterar a família, o peso e o tamanho da fonte.
  
  
• Raio do canto: você pode alterar o raio do canto. Cada tema tem um estilo de guia arredondado padrão, mas aqui você pode alterar o tamanho do canto ou configurá-lo como zero para uma guia quadrada. (As guias são criadas no CSS3, que não é suportado pelo IE no momento.)
  
  
• Cabeçalho / barra de ferramentas: você pode definir os valores de cores da área atrás das guias e das áreas do cabeçalho, como no plug-in do calendário.
  
  
• Conteúdo: aqui você pode definir as cores da área de conteúdo principal. Você pode obter um design muito diferente, dependendo da sua escolha de borda ou sem borda.
  
  
• Estado padrão clicável: controla a aparência padrão (inativa) das guias e botões.
  
  
• Estado de passagem do mouse clicável: Esses controles são para a aparência das guias e botões no estado de navegação do mouse.
  
  
• Estado ativo clicável: controla a aparência da guia e do botão da página ativa.
  
  
• Destaque: as cores de fundo, borda, texto e ícone das áreas destacadas.
  
  
• Erro: cores de plano de fundo, borda, texto e ícone para mensagens de erro.
  
  
• Tela modal para sobreposições: controla a cor e a textura do plano de fundo.
  
  
• Sombras projetadas: Controla a opacidade, espessura, deslocamento e cantos das sombras para obter um efeito de sombra projetada.
  
  

Ao baixar o jquery-ui-x.x.xx.custom.zip e compactar o pacote, você verá três pastas (css, pacote de desenvolvimento e js) e um arquivo index.html. O arquivo index.html é uma demonstração dos plugins criados com o seu tema. Você deseja colocar as pastas css e js no diretório principal e copiar / colar o código do arquivo index.html no código do seu site no local em que deseja que os plugins apareçam.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Instruções De Vídeo: Live Tabs: Using jQuery UI Theme Roller (Pode 2024).