Framework7 - Guia rápido
Framework7 é um framework de código aberto e gratuito para HTML móvel. Ele é usado para desenvolver aplicativos móveis híbridos ou aplicativos da web para dispositivos iOS e Android.
Framework7 foi introduzido no ano de 2014. A versão mais recente 1.4.2 foi lançada em fevereiro de 2016 licenciada sob o MIT.
Por que usar o Framework7?
- É mais fácil desenvolver aplicativos para iOS e Android.
- A curva de aprendizado do Framework7 é muito fácil.
- Tem muitos widgets / componentes pré-estilizados.
- Possui bibliotecas auxiliares integradas.
Características
Framework7 é um framework de código aberto e de uso gratuito.
Framework7 tem uma sintaxe jQuery fácil e familiar para começar sem qualquer demora.
Para controlar o atraso do clique em interfaces de usuário de toque, o Framework7 possui uma biblioteca FastClick integrada .
Framework7 tem layout de sistema de grade embutido para organizar seus elementos de forma responsiva.
O Framework7 carrega páginas de modelos dinamicamente por meio de API de roteador flexível .
Vantagens
Framework7 não depende de nenhuma biblioteca de terceiros, mesmo para manipulação de DOM. Em vez disso, ele tem seu próprio DOM7 personalizado.
O Framework7 também pode ser usado com os frameworks Angular e React .
Você pode começar a criar aplicativos depois de conhecer HTML, CSS e um pouco de JavaScript básico.
Ele suporta um desenvolvimento mais rápido através do Bower .
É fácil desenvolver aplicativos para iOS e Android sem precisar aprender.
Desvantagens
Framework7 suporta apenas plataformas como iOS e Android.
O suporte da comunidade online para o framework Framework7 é menor em comparação com iOS e Andriod.
Neste capítulo, discutiremos como instalar e configurar o Framework7.
Você pode baixar o Framework7 de duas maneiras -
Baixe do repositório Framework7 Github
Você pode instalar o Framework7, usando o Bower conforme mostrado abaixo -
bower install framework7Após a instalação bem-sucedida do Framework7, você precisa seguir as etapas fornecidas a seguir para usar o Framework7 em sua aplicação -
Step 1 - Você precisa instalar gulp-cli para construir versões de desenvolvimento e dist do Framework7 usando o seguinte comando.
npm install gulp-cliO cli significa Command Line Utility for Gulp.
Step 2 - O Gulp deve ser instalado globalmente usando o seguinte comando.
npm install --global gulpStep 3- Em seguida, instale o gerenciador de pacotes NodeJS, que instala os programas de nó que torna mais fácil especificar e vincular dependências. O seguinte comando é usado para instalar o npm.
npm installStep 4 - A versão de desenvolvimento do Framework7 pode ser construída usando o seguinte comando.
npm buildStep 5- Depois de criar a versão de desenvolvimento do Framework7, comece a construir o aplicativo a partir de dist / pasta usando o seguinte comando.
npm distStep 6 - Mantenha a pasta do seu aplicativo no servidor e execute o seguinte comando para navegar entre as páginas do seu aplicativo.
gulp serverBaixe a biblioteca Framework7 de CDNs
Um CDN ou Content Delivery Network é uma rede de servidores projetada para servir arquivos aos usuários. Se você usar um link CDN em sua página da web, ele transfere a responsabilidade de hospedar arquivos de seus próprios servidores para uma série de servidores externos. Isso também oferece a vantagem de que, se um visitante de sua página da Web já tiver baixado uma cópia do Framework7 do mesmo CDN, não será necessário baixá-la novamente. Você pode incluir os seguintes arquivos CDN no documento HTML.
Os seguintes CDNs são usados em um iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Ele é usado para incluir a biblioteca CSS do Framework7 iOS em seu aplicativo.
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />Ele é usado para incluir estilos de cores relacionados ao Framework7 iOS em seu aplicativo.
Os seguintes CDNs são usados em Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>É usado para incluir a biblioteca Framework7 JS em seu aplicativo.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>É usado para incluir o estilo do material Framework7 em seu aplicativo.
Estamos usando as versões CDN da biblioteca em todo este tutorial. Usamos AMPPS (AMPPS é uma pilha WAMP, MAMP e LAMP do servidor Apache, MySQL, MongoDB, PHP, Perl e Python) para executar todos os nossos exemplos.
Exemplo
O exemplo a seguir demonstra o uso de aplicativo simples no Framework7, que exibirá a caixa de alerta com a mensagem personalizada ao clicar na barra de navegação.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>Em seguida, crie mais uma página HTML, ou seja envirmnt_about.html como mostrado abaixo -
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML acima como framework7_environment.html arquivo na pasta raiz do servidor.
Abra esse arquivo HTML como http: //localhost/framework7_environment.html e a saída será exibida conforme mostrado abaixo.
Ao clicar na barra de navegação, será exibida a caixa de alerta com a mensagem personalizada.
Descrição
Framework7 fornece diferentes tipos de layouts para seu aplicativo. Ele suporta três tipos de layouts de Navbar / Toolbar -
| S.No | Tipos de layout e descrição |
|---|---|
| 1 | Layout estático O layout estático é o tipo de layout usado com mais frequência e inclui barra de navegação e barra de ferramentas, que pode ser um conteúdo de página rolável e cada página contém sua própria barra de navegação e barra de ferramentas. |
| 2 | Layout Fixo O layout fixo inclui sua própria barra de navegação e barra de ferramentas, que pode ser visível na tela e não pode ser rolada na página. |
| 3 | Por Layout Nesse layout, a barra de navegação e a barra de ferramentas aparecem fixas para todas as páginas em uma única visualização. |
| 4 | Layout Misto Você pode misturar os diferentes tipos de layouts em uma única visualização. |
Sem Navbar / Toolbar
Se você não quiser usar a barra de navegação e a barra de ferramentas, não inclua as classes apropriadas ( navbar-fixada , navbar-direta , barra de ferramentas fixa , barra de ferramentas-direta ) para página / páginas / visualização.
Descrição
Neste capítulo, vamos estudar sobre navbar . Geralmente é colocado no topo de uma tela contendo o título da página e os elementos de navegação.
Navbar consiste em três partes, cada uma das quais pode conter qualquer conteúdo HTML, mas sugere-se que você use-as da maneira indicada abaixo -
Left- Ele é projetado para colocar ícones de link de volta ou link de texto único.
Center - É usado para exibir o título da página ou links da guia.
Right- Esta parte é semelhante à parte esquerda .
A tabela a seguir demonstra o uso da barra de navegação em detalhes -
| S.No | Tipos e descrição da barra de navegação |
|---|---|
| 1 | Navbar básico Uma navbar básica pode ser criada usando as classes navbar , navbar-inner , left , center e right . |
| 2 | Navbar com links Para usar links nas partes esquerda e direita de sua barra de navegação, basta adicionar a tag <a> com o link da classe . |
| 3 | Links múltiplos Para usar vários links, basta adicionar mais <a class = "link"> à parte de sua escolha. |
| 4 | Links com texto e ícones Os links podem ser fornecidos com ícones e textos adicionando classes para ícones e envolvendo o texto do link com o elemento <span> . |
| 5 | Links apenas com ícones Os links da barra de navegação podem ser fornecidos apenas com ícones, adicionando uma classe apenas de ícone aos links. |
| 6 | Métodos de visualização e aplicativos relacionados Ao inicializar a View , framework7 permite que você use métodos disponíveis para navbar. |
| 7 | Ocultar barra de navegação automaticamente O navbar pode ser oculto / mostrado automaticamente para algumas páginas carregadas com Ajax onde o navbar não é necessário. |
Descrição
A barra de ferramentas fornece acesso fácil a outras páginas usando elementos de navegação na parte inferior da tela.
Você pode usar a barra de ferramentas de duas maneiras, conforme especificado na tabela -
| S.No | Tipos e descrição da barra de ferramentas |
|---|---|
| 1 | Ocultar barra de ferramentas Você pode ocultar a barra de ferramentas automaticamente ao carregar as páginas usando o no-toolbar classe para a página carregada. |
| 2 | Barra de Ferramentas Inferior Coloque a barra de ferramentas na parte inferior da página usando o toolbar-bottom classe. |
Métodos de barra de ferramentas
Os seguintes métodos disponíveis podem ser usados com as barras de ferramentas -
| S.No | Métodos e descrição da barra de ferramentas |
|---|---|
| 1 | myApp.hideToolbar(toolbar) Ele oculta a barra de ferramentas especificada. |
| 2 | myApp.showToolbar(toolbar) Mostra a barra de ferramentas especificada. |
| 3 | view.hideToolbar() Ele oculta a barra de ferramentas especificada na visualização. |
| 4 | view.showToolbar() Mostra a barra de ferramentas especificada na visualização. |
Exemplo
O exemplo a seguir demonstra o uso do layout da barra de ferramentas no Framework7.
Primeiro, vamos criar uma página HTML chamada toolbar.html como mostrado abaixo -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Toolbar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Toolbar Layout</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page with-subnavbar">
<div class = "page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Link 1</a>
<a href = "#" class = "link">Link 2</a>
<a href = "#" class = "link">Link 3</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>Agora, inicialize seu aplicativo e exiba no arquivo JS personalizado toolbar.js.
Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como toolbar.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/toolbar.html e a saída é exibida conforme mostrado abaixo.
Descrição
O Framework 7 permite pesquisar os elementos usando a classe searchbar .
Parâmetros da barra de pesquisa
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | searchList Ele pesquisa o seletor CSS ou elemento HTML da lista. |
string ou elemento HTML | - |
| 2 | searchIn Você pode pesquisar os elementos de exibição de lista dos seletores CSS, também pesquisa os elementos passando as classes .item-title , .item-text . |
corda | '.título do item' |
| 3 | found Ele pesquisa o seletor CSS ou elemento HTML usando o elemento "encontrado". Além disso, ele usa o elemento .searchbar-found se não houver nenhum elemento especificado. |
string ou elemento HTML | - |
| 4 | notfound Ele pesquisa o seletor CSS ou elemento HTML usando o elemento "não encontrado". Além disso, ele usa o elemento .searchbar-not-found se não houver nenhum elemento especificado. |
string ou elemento HTML | - |
| 5 | overlay Ele pesquisa o seletor CSS ou elemento HTML usando o elemento "searchbar overlay" e usa o elemento .searchbar-overlay , se nenhum elemento for especificado. |
string ou elemento HTML | - |
| 6 | ignore Você pode ignorar o seletor CSS para itens usando a barra de pesquisa. |
corda | '.searchbar-ignore' |
| 7 | customSearch Quando ativada, a barra de pesquisa não pesquisará nenhum dos blocos de lista especificados por searchList e você terá permissão para usar a funcionalidade de pesquisa personalizada. |
boleano | falso |
| 8 | removeDiacritics Ao pesquisar um elemento, remova os sinais diacríticos habilitando este parâmetro. |
boleano | falso |
| 9 | hideDividers Este parâmetro irá ocultar os divisores de itens e o título do grupo, se não houver itens. |
boleano | verdadeiro |
| 10 | hideGroups Este parâmetro irá ocultar os grupos, se não houver itens encontrados nos grupos de visualização de lista. |
boleano | verdadeiro |
Chamadas da barra de pesquisa
| S.No | Chamadas de retorno e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | onSearch Este método irá disparar a função de retorno de chamada ao fazer a pesquisa. |
funções) | - |
| 2 | onEnable Este método irá disparar a função de retorno de chamada quando a Barra de Pesquisa se tornar ativa. |
funções) | - |
| 3 | onDisable Este método irá disparar a função de retorno de chamada quando a barra de pesquisa se tornar inativa. |
funções) | - |
| 4 | onClear Este método irá disparar a função de retorno de chamada quando você clicar no elemento "limpar". |
funções) | - |
Propriedades da barra de pesquisa
| S.No | Propriedades e descrição |
|---|---|
| 1 | mySearchbar.params Representa os parâmetros inicializados passados com o objeto. |
| 2 | mySearchbar.query Pesquisa a consulta atual. |
| 3 | mySearchbar.searchList Define o bloco da lista de pesquisa. |
| 4 | mySearchbar.container Define o contêiner da barra de pesquisa com elemento HTML. |
| 5 | mySearchbar.input Define a entrada da barra de pesquisa com elemento HTML. |
| 6 | mySearchbar.active Ele define se a barra de pesquisa está habilitada ou desabilitada. |
Métodos de barra de pesquisa
| S.No | Métodos e Descrição |
|---|---|
| 1 | mySearchbar.search(query); Este método pesquisa a consulta passada. |
| 2 | mySearchbar.enable(); Habilita a barra de pesquisa. |
| 3 | mySearchbar.disable(); Ele desativa a barra de pesquisa. |
| 4 | mySearchbar.clear(); Você pode limpar a consulta e os resultados da pesquisa. |
| 5 | mySearchbar.destroy(); Ele destrói a instância da barra de pesquisa. |
Eventos de JavaScript da barra de pesquisa
| S.No | Descrição do Evento | Alvo |
|---|---|---|
| 1 | search Você pode disparar este evento enquanto procura elementos. |
<div class = "list-block"> |
| 2 | clearSearch Este evento será disparado quando o usuário clicar no elemento clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Quando a barra de pesquisa for ativada, este evento será disparado. |
<div class = "list-block"> |
| 4 | disableSearch Quando a barra de pesquisa é desabilitada e o usuário clica no botão cancelar ou no elemento "sobreposição da barra de pesquisa", este evento é disparado. |
<div class = "list-block"> |
Exemplo
O exemplo a seguir demonstra o uso da barra de pesquisa na rolagem no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima search_bar.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/search_bar.html e a saída é exibida conforme mostrado abaixo.
Se o elemento contido na lista for inserido na barra de pesquisa, ele exibe esse elemento específico da lista.
Se o elemento diferente dos elementos contidos na lista for inserido, ele não exibe nenhum elemento encontrado.
Descrição
O iOS 7+ permite que você crie aplicativos de tela inteira que podem criar um problema quando a barra de status se sobrepõe ao aplicativo. Framework7 resolve esse problema detectando se seu aplicativo está no modo de tela inteira ou não. Se seu aplicativo estiver no modo de tela inteira, o Framework7 adicionará automaticamente a classe with-statusbar-overlay a <html> (ou removerá se o aplicativo não estiver no modo de tela inteira) e você precisará adicionar a classe statusbar-overlay em <body> conforme mostrado no código a seguir -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...Por padrão, <div> sempre estará oculto e fixo na parte superior da tela. Ele só estará visível quando o aplicativo estiver no modo de tela inteira e a classe with-statusbar-overlay for adicionada a <html> .
Exemplo
O exemplo a seguir demonstra o uso da barra de status no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<p>page contents goes here!!!</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
})
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código html fornecido acima como status_bar.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/status_bar.html e a saída é exibida conforme mostrado abaixo.
O exemplo mostra o uso do statusbar-overlay, que permite criar aplicativos em tela cheia quando sua barra de status se sobrepõe ao aplicativo.
Descrição
O painel lateral se move para o lado esquerdo ou direito da tela para exibir o conteúdo. Framework7 permite que você inclua até 2 painéis (painel do lado direito e painel do lado esquerdo) em seu aplicativo. Você precisa adicionar painéis no início de <body> e, em seguida, escolher o efeito de abertura aplicando as seguintes classes listadas -
panel-reveal - Isso fará com que todo o conteúdo do aplicativo seja removido.
panel-cover - Isso fará com que o painel se sobreponha ao conteúdo do aplicativo.
Por exemplo, o código a seguir mostra como usar as classes acima -
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>A tabela a seguir mostra os tipos de painel suportados pelo Framework77 -
| S.No | Tipo e descrição |
|---|---|
| 1 | Abrir e fechar painéis Depois de adicionar painel e efeitos, precisamos adicionar funcionalidade para abrir e fechar os painéis. |
| 2 | Eventos do Painel Para detectar como um usuário interage com o painel, você pode usar eventos de painel. |
| 3 | Painéis abertos com deslize Framework7 fornece a você o recurso para abrir o painel com um gesto de furto . |
| 4 | O painel está aberto? Podemos determinar se o painel está aberto ou não usando o with-panel[position]-[effect] regra. |
Descrição
Os blocos de conteúdo podem ser usados para adicionar conteúdo extra com formato diferente.
Exemplo
O exemplo a seguir demonstra o uso do bloco de conteúdo no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Content Block</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como content_block.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/content_block.html e a saída é exibida conforme mostrado abaixo.
O código adiciona formatação extra e espaçamento necessário para o conteúdo do texto.
Descrição
Framework7 fornece diferentes tipos de tipos de grade para colocar o conteúdo de acordo com a necessidade do usuário.
A grade de layout fornece diferentes tipos de tamanho de colunas, conforme descrito na tabela a seguir -
| S.No | Classe | Classe de mesa | Largura |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33,3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66,6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Largura igual |
Exemplo
O exemplo a seguir fornece o layout de grade para colocar seu conteúdo conforme necessário no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Layout Grid</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como layout_grid.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/layout_grid.html a saída é exibida conforme mostrado abaixo.
Este código fornece diferentes tipos de tipos de grade para colocar o conteúdo de acordo com a necessidade do usuário.
Descrição
Framework7 fornece diferentes tipos de sobreposições para trabalhar com os aplicativos sem problemas. A tabela a seguir lista algumas das sobreposições do Framework7 -
| S.No | Tipo de sobreposição e descrição |
|---|---|
| 1 | Modal Modal é uma pequena janela que exibe o conteúdo de fontes separadas sem sair da janela principal. |
| 2 | Aparecer Popup é uma caixa popup que exibe o conteúdo quando o usuário clica no elemento. |
| 3 | Dar um pulo Para gerenciar a apresentação de conteúdo temporário, o componente popover pode ser usado. |
| 4 | Folha de Ação A Folha de Ações é usada para apresentar ao usuário um conjunto de possibilidades de como lidar com uma determinada tarefa. |
| 5 | Tela de login A tela de login de sobreposição é usada para exibir o formato da tela de login, que pode ser usada na página ou pop-up ou como uma sobreposição independente. |
| 6 | Seletor Modal O seletor modal é usado para escolher algum conteúdo personalizado que é semelhante ao seletor de calendário. |
Descrição
O Preloader no Framework7 é feito com Scalable Vector Graphic (SVG) e animado com CSS, o que o torna facilmente redimensionável. O pré-carregador está disponível em duas cores -
- o padrão é fundo claro
- outro é fundo escuro
Você pode usar a classe preloader em seu HTML, conforme mostrado abaixo -
Exemplo
O exemplo a seguir demonstra o uso do pré-carregador no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Panel Events</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como preloader.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/preloader.html e a saída é exibida conforme mostrado abaixo.
Este código exibe o indicador de pré-carregador, que é feito em SVG e animado com CSS.
Descrição
As barras de progresso podem ser usadas para mostrar o carregamento de ativos ou o progresso de uma tarefa aos usuários. Você pode especificar a barra de progresso usando a classe progressbar . Quando o usuário não sabe por quanto tempo o processo de carregamento levará para a solicitação, você pode usar a classe progressbar-infinite .
API JavaScript da barra de progresso
A barra de progresso pode ser usada junto com a API JavaScript para especificar as propriedades de exibição , ocultação e progresso usando os seguintes métodos -
| S.No | Métodos | Descrição e parâmetros |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | Ele define a barra de progresso para o progresso de uma tarefa.
|
| 2 | myApp.hideProgressbar (contain er) | Ele oculta a barra de progresso.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Ele exibe a barra de progresso.
|
Exemplo
O exemplo a seguir exibe barras animadas de progresso determinado e indeterminado para indicar a atividade no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Progress Bar</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Progress Bar</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Determinate Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline determinate progress bar:</p>
<div class = "progressbar-inline">
<p><span data-progress = "10" class = "progressbar"></span></p>
<p class = "buttons-row">
<a href = "#" data-progress = "25" class = "button button-raised">25%</a>
<a href = "#" data-progress = "50" class = "button button-raised">50%</a>
<a href = "#" data-progress = "75" class = "button button-raised">75%</a>
<a href = "#" data-progress = "100" class = "button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class = "progressbar-load-hide">
<p><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Infinite Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class = "progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class = "progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Different types of colored progress bars:</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "5" class = "progressbar color-red"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "10" class = "progressbar color-pink"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "20" class = "progressbar color-deeppurple"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "30" class = "progressbar color-blue"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "40" class = "progressbar color-cyan"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "50" class = "progressbar color-green"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "60" class = "progressbar color-lime"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "70" class = "progressbar color-amber"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "80" class = "progressbar color-deeporange"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "90" class = "progressbar color-gray"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "100" class = "progressbar color-black"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7({
material: true
});
var $$ = Dom7;
$$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress');
var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () {
var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como progress_bar.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/progress_bar.html e a saída é exibida conforme mostrado abaixo.
O exemplo exibe a barra de progresso, que indica quanto tempo uma operação levará para concluir o processo e exibe os diferentes tipos de barras de progresso para indicar atividade.
Descrição
As visualizações de lista são poderosos componentes de IU que apresentam dados em uma lista rolável de várias linhas. O Framework7 fornece diferentes tipos de visualização em lista para trabalhar com seu aplicativo. A tabela a seguir lista algumas das listas do Framework7 -
| S.No | Tipos e descrição |
|---|---|
| 1 | Exibição de lista As visualizações de lista são componentes de interface do usuário poderosos, que apresentam dados em uma lista rolável contendo várias linhas. |
| 2 | Lista de Contatos A lista de contatos é um tipo de visualização de lista, que pode ser usada para exibir a lista de contatos de pessoas. |
| 3 | Visualização de lista de mídia A exibição de lista de mídia é usada para exibir estruturas de dados complicadas, como produtos, serviços, informações de usuários. |
| 4 | Swipeout O deslizamento permite que você revele as ações ocultas do menu deslizando sobre os elementos da lista. |
| 5 | Lista Classificável A lista classificável é um tipo de exibição de lista, que classifica os elementos da exibição de lista. |
| 6 | Lista Virtual Lista virtual um tipo de exibição de lista, que inclui listas de um grande número de elementos de dados sem diminuir seu desempenho. |
Descrição
O acordeão é um elemento de controle gráfico exibido como uma lista empilhada de itens. Cada acordeão pode ser expandido ou esticado para revelar o conteúdo associado a esse acordeão.
Layout dobrável
Ao usar um único elemento recolhível separado, você precisa omitir o elemento de invólucro de lista de acordeão .
A seguir está uma estrutura de layout recolhível -
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>As seguintes classes são usadas para acordeão no Framework7 -
| S.No | Classes e descrição |
|---|---|
| 1 | accordion-list É uma classe opcional, que contém um grupo de lista de itens de acordeão. |
| 2 | accordion-item É uma aula obrigatória para item acordeão único. |
| 3 | accordion-item-toggle É uma classe obrigatória usada para expandir o conteúdo do item de acordeão. |
| 4 | accordion-item-content É uma classe obrigatória usada para conteúdo de item de acordeão oculto. |
| 5 | accordion-item-expanded É um único item de acordeão expandido. |
Accordion JavaScript API
Os métodos da API JavaScript são usados para abrir e fechar o acordeão programaticamente.
Ele contém os seguintes métodos de API JavaScript -
myApp.accordionOpen(item) - Usado para abrir o acordeão.
myApp.accordionClose(item) - Usado para fechar o acordeão.
myApp.accordionToggle(item) - Usado para alternar acordeão.
Todos os métodos contêm um parâmetro denominado item que é HTML ou elemento string do item acordeão.
Eventos de Acordeão
O acordeão contém quatro eventos, conforme listado na tabela a seguir -
| S.No | Evento | Alvo e descrição |
|---|---|---|
| 1 | abrir | Accordion item Ao abrir uma animação, este evento será disparado. |
| 2 | aberto | Accordion item Quando a abertura de uma animação for concluída, este evento será disparado. |
| 3 | Fechar | Accordion item Quando você fecha uma animação, este evento é disparado. |
| 4 | fechadas | Accordion item Quando o fechamento de uma animação for concluído, este evento será disparado. |
Vista de lista de acordeão
Na exibição de lista de acordeão, você pode usar o elemento de link de item em vez de alternar acordeão .
<div class = "list-block accordion-list">
<ul>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">1st Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 1st Item...</div>
</li>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">2nd Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 2nd Item...</div>
</li>
</ul>
</div>Exemplo
O exemplo a seguir demonstra o uso de acordeão na Estrutura 7 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Accordion</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Accordion</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">List of Programming Lagauges</div>
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
<div class="accordion-item-content">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
<div class="accordion-item-content">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
<div class="accordion-item-content">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como accordion.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/accordion.html e a saída é exibida conforme mostrado abaixo.
O exemplo fornece layout recolhível, que pode ser expandido para exibir o conteúdo associado ao acordeão.
Descrição
Os cartões contêm informações organizadas relacionadas a um único assunto, como uma foto, um link e um texto. A tabela a seguir mostra os tipos de cartão Framework7 -
| S.No | Tipos e descrição |
|---|---|
| 1 | Layout HTML do cartão O layout HTML básico do cartão usa classes de cartão para organizar seus itens. |
| 2 | Vista de lista com cartões Você pode usar cartões como elementos de exibição de lista, adicionando a classe cards-list a <div class = "list-block"> . |
Descrição
Chip é um pequeno bloco de entidade, que pode conter uma foto, uma pequena sequência de título e informações curtas.
Layout de HTML de chips
O código a seguir mostra o layout HTML do chip básico usado no Framework7 -
<div class = "chip">
<div class = "chip-media">
<img src = "http://lorempixel.com/100/100/people/9/">
</div>
<div class = "chip-label">Jane Doe</div>
<a href = "#" class = "chip-delete"></a>
</div>O layout HTML acima contém muitas classes, conforme listado abaixo -
chips - É o contêiner de chips.
chip-media- Este é o elemento de mídia do chip que pode conter imagens, avatar ou ícone. É opcional.
card-label - É a etiqueta de texto do chip.
card-delete - É o link de ícone de exclusão opcional de um chip.
Exemplo
O exemplo a seguir representa as entidades, como álbuns, elementos de cartão, etc. junto com uma foto e informações breves -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Chips HTML Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Chips HTML Layout</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Chips With Text</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
</div>
</div>
<div class = "content-block-title">Chips with icons</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
<div class = "chip-label">Set Date</div>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent Mail</div>
</div>
</div>
<div class = "content-block-title">Contact Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
<div class = "chip-label">Sunil Narayan</div>
</div>
<div class = "chip">
<div class = "chip-media bg-pink">R</div>
<div class = "chip-label">Raghav</div>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
</div>
<div class = "chip">
<div class = "chip-media bg-red">Z</div>
<div class = "chip-label">Zien</div>
</div>
</div>
<div class = "content-block-title">Deletable Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-green">R</div>
<div class = "chip-label">Raghav</div>
<a href = "#" class = "chip-delete"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
</style>
<script>
var myApp = new Framework7 ({
material: true
});
var $$ = Dom7;
$$('.chip-delete').on('click', function (e) {
e.preventDefault();
var chip = $$(this).parents('.chip');
myApp.confirm('Do you want to delete this Chip?', function () {
chip.remove();
});
});
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como cards_html_layout.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/cards_html_layout.html e a saída é exibida conforme mostrado abaixo.
O exemplo representa as entidades complexas em pequenos blocos, como álbuns, elementos de cartão, imagem postada, que contém foto, sequência de título e informações breves.
Descrição
Framework7 fornece um grupo de botões prontos para uso, apenas adicionando classes apropriadas aos links ou botões de entrada.
| S.No | Tipos e descrição |
|---|---|
| 1 | Botões de tema iOS Framework7 fornece muitos botões de tema iOS, que podem ser usados aplicando classes apropriadas. |
| 2 | Botões de tema de material O tema material fornece muitos botões para usar em seu aplicativo usando classes apropriadas. |
Descrição
Framework7 fornece botão de ação flutuante para uma ação promovida. Eles aparecem como um ícone circulado flutuante sobre a IU. Ele tem os comportamentos de movimento que contêm transformação , lançamento e transferência de um ponto de ancoragem .
O botão de ação flutuante só é compatível com o tema Material.
A tabela a seguir lista os tipos de botões de ação usados no Framework7 -
| S.No | Tipos e descrição |
|---|---|
| 1 | Layout de botão de ação flutuante É muito simples; você só precisa colocá-lo como filho de página ou visualização . |
| 2 | Morph To Popover Se você deseja abrir o popover clicando no botão de ação flutuante, você pode usar a classe botão flutuante para popover . |
| 3 | Discagem rápida Você pode invocar ações relacionadas clicando no botão de ação flutuante usando a discagem rápida . |
Descrição
Os formulários são usados para interagir com os usuários e coletar dados dos usuários da web usando campos de texto, caixas de seleção, botões de rádio, etc.
Framework7 fornece diferentes tipos de elementos de formulário para trabalhar com os aplicativos sem problemas, conforme especificado na tabela abaixo -
| S.No | Tipo de sobreposição e descrição |
|---|---|
| 1 | Elementos de Formulário Os elementos do formulário são usados para criar layouts de formulário de boa aparência. |
| 2 | Caixas de seleção e rádios A extensão de visualização de lista permite que você crie caixas de seleção e entradas de rádio no Framework7. |
| 3 | Smart Select A seleção inteligente é uma maneira fácil de alterar as seleções de forma para páginas dinâmicas usando grupos de caixas de seleção e entradas de rádio. |
| 4 | Elementos desativados Os elementos podem ser desabilitados aplicando a classe desabilitada ao elemento ou adicionando atributos desabilitados para o elemento do formulário. |
| 5 | Dados do formulário O Framework7 possui poucos métodos úteis, o que facilita o trabalho com formulários. |
| 6 | Armazenamento de Formulários É fácil com o armazenamento de formulários armazenar e analisar dados de formulários automaticamente em páginas carregadas com Ajax. |
| 7 | Envio de formulário Ajax Framework7 permite que você envie dados automaticamente usando Ajax. |
Descrição
As guias são conjuntos de conteúdo agrupados logicamente que nos permitem alternar rapidamente entre elas e economiza espaço como acordeões.
Layout das guias
O código a seguir define o layout das guias -
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>Onde -
<div class = "tabs">- É um wrapper obrigatório para todas as guias. Se perdermos isso, as guias não funcionarão.
-
<div class = "tab"> - É uma única guia, que deve ter unique id atributo.
-
<div class = "tab active">- É uma única guia ativa, que usa classe ativa adicional para tornar a guia visível (ativa).
Alternando entre as guias
Você pode usar algum controlador no layout de guias, para que o usuário possa alternar entre eles.
Para isso, você precisa criar links (<a> tags) com classe tab-link e atributo href igual ao atributo id da guia alvo -
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>
<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) -->
<a href = "#tab2" class = "tab-link">Tab 2</a>
<a href = "#tab3" class = "tab-link">Tab 3</a>Alternar várias guias
Se você estiver usando um link de guia única para alternar entre várias guias, poderá usar classes em vez de usar IDs e atributo de guia de dados .
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>O atributo data-tab de tab-link contém o seletor CSS da guia / guias de destino.
Podemos usar diferentes formas de guias, que são especificadas na tabela a seguir -
| S.No | Tipos e descrição de guias |
|---|---|
| 1 | Guias embutidas As guias embutidas são conjuntos agrupados em linha que permitem que você alterne rapidamente entre elas. |
| 2 | Alternar guias da barra de navegação Podemos colocar guias na barra de navegação que permitem que você alterne entre elas. |
| 3 | Alternar visualizações da barra de guias Uma guia única pode ser usada para alternar entre as visualizações com sua própria navegação e layout. |
| 4 | Guias animadas Você pode usar uma transição simples (animação) para alternar entre as guias. |
| 5 | Guias deslizantes Você pode criar guias deslizantes com transição simples usando a classe tabs-swipeable-wrap para as guias. |
| 6 | Eventos JavaScript de guias Os eventos JavaScript podem ser usados quando você está trabalhando com o código JavaScript para as guias. |
| 7 | Mostrar guia usando JavaScript Você pode alternar ou mostrar a guia usando métodos JavaScript. |
Descrição
O controle deslizante deslizante é o controle deslizante de toque mais poderoso e moderno e vem no Framework7 com muitos recursos.
O seguinte layout HTML mostra o controle deslizante -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>As seguintes classes são usadas para o controle deslizante -
swiper-container - É um elemento obrigatório para o contêiner do controle deslizante principal e é usado para slides e paginações.
Swiper-wrapper - É um elemento necessário para slides de invólucro adicionais.
swiper-slide - É um único elemento de slide e pode conter qualquer HTML dentro.
swiper-pagination - É opcional para marcadores de paginação e são criados automaticamente.
Você pode inicializar o swiper com JavaScript usando seus métodos relacionados -
myApp.swiper(swiperContainer,parameters)OU
new Swiper(swiperContainer, parameters)Ambos os métodos são usados para inicializar o controle deslizante com opções.
Os métodos fornecidos acima contêm os seguintes parâmetros -
swiperContainer- É HTMLElement ou string de um container swiper e é obrigatório.
parameters - São elementos opcionais que contêm objetos com parâmetros de swiper.
Por exemplo -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});É possível acessar uma instância de swiper e a propriedade swiper do contêiner do slider tem o seguinte elemento HTML -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();Você pode ver as diferentes formas e tipos de swiper na tabela a seguir -
| S.No | Tipos e descrição de swiper |
|---|---|
| 1 | Swiper padrão com paginação É um controle deslizante de toque moderno e desliza horizontalmente, por padrão. |
| 2 | Swiper vertical Este também funciona como um deslizante padrão, mas desliza verticalmente. |
| 3 | Com espaço entre slides Este swiper é usado para dar espaço entre dois slides. |
| 4 | Swipers múltiplos Este swiper usa mais de um swiper em uma única página. |
| 5 | Swipers aninhados É a combinação de slides verticais e horizontais. |
| 6 | Controles personalizados Ele é usado para controles personalizados para escolher ou deslizar qualquer slide. |
| 7 | Carregamento lento Ele pode ser usado para arquivo multimídia, que leva tempo para carregar. |
Descrição
O navegador de fotos é semelhante ao componente de navegador de fotos do iOS para exibir grupos de imagens, que podem ser ampliados e panorâmicos. Para deslizar entre as imagens, o navegador de fotos usa o Swiper Slider .
A tabela a seguir mostra os tipos de navegador de fotos usados no framework7 -
| S.No | Tipos de navegador de fotos e descrição |
|---|---|
| 1 | Criar instância do navegador de fotos O navegador de fotos pode ser criado e inicializado usando apenas JavaScript. |
| 2 | Parâmetros do navegador de fotos Framework7 fornece uma lista de parâmetros, que são usados com o navegador de fotos. |
| 3 | Métodos e propriedades do navegador de fotos Você obterá uma variável de instância inicializada para usar os métodos e propriedades do navegador de fotos assim que inicializar o navegador de fotos. |
| 4 | Matriz de fotos Durante a inicialização do navegador de fotos, você precisa passar o parâmetro array com fotos / vídeos em fotos . |
| 5 | Modelos de navegador de fotos O Framework7 fornece muitos modelos de navegador de fotos, que você pode passar na inicialização do navegador de fotos. |
Descrição
O Autocomplete é um componente otimizado para toque e móvel do Framework7, que pode ser suspenso ou autônomo. Você pode criar e inicializar a instância do Autocomplete usando o método JavaScript -
myApp.autocomplete(parameters)Onde os parâmetros são objetos obrigatórios usados para inicializar a instância do Autocomplete.
Parâmetros de preenchimento automático
A tabela a seguir lista os parâmetros de preenchimento automático disponíveis no Framework7 -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | openIn Ele define como abrir um Autocomplete que pode ser usado como lista suspensa, popup ou página. |
corda | página |
| 2 | source Ele usa instância de autocomplete, consulta de pesquisa e função de renderização para passar itens correspondentes com array. |
função (preenchimento automático, consulta, renderização) | - |
| 3 | valueProperty Ele especifica o valor do item da chave do objeto de item correspondente. |
corda | Eu iria |
| 4 | limit Ele exibe o número limitado de itens no preenchimento automático por consulta. |
número | - |
| 5 | preloader O pré-carregador pode ser usado para especificar o layout de preenchimento automático definindo-o como verdadeiro. |
boleano | falso |
| 6 | preloaderColor Ele especifica a cor do pré-carregador. Por padrão, a cor é "preto". |
corda | - |
| 7 | value Define a matriz com os valores padrão selecionados. |
matriz | - |
| 8 | textProperty Ele especifica o valor do item da chave do objeto de item correspondente, que pode ser usado como um título das opções exibidas. |
corda | texto |
Parâmetros de preenchimento automático autônomo
A tabela a seguir lista os parâmetros de preenchimento automático autônomo disponíveis no Framework7 -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | opener É um parâmetro de string ou elemento HTML, que abrirá a página autocomplete autônoma. |
string ou HTMLElement | - |
| 2 | popupCloseText É usado para fechar o pop-up de preenchimento automático. |
corda | 'Fechar' |
| 3 | backText Ele fornece o link de retorno quando o preenchimento automático é aberto como página. |
corda | 'De volta' |
| 4 | pageTitle Ele especifica o título da página de preenchimento automático. |
corda | - |
| 5 | searchbarPlaceholderText Ele especifica o texto do espaço reservado da barra de pesquisa. |
corda | 'Pesquisa' |
| 6 | searchbarCancelText Ele define o texto do botão de cancelamento da barra de pesquisa. |
corda | 'cancelar' |
| 7 | notFoundText Ele exibe o texto quando nenhum elemento correspondente é encontrado. |
corda | 'Nada encontrado' |
| 8 | multiple Permite selecionar a seleção múltipla definindo-a como verdadeira. |
boleano | falso |
| 9 | navbarTheme Ele especifica o tema de cores para navbar. |
corda | - |
| 10 | backOnSelect Quando o usuário escolhe o valor, o preenchimento automático será fechado configurando-o como verdadeiro. |
boleano | falso |
| 11 | formTheme Ele especifica o tema de cores do formulário. |
corda | - |
Parâmetros de preenchimento automático suspenso
A tabela a seguir lista os parâmetros de preenchimento automático suspenso disponíveis no Framework7 -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | input É uma string ou elemento HTML usado para entrada de texto. |
string ou HTMLElement | - |
| 2 | dropdownPlaceholderText Ele especifica o texto do marcador de posição suspenso. |
corda | - |
| 3 | updateInputValueOnSelect Você pode atualizar o valor de entrada na seleção definindo-o como verdadeiro. |
boleano | verdadeiro |
| 4 | expandInput Você pode expandir a entrada de texto no modo de exibição de lista para tornar a tela inteira visível durante o menu suspenso, definindo a entrada de item como verdadeira. |
boleano | falso |
Funções de preenchimento automático de retorno de chamada
A tabela a seguir lista os parâmetros de preenchimento automático suspenso disponíveis no Framework7 -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | onChange Sempre que o valor de preenchimento automático for alterado, esta função de retorno de chamada será executada. |
função (preenchimento automático, valor) | - |
| 2 | onOpen Sempre que o preenchimento automático for aberto, esta função de retorno de chamada será executada. |
função (autocompletar) | - |
| 3 | onClose Sempre que o autocomplete for fechado, esta função de retorno de chamada será executada. |
função (autocompletar) | - |
Modelos de preenchimento automático
A tabela a seguir lista os parâmetros de preenchimento automático suspenso disponíveis no Framework7 -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | navbarTemplate É um template autocomplete navbar autônomo. |
corda | - |
| 2 | itemTemplate É um item de formulário template7 autônomo. |
corda | - |
| 3 | dropdownTemplate É o modelo suspenso template7. |
corda | - |
| 4 | dropdownItemTemplate É o item da lista suspensa template7. |
corda | - |
| 5 | dropdownPlaceholderTemplate É um item de espaço reservado de dropdown template7. |
corda | - |
Modelos padrão
A seguir estão os trechos de código do modelo padrão para os parâmetros dos modelos definidos acima -
navbarTemplate
<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
<div class = "navbar-inner">
<div class = "left sliding">
{{#if material}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
<i class = "icon icon-back"></i>
</a>
{{else}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
<i class = "icon icon-back"></i>
{{#if inPopup}}
<span>{{popupCloseText}}</span>
{{else}}
<span>{{backText}}</span>
{{/if}}
</a>
{{/if}}
</div>
<div class = "center sliding">{{pageTitle}}</div>
{{#if preloader}}
<div class = "right">
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
</div>
</div>
{{/if}}
</div>
</div>itemTemplate
<li>
<label class = "label-{{inputType}} item-content">
<input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
{{#if material}}
<div class = "item-media">
<i class = "icon icon-form-{{inputType}}"></i>
</div>
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{else}}
{{#if checkbox}}
<div class = "item-media">
<i class = "icon icon-form-checkbox"></i>
</div>
{{/if}}
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{/if}}
</label>
</li>dropdownTemplate
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>Métodos de preenchimento automático
A tabela a seguir especifica os métodos de preenchimento automático disponíveis no Framework7 -
| S.No | Métodos e Descrição |
|---|---|
| 1 | myAutocomplete.params Define os parâmetros de inicialização que são passados com o objeto. |
| 2 | myAutocomplete.value Ele define a matriz com os valores selecionados. |
| 3 | myAutocomplete.opened Ele abre o Autocomplete se estiver definido como verdadeiro. |
| 4 | myAutocomplete.dropdown Ele especifica uma instância do menu suspenso Autocomplete. |
| 5 | myAutocomplete.popup Ele especifica uma instância de pop-up de preenchimento automático. |
| 6 | myAutocomplete.page Ele especifica uma instância de página de preenchimento automático. |
| 7 | myAutocomplete.pageData Ele define os dados da página de preenchimento automático. |
| 8 | myAutocomplete.searchbar Ele define a instância da barra de pesquisa do Autocomplete. |
Propriedades de preenchimento automático
A tabela a seguir especifica os métodos de preenchimento automático disponíveis no Framework7 -
| S.No | Propriedades e descrição |
|---|---|
| 1 | myAutocomplete.open() Ele abre o Autocomplete, que pode ser usado como menu suspenso, pop-up ou página. |
| 2 | myAutocomplete.close() Ele fecha o Autocomplete. |
| 3 | myAutocomplete.showPreloader() Mostra o pré-carregador do Autocomplete. |
| 4 | myAutocomplete.hidePreloader() Ele oculta o pré-carregador do Autocomplete. |
| 5 | myAutocomplete.destroy() Ele destrói a instância do pré-carregador de Autocomplete e remove todos os eventos. |
Exemplo
O exemplo a seguir demonstra o uso de parâmetros de preenchimento automático ocultos no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
// Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
// Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide
//during dropdown
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with placeholder
var autocompleteDropdownPlaceholder = myApp.autocomplete ({
input: '#autocomplete-dropdown-placeholder',
openIn: 'dropdown',
dropdownPlaceholderText: 'Type as "India"',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page', //open in page
opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
backOnSelect: true, //After selecting item, then go back to page
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]);
}
});
// Multiple Standalone
var autocompleteStandaloneMultiple = myApp.autocomplete ({
openIn: 'page', //Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
// You can add item value to input value
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como autocomplete.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/autocomplete.html e a saída é exibida conforme mostrado abaixo.
O exemplo fornece preenchimento automático de valores em lista suspensa simples, lista suspensa com todos os valores, lista suspensa com espaço reservado, preenchimento automático autônomo etc.
Descrição
O selecionador se parece com o selecionador nativo do iOS e é um componente poderoso que permite selecionar qualquer valor da lista e também é usado para criar selecionadores de sobreposição personalizados. Você pode usar o Seletor como componente embutido ou como sobreposição. O seletor de sobreposição será automaticamente convertido para Popover em tablets (iPad).
Usando o método do aplicativo a seguir, você pode criar e inicializar o método JavaScript -
myApp.picker(parameters)Onde os parâmetros são objetos necessários, usados para inicializar a instância do selecionador e é um método obrigatório.
Parâmetros de seleção
A tabela a seguir especifica os parâmetros disponíveis nos selecionadores -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | container String com seletor CSS ou HTMLElement usado para gerar Seletor HTML para seletores embutidos. |
string ou HTMLElement | - |
| 2 | input O elemento de entrada relacionado colocado com a string com seletor CSS ou HTMLElement. |
string ou HTMLElement | - |
| 3 | scrollToInput É usado para rolar a janela de visualização (conteúdo da página) de entrada, sempre que o seletor é aberto. |
boleano | verdadeiro |
| 4 | inputReadOnly Usado para definir o atributo "somente leitura" na entrada especificada. |
boleano | verdadeiro |
| 5 | convertToPopover É usado para converter o modal selecionador para Popover em telas grandes como o iPad. |
boleano | verdadeiro |
| 6 | onlyOnPopover Você pode abrir o seletor no Popover, ativando-o. |
boleano | verdadeiro |
| 7 | cssClass Para selecionar modal, você pode usar o nome de classe CSS adicional. |
corda | - |
| 8 | closeByOutsideClick Você pode fechar o selecionador clicando fora do selecionador ou elemento de entrada ativando o método. |
boleano | falso |
| 9 | toolbar É usado para habilitar a barra de ferramentas modal do selecionador. |
boleano | verdadeiro |
| 10 | toolbarCloseText Usado para o botão Concluído / Fechar da barra de ferramentas. |
corda | 'Feito' |
| 11 | toolbarTemplate É o modelo HTML da barra de ferramentas, por padrão é uma string HTML com o seguinte modelo - |
corda | - |
Parâmetros de seleção específicos
A tabela a seguir lista os parâmetros de seletor específicos disponíveis -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | rotateEffect Ele ativa o efeito de rotação 3D no seletor. |
boleano | falso |
| 2 | momentumRatio Quando você solta o seletor após um toque e movimento rápido, ele produz mais impulso. |
número | 7 |
| 3 | updateValuesOnMomentum Usado para atualizar selecionadores e valores de entrada durante o momento. |
boleano | falso |
| 4 | updateValuesOnTouchmove Usado para atualizar selecionadores e valores de entrada durante o movimento de toque. |
boleano | verdadeiro |
| 5 | value A matriz tem seus valores iniciais e também cada item da matriz representa o valor da coluna relacionada. |
matriz | - |
| 6 | formatValue A função é usada para formatar o valor de entrada e deve retornar um valor de string novo / formatado. Os valores e displayValues são matrizes de colunas relacionadas. |
função (p, valores, displayValues) | - |
| 7 | cols Cada item da matriz representa um objeto com parâmetros de coluna. |
matriz | - |
Retornos de chamada de parâmetro do selecionador
A tabela a seguir mostra as listas de funções de retorno de chamada disponíveis nos selecionadores -
| S.No | Chamadas de retorno e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | onChange A função de retorno de chamada será executada sempre que o valor do seletor for alterado e os valores e displayValues forem matrizes de colunas relacionadas. |
função (p, valores, displayValues) | - |
| 2 | onOpen A função de retorno de chamada será executada sempre que o seletor for aberto. |
função (p) | - |
| 3 | onClose A função de retorno de chamada será executada sempre que o seletor for fechado. |
função (p) | - |
Parâmetros de coluna
No momento da configuração do Picker, precisamos passar o parâmetro cols . É representado como uma matriz, onde cada item é um objeto com parâmetros de coluna -
| S.No | Parâmetros e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | values Você pode especificar os valores das colunas da string com uma matriz. |
matriz | - |
| 2 | displayValues Possui array com valores de colunas de string e exibirá o valor do parâmetro de valores , quando não especificado. |
matriz | - |
| 3 | cssClass O nome da classe CSS usado para definir no recipiente HTML da coluna. |
corda | - |
| 4 | textAlign É usado para definir o alinhamento do texto dos valores da coluna e pode ser "esquerda", "centro" ou "direita" . |
corda | - |
| 5 | width A largura é calculada automaticamente, por padrão. Se você precisar corrigir as larguras das colunas no seletor com colunas dependentes que devem ser em px . |
número | - |
| 6 | divider É usado para coluna que deve ser divisória visual, não tem nenhum valor. |
boleano | falso |
| 7 | content É usado para especificar o divisor de coluna (divisor: verdadeiro) com o conteúdo da coluna. |
corda | - |
Parâmetro de retorno de chamada da coluna
| S.No | Chamadas de retorno e descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | onChange Sempre que o valor da coluna mudar, a função de retorno de chamada será executada. O valor e displayValue representam o valor da coluna atual e displayValue . |
função (p, valor, displayValue) | - |
Propriedades do selecionador
A variável Picker tem muitas propriedades que são fornecidas na tabela a seguir -
| S.No | Propriedades e descrição |
|---|---|
| 1 | myPicker.params Você pode inicializar os parâmetros passados com o objeto. |
| 2 | myPicker.value O valor selecionado para cada coluna é representado por uma matriz de itens. |
| 3 | myPicker.displayValue O valor de exibição selecionado para cada coluna é representado por uma matriz de itens. |
| 4 | myPicker.opened Quando o seletor é aberto, ele define o valor verdadeiro . |
| 5 | myPicker.inline Quando o selecionador está embutido, ele define o valor verdadeiro . |
| 6 | myPicker.cols As colunas do Seletor têm seus próprios métodos e propriedades. |
| 7 | myPicker.container A instância Dom7 é usada para o recipiente HTML. |
Métodos de seleção
A variável picker tem métodos úteis, que são fornecidos na tabela a seguir -
| S.No | Métodos e Descrição |
|---|---|
| 1 | myPicker.setValue(values, duration) Use para definir o novo valor do seletor. Os valores estão em array, onde cada item representa o valor de cada coluna. duração - é a duração da transição em ms. |
| 2 | myPicker.open() Use para abrir o Picker. |
| 3 | myPicker.close() Use para fechar o Picker. |
| 4 | myPicker.destroy() Use para destruir a instância do Picker e remover todos os eventos. |
Propriedades da coluna
Cada coluna na matriz myPicker.cols também tem suas próprias propriedades úteis, que são fornecidas na tabela a seguir -
//Get first column
var col = myPicker.cols[0];| S.No | Propriedades e descrição |
|---|---|
| 1 | col.container Você pode criar uma instância com o recipiente HTML da coluna. |
| 2 | col.items Você pode criar uma instância com elementos HTML de itens de coluna. |
| 3 | col.value Usado para selecionar o valor da coluna atual. |
| 4 | col.displayValue Usado para selecionar o valor da coluna atual de exibição. |
| 5 | col.activeIndex Forneça o número do índice atual, que é o item selecionado / ativo. |
Métodos de Coluna
Os métodos de coluna úteis são fornecidos na tabela a seguir -
| S.No | Métodos e Descrição |
|---|---|
| 1 | col.setValue(value, duration) Usado para definir um novo valor para a coluna atual. O valor deve ser um novo valor e a duração é a duração da transição fornecida em ms. |
| 2 | col.replaceValues(values, displayValues) Usado para substituir os valores da coluna e displayValues por novos. |
É usado para acessar a instância do Picker a partir de seu contêiner HTML, sempre que você inicializa o Picker como um Selecionador embutido.
var myPicker = $$('.picker-inline')[0].f7Picker;Existem diferentes tipos de selecionadores, conforme especificado na tabela a seguir -
| S.No | Tipos e descrição de guias |
|---|---|
| 1 | Seletor com valor único É um componente poderoso que permite escolher qualquer valor da lista. |
| 2 | Dois valores e efeito de rotação 3D No seletor, você pode usar para o efeito de rotação 3D. |
| 3 | Valores Dependentes Os valores são dependentes uns dos outros para o elemento especificado. |
| 4 | Barra de Ferramentas Personalizada Você pode usar um ou mais seletores em uma única página para personalizar. |
| 5 | Selecionador Inline / Data-hora Você pode selecionar o número de valores no seletor embutido. Como a data tem data, mês, ano e hora tem horas, minutos, segundos. |
Descrição
O componente Calendário permite que você controle datas facilmente e pode ser usado como um componente embutido ou de sobreposição. O calendário de sobreposição será convertido em popover nos tablets automaticamente.
O calendário pode ser criado e inicializado apenas usando JavaScript. Você precisa usar o método do aplicativo relacionado conforme mostrado abaixo -
myApp.calendar(parameters)- Este método retorna uma instância de calendário inicializada. Ele aceita um objeto como parâmetros.
A tabela a seguir mostra o uso do calendário no Framework7 -
| S.No | Uso e descrição do calendário |
|---|---|
| 1 | Parâmetros do calendário Framework7 fornece uma lista de parâmetros, que são usados com o calendário. |
| 2 | Métodos e propriedades do calendário Você obterá uma variável de instância inicializada para usar os métodos e propriedades do calendário, assim que inicializar o calendário. |
| 3 | Acesso à instância do calendário É possível acessar a instância do calendário a partir de seu contêiner HTML ao inicializar o calendário como embutido. |
Descrição
É um componente especial usado para atualizar (recarregar) o conteúdo da página puxando-o.
O código a seguir mostra como atualizar o conteúdo da página -
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>As seguintes classes são usadas na atualização -
page-content- Possui uma classe adicional de pull-to-refresh-content e é necessária para habilitar pull para atualizar.
pull-to-refresh-layer- É uma camada oculta, que é usada para puxar para atualizar o elemento visual e é apenas um pré-carregador e uma seta.
data-ptr-distance = "55" - Este é um atributo adicional que permite definir a distância de acionamento "puxar para atualizar" personalizada e seu valor padrão é 44px.
Puxe para atualizar eventos
Em 'Pull to Refresh', há alguns eventos JavaScript, que são fornecidos na tabela a seguir -
| S.No | Descrição do Evento | Alvo |
|---|---|---|
| 1 | pullstart Ele será acionado sempre que você começar a puxar para atualizar o conteúdo. |
Puxe para atualizar o conteúdo. |
| 2 | pullmove Ele é acionado quando você está puxando para atualizar o conteúdo. |
Puxe para atualizar o conteúdo. |
| 3 | pullend Ele será acionado sempre que você soltar o pull para atualizar o conteúdo. |
Puxe para atualizar o conteúdo. |
| 4 | refresh Este evento será acionado quando o pull para atualizar entrar no estado "atualizando" . |
Puxe para atualizar o conteúdo. |
| 5 | refreshdone Ele será acionado após ser atualizado e voltar ao estado inicial. Isso será feito após chamar o método pullToRefreshDone . |
Puxe para atualizar o conteúdo. |
Existem métodos de aplicativos que podem ser usados com Pull to Refresh.
| S.No | Métodos e descrição do aplicativo |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) É usado para redefinir o conteúdo puxar para atualizar . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) É usado para acionar a atualização no pull especificado para atualizar o conteúdo . |
| 3 | myApp.destroyPullToRefresh(ptrContent) É usado para destruir / desativar o pull para atualizar no pull especificado para atualizar o conteúdo . |
| 4 | myApp.initPullToRefresh(ptrContent) É usado para inicializar / habilitar pull para atualizar o conteúdo . |
Onde ptrContent é usado para HTMLElement ou string para puxar para atualizar-conteúdo para redefinir / disparar ou desabilitar / habilitar.
Exemplo
O exemplo a seguir demonstra o uso do componente de atualização que inicia a atualização do conteúdo de uma página -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Pull To Refresh</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como pull_to_refresh.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/pull_to_refresh.html e a saída é exibida conforme mostrado abaixo.
Quando o usuário puxar para baixo, a página será atualizada com o conteúdo.
Descrição
O Infinite Scroll permite que você carregue conteúdo adicional e execute as ações necessárias quando a página estiver próxima ao final.
O seguinte layout HTML mostra a rolagem infinita -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>O layout acima contém as seguintes classes -
page-content infinite-scroll - É usado para contêiner de rolagem infinita.
data-distance - Este atributo permite que você configure a distância da parte inferior da página (em px) para acionar o evento de rolagem infinita e seu valor padrão é 50px.
Se você deseja usar a rolagem infinita no topo da página, é necessário adicionar uma classe adicional "rolagem infinita no topo" ao "conteúdo da página" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Eventos de rolagem infinita
infinite- É usado para disparar quando a rolagem da página atinge a distância especificada até o final. Ele será direcionado por div class = "page-content infinite-scroll" .
Existem dois métodos do aplicativo que podem ser usados com o contêiner de rolagem infinita -
Para adicionar ouvinte de evento de rolagem infinita ao contêiner HTML especificado, use o seguinte método -
myApp.attachInfiniteScroll(container)Você pode remover o ouvinte de evento de rolagem infinita do contêiner HTML especificado usando o seguinte método -
myApp.detachInfiniteScroll(container)Onde os parâmetros são opções obrigatórias usadas como HTMLElement ou string para contêiner de rolagem infinita.
Exemplo
O exemplo a seguir demonstra a rolagem infinita que carrega o conteúdo adicional quando a rolagem da página está próxima à parte inferior -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>infinite_scroll</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length;
// Max items to load
var maxItems = 60;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// Append new items
$$('.list-block ul').append(html);
// Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como infinite_scroll.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/infinite_scroll.html e a saída é exibida conforme mostrado abaixo.
O exemplo permite o carregamento de conteúdo adicional quando a rolagem da página atinge a distância especificada até o final.
Descrição
As mensagens são componentes do Framework7, que permite a visualização de comentários e sistema de mensagens no aplicativo.
Layout de mensagens
O framework7 tem a seguinte estrutura de layout de mensagens -
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>O layout contém as seguintes classes em diferentes áreas -
Layout da página de mensagens
A tabela a seguir mostra as classes de layout de página de mensagens com descrição.
| S.No | Classes e descrição |
|---|---|
| 1 | messages-content É uma classe adicional necessária adicionada ao "conteúdo da página" e usada para wrapper de mensagens. |
| 2 | messages É um elemento obrigatório para bolhas de mensagens. |
| 3 | messages-date Ele usa o recipiente de carimbo de data para exibir a data e hora da mensagem enviada ou recebida. |
| 4 | message É uma única mensagem a ser exibida. |
Partes internas de mensagem única
A tabela a seguir mostra as classes de partes internas de mensagens simples com descrição.
| S.No | Classes e descrição |
|---|---|
| 1 | message-name Ele fornece o nome do remetente. |
| 2 | message-text Defina o texto com o tipo de bolha. |
| 3 | message-avatar Ele especifica o avatar do remetente. |
| 4 | message-label Ele especifica o rótulo de texto abaixo da bolha. |
Classes adicionais para contêiner de mensagem única
A tabela a seguir mostra classes adicionais para a descrição do contêiner de mensagem única.
| S.No | Classes e descrição |
|---|---|
| 1 | message-sent Ele especifica que a mensagem foi enviada pelo usuário e é exibida com a cor de fundo verde no lado direito. |
| 2 | message-received É utilizado para exibir a única mensagem indicando que a mensagem foi recebida pelo usuário e fica do lado esquerdo com fundo cinza. |
| 3 | message-pic É uma classe adicional para exibição de imagem com uma única mensagem. |
| 4 | message-with-avatar É uma classe adicional para exibir uma única mensagem (recebida ou enviada) com avatar. |
| 5 | message-with-tail Você pode adicionar uma cauda de bolha para uma única mensagem (recebida ou enviada). |
Classes adicionais disponíveis para mensagem única
A tabela a seguir mostra as classes disponíveis para uma única mensagem com descrição.
| S.No | Classes e descrição |
|---|---|
| 1 | message-hide-name É uma classe adicional para ocultar o nome da mensagem de uma única mensagem (recebida ou enviada). |
| 2 | message-hide-avatar É uma classe adicional para ocultar o avatar da mensagem para uma única mensagem (recebida ou enviada). |
| 3 | message-hide-label É uma classe adicional para ocultar o rótulo da mensagem para uma única mensagem (recebida ou enviada). |
| 4 | message-last Você pode usar esta classe para indicar a última mensagem recebida ou enviada na conversa atual por um remetente para uma única mensagem (recebida ou enviada). |
| 5 | message-first Você pode usar esta classe para indicar a primeira mensagem recebida ou enviada na conversa atual por um remetente para uma única mensagem (recebida ou enviada). |
Inicializando mensagens com JavaScript
Você pode inicializar as mensagens com JavaScript usando o seguinte método -
myApp.messages(messagesContainer, parameters)O método tem duas opções -
messagesContainer - É um elemento ou string HTML obrigatório que inclui o elemento HTML do contêiner de mensagens.
parameters - Especifica um objeto com parâmetros de mensagens.
Parâmetros de mensagens
A tabela a seguir mostra os parâmetros das mensagens com descrição.
| S.No | Parâmetro e Descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | autoLayout Ele adiciona classes adicionais necessárias a cada mensagem, ativando-a. |
boleano | verdadeiro |
| 2 | newMessagesFirst Você pode exibir a mensagem na parte superior em vez de exibir na parte inferior, ativando-o. |
boleano | falso |
| 3 | messages Ele exibe uma matriz de mensagens em que cada mensagem deve ser representada como objeto com parâmetros de mensagem. |
matriz | - |
| 4 | messageTemplate Ele exibe o modelo de mensagem única. |
corda | - |
Propriedades de mensagens
A tabela a seguir mostra as propriedades das mensagens com descrição.
| S.No | Descrição da Propriedade |
|---|---|
| 1 | myMessages.params Você pode inicializar os parâmetros passados com o objeto. |
| 2 | myMessages.container Define o elemento DOM7 com um contêiner HTML da barra de mensagens. |
Métodos de Mensagens
A tabela a seguir mostra os métodos de mensagens com descrição.
| S.No | Método e Descrição |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); A mensagem pode ser adicionada ao início ou ao final usando o parâmetro do método. Possui os seguintes parâmetros -
|
| 2 | myMessages.appendMessage(messageParameters, animate); Ele adiciona uma mensagem ao final do contêiner de mensagem. |
| 3 | myMessages.prependMessage(messageParameters, animate); Ele adiciona uma mensagem ao início do contêiner de mensagem. |
| 4 | myMessages.addMessages(messages, method, animate); Você pode adicionar várias mensagens ao mesmo tempo. Tem o seguinte parâmetro -
|
| 5 | myMessages.removeMessage(message); É usado para remover a mensagem. Tem o seguinte parâmetro -
|
| 6 | myMessages.removeMessages(messages); Você pode remover as várias mensagens. Tem o seguinte parâmetro -
|
| 7 | myMessages.scrollMessages(); Você pode rolar as mensagens de cima para baixo e vice-versa, dependendo do primeiro parâmetro da nova mensagem. |
| 8 | myMessages.layout(); O layout automático pode ser aplicado às mensagens. |
| 9 | myMessages.clean(); É usado para limpar as mensagens. |
| 10 | myMessages.destroy(); É usado para destruir as mensagens. |
Parâmetros de mensagem única
A tabela a seguir mostra os parâmetros para uma única mensagem com descrição.
| S.No | Parâmetro e Descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | text Ele define o texto da mensagem, que pode ser uma string HTML. |
corda | - |
| 2 | name Ele especifica o nome do remetente. |
corda | - |
| 3 | avatar Ele especifica a string do URL do avatar do remetente. |
corda | - |
| 4 | time Ele especifica a sequência de tempo da mensagem como '9:45 AM', '18: 35 '. |
corda | - |
| 5 | type Ele fornece o tipo de mensagem, se ela pode ser enviada ou recebida. |
corda | enviei |
| 6 | label Ele define o rótulo da mensagem. |
corda | - |
| 7 | day Fornece a sequência do dia da mensagem como 'domingo', 'segunda', 'ontem' etc. |
corda | - |
Inicializando mensagens com HTML
Você pode inicializar as mensagens com HTML sem JavaScript usando a classe adicional messages-init para mensagens e usar os atributos de dados para passar os parâmetros necessários conforme mostrado no trecho de código fornecido abaixo -
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...Exemplo
O exemplo a seguir demonstra o uso de mensagens no Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Messages</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// It indicates conversation flag
var conversationStarted = false;
// Here initiliaze the messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// Initiliaze the messagebar
var myMessagebar = myApp.messagebar('.messagebar');
// Displays the text after clicking the button
$$('.messagebar .link').on('click', function () {
// specifies the message text
var messageText = myMessagebar.value().trim();
// If there is no message, then exit from there
if (messageText.length === 0) return;
// Specifies the empty messagebar
myMessagebar.clear()
// Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// It adds the message
myMessages.addMessage ({
// It provides the message text
text: messageText,
// It displays the random message type
type: messageType,
// Specifies the avatar and name of the sender
avatar: avatar,
name: name,
// Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como messages.html arquivo na pasta raiz do servidor.
Abra esse arquivo HTML como http: //localhost/messages.html e a saída será exibida conforme mostrado abaixo.
Quando você digita uma mensagem na caixa de mensagem e clica no botão Enviar, isso especifica que sua mensagem foi enviada e é exibida com a cor de fundo verde no lado direito.
A mensagem que você recebe aparece no lado esquerdo com o fundo cinza junto com o nome do remetente.
Descrição
Framework7 fornece uma barra de ferramentas redimensionável especial para trabalhar com o sistema de mensagens no aplicativo.
O código a seguir mostra o layout da barra de mensagens -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>Na barra de mensagens, o interior da "página" é muito importante e fica à direita de "conteúdo-mensagens" -
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>Você pode usar o seguinte método para inicializar a barra de mensagens com JavaScript -
myApp.messagesbar(messagesbarContainer, parameters)O método tem duas opções -
messagesbarContainer - É um elemento ou string HTML obrigatório que inclui o elemento HTML do contêiner da barra de mensagens.
parameters - Especifica um objeto com parâmetros da barra de mensagens.
Por exemplo -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});Parâmetro Messagebar
maxHeight- É usado para definir a altura máxima da área de texto e será redimensionado dependendo da quantidade de seu texto. O tipo de parâmetro é número e o valor padrão é nulo .
Propriedades da barra de mensagens
A tabela a seguir mostra as propriedades da barra de mensagens -
| S.No | Propriedades e descrição |
|---|---|
| 1 | myMessagebar.params Você pode especificar o objeto com os parâmetros de inicialização passados. |
| 2 | myMessagebar.container Você pode especificar o elemento dom7 com o elemento HTML do contêiner da barra de mensagens. |
| 3 | myMessagebar.textarea Você pode especificar o elemento dom7 com o elemento HTML textarea da barra de mensagens. |
Métodos da barra de mensagens
A tabela a seguir mostra os métodos da barra de mensagens -
| S.No | Métodos e Descrição |
|---|---|
| 1 | myMessagebar.value(newValue); Ele define o valor / texto da área de texto da barra de mensagens e retorna o valor da área de texto da barra de mensagens, se newValue não é especificado. |
| 2 | myMessagebar.clear(); Ele limpa a área de texto e atualiza / redefine o tamanho. |
| 3 | myMessagebar.destroy(); Ele destrói a instância da barra de mensagens. |
Inicializar Messagebar com HTML
Você pode inicializar a barra de mensagens usando HTML sem métodos e propriedades JavaScript adicionando a classe messagebar-init à .messagebar e pode passar os parâmetros necessários usando atributos de dados .
O código a seguir especifica a inicialização da barra de mensagens com HTML -
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>Acesso à instância da Messagebar
É possível acessar a instância da barra de mensagens, se você inicializá-la usando HTML; isso é obtido usando a propriedade f7 Message bar de seu elemento contêiner.
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');Você pode ver o exemplo da Messagebar, que é explicado neste link
Descrição
As notificações são usadas para mostrar as mensagens necessárias, que aparecem como notificações push (ou locais) do iOS.
A tabela a seguir demonstra o uso de notificações em detalhes -
| S.No | Uso e descrição de notificações |
|---|---|
| 1 | API de notificações de JavaScript As notificações também podem ser adicionadas ou fechadas com JavaScript usando os métodos de aplicativo relacionados. |
| 2 | Layout de notificações As notificações do Framework7 serão adicionadas usando JavaScript. |
| 3 | IOS exemplo Framework7 permite que você use diferentes tipos de notificações em seu layout iOS. |
| 4 | Material de exemplo As notificações do Framework7 também podem ser usadas no layout do material. |
Descrição
O carregamento lento atrasa o processo de carregamento da imagem em uma determinada página. O carregamento lento melhora o desempenho da rolagem, acelera o carregamento da página e economiza tráfego.
Imagens e elementos de carregamento lento devem estar dentro de <div class = "page-content"> rolável para funcionar corretamente.
A tabela a seguir demonstra o uso de carregamento lento -
| S.No | Uso e descrição de carregamento lento |
|---|---|
| 1 | Uso O carregamento lento pode ser aplicado a imagens, imagens de fundo e com efeito fade-in. |
| 2 | Carregamento lento inicial manualmente Depois de inicializar uma página, se você adicionar imagens de carregamento lento manualmente, o carregamento lento não funcionará e você precisará usar métodos para inicializá-lo. |
É possível gatilho imagem carregamento manualmente usando preguiçoso evento em preguiçoso imagem / elemento como mostrado abaixo -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');Exemplo
O exemplo a seguir demonstra o uso de carregamento lento no Framework7 -
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como framework7_lazy_load.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/framework7_lazy_load.html e a saída é exibida conforme mostrado abaixo.
O exemplo especifica o carregamento lento de imagens em que as imagens serão carregadas na página quando você as rolar para baixo.
Descrição
Framework7 fornece diferentes temas de cores para seus aplicativos.
Um tema de cores fornece diferentes tipos de cores de tema usadas para trabalhar com os aplicativos sem problemas, conforme especificado na tabela abaixo -
| S.No | Tipo e descrição do tema |
|---|---|
| 1 | iOS Theme Colors Você pode usar 10 diferentes temas de cores padrão do iOS para o aplicativo. |
| 2 | Cores do tema do material Framework7 fornece 22 temas de cores de materiais padrão diferentes para o aplicativo. |
Aplicando Temas de Cores
O Framework7 permite que você aplique temas de cores em diferentes elementos, como página, bloco de lista, barra de navegação, linha de botões, etc., usando a classe theme- [color] para o elemento pai.
Exemplo
...
</body>
<div class = "page theme-gray">
...
</div>
<div class = "list-block theme-blue">
...
</div>
<div class = "navbar theme-green">
...
</div>
<div class = "buttons-row theme-red">
...
</div>Temas de layout
Você pode usar o tema de layout padrão para seu aplicativo usando dois temas branco e escuro . Os temas podem ser aplicados usando a classe layout- [theme] para o elemento pai.
Exemplo
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>Aulas auxiliares
Framework7 fornece classes auxiliares adicionais, que podem ser usadas fora ou sem os temas listados abaixo -
color-[color] - Pode ser usado para alterar a cor do texto do bloco ou a cor do botão, link, ícone etc.
bg-[color] - Define a cor de fundo predefinida no bloco ou elemento.
border-[color] - Define a cor da borda predefinida no bloco ou elemento.
Descrição
Hairline é uma classe que adiciona borda de 1 px ao redor das imagens usando a classe de borda. Com o lançamento do 1.x, hairlines revisou o trabalho com : after e : before pseudoelementos em vez de usar bordas CSS.
Linhas finas contêm as seguintes regras -
:after- Este pseudo elemento é usado para traços inferiores e direitos .
:before- Este pseudoelemento é usado para traços superiores e esquerdos .
O seguinte trecho de código mostra o uso do elemento : after .
.navbar:after {
background-color: red;
}O seguinte trecho de código remove a barra de ferramentas inferior -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}classe "sem fronteiras"
A linha fina será removida usando a classe sem borda e é compatível com Navbar, barra de ferramentas, cartão e seus elementos.
O código a seguir é usado para remover a linha do cabelo da barra de navegação -
<div class = "navbar no-border">
...
</div>Descrição
O Template7 é um mecanismo JavaScript leve e voltado para dispositivos móveis, que representa Ajax e páginas dinâmicas como modelos Template7 com contexto especificado e não requer nenhum script adicional. O Template7 está associado ao Framework7 como um mecanismo de template leve e padrão, que funciona mais rápido para aplicativos.
atuação
O processo de compilar string para a função JS é o segmento mais lento do template7. Portanto, você não precisa compilar o modelo várias vezes, apenas uma vez é suficiente.
//Here initialize the app
var myApp = new Framework7();
// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);
// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
// Execute the compiled templates with required content
var html = compiledSearchTemplate({/*...some data...*/});
// Do stuff with html
});Template7 é um mecanismo de template leve usado como uma biblioteca independente sem o Framework7. Os arquivos Template7 podem ser instalados de duas maneiras -
Você pode baixar do repositório github Template7 .
Você pode instalá-lo usando o seguinte comando via Bower -
Ou
bower install template7Descrição
No Template7, você pode compilar seus modelos automaticamente, especificando atributos especiais em uma tag <script>.
O código a seguir mostra o layout de compilação automática -
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>Você pode usar os seguintes atributos para inicializar a compilação automática -
type = "text/template7" - É usado para dizer ao Template7 para compilar automaticamente e é um tipo de script necessário.
id = "myTemplate" - O modelo pode ser acessado por meio do id e é um id do modelo obrigatório.
Para compilação automática, você precisa habilitar a inicialização do aplicativo passando o seguinte parâmetro -
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
Os modelos compilados automaticamente podem ser acessados como propriedades de Template7.templates após a inicialização do aplicativo. Também é conhecido como myApp.templates, em que myApp é uma instância inicializada do aplicativo.
Você pode usar os seguintes modelos em nosso arquivo index.html -
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>Você também pode acessar modelos em JavaScript após a inicialização do aplicativo -
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
// Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});Descrição
Template7 é um mecanismo de template JavaScript voltado para dispositivos móveis com sintaxe similar a handlebars.js . É um mecanismo de template padrão ultraleve e extremamente rápido no Framework7.
Primeiro, precisamos passar o seguinte parâmetro na inicialização do aplicativo que renderiza todas as páginas Ajax e dinâmicas como modelo Template7 -
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S.No | Uso e descrição das páginas do modelo 7 |
|---|---|
| 1 | Dados de modelos / páginas Você pode passar os dados / contexto necessários para páginas específicas, especificando todos os dados das páginas no parâmetro template7Data , enviado na inicialização de um aplicativo. |
| 2 | Passar Contexto Personalizado O Framework7 permite que você passe o contexto personalizado para qualquer página dinâmica ou qualquer Ajax carregado. |
| 3 | Carregar modelos diretamente Você pode renderizar e carregar modelos instantaneamente como páginas dinâmicas. |
| 4 | Consulta de URL Se você estiver usando o Template7 para renderizar páginas Ajax, seu contexto sempre será estendido com a propriedade especial url_query . |
Exemplo
O exemplo a seguir fornece os links, que exibem as informações do usuário, como detalhes do usuário, preferências do usuário, etc. quando você clica nesses links.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como index.html arquivo na pasta raiz do servidor.
Abra esse arquivo HTML como http: //localhost/index.html e a saída será exibida conforme mostrado abaixo.
O exemplo fornece os links, que exibem as informações do usuário, como detalhes do usuário, que o usuário gosta quando você clica nesses links.
Descrição
Quando você toca nos links e botões, eles são destacados. Isso é feito pelo estado ativo no Framework7.
- Ele se comporta como um aplicativo nativo, não como um aplicativo da web.
- Possui uma biblioteca de cliques rápidos integrada e deve ser ativada.
- A classe de estado ativo é igual ao seletor CSS : ativo .
- O estado ativo é habilitado adicionando a classe watch-active-state ao elemento <html> .
O código a seguir é usado para o estado ativo no estilo CSS -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}O código a seguir mostra a compatibilidade de fallback, quando o estado ativo ou cliques rápidos está desativado -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}Descrição
O evento Tap hold é usado para acionar (habilitar) após um evento sustentado e completo de toque, portanto, é chamado de evento tap hold . O Tab Hold é embutidoFast Clicks biblioteca.
Os seguintes parâmetros são usados para desabilitar ou habilitar e configurados por padrão -
| S.No | Parâmetro e Descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | tapHold Para habilitar eventos de retenção por toque quando for definido como verdadeiro. |
boleano | falso |
| 2 | tapHoldDelay Ele especifica a duração de segurar o tap antes de disparar o evento de taphold no elemento alvo. |
número | 750 |
| 3 | tapHoldPreventClicks O evento de toque em espera não será disparado após clicar no evento. |
boleano | verdadeiro |
O código a seguir é usado para habilitar eventos de retenção de toque -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Descrição
Touch Ripple é um efeito compatível apenas com o tema material Framework7. Por padrão, ele está habilitado no tema material e você pode desabilitá-lo usando o parâmetro materialRipple: false .
Elementos ondulantes
Você pode ativar os elementos de ondulação para corresponder a alguns seletores CSS, como -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-caixa de seleção etc.
Eles são especificados no parâmetro materialRippleElements . Você precisa habilitar a ondulação de toque , adicionar o seletor do elemento ao parâmetro materialRippleElements para usar o efeito de ondulação ou apenas usar a classe de ondulação .
Cor da onda ondulada
A cor do ripple pode ser alterada no elemento adicionando a classe ripple- [color] ao elemento.
Por exemplo -
<a href = "#" class = "button ripple-orange">Ripple Button</a>ou você pode definir a cor da onda ondulada usando o CSS como mostrado abaixo -
.button .ripple-wave {
background-color: #FFFF00;
}Desativar elementos ondulação
Você pode desativar o ripple para alguns elementos especificados adicionando a classe no-ripple a esses elementos. Por exemplo -
<a href = "#" class = "button no-ripple">Ripple Button</a>