Noções básicas de layout ui css jquery e jquery

Os fabricantes de jQuery e jQuery UI CSS fazer um bom trabalho de documentar os internos de sua biblioteca. De uma perspectiva de CSS, o material encontrado em jqueryui.com

diz-lhe sobre os estilos usados ​​para criar a saída que você já viu em vários lugares. Aqui está uma boa ideia de como a página inicial da documentação é colocado para fora.

Uma das primeiras coisas que você observa sobre esta página é que os desenvolvedores recomendam que você usa ThemeRoller para fazer suas alterações sempre que possível. No entanto, existem muitos casos em que ThemeRoller simplesmente não vai fazer o trabalho, então você precisa para fazer as modificações de uma forma mais tradicional.

As aulas são divididas em dois arquivos com um número de estilos dentro de cada arquivo:

  • jquery.ui.core.css: Contém todos os estilos que afetam elementos estruturais de alguma forma. Esses incluem

  • ajudantes de layout: Determina o layout geral de objetos onscreen- torna possível interagir com TECHNOLOGIES- assistiva e fornece um método para redefinir o layout conforme necessário.

  • pistas de interação: Define quando um objeto é desativado.

  • ícones: Especifica o estado do ícone.

  • sobreposições: Determina o tamanho ea posição de sobreposições.

    Video: javascript & jQuery Tutorial for Beginners - 6 of 9 - jQuery CSS Manipulation

  • jquery.ui.theme.css: Define os estilos que afetam elementos temáticos, tais como cores, fontes e origens. Esses incluem

  • recipientes de componentes: Especificar a aparência do conteúdo dentro de vários recipientes de objectos. Os recipientes normalmente incluem o objecto geral, os cabeçalhos de objectos, e de dados de objectos (especificado como o conteúdo dentro dos estilos).

    Video: Популярные Video – jQuery и Сайт

  • estados de interação: Determinar o aparecimento de um objecto quando a estados específicos de interacção ocorrer. Os quatro estados de interação são: default (quando nada está acontecendo com o objeto), em foco (quando o cursor do mouse está sobre o objeto), ativo (quando o usuário está realmente executar uma tarefa com o objeto) e foco (quando o usuário selecionou o objeto, mas não está fazendo nada com ele).

  • pistas de interação: Determinar a aparência de um objeto que está em um estado particular para ajudar o usuário a entender o status do objeto.

    As pistas de interação são: destaque (o objeto ou o conteúdo é selecionado para a interação) - erro (ocorreu um erro com um objeto) - texto de erro (ocorreu um erro com o conteúdo, geralmente texto, dentro de um objeto) - desativada (o objeto ou conteúdo são deficientes) - primário (um objecto é o objecto principal ou de primeiro nível numa hierarquia de objectos) - e secundário (um objecto é o objecto secundária ou de segundo nível numa hierarquia de objectos).



  • ícones: Definir o estado e o posicionamento dos ícones utilizados com um objecto. O estado e de posicionamento são controladas separadamente. As informações de estado determina se o ícone é parte de um cabeçalho ou o conteúdo. Além disso, determina a formatação com base no status do ícone:, pairar, Ativo, destaque, erro e texto de erro padrão. Ícones são posicionados individualmente, com base no nome do ícone, tais como .ui-ícone quilates-1-n.

    Os ícones são realmente definidos no formato de bloco, como parte da seção de estados e imagens da parte ícones do arquivo.

    Você pode ver as imagens de ícone específico de widget no Aqui.

    As imagens de ícone padrão aparecem Aqui.

    Você pode encontrar as imagens de ícone ativos Aqui e aqueles utilizados para destacar Aqui.

    Video: jQuery UI - Aula 1 - Introdução e Noções Básicas

    Quando um aplicativo apresenta um erro, você vê a lista de ícones Aqui.

  • Raio de canto: Cria cantos arredondados sobre os vários objectos.

  • sobreposições: Determina a formatação do conteúdo dentro de sobreposições ea formatação da sombra sobreposição (de modo que você pode ver que há um objeto atrás do objeto na frente).

  • A fim de entender melhor como as coisas funcionam, é uma boa idéia de olhar para os arquivos reais. Você pode encontrar o primeiro arquivo em um local como https://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.core.css onde https://code.jquery.com/ui/ é a URL base, 1.9.2 é a versão do jQuery ou jQuery UI em questão, e os temas / base / jquery.ui.theme.css é o local do arquivo específico.

    Para obter uma cópia do CSS para uma versão diferente do jQuery ou jQuery UI, simplesmente mudar a parte número da versão do URL. O segundo arquivo é encontrado em um local, como https://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.theme.css. Isto é o que você vai ver quando se olha para jquery.ui.core.css.

    Visualizando os arquivos fornece detalhes sobre como os vários estilos são construídos, para que possa fazer as modificações de forma segura. Além disso, os arquivos contêm frequentemente notas. Por exemplo, quando você olha para jquery.ui.theme.css, você descobre que um dos estilos é realmente obsoleto (não mais suportada), como esta nota diz-lhe:

    / * Ui-ícone buscar-primeiro é obsoleto, use ui-icon-procuram-iniciar em vez * /

    O estilo é comentada para que você não pode usá-lo. No entanto, a nota ainda é importante porque lhe diz qual o estilo para usar em vez.


    Publicações relacionadas