Lar Mídia social Como criar painéis dobráveis ​​com jQuery no Dreamweaver - dummies

Como criar painéis dobráveis ​​com jQuery no Dreamweaver - dummies

Vídeo: Painel pallet dobrável 2025

Vídeo: Painel pallet dobrável 2025
Anonim

O widget acordeão jQuery UI no Dreamweaver facilita a inclusão de painéis dobráveis ​​que os visitantes do site podem abrir e fechar sem atualizar a página da web. Esse recurso jQuery permite que você faça um melhor uso do espaço em uma página exibindo mais informações em menos espaço na janela do navegador.

Você pode ver como os painéis dobráveis ​​do acordeão contêm o nome, a foto e as preferências de habitat de cada pássaro canalizador neste site da natureza. O resultado é que você pode facilmente ver os nomes de todos os pássaros em uma página. Para ver a descrição de qualquer pássaro, um usuário precisa apenas clicar na aba na parte superior do painel (onde o nome do pássaro aparece) e o painel abre instantaneamente.

A foto e a descrição para a toutinegra coroada de laranja estão abertas enquanto os outros na página estão fechados. A beleza do jQuery é que a página não precisa ser recarregada para abrir ou fechar os painéis. Clique uma vez em uma guia e um painel é aberto instantaneamente. Clique em outra guia e esse painel será aberto quando o painel aberto anteriormente for fechado.

Os painéis dobráveis ​​podem ser usados ​​para exibir texto e imagens, bem como arquivos multimídia, como arquivos de áudio, vídeo e Flash.

Para ver um painel de acordeão (ou muitos outros recursos avançados no Dreamweaver), como ele aparecerá em um navegador da Web, você precisa clicar no botão de exibição ao vivo no canto superior esquerdo do espaço de trabalho do Dreamweaver.

Depois de criar um conjunto de painéis de acordeão com o menu jQuery UI no Dreamweaver, você pode alterar uma série de configurações do painel usando o Inspetor de propriedades, conforme mostrado nas instruções que se seguem.

Siga estas etapas para criar um conjunto de painel de acordeão:

  1. Coloque o cursor em uma página onde deseja que os painéis de acordeão apareçam.

  2. Escolha Inserir → jQuery UI → Acordeão, ou clique no item Acordeão no painel jQuery UI Insert.

    Um grupo de painel de acordeão dobrável UQ jQuery com três painéis aparece na página.

  3. Selecione a palavra Seção na parte superior de cada painel e substitua-o pelo texto que deseja que apareça na área de Tabulação do painel.

    Por padrão, o texto na área Tab é texto simples, mas você pode alterar isso alterando a regra CSS correspondente ou formatando o texto usando tags HTML, como as tags de cabeçalho.

  4. Selecione a palavra Conteúdo na área principal de cada painel e insira qualquer texto ou imagens que deseja exibir.

    Você pode colar texto em um painel exatamente como você colaria texto em qualquer outro lugar da página. Da mesma forma, você insere imagens em painéis exatamente como você faria em qualquer lugar em uma página: Coloque o cursor no painel, escolha Inserir → Imagem → Imagem e selecione o arquivo GIF, JPEG ou PNG que deseja exibir.Você também pode selecionar um arquivo do Photoshop se desejar usar o Dreamweaver para otimizar as imagens.

    Quando você cola texto em um painel, escolha Editar → Cole especial para escolher a quantidade de formatação que deseja preservar no texto que você cola no Dreamweaver. Limitar a quantidade de formatação preservada pode reduzir conflitos de estilo em potencial.

  5. Para alterar as configurações do painel, clique na guia azul do acordeão jQuery na parte superior dos painéis na área de design.

    Quando você clica na guia azul, as configurações do painel aparecem no inspetor de propriedades. (Clicando corretamente na aba azul pode ser complicado, portanto, certifique-se de clicar na área azul.) Clique em qualquer outro lugar na página e o inspetor retorna às suas configurações padrão.

  6. Adicionar ou remover painéis usando o campo Painéis no Inspetor de propriedades.

    Para adicionar um painel, clique no sinal de mais (+) à direita do campo Painéis. Para remover um painel de um conjunto de acordeão, primeiro selecione o nome do painel na lista suspensa Painéis no Inspetor de propriedades e, em seguida, clique no sinal de menos (@@ min).

    Você pode adicionar outro painel clicando novamente no sinal de mais.

  7. Mude a forma como os painéis são abertos usando o menu suspenso Evento.

    As configurações de eventos controlam se os painéis abrem quando um usuário clica em uma aba de painel (clique) ou rola um cursor sobre a aba do painel (mouse).

  8. Defina outras opções de painel, conforme desejado.

    As opções de acordeão no Inspetor de propriedades são opcionais e incluem a capacidade de desativar qualquer ou todos os painéis (Desativar) e animar a forma como os painéis abrem e fecham (lista suspensa Animar).

  9. Escolha Arquivo → Salvar para salvar a página; Quando a caixa de diálogo Arquivos dependentes da cópia for exibida, clique em OK para gerar todos os arquivos relacionados.

    Para que os recursos do Spry funcionem, você deve fazer o upload desses arquivos para o seu servidor web quando você carregar a página da Web.

  10. Para alterar a aparência do painel, como a face da fonte ou a cor do texto, edite a regra CSS correspondente.

    Nota: Você não pode editar os estilos correspondentes para um painel de acordeão até que a página tenha sido salva e o Dreamweaver tenha gerado os arquivos CSS e JavaScript correspondentes.

  11. Para ver como os painéis aparecerão em um navegador da Web, clique no ícone do globo na parte superior do espaço de trabalho e selecione o navegador que você deseja usar para visualizar a página.

    Quando você está usando seu computador para visualizar uma página com recurso interativo que requer JavaScript ou outra programação, alguns navegadores da Web, incluindo o Internet Explorer, exibirão um aviso informando que você deve permitir controles ActiveX para visualizar a página.

    Este é um aviso de segurança que aparece apenas quando a página é aberta no mesmo computador onde a página é salva. Se você publicar a página em um servidor web e depois visualizá-lo através de uma conexão com a Internet, este erro não aparecerá para você ou para os visitantes do seu site.

Como criar painéis dobráveis ​​com jQuery no Dreamweaver - dummies

Escolha dos editores

Noções básicas do arquivo de dados Flashback da Oracle 12c - dummies

Noções básicas do arquivo de dados Flashback da Oracle 12c - dummies

O Flashback Data Archive do oracle 12c é um mecanismo de banco de dados que permite que você para armazenar periodicamente ou indefinidamente todas as versões de linha em uma tabela ao longo da sua vida útil. Você pode então escolher uma hora para ver os dados como existia em um ponto específico. Esteja ciente de que o Flashback Data Archive é um recurso licenciado. ...

Noções básicas de clusters de aplicativos reais do Oracle 12c - manequins

Noções básicas de clusters de aplicativos reais do Oracle 12c - manequins

Se você visitou os sites da Oracle nos últimos 12 anos , você viu o byline de marketing: "Inquebrável. "Essa linha de tag refere-se ao recurso Real Application Clusters (RAC). Claro, muitos elementos estão envolvidos, mas o RAC tem o destaque. O RAC é a solução de clustering de banco de dados Oracle. Em certo sentido, funciona na teoria de que ...

Noções básicas de Redo Log Files no Oracle 12c - dummies

Noções básicas de Redo Log Files no Oracle 12c - dummies

Redo os arquivos de log armazenam as informações do buffer de log no banco de dados Oracle 12c. Eles são escritos pelo Log Writer (LGWR). Mais uma vez, você não pode ler esses arquivos binários sem a ajuda do software de banco de dados. Normalmente, os arquivos de reto de log são nomeados com a extensão. LOG ou. RDO. Pode ser qualquer coisa que você queira, ...

Escolha dos editores

São orgasmos ok durante a gravidez? - Dummies

São orgasmos ok durante a gravidez? - Dummies

As mulheres grávidas não só têm permissão para fazer sexo, mas muitas vezes o desejam. Mas é bom aproveitar a relação sexual com o ponto do orgasmo? Afinal, os orgasmos são nada mais do que contrações - e as pessoas sugeriram que isso poderia desencadear mão-de-obra. Isso é apenas um mito. De fato, grávida ...

Alimentando a Multidão em uma Reunião Familiar - manequins

Alimentando a Multidão em uma Reunião Familiar - manequins

Cozinhando uma refeição para um grande grupo (reunião familiar ou de outra forma ) requer planejamento e resistência. Aqui está um guia útil para quantidades de alimentos e segurança alimentar, e conselhos sobre a organização de uma festa de potluck. Planejando para potlucks A forma mais comum de comestibles de grupo é uma festa de potluck - qual é a maneira mais barata e fácil de ...

Anatomia do Penis humano - dummies

Anatomia do Penis humano - dummies

Sabendo como as funções de um pénis podem fornecer uma visão útil do sexo e do corpo humano - se você quer entender o pénis e a anatomia masculina melhor ou aprender sobre isso pela primeira vez. Basicamente, um pênis é composto de três estruturas, que são feitas de um material esponjoso que pode preencher com sangue: ...

Escolha dos editores

Como lidar com outliers causados ​​por Forças externas - manequins

Como lidar com outliers causados ​​por Forças externas - manequins

Certifique-se de verificar atentamente os outliers antes eles influenciam sua análise preditiva. Os outliers podem distorcer a análise de dados e dados. Por exemplo, qualquer análise estatística feita com dados que deixa outliers no lugar acaba por desviar os meios e variâncias. Os outliers não controlados ou mal interpretados podem levar a conclusões falsas. Diga os seus dados que ...

Como criar um modelo de análise preditiva com regressão R - manequins

Como criar um modelo de análise preditiva com regressão R - manequins

Você deseja criar um preditivo modelo de análise que você pode avaliar usando resultados conhecidos. Para fazer isso, vamos dividir nosso conjunto de dados em dois conjuntos: um para treinar o modelo e outro para testar o modelo. Uma divisão 70/30 entre treinamento e testes de conjuntos de dados será suficiente. As próximas duas linhas de código ...

Como definir objetivos de negócios para um modelo de análise preditiva - dummies

Como definir objetivos de negócios para um modelo de análise preditiva - dummies

Um modelo de análise preditiva visa resolvendo um problema comercial ou realizando um resultado comercial desejado. Esses objetivos comerciais se tornam os objetivos do modelo. Conhecer aqueles garante o valor comercial do modelo que você constrói - o que não deve ser confundido com a precisão do modelo. Hipotéticamente, você pode construir um modelo preciso para ...