Como adicionar temas à sua Elements AJAX para HTML5 e CSS3 Programação
A ferramenta tema jQuery faz com que seja muito fácil de decorar seus elementos através CSS3. A grande coisa sobre temas jQuery é que eles são semantic- ou seja, você especificar a finalidade geral do elemento e, em seguida, deixar que o tema aplicar o CSS específico apropriado. Você pode usar o aplicativo ThemeRoller facilmente criar novos temas ou modificar os já existentes.
Muitos dos elementos da interface do jQuery automaticamente usar o tema CSS atual. Claro, você também pode aplicá-los a qualquer um dos seus próprios elementos para obter uma aparência consistente.
Os temas são simplesmente classes CSS. Para aplicar um tema CSS a um elemento, você pode simplesmente adicionar uma classe especial para o objeto.
Por exemplo, você pode fazer um olhar parágrafo como a definição atual do ui-widget adicionando este código a ele:
Meu div agora se parece com um widget
Claro, acrescentando aulas no HTML viola um dos princípios do design semântica, por isso é melhor para fazer o trabalho em javascript com jQuery:
funcionar themify () {// adicionar CSS com base em tema à elements$("div").addClass("ui-widget").addClass("ui-widget-content").addClass("ui-corner-all")-$(":header").addClass("ui-widget-header").addClass("ui-corner-all")-$("#resizeMe").append(' ') -}o themify () função adiciona todos os temas para os elementos da página, aplicando o tema muito jQuery para ele.
Identificar todas as divs com jQuery.
Adicione o ui-widget classe para todos os divs.
Esta classe é definida no tema. Todos os temas do jQuery tem essa classe definida, mas as especificidades variam por tema. Desta forma, você pode trocar um tema para alterar a aparência eo código ainda funciona. o ui-widget classe define um elemento como um widget.
Adicionar ui-widget-content também.
Os divs precisa ter duas classes ligados, portanto, alguns programadores usam encadeamento para especificar que divs também devem ser membros da classe. este ui-widget-conteúdo classe que indica o conteúdo do widget deve ser decorados.
Especifique cantos arredondados.
cantos arredondados se tornaram um padrão do design visual web 2.0. Este efeito é extremamente fácil de conseguir com jQuery - basta adicionar o UI-canto-all classe para qualquer elemento que você quer ter cantos arredondados.
cantos arredondados usar CSS3, que ainda não é suportado por todos os navegadores. Sua página não vai mostrar os cantos arredondados em navegadores mais antigos, mas a página ainda irá funcionar bem o contrário.
Faça todas as manchetes estão em conformidade com o estilo do widget-header.
Os temas jQuery incluem um estilo agradável manchete. Você pode facilmente fazer todas as tags de cabeçalho (H1 a H6) siga este tema. Use o :cabeçalho filtro para identificar todas as rubricas, e aplicar o ui-widget-cabeçalho e UI-canto-all aulas para estes cabeçalhos.
O pacote jQuery UI suporta um número de aulas interessantes.
| Classe | Usado em | Descrição |
|---|---|---|
| ui-widget | recipiente exterior de Widget | Faz elemento de olhar como um widget. |
| ui-widget-header | elemento de cabeçalho | Aplica-se a aparência título distintivo. |
| ui-widget-content | Ferramenta | Aplica-se o estilo de conteúdo widget para elemento e crianças. |
| -Ui-estado padrão | elementos clicáveis | padrão Displays (não clicados) estado. |
| ui-state-pairo | elementos clicáveis | Displays pairar Estado. |
| ui-state-foco | elementos clicáveis | Displays concentrar estado quando elemento tem o foco do teclado. |
| -Ui-estado ativo | elementos clicáveis | Exibe estado ativo quando o mouse é clicado elemento. |
| ui-state-destaque | Qualquer widget ou elemento | Especifica que um elemento é destacada no momento. |
| ui-state-erro | Qualquer widget ou elemento | Especifica um elemento que contém um erro ou warningmessage. |
| texto ui-state-erro | elemento de texto | Permite realce de erros sem alterar outros elementos (usado principalmente na validação de formulário). |
| -Ui-estado desativado | Qualquer widget ou elemento | Demonstra que um widget está desativado. |
| -Ui-canto de tudo, ui-canto-tl (etc) | Qualquer widget ou elemento | Adiciona tamanho atual canto a um elemento. Especifique specificcorners com tl, tr, bl, br, superior, inferior, esquerda, direita. |
| ui-widget-sombra | qualquer Widget | Aplica efeito de sombra a um widget. |
Algumas outras classes são definidas em temas de interface do usuário, mas estes são os mais comumente usados. Consulte a documentação em jQuery UI para mais detalhes.
Como adicionar um ícone
Observe o pequeno começo que aparece dentro do elemento. Este elemento é um exemplo de um ícone jQuery UI. Todos os temas do jQuery apoiar um conjunto padrão de ícones, que são pequenas imagens (16px quadrados). O jogo do ícone inclui ícones padrão para setas, bem como imagens comumente utilizados em menus e barras de ferramentas.
Alguns elementos jQuery UI usar ícones automaticamente, mas você também pode adicioná-los diretamente. Para usar um ícone em seus programas, siga estes passos:
Incluir um tema jQuery UI.
Os ícones são parte do pacote do tema. Incluem a folha de estilo CSS que corresponde com o tema.
Certifique-se de que as imagens são acessíveis.
Quando você baixar um pacote do tema, inclui um diretório de imagens. As imagens incluídas neste diretório são usados para criar fundos personalizados, bem como ícones. O arquivo CSS espera um diretório chamado para estar no mesmo diretório que o CSS.
Este diretório deve conter várias imagens que começam com UI-ícones. Estas imagens conter todos os ícones necessárias. Se os arquivos de imagem ícone não estão disponíveis, os ícones não serão exibidos.
Criar um espaço onde você deseja que o ícone apareça.
Coloque um elemento span vazio onde quer que você deseja que o ícone apareça no HTML. Você pode colocar a extensão diretamente no HTML, se quiser, ou você pode adicioná-lo através do jQuery.
Fixe oUI-ícone classe para o intervalo.
Isto diz jQuery para tratar a extensão como um ícone. O conteúdo do intervalo serão escondidos, eo intervalo será redimensionada para manter imagem de ícone quadrado por 16 pixels.
Anexar uma segunda classe para identificar o ícone específico.
Olhe para a página ThemeRoller para ver os ícones disponíveis. Quando você passa o mouse sobre um ícone nesta página, você pode ver o nome da classe associada com o ícone.
Você pode adicionar o código diretamente no seu HTML como este:
Este é o meu texto
Ou, você pode usar jQuery para adicionar o código apropriado para o seu elemento:
. $ ( "# MyPara") anexa ( '') -