Fundamentos do 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 CSS, o material encontrado na 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 de documentação é colocado para fora.
Uma das primeiras coisas que você observa nesta 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 classes 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 dos objectos onscreen- torna possível interagir com TECHNOLOGIES- de apoio e fornece um método para repor a disposição conforme necessário.
pistas de interação: Define quando um objeto é desativado.
ícones: Especifica o estado ícone.
sobreposições: Determina o tamanho ea posição de sobreposições.
jquery.ui.theme.css: Define todos os estilos que afetam elementos temáticos, tais como cores, fontes e origens. Esses incluem
recipientes de componentes: Especifique a aparência do conteúdo dentro de vários recipientes de objeto. Os recipientes normalmente incluem o objeto global, os cabeçalhos de objetos e dados de objeto (especificado como conteúdo dentro dos estilos).
estados de interação: Determinar a aparência de um objeto quando 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 determinado estado 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 (um erro ocorreu com um objeto) - texto de erro (um erro ocorreu com o conteúdo, geralmente texto, dentro de um objeto) - disabled (o objeto ou conteúdo estão desativados) - primário (um objeto é o objeto primário ou de primeiro nível em uma hierarquia de objetos) - e secundário (um objeto é o objeto secundário ou de segundo nível em uma hierarquia de objetos).
ícones: Definir o estado e posicionamento dos ícones utilizados com um objeto. O estado e posicionamento são controlados separadamente. As informações de estado determina se o ícone é parte de um cabeçalho ou o conteúdo. Além disso, ele determina a formatação com base no status do ícone:, pairo, Ativo, destaque, erro e texto de erro padrão. Os ícones são posicionados individualmente com base no nome do ícone, como .ui-icon quilates-1-n.
Os ícones são realmente definido 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 na Aqui.
As imagens de ícone padrão aparecem Aqui.
Você pode encontrar as imagens de ícone ativos Aqui e aqueles utilizados para destacar Aqui.
Quando um aplicativo apresenta um erro, você verá a lista de ícones Aqui.
Raio de canto: Cria cantos arredondados sobre os vários objetos.
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 ficheiros frequentemente contêm notas. Por exemplo, quando você olha para jquery.ui.theme.css, você descobre que um dos estilos é realmente obsoleta (não mais suportada), como esta nota diz-lhe:
/ * Ui-icon-procuram-primeira está obsoleta, use ui-icon-procuram-start vez * /
O estilo é comentada para que você não pode usá-lo. No entanto, a nota ainda é importante porque lhe diz o estilo a usar em seu lugar.