Como adicionar temas aos seus elementos ajax para html5 e css3 programação

A ferramenta tema jQuery torna bastante fácil de decorar seus elementos através de 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 usar automaticamente 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 para 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 de design semântica, por isso é melhor para fazer o trabalho em javascript com jQuery:

Video: HTML5 template Element Tutorial javascript Programming

 funcionar themify () {// adicionar CSS com base em tema para os elementos $ ("div") .addClass ("ui-widget") .addClass ("ui-widget-content") .addClass ("ui-canto-tudo") - $ (":cabeçalho") .addClass ("ui-widget-header") .addClass ("ui-canto-tudo") - $ ("#resizeMe").acrescentar(``)-}

o themify () função adiciona todos os temas para os elementos da página, aplicando o tema muito jQuery para ele.

1. Identificar todas as divs com jQuery.

2. Adicione o ui-widget classe para todos os divs.

   Esta classe é definida no tema. Todos os temas do jQuery tem esta 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.

3. Adicionar ui-widget-content também.

   Video: How To Make A Website Start To Finish - Responsive HTML5/CSS3, Image Slider & Drop Down Menu

   Os divs precisa ter duas classes ligados, por isso alguns programadores usam encadeamento para especificar que divs também devem ser membros da classe. este ui-widget-conteúdo classe indica que o conteúdo do widget deve ser estilizado.

4. Especificar os cantos arredondados.

   Video: javascript and AJAX tutorial: Adding CSS3 animations | lynda.com

   cantos arredondados tornaram-se um padrão de design visual web 2.0. Esse efeito é extremamente fácil de conseguir com jQuery - basta adicionar o UI-canto-tudo 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 mostrará cantos arredondados em navegadores mais antigos, mas a página ainda vai funcionar bem o contrário.

   Video: Vídeo background responsivo • HTML5/CSS3

5. 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-tudo aulas para estes cabeçalhos.

O pacote jQuery UI suporta um número de aulas interessantes.

Classe	Usado em	Descrição
ui-widget	recipiente externo de Widget	Faz elemento parecer um widget.
ui-widget-header	rubrica elemento	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-pairar	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 que um elemento contém um erro ou aviso mensagem.
texto ui-state-erro	elemento de texto	Permite realce de erros sem alterar outros elementos (Utilizado principalmente na forma de validação).
-Ui-estado desativado	Qualquer widget ou elemento	Demonstra que um widget está atualmente desativado.
-Ui-canto tudo, ui-esquina-tl (etc)	Qualquer widget ou elemento	Adiciona tamanho atual canto a um elemento. especifique específica com cantos tl, tr, bl, l, 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 atual documentação do 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 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:

1. 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.

2. Certifique-se de que as imagens são acessíveis.

   Quando você baixar um pacote do tema, que 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 do CSS.

   Este diretório deve conter várias imagens que começam com UI-ícones. Estas imagens contêm todos os ícones necessários. Se os arquivos de imagem ícone não estão disponíveis, os ícones não serão exibidos.

3. Criar um espaço onde você deseja que o ícone a aparecer.

   Coloque um elemento span vazio onde quer que você deseja que o ícone para aparecer no HTML. Você pode colocar a extensão diretamente no HTML, se quiser, ou você pode adicioná-lo através do jQuery.

4. Fixe oUI-ícone classe para o span.

   Isto diz jQuery para tratar o tempo como um ícone. O conteúdo do espaço serão escondidos, eo intervalo será redimensionada para manter imagem ícone quadrado de 16 pixels.

5. 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 desta 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").acrescentar(``)-