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.
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, controlar eficazmente o conteúdo que aparece quando a página é carregada pela primeira vez.
Siga estes passos para criar um grupo de painéis com guias:
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.
Um painel com abas é inserido na página e os arquivos CSS correspondentes aparecem no painel CSS Designer Source.
No espaço de trabalho principal, selecione o Tab1, Guia2, e tab 3 texto, por sua vez, e depois substituir cada guia indo 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, e 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 da guia selecionada e, em seguida, inserir texto, imagens ou multimédia.
Você pode copiar o texto em um painel, colando-o assim como você colar texto em qualquer outro lugar na página. Da mesma forma, inserir imagens em painéis tal como faria em qualquer outro lugar em uma página: Escolha Inserir-Imagem-Imagem e selecione o GIF, o arquivo 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 uma guia ou um painel, tais como o tipo de letra ou a cor, editar a regra CSS correspondente.
Por exemplo, para editar a cor do texto ou da fonte nas guias, selecione a caixa ao redor da guia ea 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, selecione o nome da guia no Inspetor de propriedades e, em seguida, use as setas no campo Painéis para mover o painel.
nomes dos painéis 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 dão a cada guia na área 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.