Como criar painéis com guias com jquery no dreamweaver
A opção jQuery UI Tab no Dreamweaver facilita para adicionar uma série de painéis que exibem ou esconder o conteúdo correspondente a uma série de guias. Similar aos painéis flexíveis, esta funcionalidade jQuery UI permite exibir mais informação em menos espaço dentro de uma janela do navegador.
Conteúdo
Similar aos painéis de acordeão, painéis com guias pode ser usado para exibir o texto, imagens e multimédia.
Ao criar painéis com guias com o widget jQuery UI no Dreamweaver, você pode especificar a ordem das guias, efetivamente controlar o conteúdo que aparece quando a página é carregada pela primeira vez.
Siga estes passos para criar um grupo de painéis com abas:
Coloque o cursor em uma página onde você deseja que o painel com guias para aparecer.
Escolha Inserir → jQuery UI → Tabs, ou clique no item as guias no painel de jQuery UI Inserir.
Video: Carrossel de imagens com jquery
Um painel com abas é inserido na página e os arquivos CSS correspondentes aparecem no painel CSS Designer Source.
Video: Como criar página com sistema de abas com javascript
No espaço de trabalho principal, selecione o Tab1, Guia2, e tab 3 texto, por sua vez, e em seguida, substituir cada guia dirigindo com o texto que você quer que apareça na área de guia do painel.
Você pode editar o conteúdo dos guias apenas no espaço de trabalho, não no Inspetor de propriedades. Por padrão, o texto na área de Tab é ousado e preto, mas você pode alterar essa formatação alterando a regra CSS correspondente.
Para ajustar o tamanho de cada guia, selecione a guia e, em seguida, usar o definições altura e largura no Inspetor de propriedades.
Com uma guia individual selecionada, o Inspetor de propriedades exibe as configurações para que a guia especificamente.
Para adicionar conteúdo, selecione a palavra Conteúdo na área principal de qualquer painel guia selecionada e, em seguida, inserir texto, imagens ou multimídia.
Você pode copiar o texto em um painel colando-lo apenas como você colar texto em qualquer outro lugar na página. Da mesma forma, inserir imagens em painéis como faria em qualquer outro lugar em uma página: Escolha Inserir → Imagem → Imagem e selecione o GIF, JPEG ou PNG que deseja exibir. Você também pode adicionar multimídia ou arquivos do Photoshop, se você quiser usar o Dreamweaver para otimizar suas imagens.
Para alterar a aparência de um guia ou um painel, como a face de fonte ou cor, editar a regra CSS correspondente.
Por exemplo, para editar a cor do texto ou da fonte nos separadores, marque a caixa ao redor da guia eo caixa em torno estilo é selecionado automaticamente no painel Selector do CSS Designer.
Para editar o número ou a ordem de painéis com guias, clique na guia azul jQuery guias na parte superior do painel situado na área de design.
Quando você clique na guia azul, as configurações do painel aparecem no Inspetor de propriedades. Clique fora da área de box azul, eo Inspetor de propriedades retorna às suas configurações padrão.
Para adicionar guias, clique no ícone de sinal de mais (+) no Inspetor de propriedades.
Novas abas aparecem na área de trabalho.
Para alterar a ordem das guias, seleccionar o nome de guia no inspector imóvel e, em seguida, utilizar as setas no campo Painéis para mover o painel.
nomes painel mover para cima e para baixo o menu como a ordem é alterada. Painéis e suas guias correspondentes aparecem na página web na ordem em que aparecem no Inspetor de propriedades.
Selecione o painel nos painéis de lista suspensa que você deseja exibir quando a página é carregada em um navegador web.
A lista drop-down corresponde aos nomes que você dá cada guia no espaço de trabalho.
Escolha Arquivo → Salvar para salvar o page- quando a caixa de diálogo Copy Dependent arquivos aparecer, clique em OK para gerar automaticamente todos os arquivos relacionados.
Para o jQuery UI apresenta para trabalhar, você deve fazer o upload desses arquivos para o servidor web quando você carregar a página web.
Clique no ícone de globo na parte superior da área de trabalho e escolha um navegador para visualizar o seu trabalho em um navegador.
Dependendo do seu navegador, você pode ter para permitir que controles ActiveX para visualizar a página em seu computador.