jQuery Mobile - Painéis

Descrição

Painel básico que se move do lado esquerdo ou direito da tela para exibir o conteúdo usando data-role = "panel" atributo.

Exemplo

O exemplo a seguir descreve o uso do painel na estrutura jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Panel</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "panel" id = "panel1">
            <h2>This is Panel Header</h2>
            <p>You can close this panel by pressing the Esc key or by swiping.</p>
         </div>
         
         <div data-role  =  "header">
            <h2>Header</h2>
         </div>
         
         <div data-role  =  "main" class  =  "ui-content">
            <p>Click on the button to open Panel.</p>
            <a href = "#panel1" class = "ui-btn ui-btn-inline">Open Panel</a>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como jqm_panels.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/jqm_panels.html e a seguinte saída será exibida.

Marcação do painel

Você pode escrever o conteúdo do painel dentro de uma página e é irmão do cabeçalho, do conteúdo e dos elementos do rodapé. Você não pode escrever a marcação do painel fora da página. Terá o seguinte formato.

<div data-role = "page">
   <div data-role = "panel" id = "panel1">
      <!-- panel content -->
   </div><!-- end of panel -->
   
   <!-- header -->
   <!-- content -->
   <!-- footer -->
</div><!-- end of page -->

Conteúdo Dinâmico

Você pode adicionar dinamicamente o conteúdo a um painel ou ocultar o conteúdo quando o painel estiver aberto, usando o updatelayout evento no painel conforme mostrado no formato a seguir.

$( "#panel1" ).trigger( "updatelayout" );

Ele verificará a altura do conteúdo do painel e se a altura do painel exceder, então definirá a altura do conteúdo usando min-height atributo e a posição do painel usando data-position-fixed = "true" atributo.

Abrindo um Painel

Você pode abrir o painel configurando hrefatributo ao id do painel, que vincula o link ao painel. Ele abrirá o painel quando você clicar no link e feche o painel clicando nele novamente.

Fechando um Painel

Você pode fechar o painel clicando fora do painel, deslizando para a esquerda ou direita ou pressionando a tecla Esc. O efeito de deslizar pode ser desativado usando odata-swipe-close = "false"atributo. Às vezes, você pode fechar o painel clicando fora dele; para que você possa evitar essa ação adicionando odata-dismissible = "false"para o painel. Também é possível fechar o painel adicionando odata-rel = "close" atributo para o painel.

Animações de painel

Você pode usar animações no painel se seu navegador oferecer suporte para transformações 3D. Use otranslate3d(x,y,z)O CSS se transforma para animar o painel. Se você não quiser usar animações, use odata-animate = "false" atributo para o recipiente do painel.

Posicionamento do painel

Ele especifica a posição do painel na página e exibe o painel com o position:absolutePropriedade CSS. Use oposition:fixed atributo no painel para exibir o conteúdo e não importa o quanto você rola a página usando dataposition-fixed = "true"atributo para o painel. Se o conteúdo for maior que não cabe na área da página, a estrutura exibirá o conteúdo sem posicionamento fixo.

Painéis de Estilo

A estrutura do jQuery Mobile fornece estilos para os painéis. Por padrão, os painéis serão em estilos simples, mas você pode personalizá-los de acordo com os critérios do usuário. Você pode incluir o conteúdo em um div usando oui-panel-innerclasse que inclui 15 pixels de preenchimento. Você pode definir o plano de fundo do tema para os painéis usando diferentes tipos de temas. O tema padrão do painel é "c"e defina o tema do painel usando o data-themeatributo. Se você não quiser definir o tema, use odata-theme = "none" atributo para usar suas próprias classes para estilizar o painel.

Tornando o Painel Responsivo

A estrutura do jQuery Mobile torna o painel responsivo e permite que o menu do painel e a página sejam usados juntos. Você pode usar um ponto de interrupção específico para uma página ou usar a classe ="ui-responsive-panel" ponto de interrupção predefinido para o contêiner de página.

↰ Previous page