Latest web development tutorials

tema do projeto jQuery UI

Estrutura do arquivo

Tema é uma forma específica de aumentar a sua facilidade de uso. Normalmente, a estrutura de diretórios arquivo é o seguinte:

  • themename/ - seu tópico deve estar totalmente contido em um nome de tópico separado chamado pasta.
  • themename/themename.css - Este é um ficheiro de base CSS. Independentemente de qual plug-ins, o arquivo deve ser referenciado em cada uma das páginas usando temas. O arquivo deve ser leve, inclui apenas os pontos principais.
  • themename/themename.pluginname.css - Cada widget-lhe apoio requer um arquivo CSS. Nome do plugin devem ser incluídos diretamente no nome do arquivo. Por exemplo, se você theming de abas (tab) plug-in, existem: themename.tabs.js .
  • themename/img.png - Seu tema pode conter imagens. Eles podem ser nomeados de acordo com a sua preferência, não há convenção de nomenclatura específica.

Para saber como a estrutura de arquivo de tema é completado casos, visite o tema básico do jQuery UI .

estilo personalizado

Escrever o estilo tema é muito simples, é por causa do tema flexibilidade.

Todos os tópicos devem ter uma classe básica CSS. A classe principal tópico permite que o usuário ative desativado. Seu formato de classe raiz deve ser .ui-themename . E usá-lo em um arquivo HTML da seguinte forma: 

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css" />
    <link rel="stylesheet" href="othertheme/othertheme.css" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

No exemplo acima, algumas coisas importantes aconteceram:

  • Nós também carregar dois temas ao documento.
  • Todas as máquinas de todo o conteúdo da página, é realizada de acordo com o tema da THEMENAME estilos.
  • No entanto, com a classe ui-othertheme de <div> e cada elemento (incluindo caixas de diálogo modal) são realizadas de acordo com o tema de estilos othertheme.

Se abrirmos themename.css arquivo para exibição, podemos ver o seguinte código: 

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

Por favor note, themename.css arquivo inclui apenas as informações de estilo global universal, informações de estilo para um elemento específico não está aqui para ser definido. Aqui o estilo de todos os tópicos são aplicáveis. Não se preocupe com um tópico vai ocupar vários arquivos - estes serão simplificadas para facilitar o processo de criação e download.