Latest web development tutorials

jQuery UI CSS quadro API

framework jQuery UI CSS

jQuery UI inclui um quadro CSS poderoso, a fim de criar personalizados widgets e projeto jQuery. Quadro contém as classes de interface de usuário comuns necessários, e pode ser usado manutenção jQuery UI ThemeRoller. Ao criar seus próprios componentes de interface do usuário usando o framework jQuery UI CSS. Você precisa usar Convenção Sharemark, a fim de ligar a integração da comunidade de código.

classes de estrutura

São os seguintes estilos de classe CSS são fixados de acordo com o estruturada, ou se é tematizáveis (cores, fontes, fundos, etc.), são definidos no ui.core.css e ui.theme.css dois arquivos. Essas classes são projetados para elementos de interface do usuário, a fim de assegurar a coerência visual durante todo o aplicativo, por jQuery UI ThemeRoller de componentes theming.

Ajudante de layout

  • .ui-helper-hidden : os elementos do pedido display: none .
  • .ui-helper-hidden-accessible : os elementos do aplicativo para acessar o oculto (posicionamento absoluto por página).
  • .ui-helper-reset : redefinir Os elementos básicos do estilo de interface do usuário. Redefinir elementos, tais como: padding , margin , text-decoration , Lista de estilo, e assim por diante.
  • .ui-helper-clearfix : aplicação das propriedades de embalagem flutuador elemento pai.
  • .ui-helper-zfix : para <iframe> elemento aplica iframe "fix" CSS.

recipiente widget

  • .ui-widget : Classe do lado de fora do recipiente para aplicar todos os elementos. aplicativo de widget para o tipo eo tamanho, mas também sobre a mesma fonte a partir dos elementos formulário de candidatura e tamanho da fonte 1em para lidar com a sucessão navegador do Windows.
  • .ui-widget-header : Título do aplicativo recipiente Class. Do elemento eo texto das suas crianças, links, ícones Aplicar Título recipiente estilo.
  • .ui-widget-content : conteúdo classe de aplicações de contentores. Do elemento eo texto das suas crianças, links, ícones conteúdo do aplicativo estilo recipiente. (Pode ser aplicada ao título elemento pai ou irmãos)

estado interativo

  • .ui-state-default : Clique no elemento de botão pode ser aplicado Class. Do elemento eo texto das suas crianças, links, a aplicação ícones "default clicável" container estilo.
  • .ui-state-hover : Rato suspensa quando aplicado em um elemento botão clicável quando na classe. Do elemento eo texto das suas crianças, links, a aplicação ícones "hover clicável" style recipiente.
  • .ui-state-focus : Classe aplicativo quando o foco do teclado em um elemento botão clicável. Do elemento eo texto das suas crianças, links, a aplicação ícones "hover clicável" style recipiente.
  • .ui-state-active : Classe aplicativo quando um clique do mouse pode clicar no elemento de botão. Do elemento eo texto das suas crianças, links, ícones aplicação de estilo "ativo clicável" container.

Sugestões prompt interativo

  • .ui-state-highlight : para destacar ou selecionar os aplicativos elemento de classe. Do elemento eo texto das suas crianças, links, ícones aplicação "destaque" estilo recipiente.
  • .ui-state-error : Erro recipiente mensagem de aplicações elemento de classe. Do elemento eo texto das suas crianças, links, ícones aplicação "erro" estilo recipiente.
  • .ui-state-error-text : não só contra a cor da classe de texto de erro de aplicação de fundo. Ele pode ser usado para formar as etiquetas a ser icon aplicação erro sub-cor.
  • .ui-state-disabled : para desativar elementos de interface do usuário aplicar uma opacidade dim. Isso significa que os elementos de um modelo já definido para adicionar estilo extra.
  • .ui-priority-primary : Classe de aplicações primeiro botão prioridade. Aplicação de texto em negrito.
  • .ui-priority-secondary : Classe de aplicações segundo botão de prioridade. Aplicação de elementos de texto peso normal aplicar uma leve transparência.

ícone

Status e imagem

  • .ui-icon : Classe básica do elemento ícone do aplicativo. Defina o tamanho de 16px quadrados, escondido dentro do texto do sprite de status "conteúdo" definir a imagem de fundo. Nota: .ui-icon , classe terá um sprite imagem de fundo diferente com base em seu contêiner-pai. Por exemplo, ui-state-default recipiente ui-icon elemento de acordo ui-state-default ícone coloração cor.

Tipo ícone

Em um comunicado .ui-icon depois da aula, então você pode declarar um segundo de velocidade do tipo de ícone de classe. Em circunstâncias normais, o ícone seguinte classe a sintaxe .ui-icon-{icon type}-{icon sub description}-{direction} .

Por exemplo, um ícone de triângulo apontando para a direita, como se segue: .ui-icon-triangle-1-e

jQuery UI ThemeRoller em sua coluna de pré-visualização fornece uma gama completa de ícone do quadro CSS. Passe o mouse sobre o ícone para ver o nome da classe.

outros recursos visuais

assistente de raio

  • .ui-corner-tl : canto superior esquerdo do raio elemento de aplicação.
  • .ui-corner-tr : no canto superior direito do raio elemento de aplicação.
  • .ui-corner-bl : canto inferior esquerdo do raio elemento de aplicação.
  • .ui-corner-br : no canto inferior direito do raio elemento de aplicação.
  • .ui-corner-top : canto superior esquerdo do raio elemento de aplicação.
  • .ui-corner-bottom : os elementos do canto inferior esquerdo do raio aplicação.
  • .ui-corner-right : elementos da diagonal da direita superior e inferior do raio de aplicação.
  • .ui-corner-left : elementos da diagonal da esquerda superior e inferior do raio de aplicação.
  • .ui-corner-all : todos os quatro cantos do raio de aplicação do elemento.

Capa e Sombras

  • .ui-widget-overlay : para cobrir 100% da largura da tela ea altura da aplicação, e definir a cor de fundo / textura e opacidade da tela.
  • .ui-widget-shadow : Classe de cobertura de aplicação, defina a opacidade, o deslocamento / Esquerda Offset, e Shadow "espessura". A espessura é de todos os lados nas margens set shadow (preenchimento) foram aplicadas. Deslocamento, definindo a margem (margem) e da margem esquerda (margem) foram aplicados (pode ser positiva, que pode ser negativa).