Latest web development tutorials

tema jQuery UI

Todos jQuery UI plug-in permite aos desenvolvedores integrar widgets UI para a aparência de seus sites ou aplicativos. Cada widget é definido por estilos CSS, e contém duas informações de estilo: o padrão de framework jQuery UI CSS estilos e plug-in estilo específico.

framework jQuery UI CSS fornece uma representação semântica da classe para indicar o papel de uma pequena elementos componentes, como o título, conteúdo ou área clicável. Estes são consistentes em todas as peças pequenas, e uma guia clicável (guia), acordeão (acordeão) ou o botão (Button) têm a mesma ui-state-default , classe, para mostrar que eles são clicáveis um. Quando o usuário passa no topo desses elementos, a classe se torna ui-state-hover , em seguida, esses elementos se tornam eleito em ui-state-active . A classe de consistência torna a aparência da consistência do desempenho de todos os elementos ou componentes que têm um papel similar no estado interacção.

Frame do estilo CSS é encapsulado em um arquivo separado, chamado ui.theme.css . Este arquivo através ThemeRoller aplicativo para modificar. estilo de moldura contém só afetam a aparência ea sensação da propriedade, desde que as cores, imagens de fundo, ícones e assim por diante. Então, essas são de estilo "seguro", não vai afetar a função plug-in. Esta separação significa que os desenvolvedores podem usar em theme.css modificar os arquivos de cor e imagem para criar uma aparência personalizada e sentir. Dado que o futuro de plug-ins ou correções de bugs estarão disponíveis, e estes podem ser usados ​​sem modificação pelo tema.

Desde a tampa estilo de quadro só olhar e sentir, por isso precisa de incluir plug-in específico folhas de estilo, estas folhas de estilo incluem todos os widgets extras permitir que as regras estilo estrutura funcionais, tais como tamanho, preenchimento, margens, posicionamento, float. Cada widget de estilo themes/base pasta e com o "jquery.ui.accordion.css" plug-in nome, como. Esses padrões devem ser roteiros cuidadosamente editada porque eles fornecem um quadro que abrange estilos juntos.

Nós encorajamos todos os desenvolvedores criem plug-in jQuery, framework jQuery UI CSS faz com que seja mais fácil para os usuários finais para usar temas personalizados e plug-ins.

theming

Aqui estão três do widget jQuery UI relacionado com o processo geral:

  • Baixar tópicos ThemeRoller: primeiro criar um tema é usar ThemeRoller para gerar e transferir um tema. Esta aplicação irá criar um novo ui.theme.css arquivo e contém todas as imagens de fundo necessárias e ícones do sprite images da pasta. Este método é o primeiro a criar e manter o tema do caminho, mas as opções que oferece costume ThemeRoller limitado.
  • Modificar o arquivo CSS: Para melhorar a aparência dos controles, você pode escolher o tema padrão (Suavidade) começa, ou de um tópico gerado pelo ThemeRoller Iniciar e, em seguida, ajuste ui.theme.css arquivo, um plug-in separado ou qualquer folha de estilo. Por exemplo, você pode facilmente ajustar o ângulo do raio de todos os botões é diferente dos valores de outros componentes de interface do usuário, ou usar um ícone personalizado para alterar o assistente caminho. Os estilos variam através de um pouco, você ainda pode usar mais de um tema em uma UI. Para facilitar a manutenção, a alteração proposta única ui.theme.css arquivos e imagens.
  • Re-escrever CSS personalizado: Para maximizar o controle do olhar e sentir, você pode começar a escrever novamente em cada widget e CSS, sem o uso de classes do framework plug-in ou uma folha de estilo específica. Se você quer olhar e sensação pode ser alcançado modificando o CSS ou usando tags altamente personalizado, então você pode usar este método. Esta abordagem requer profundo conhecimento em termos de estilo CSS, e exigem atualizações manuais para um futuro plug-ins.

Use ThemeRoller, jQuery UI quadro CSS, bem como tema design personalizado