Projetando sua página Cerca de um jQuery UI Theme

O lançamento do jQuery UI 1,5 trouxe consigo a Themeroller, que é uma maneira rápida e fácil de personalizar e fazer o download de um conjunto de jQuery "widgets" para uso em uma página da web.

Basta escolher um dos temas pré-construídas, ou ajustar as configurações ao seu gosto e baixar o tema. Seu download irá incluir todos os arquivos necessários para todos estes widgets para o trabalho, e um arquivo de demonstração com todos eles em uma página.

Na verdade, esses pré-construídos tema poderia servir como um ponto de partida para um novo design. Vamos manipular um download do tema em um site usando os acordes básicos e Accordian.

Limpeza da casa

Nós vamos usar o widget guias para a nossa área de conteúdo principal do site, eo acordeão para a barra lateral. Um bom primeiro passo seria fazer com que sua pasta organizada e, em seguida, começar a remover código extra do HTML e CSS.

Comecei a re-nomear o arquivo de index.html demo.html eo arquivo CSS para style.css.

Então eu removi todos os CSS a partir do arquivo CSS que tinha a ver com nada além das guias e do acordeão. Existe um monte de "lixo" extra no arquivo CSS padrão, incluindo restaurações em toneladas de elementos que realmente não precisa que se você usar um reset global. Limpar a casa à vontade aqui.

Então faça a mesma coisa no arquivo HTML, removendo todos os códigos que não é a estrutura básica ou em parte, as guias ou acordeão. Aqui está o que a minha página parece que depois de limpeza:

Estrutura

As guias fazem o bom senso para usar como uma área de conteúdo principal de um site. Cada um dos separadores pode ser essencialmente uma área diferente do site. Primeiro de tudo, vamos quebrar todo o site em um div com um ID de página-wrap, para que possamos centro-la e definir uma largura fixa. Então, uma vez que ambas as guias e acordeão já estão na embalagem div, podemos orientá-las com CSS, definir larguras estática e bóia-los para qualquer lado. Isto é o que o CSS pode parecer:

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

Agora os guias estão assumindo mais de um olhar de conteúdo principal e acordeão é como uma barra lateral. Cada guia pode funcionar como uma seção diferente do site, só que é uma maneira dinâmica muito legal para fazê-lo desde as páginas de comutação não necessitam de carregamento da página a todos!

Aqui está o que a minha página parece que depois de um pouco de reestruturação:

Concretizar conteúdo

Vamos começar esse conteúdo padrão de lá e começar a ligar no nosso próprio material. Bem, esse ainda é um demo por isso vou deixar a maior parte desse material Lorem ipsum ... Mas, agora, dar uma olhada depois de atirar em alguns gráficos e plugin algum conteúdo mais realista:

Final

Esse site todo demorou cerca de 20 minutos para jogar juntos. Não é nenhuma obra-prima, por qualquer meio, mas é um bom começo em uma bonita e limpa à procura local. Vai mostrar o quão rápido você pode começar a construção de páginas web e mesmo tendo funcionalidade dinâmica através frio ea themeroller jQuery UI.

Ver Demo

DOWNLOAD FILES