Framework7 - Guía rápida
Framework7 es un marco de código abierto y gratuito para HTML móvil. Se utiliza para desarrollar aplicaciones móviles híbridas o aplicaciones web para dispositivos iOS y Android.
Framework7 se introdujo en el año 2014. La última versión 1.4.2 se lanzó en febrero de 2016 con licencia del MIT.
¿Por qué utilizar Framework7?
- Es más fácil desarrollar aplicaciones para iOS y Android.
- La curva de aprendizaje de Framework7 es muy sencilla.
- Tiene muchos widgets / componentes prediseñados.
- Tiene bibliotecas auxiliares integradas.
Caracteristicas
Framework7 es un marco de código abierto y de uso gratuito.
Framework7 tiene una sintaxis jQuery fácil y familiar para comenzar sin demora.
Para controlar el retraso del clic para las IU táctiles, Framework7 tiene una biblioteca FastClick incorporada .
Framework7 tiene un diseño de sistema de cuadrícula incorporado para organizar sus elementos de manera receptiva.
Framework7 carga páginas dinámicamente desde plantillas a través de una API de enrutador flexible .
Ventajas
Framework7 no depende de ninguna biblioteca de terceros, incluso para la manipulación de DOM. En cambio, tiene su propio DOM7 personalizado.
Framework7 también se puede usar con marcos Angular y React .
Puede comenzar a crear aplicaciones una vez que sepa HTML, CSS y algo de JavaScript básico.
Admite un desarrollo más rápido a través de Bower .
Es fácil desarrollar aplicaciones para iOS y Android sin tener que aprenderlo.
Desventajas
Framework7 solo es compatible con plataformas como iOS y Android.
El soporte de la comunidad en línea para el marco Framework7 es menor en comparación con iOS y Andriod.
En este capítulo, analizaremos cómo instalar y configurar Framework7.
Puede descargar Framework7 de dos formas:
Descarga desde el repositorio Framework7 Github
Puede instalar Framework7, usando Bower como se muestra a continuación:
bower install framework7Después de la instalación exitosa de Framework7, debe seguir los pasos que se indican a continuación para hacer uso de Framework7 en su aplicación:
Step 1 - Necesitas instalar gulp-cli para construir versiones de desarrollo y dist de Framework7 usando el siguiente comando.
npm install gulp-cliEl cli son las siglas de Command Line Utility para Gulp.
Step 2 - El Gulp debe instalarse globalmente usando el siguiente comando.
npm install --global gulpStep 3- A continuación, instale el administrador de paquetes NodeJS, que instala los programas de nodo que facilita la especificación y vinculación de dependencias. El siguiente comando se usa para instalar npm.
npm installStep 4 - La versión de desarrollo de Framework7 se puede construir usando el siguiente comando.
npm buildStep 5- Una vez que construya la versión de desarrollo de Framework7, comience a construir la aplicación desde la carpeta dist / usando el siguiente comando.
npm distStep 6 - Mantenga la carpeta de su aplicación en el servidor y ejecute el siguiente comando para navegar entre las páginas de su aplicación.
gulp serverDescargar la biblioteca Framework7 desde CDN
Una CDN o Content Delivery Network es una red de servidores diseñada para entregar archivos a los usuarios. Si utiliza un enlace CDN en su página web, traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si un visitante de su página web ya ha descargado una copia de Framework7 desde el mismo CDN, no tendrá que volver a descargarla. Puede incluir los siguientes archivos CDN en el documento HTML.
Las siguientes CDN se utilizan en una iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Se utiliza para incluir la biblioteca CSS de Framework7 iOS en su aplicación.
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />Se utiliza para incluir estilos de color relacionados con Framework7 iOS en su aplicación.
Las siguientes CDN se utilizan en Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>Se utiliza para incluir la biblioteca JS Framework7 en su aplicación.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>Se utiliza para incluir el estilo de Material Framework7 en su aplicación.
Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial. Usamos el servidor AMPPS (AMPPS es una pila WAMP, MAMP y LAMP de Apache, MySQL, MongoDB, PHP, Perl y Python) para ejecutar todos nuestros ejemplos.
Ejemplo
El siguiente ejemplo demuestra el uso de una aplicación simple en Framework7, que mostrará el cuadro de alerta con el mensaje personalizado cuando haga clic en la barra de navegación.
<!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>A continuación, cree una página HTML más, es decir envirmnt_about.html como se muestra a continuación -
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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML anterior como framework7_environment.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/framework7_environment.html y la salida se muestra como se muestra a continuación.
Al hacer clic en la barra de navegación, se mostrará el cuadro de alerta con el mensaje personalizado.
Descripción
Framework7 proporciona diferentes tipos de diseños para su aplicación. Admite tres tipos de diseños de barra de navegación / barra de herramientas:
| S. No | Tipos de diseño y descripción |
|---|---|
| 1 | Diseño estático El diseño estático es el tipo de diseño más utilizado e incluye barra de navegación y barra de herramientas, que puede ser un contenido de página desplazable y cada página contiene su propia barra de navegación y barra de herramientas. |
| 2 | Diseño fijo El diseño fijo incluye su propia barra de navegación y barra de herramientas, que pueden verse en la pantalla y no pueden desplazarse por la página. |
| 3 | A través del diseño En este diseño, la barra de navegación y la barra de herramientas aparecen fijas para todas las páginas dentro de la vista única. |
| 4 | Diseño mixto Puede mezclar los diferentes tipos de diseños en la vista única. |
Sin barra de navegación / barra de herramientas
Si no desea utilizar barra de navegación y la barra de herramientas, a continuación, no incluyen clases apropiadas ( navbar-fijo , barra de navegación a través , de la fijada la barra de herramientas , barra de herramientas a través de ) a la página / páginas / vista.
Descripción
En este capítulo, estudiemos sobre la barra de navegación . Suele colocarse en la parte superior de una pantalla que contiene el título de la página y los elementos de navegación.
Navbar consta de tres partes, cada una de las cuales puede contener cualquier contenido HTML, pero se sugiere que las use de la manera que se indica a continuación:
Left- Está diseñado para colocar íconos de vínculo posterior o vínculo de texto único.
Center - Se utiliza para mostrar el título de la página o los enlaces de la pestaña.
Right- Esta parte es similar a la parte izquierda .
La siguiente tabla muestra el uso de la barra de navegación en detalle:
| S. No | Tipos y descripción de la barra de navegación |
|---|---|
| 1 | Barra de navegación básica Se puede crear una barra de navegación básica usando las clases de barra de navegación , barra de navegación interna , izquierda , centro y derecha . |
| 2 | Barra de navegación con enlaces Para usar enlaces en la parte izquierda y derecha de su barra de navegación, simplemente agregue la etiqueta <a> con el enlace de la clase . |
| 3 | Varios enlaces Para usar varios enlaces, simplemente agregue algunos <a class = "link"> más a la parte de su elección. |
| 4 | Enlaces con texto e iconos Los enlaces se pueden proporcionar con iconos y textos agregando clases para iconos y envolviendo el texto del enlace con el elemento <span> . |
| 5 | Enlaces con solo iconos Los enlaces de la barra de navegación se pueden proporcionar solo con iconos agregando una clase de solo icono a los enlaces. |
| 6 | Aplicación relacionada y métodos de visualización Al inicializar la Vista , framework7 le permite usar métodos disponibles para la barra de navegación. |
| 7 | Ocultar la barra de navegación automáticamente La barra de navegación se puede ocultar / mostrar automáticamente para algunas páginas cargadas de Ajax donde no se requiere barra de navegación. |
Descripción
La barra de herramientas proporciona un fácil acceso a otras páginas mediante el uso de elementos de navegación en la parte inferior de la pantalla.
Puede utilizar la barra de herramientas de dos formas, tal como se especifica en la tabla:
| S. No | Tipos de barra de herramientas y descripción |
|---|---|
| 1 | Esconder barra de herramientas Puede ocultar la barra de herramientas automáticamente cuando carga las páginas utilizando el no-toolbar clase a la página cargada. |
| 2 | Barra de herramientas inferior Coloque la barra de herramientas en la parte inferior de la página utilizando el toolbar-bottom clase. |
Métodos de la barra de herramientas
Los siguientes métodos disponibles se pueden utilizar con las barras de herramientas:
| S. No | Métodos y descripción de la barra de herramientas |
|---|---|
| 1 | myApp.hideToolbar(toolbar) Oculta la barra de herramientas especificada. |
| 2 | myApp.showToolbar(toolbar) Muestra la barra de herramientas especificada. |
| 3 | view.hideToolbar() Oculta la barra de herramientas especificada en la vista. |
| 4 | view.showToolbar() Muestra la barra de herramientas especificada en la vista. |
Ejemplo
El siguiente ejemplo demuestra el uso del diseño de la barra de herramientas en Framework7.
Primero, crearemos una página HTML llamada toolbar.html como se muestra a continuación -
<!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>Ahora, inicialice su aplicación y vistas en el archivo JS personalizado toolbar.js.
Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como toolbar.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar.html y la salida se muestra como se muestra a continuación.
Descripción
Framework 7 permite buscar los elementos usando la clase de barra de búsqueda .
Parámetros de la barra de búsqueda
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | searchList Busca en el selector CSS o elemento HTML de la lista. |
cadena o elemento HTML | - |
| 2 | searchIn Puede buscar los elementos de la vista de lista de los selectores CSS, también busca los elementos pasando las clases .item-title , .item-text . |
cuerda | '.item-title' |
| 3 | found Busca el selector de CSS o el elemento HTML usando el elemento "encontrado". Además, usa el elemento .searchbar-found si no hay ningún elemento especificado. |
cadena o elemento HTML | - |
| 4 | notfound Busca en el selector de CSS o en el elemento HTML utilizando el elemento "no encontrado". Además, usa el elemento .searchbar-not-found si no hay ningún elemento especificado. |
cadena o elemento HTML | - |
| 5 | overlay Busca en el selector CSS o elemento HTML usando el elemento "searchbar overlay" y usa el elemento .searchbar-overlay , si no hay ningún elemento especificado. |
cadena o elemento HTML | - |
| 6 | ignore Puede ignorar el selector de CSS para elementos utilizando la barra de búsqueda. |
cuerda | '.searchbar-ignore' |
| 7 | customSearch Cuando está habilitada, la barra de búsqueda no buscará a través de ninguno de los bloques de lista especificados por searchList y se le permitirá utilizar la función de búsqueda personalizada. |
booleano | falso |
| 8 | removeDiacritics Al buscar un elemento, elimine los signos diacríticos habilitando este parámetro. |
booleano | falso |
| 9 | hideDividers Este parámetro ocultará los divisores de elementos y el título del grupo, si no hay elementos. |
booleano | cierto |
| 10 | hideGroups Este parámetro ocultará los grupos, si no se encuentran elementos en los grupos de vista de lista. |
booleano | cierto |
Devolución de llamada de la barra de búsqueda
| S. No | Devolución de llamada y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | onSearch Este método activará la función de devolución de llamada mientras realiza la búsqueda. |
función (es) | - |
| 2 | onEnable Este método activará la función de devolución de llamada cuando la barra de búsqueda se active. |
función (es) | - |
| 3 | onDisable Este método activará la función de devolución de llamada cuando la barra de búsqueda se vuelva inactiva. |
función (es) | - |
| 4 | onClear Este método activará la función de devolución de llamada cuando haga clic en el elemento "borrar". |
función (es) | - |
Propiedades de la barra de búsqueda
| S. No | Propiedades y descripción |
|---|---|
| 1 | mySearchbar.params Representa los parámetros inicializados pasados con el objeto. |
| 2 | mySearchbar.query Busca la consulta actual. |
| 3 | mySearchbar.searchList Define el bloque de la lista de búsqueda. |
| 4 | mySearchbar.container Define el contenedor de la barra de búsqueda con el elemento HTML. |
| 5 | mySearchbar.input Define la entrada de la barra de búsqueda con el elemento HTML. |
| 6 | mySearchbar.active Define si la barra de búsqueda está habilitada o deshabilitada. |
Métodos de la barra de búsqueda
| S. No | Métodos y descripción |
|---|---|
| 1 | mySearchbar.search(query); Este método busca la consulta pasada. |
| 2 | mySearchbar.enable(); Habilita la barra de búsqueda. |
| 3 | mySearchbar.disable(); Desactiva la barra de búsqueda. |
| 4 | mySearchbar.clear(); Puede borrar la consulta y los resultados de la búsqueda. |
| 5 | mySearchbar.destroy(); Destruye la instancia de la barra de búsqueda. |
Eventos de JavaScript de la barra de búsqueda
| S. No | Descripción del evento | Objetivo |
|---|---|---|
| 1 | search Puede disparar este evento mientras busca elementos. |
<div class = "list-block"> |
| 2 | clearSearch Este evento se activará cuando el usuario haga clic en el elemento clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Cuando la barra de búsqueda se habilita, este evento se activará. |
<div class = "list-block"> |
| 4 | disableSearch Cuando la barra de búsqueda se desactiva y el usuario hace clic en el botón cancelar o en el elemento "barra de búsqueda superpuesta", este evento se activará. |
<div class = "list-block"> |
Ejemplo
El siguiente ejemplo demuestra el uso de la barra de búsqueda en scroll en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente search_bar.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/search_bar.html y la salida se muestra como se muestra a continuación.
Si el elemento contenido en la lista se ingresa en la barra de búsqueda, muestra ese elemento en particular de la lista.
Si se ingresa el elemento distinto de los elementos contenidos en la lista, no muestra ningún elemento encontrado.
Descripción
IOS 7+ le permite crear aplicaciones de pantalla completa que podrían crear un problema cuando su barra de estado se superpone a su aplicación. Framework7 resuelve este problema al detectar si su aplicación está en modo de pantalla completa o no. Si su aplicación está en modo de pantalla completa, el Framework7 agregará automáticamente la clase with-statusbar-overlay a <html> (o la eliminará si la aplicación no está en modo de pantalla completa) y debe agregar la clase statusbar-overlay en <body> como se muestra en el siguiente código -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...De forma predeterminada, <div> siempre estará oculto y fijo en la parte superior de su pantalla. Solo será visible cuando la aplicación esté en modo de pantalla completa y la clase with-statusbar-overlay se agregue a <html> .
Ejemplo
El siguiente ejemplo demuestra el uso de la barra de estado en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código html dado anteriormente como status_bar.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/status_bar.html y la salida se muestra como se muestra a continuación.
El ejemplo muestra el uso del statusbar-overlay, que le permite crear aplicaciones de pantalla completa cuando su barra de estado se superpone a la aplicación.
Descripción
El panel lateral se mueve hacia el lado izquierdo o derecho de la pantalla para mostrar el contenido. Framework7 le permite incluir hasta 2 paneles (panel lateral derecho y panel lateral izquierdo) en su aplicación. Debe agregar paneles al comienzo del <body> y luego elegir el efecto de apertura aplicando las siguientes clases enumeradas:
panel-reveal - Esto hará que se mueva todo el contenido de la aplicación.
panel-cover - Esto hará que el panel se superponga al contenido de la aplicación.
Por ejemplo, el siguiente código muestra cómo usar las clases anteriores:
<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>La siguiente tabla muestra los tipos de paneles admitidos por Framework77:
| S. No | Tipo y descripción |
|---|---|
| 1 | Abrir y cerrar paneles Una vez que agrega el panel y los efectos, necesitamos agregar funcionalidad para abrir y cerrar los paneles. |
| 2 | Eventos del panel Para detectar cómo interactúa un usuario con el panel, puede utilizar los eventos del panel. |
| 3 | Abrir paneles con deslizar Framework7 le brinda la función de abrir el panel con un gesto de deslizamiento . |
| 4 | ¿El panel está abierto? Podemos determinar si el panel está abierto o no usando el with-panel[position]-[effect] regla. |
Descripción
Los bloques de contenido se pueden usar para agregar contenido adicional con diferentes formatos.
Ejemplo
El siguiente ejemplo demuestra el uso del bloque de contenido en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como content_block.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/content_block.html y la salida se muestra como se muestra a continuación.
El código agrega formato adicional y el espacio requerido para el contenido del texto.
Descripción
Framework7 proporciona diferentes tipos de tipos de cuadrícula para colocar el contenido según las necesidades del usuario.
La cuadrícula de diseño proporciona diferentes tipos de tamaños de columnas, como se describe en la siguiente tabla:
| S. No | Clase | Clase de tabla | Anchura |
|---|---|---|---|
| 1 | col-5 | tableta-5 | 5% |
| 2 | col-10 | tableta-10 | 10% |
| 3 | col-15 | tableta-15 | 15% |
| 4 | col-20 | tableta-20 | 20% |
| 5 | col-25 | tableta-25 | 25% |
| 6 | col-30 | tableta-30 | 30% |
| 7 | col-33 | tableta-33 | 33,3% |
| 8 | col-35 | tableta-35 | 35% |
| 9 | col-40 | tableta-40 | 40% |
| 10 | col-45 | tableta-45 | 45% |
| 11 | col-50 | tableta-50 | 50% |
| 12 | col-55 | tableta-55 | 55% |
| 13 | col-60 | tableta-60 | 60% |
| 14 | col-65 | tableta-65 | sesenta y cinco% |
| 15 | col-66 | tableta-66 | 66,6% |
| dieciséis | col-70 | tableta-70 | 70% |
| 17 | col-75 | tableta-75 | 75% |
| 18 | col-80 | tableta-80 | 80% |
| 19 | col-85 | tableta-85 | 85% |
| 20 | col-90 | tableta-90 | 90% |
| 21 | col-95 | tableta-95 | 95% |
| 21 | col-100 | tableta-100 | 100% |
| 22 | col-auto | tablet-auto | Igual ancho |
Ejemplo
El siguiente ejemplo proporciona el diseño de cuadrícula para colocar su contenido según lo necesite en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como layout_grid.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/layout_grid.html, el resultado se muestra como se muestra a continuación.
Este código proporciona diferentes tipos de tipos de cuadrícula para colocar el contenido según las necesidades del usuario.
Descripción
Framework7 proporciona diferentes tipos de superposiciones para trabajar con las aplicaciones sin problemas. La siguiente tabla enumera algunas de las superposiciones de Framework7:
| S. No | Tipo de superposición y descripción |
|---|---|
| 1 | Modal Modal es una pequeña ventana que muestra el contenido de fuentes independientes sin salir de la ventana principal. |
| 2 | Surgir Popup es un cuadro emergente que muestra el contenido cuando el usuario hace clic en el elemento. |
| 3 | Popover Para gestionar la presentación de contenido temporal, se puede utilizar el componente popover. |
| 4 | Hoja de acción La hoja de acción se utiliza para presentar al usuario un conjunto de posibilidades sobre cómo manejar una tarea determinada. |
| 5 | Pantalla de ingreso al sistema La pantalla de inicio de sesión superpuesta se utiliza para mostrar el formato de la pantalla de inicio de sesión que se puede utilizar en una página o ventana emergente o como una superposición independiente. |
| 6 | Selector modal El selector modal se usa para elegir contenido personalizado que es similar al selector de calendario. |
Descripción
El precargador en Framework7 está hecho con Scalable Vector Graphic (SVG) y animado con CSS, lo que lo hace fácilmente redimensionable. El precargador está disponible en dos colores:
- el valor predeterminado es fondo claro
- otro es fondo oscuro
Puede usar la clase de precargador en su HTML como se muestra a continuación:
Ejemplo
El siguiente ejemplo demuestra el uso de preloader en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como preloader.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/preloader.html y la salida se muestra como se muestra a continuación.
Este código muestra el indicador de precargador, que está hecho con SVG y animado con CSS.
Descripción
Las barras de progreso se pueden utilizar para mostrar la carga de activos o el progreso de una tarea a los usuarios. Puede especificar la barra de progreso utilizando la clase de barra de progreso . Cuando el usuario no sabe cuánto tiempo estará allí el proceso de carga para la solicitud, puede usar la clase progressbar-infinite .
API de JavaScript de barra de progreso
La barra de progreso se puede utilizar junto con la API de JavaScript para especificar las propiedades de mostrar , ocultar y progresar mediante los siguientes métodos:
| S. No | Métodos | Descripción y parámetros |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | Establece la barra de progreso para el progreso de una tarea.
|
| 2 | myApp.hideProgressbar (contain er) | Oculta la barra de progreso.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Muestra la barra de progreso.
|
Ejemplo
El siguiente ejemplo muestra barras de progreso determinadas e indeterminadas animadas para indicar la actividad en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como progress_bar.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/progress_bar.html y la salida se muestra como se muestra a continuación.
El ejemplo muestra la barra de progreso, que indica cuánto tiempo tomará una operación para completar el proceso y muestra los diferentes tipos de barras de progreso para indicar la actividad.
Descripción
Las vistas de lista son potentes componentes de la interfaz de usuario que presentan datos en una lista desplazable de varias filas. Framework7 proporciona diferentes tipos de vista de lista para trabajar con su aplicación. La siguiente tabla enumera algunas de las vistas de lista de Framework7 :
| S. No | Tipos y descripción |
|---|---|
| 1 | Vista de la lista Las vistas de lista son potentes componentes de la interfaz de usuario, que presentan datos en una lista desplazable que contiene varias filas. |
| 2 | Lista de contactos La lista de contactos es un tipo de vista de lista, que se puede utilizar para mostrar la lista de contactos de personas. |
| 3 | Vista de lista de medios La vista de lista de medios se utiliza para mostrar estructuras de datos complicadas como productos, servicios e información de los usuarios. |
| 4 | Deslizar El deslizamiento le permite revelar acciones de menú ocultas deslizando el dedo sobre los elementos de la lista. |
| 5 | Lista ordenable La lista ordenable es un tipo de vista de lista, que ordena los elementos de la vista de lista. |
| 6 | Lista virtual Lista virtual un tipo de vista de lista, que incluye listas de una gran cantidad de elementos de datos sin disminuir su rendimiento. |
Descripción
El acordeón es un elemento de control gráfico que se muestra como una lista apilada de elementos. Cada acordeón se puede expandir o estirar para revelar el contenido asociado con ese acordeón.
Diseño plegable
Cuando está utilizando un único elemento plegable separado, debe omitir el elemento contenedor de la lista de acordeón .
A continuación se muestra una estructura de diseño plegable:
<!-- 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>Las siguientes clases se utilizan para acordeón en Framework7:
| S. No | Clases y descripción |
|---|---|
| 1 | accordion-list Es una clase opcional, que contiene un grupo de lista de elementos de acordeón. |
| 2 | accordion-item Es una clase obligatoria para un solo artículo de acordeón. |
| 3 | accordion-item-toggle Es una clase obligatoria que se utiliza para expandir el contenido del elemento de acordeón. |
| 4 | accordion-item-content Es una clase obligatoria que se utiliza para el contenido de elementos de acordeón ocultos. |
| 5 | accordion-item-expanded Es un único elemento de acordeón expandido. |
API de JavaScript de acordeón
Los métodos API de JavaScript se utilizan para abrir y cerrar el acordeón mediante programación.
Contiene los siguientes métodos de API de JavaScript:
myApp.accordionOpen(item) - Se utiliza para abrir acordeón.
myApp.accordionClose(item) - Se utiliza para cerrar acordeón.
myApp.accordionToggle(item) - Se utiliza para alternar acordeón.
Todos los métodos contienen un parámetro llamado item que es HTML o un elemento de cadena de accordion-item.
Eventos de acordeón
El acordeón contiene cuatro eventos que se enumeran en la siguiente tabla:
| S. No | Evento | Destino y descripción |
|---|---|---|
| 1 | abierto | Accordion item Cuando abres una animación, este evento se activará. |
| 2 | abrió | Accordion item Cuando se completa la apertura de una animación, este evento se activará. |
| 3 | cerca | Accordion item Cuando cierras una animación, este evento se activará. |
| 4 | cerrado | Accordion item Cuando se completa el cierre de una animación, este evento se activará. |
Vista de lista de acordeón
En la vista de lista de acordeón, puede usar el elemento de enlace de elemento en lugar de alternar en acordeón .
<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>Ejemplo
El siguiente ejemplo demuestra el uso del acordeón en el 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>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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como accordion.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/accordion.html y la salida se muestra como se muestra a continuación.
El ejemplo proporciona un diseño plegable, que se puede expandir para mostrar el contenido asociado con el acordeón.
Descripción
Las tarjetas contienen información organizada relacionada con un solo tema, como una foto, un enlace y un texto. La siguiente tabla muestra los tipos de tarjetas Framework7:
| S. No | Tipos y descripción |
|---|---|
| 1 | Diseño HTML de la tarjeta El diseño HTML básico de la tarjeta utiliza clases de tarjetas para organizar sus elementos. |
| 2 | Vista de lista con tarjetas Puede usar tarjetas como elementos de vista de lista agregando la clase de lista de tarjetas a <div class = "list-block"> . |
Descripción
Chip es un pequeño bloque de entidad, que puede contener una foto, una pequeña cadena de título e información breve.
Diseño HTML de chips
El siguiente código muestra el diseño HTML del chip básico utilizado en 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>El diseño HTML anterior contiene muchas clases como se enumeran a continuación:
chips - Es el contenedor de chips.
chip-media- Este es el elemento multimedia del chip que puede contener imágenes, avatar o icono. Es opcional.
card-label - Es la etiqueta de texto del chip.
card-delete - Es el enlace del icono de eliminación opcional de un chip.
Ejemplo
El siguiente ejemplo representa las entidades como álbumes, elementos de tarjeta, etc. junto con una foto y una breve información:
<!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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como cards_html_layout.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/cards_html_layout.html y el resultado se muestra como se muestra a continuación.
El ejemplo representa las entidades complejas en pequeños bloques como álbumes, elementos de tarjeta, imagen publicada, que contiene foto, cadena de título e información breve.
Descripción
Framework7 proporciona un grupo de botones listos para usar con solo agregar las clases apropiadas a los enlaces o botones de entrada.
| S. No | Tipos y descripción |
|---|---|
| 1 | Botones de tema de iOS Framework7 proporciona muchos botones de tema de iOS, que se pueden usar aplicando las clases apropiadas. |
| 2 | Botones de tema material El tema material proporciona muchos botones para usar en su aplicación mediante el uso de las clases adecuadas. |
Descripción
Framework7 proporciona un botón de acción flotante para una acción promocionada. Aparecen como un icono circular flotante sobre la interfaz de usuario. Tiene los comportamientos de movimiento que contienen morphing , lanzamiento y transferencia de un punto de anclaje .
El botón de acción flotante solo se admite en el tema Material.
La siguiente tabla enumera los tipos de botones de acción utilizados en Framework7:
| S. No | Tipos y descripción |
|---|---|
| 1 | Disposición del botón de acción flotante Es muy simple; solo necesita colocarlo como un elemento secundario de la página o vista . |
| 2 | Transformar a popover Si desea abrir popover al hacer clic en el botón de acción flotante, puede usar la clase de botón flotante a popover . |
| 3 | De marcación rápida Puede invocar acciones relacionadas al hacer clic en el botón de acción flotante utilizando la marcación rápida . |
Descripción
Los formularios se utilizan para interactuar con los usuarios y recopilan datos de los usuarios web mediante campos de texto, casillas de verificación, botones de radio, etc.
Framework7 proporciona diferentes tipos de elementos de formulario para trabajar con las aplicaciones sin problemas, como se especifica en la siguiente tabla:
| S. No | Tipo de superposición y descripción |
|---|---|
| 1 | Elementos de formulario Los elementos de formulario se utilizan para crear diseños de formularios atractivos. |
| 2 | Casillas de verificación y radios La extensión de la vista de lista le permite crear casillas de verificación y entradas de radio en Framework7. |
| 3 | Selección inteligente La selección inteligente es una manera fácil de cambiar selecciones de formulario a páginas dinámicas mediante el uso de grupos de casillas de verificación y entradas de radio. |
| 4 | Elementos deshabilitados Los elementos se pueden deshabilitar aplicando la clase deshabilitada al elemento o agregando atributos deshabilitados para el elemento de formulario. |
| 5 | Datos de formulario Framework7 tiene muy pocos métodos útiles, lo que facilita el trabajo con formularios. |
| 6 | Almacenamiento de formularios Es fácil con el almacenamiento de formularios almacenar y analizar datos de formularios automáticamente en páginas cargadas con Ajax. |
| 7 | Enviar formulario Ajax Framework7 le permite enviar datos automáticamente usando Ajax. |
Descripción
Las pestañas son conjuntos de contenido agrupado lógicamente que nos permiten cambiar rápidamente entre ellas y ahorrar espacio como si fueran acordeones.
Diseño de pestañas
El siguiente código define el diseño de las pestañas:
<!-- 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>Donde -
<div class = "tabs">- Es un contenedor obligatorio para todas las pestañas. Si pasamos por alto esto, las pestañas no funcionarán en absoluto.
-
<div class = "tab"> - Es una sola pestaña, que debería tener unique id atributo.
-
<div class = "tab active">- Es una sola pestaña activa, que utiliza una clase activa adicional para hacer que la pestaña sea visible (activa).
Cambiar entre pestañas
Puede usar algún controlador en el diseño de pestañas, para que el usuario pueda cambiar entre ellos.
Para esto, necesita crear enlaces (etiquetas <a>) con la clase de enlace de tabulación y el atributo href igual al atributo id de la pestaña de destino -
<!-- 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>Cambiar varias pestañas
Si está utilizando un enlace de pestaña única para cambiar entre varias pestañas, entonces puede usar clases en lugar de usar ID y atributos de pestaña de datos .
<!-- 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>La lengüeta de datos de atributo de la pestaña de vínculos contiene selector CSS de destino TAB / pestañas.
Podemos utilizar diferentes formas de pestañas, estas se especifican en la siguiente tabla -
| S. No | Tipos de pestañas y descripción |
|---|---|
| 1 | Pestañas en línea Las pestañas en línea son conjuntos de agrupaciones en línea que le permiten cambiar rápidamente entre ellas. |
| 2 | Cambiar pestañas desde la barra de navegación Podemos colocar pestañas en la barra de navegación que le permiten alternar entre ellas. |
| 3 | Cambiar vistas desde la barra de pestañas Se puede usar una sola pestaña para cambiar entre vistas con su propia navegación y diseño. |
| 4 | Pestañas animadas Puede utilizar una transición simple (animación) para cambiar de pestaña. |
| 5 | Pestañas deslizables Puede crear pestañas deslizables con una transición simple utilizando la clase tabs-swipeable-wrap para las pestañas. |
| 6 | Fichas Eventos JavaScript Los eventos de JavaScript se pueden utilizar cuando se trabaja con código JavaScript para las pestañas. |
| 7 | Mostrar pestaña usando JavaScript Puede cambiar o mostrar la pestaña utilizando métodos de JavaScript. |
Descripción
El deslizador deslizante es el deslizador táctil más potente y moderno y viene en Framework7 con muchas características.
El siguiente diseño HTML muestra el deslizador 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>Las siguientes clases se utilizan para el deslizador deslizante:
swiper-container - Es un elemento obligatorio para el contenedor deslizante principal y se utiliza para diapositivas y paginaciones.
Swiper-wrapper - Es un elemento obligatorio para los portaobjetos de envoltura adicionales.
swiper-slide - Es un solo elemento de diapositiva y podría contener cualquier HTML en su interior.
swiper-pagination - Es opcional para viñetas de paginación y se crean automáticamente.
Puede inicializar el swiper con JavaScript utilizando sus métodos relacionados:
myApp.swiper(swiperContainer,parameters)O
new Swiper(swiperContainer, parameters)Ambos métodos se utilizan para inicializar el control deslizante con opciones.
Los métodos dados anteriormente contienen los siguientes parámetros:
swiperContainer- Es HTMLElement o cadena de un contenedor swiper y es obligatorio.
parameters - Estos son elementos opcionales que contienen objetos con parámetros de deslizamiento.
Por ejemplo
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});Es posible acceder a una instancia de swiper y la propiedad swiper del contenedor del control deslizante tiene el siguiente elemento HTML:
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();Puede ver las diferentes formas y tipos de swiper en la siguiente tabla:
| S. No | Tipos y descripción de Swiper |
|---|---|
| 1 | Swiper predeterminado con paginación Es un control deslizante táctil moderno y el deslizador se desliza horizontalmente, de forma predeterminada. |
| 2 | Swiper vertical Este también funciona como un deslizador predeterminado, pero se desliza verticalmente. |
| 3 | Con espacio entre diapositivas Este deslizador se utiliza para dejar espacio entre dos toboganes. |
| 4 | Múltiples Swipers Este deslizador usa más de un deslizador en una sola página. |
| 5 | Swipers anidados Es la combinación de deslizamientos verticales y horizontales. |
| 6 | Controles personalizados Se utiliza para controles personalizados para elegir o deslizar cualquier diapositiva. |
| 7 | Carga lenta Se puede utilizar para archivos multimedia, que tardan en cargarse. |
Descripción
El navegador de fotos es similar al componente del navegador de fotos de iOS para mostrar un grupo de imágenes, que se pueden ampliar y desplazar. Para deslizarse entre imágenes, el navegador de fotos usa Swiper Slider .
La siguiente tabla muestra los tipos de exploradores de fotos utilizados en framework7 -
| S. No | Tipos y descripción del navegador de fotos |
|---|---|
| 1 | Crear instancia de explorador de fotografías El explorador de fotos se puede crear e inicializar solo con JavaScript. |
| 2 | Parámetros del navegador de fotos Framework7 proporciona una lista de parámetros que se utilizan con el navegador de fotos. |
| 3 | Métodos y propiedades del navegador de fotos Obtendrá una variable de instancia inicializada para utilizar los métodos y propiedades del navegador de fotos una vez que inicialice el navegador de fotos. |
| 4 | Fotos Matriz Durante la inicialización del navegador de fotos, debe pasar la matriz con fotos / videos en el parámetro de fotos . |
| 5 | Plantillas de navegador de fotos Framework7 le proporciona muchas plantillas de explorador de fotos, que puede pasar en la inicialización del explorador de fotos. |
Descripción
Autocompletar es un componente optimizado táctil y compatible con dispositivos móviles de Framework7, que puede ser un menú desplegable o de forma independiente. Puede crear e inicializar la instancia de Autocompletar mediante el método JavaScript:
myApp.autocomplete(parameters)Donde los parámetros son objetos obligatorios que se utilizan para inicializar la instancia de Autocompletar.
Parámetros de autocompletar
La siguiente tabla enumera los parámetros de Autocompletar disponibles en Framework7:
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | openIn Define cómo abrir un Autocompletar que podría usarse como menú desplegable, emergente o página. |
cuerda | página |
| 2 | source Utiliza la instancia de autocompletar, la consulta de búsqueda y la función de renderizado para pasar elementos coincidentes con una matriz. |
función (autocompletar, consultar, renderizar) | - |
| 3 | valueProperty Especifica el valor del elemento de la clave del objeto del elemento coincidente. |
cuerda | carné de identidad |
| 4 | limit Muestra el número limitado de elementos en autocompletar por consulta. |
número | - |
| 5 | preloader El precargador se puede utilizar para especificar el diseño de autocompletar configurándolo en verdadero. |
booleano | falso |
| 6 | preloaderColor Especifica el color del precargador. Por defecto, el color es "negro". |
cuerda | - |
| 7 | value Define la matriz con los valores seleccionados por defecto. |
formación | - |
| 8 | textProperty Especifica el valor del elemento de la clave del objeto del elemento correspondiente, que se puede utilizar como título de las opciones mostradas. |
cuerda | texto |
Parámetros de autocompletar independientes
La siguiente tabla enumera los parámetros de Autocompletar autónomos disponibles en Framework7 -
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | opener Es un parámetro de cadena o elemento HTML, que abrirá la página de autocompletar independiente. |
cadena o HTMLElement | - |
| 2 | popupCloseText Se utiliza para cerrar la ventana emergente de autocompletar. |
cuerda | 'Cerca' |
| 3 | backText Proporciona el vínculo de retroceso cuando la función de autocompletar se abre como página. |
cuerda | 'Atrás' |
| 4 | pageTitle Especifica el título de la página de autocompletar. |
cuerda | - |
| 5 | searchbarPlaceholderText Especifica el texto del marcador de posición de la barra de búsqueda. |
cuerda | 'Buscar' |
| 6 | searchbarCancelText Define el texto del botón cancelar de la barra de búsqueda. |
cuerda | 'cancelar' |
| 7 | notFoundText Muestra el texto cuando no se encuentra ningún elemento coincidente. |
cuerda | 'Nada Encontrado' |
| 8 | multiple Permite seleccionar selección múltiple configurándola en verdadero. |
booleano | falso |
| 9 | navbarTheme Especifica el tema de color para la barra de navegación. |
cuerda | - |
| 10 | backOnSelect Cuando el usuario elige un valor, el autocompletado se cerrará estableciéndolo en verdadero. |
booleano | falso |
| 11 | formTheme Especifica el tema de color para la forma. |
cuerda | - |
Parámetros de autocompletar desplegable
La siguiente tabla enumera los parámetros de Autocompletar desplegable disponibles en Framework7 -
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | input Es una cadena o elemento HTML que se utiliza para la entrada de texto. |
cadena o HTMLElement | - |
| 2 | dropdownPlaceholderText Especifica el texto del marcador de posición desplegable. |
cuerda | - |
| 3 | updateInputValueOnSelect Puede actualizar el valor de entrada en la selección configurándolo en verdadero. |
booleano | cierto |
| 4 | expandInput Puede expandir la entrada de texto en la Vista de lista para hacer visible la pantalla completa durante el menú desplegable configurando la entrada de elemento en verdadero. |
booleano | falso |
Funciones de devolución de llamada autocompletada
La siguiente tabla enumera los parámetros de Autocompletar desplegable disponibles en Framework7 -
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | onChange Siempre que se cambie el valor de autocompletar, se ejecutará esta función de devolución de llamada. |
función (autocompletar, valor) | - |
| 2 | onOpen Siempre que se abra autocompletar, se ejecutará esta función de devolución de llamada. |
función (autocompletar) | - |
| 3 | onClose Siempre que se cierre la función de autocompletar, se ejecutará esta función de devolución de llamada. |
función (autocompletar) | - |
Plantillas de autocompletar
La siguiente tabla enumera los parámetros de Autocompletar desplegable disponibles en Framework7 -
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | navbarTemplate Es una plantilla de barra de navegación de autocompletar independiente. |
cuerda | - |
| 2 | itemTemplate Es un elemento de formulario template7 independiente. |
cuerda | - |
| 3 | dropdownTemplate Es la plantilla desplegable template7. |
cuerda | - |
| 4 | dropdownItemTemplate Es el elemento de la lista desplegable template7. |
cuerda | - |
| 5 | dropdownPlaceholderTemplate Es un elemento de marcador de posición desplegable de template7. |
cuerda | - |
Plantillas predeterminadas
A continuación se muestran los fragmentos de código de plantilla predeterminados para los parámetros de plantillas definidos anteriormente:
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 autocompletar
La siguiente tabla especifica los métodos de Autocompletar disponibles en Framework7:
| S. No | Métodos y descripción |
|---|---|
| 1 | myAutocomplete.params Define los parámetros de inicialización que se pasan con el objeto. |
| 2 | myAutocomplete.value Define la matriz con los valores seleccionados. |
| 3 | myAutocomplete.opened Abre Autocompletar si se establece en verdadero. |
| 4 | myAutocomplete.dropdown Especifica una instancia del menú desplegable Autocompletar. |
| 5 | myAutocomplete.popup Especifica una instancia de la ventana emergente Autocompletar. |
| 6 | myAutocomplete.page Especifica una instancia de página de Autocompletar. |
| 7 | myAutocomplete.pageData Define los datos de la página Autocompletar. |
| 8 | myAutocomplete.searchbar Define la instancia de la barra de búsqueda de Autocompletar. |
Propiedades de autocompletar
La siguiente tabla especifica los métodos de Autocompletar disponibles en Framework7:
| S. No | Propiedades y descripción |
|---|---|
| 1 | myAutocomplete.open() Abre el Autocompletar, que puede usarse como menú desplegable, ventana emergente o página. |
| 2 | myAutocomplete.close() Cierra el Autocompletar. |
| 3 | myAutocomplete.showPreloader() Muestra el precargador de Autocompletar. |
| 4 | myAutocomplete.hidePreloader() Oculta el precargador de Autocompletar. |
| 5 | myAutocomplete.destroy() Arruina la instancia del precargador de Autocompletar y elimina todos los eventos. |
Ejemplo
El siguiente ejemplo demuestra el uso de parámetros de autocompletar que se esconden en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como autocomplete.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/autocomplete.html y la salida se muestra como se muestra a continuación.
El ejemplo proporciona el autocompletado de valores en un menú desplegable simple, menú desplegable con todos los valores, menú desplegable con marcador de posición, autocompletado independiente, etc.
Descripción
El selector se parece al selector nativo de iOS y es un componente poderoso que le permite elegir cualquier valor de la lista y también se usa para crear selectores de superposición personalizados. Puede utilizar el selector como componente en línea o como superposición. El selector de superposición se convertirá automáticamente a Popover en tabletas (iPad).
Con el método de la siguiente aplicación, puede crear e inicializar el método JavaScript:
myApp.picker(parameters)Cuando los parámetros son objetos obligatorios, se utilizan para inicializar la instancia del selector y es un método obligatorio.
Parámetros del selector
La siguiente tabla especifica los parámetros disponibles en los selectores:
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | container Cadena con selector de CSS o HTMLElement que se utiliza para generar Picker HTML para un selector en línea. |
cadena o HTMLElement | - |
| 2 | input El elemento de entrada relacionado colocado con la cadena con selector CSS o HTMLElement. |
cadena o HTMLElement | - |
| 3 | scrollToInput Se utiliza para desplazarse por la ventana gráfica (contenido de la página) de entrada, siempre que se abre el selector. |
booleano | cierto |
| 4 | inputReadOnly Se utiliza para establecer el atributo "solo lectura" en una entrada especificada. |
booleano | cierto |
| 5 | convertToPopover Se utiliza para convertir el selector modal a Popover en pantallas grandes como iPad. |
booleano | cierto |
| 6 | onlyOnPopover Puede abrir el selector en Popover habilitándolo. |
booleano | cierto |
| 7 | cssClass Para seleccionar modal, puede usar un nombre de clase CSS adicional. |
cuerda | - |
| 8 | closeByOutsideClick Puede cerrar el selector haciendo clic fuera del selector o elemento de entrada habilitando el método. |
booleano | falso |
| 9 | toolbar Se utiliza para habilitar la barra de herramientas modal del selector. |
booleano | cierto |
| 10 | toolbarCloseText Se utiliza para el botón Listo / Cerrar de la barra de herramientas. |
cuerda | 'Hecho' |
| 11 | toolbarTemplate Es la plantilla HTML de la barra de herramientas, de forma predeterminada es una cadena HTML con la siguiente plantilla: |
cuerda | - |
Parámetros de selector específicos
La siguiente tabla enumera los parámetros de selector específicos disponibles:
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | rotateEffect Permite el efecto de rotación 3D en el selector. |
booleano | falso |
| 2 | momentumRatio Cuando suelta el selector después de un toque rápido y un movimiento, produce más impulso. |
número | 7 |
| 3 | updateValuesOnMomentum Se utiliza para actualizar los selectores y los valores de entrada durante el impulso. |
booleano | falso |
| 4 | updateValuesOnTouchmove Se utiliza para actualizar los selectores y los valores de entrada durante el movimiento táctil. |
booleano | cierto |
| 5 | value La matriz tiene sus valores iniciales y también cada elemento de la matriz representa el valor de la columna relacionada. |
formación | - |
| 6 | formatValue La función se utiliza para formatear el valor de entrada y debe devolver un valor de cadena nuevo / formateado. Los valores y displayValues son una matriz de columnas relacionadas. |
función (p, valores, displayValues) | - |
| 7 | cols Cada elemento de la matriz representa un objeto con parámetros de columna. |
formación | - |
Devolución de llamada de parámetros de selector
La siguiente tabla muestra las listas de funciones de devolución de llamada disponibles en los selectores:
| S. No | Devolución de llamada y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | onChange La función de devolución de llamada se ejecutará siempre que cambie el valor del selector y los valores y displayValues sean matrices de columnas relacionadas. |
función (p, valores, displayValues) | - |
| 2 | onOpen La función de devolución de llamada se ejecutará siempre que se abra el selector. |
función (p) | - |
| 3 | onClose La función de devolución de llamada se ejecutará siempre que se cierre el selector. |
función (p) | - |
Parámetros de columna
En el momento de la configuración de Picker, necesitamos pasar el parámetro cols . Es una matriz representada como, donde cada elemento es un objeto con parámetros de columna:
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | values Puede especificar los valores de las columnas de cadena con una matriz. |
formación | - |
| 2 | displayValues Tiene una matriz con valores de columnas de cadena y mostrará el valor del parámetro de valores , cuando no se especifique. |
formación | - |
| 3 | cssClass El nombre de la clase CSS que se utiliza para establecer el contenedor HTML de la columna. |
cuerda | - |
| 4 | textAlign Se utiliza para establecer la alineación del texto de los valores de las columnas y puede ser "izquierda", "centro" o "derecha" . |
cuerda | - |
| 5 | width El ancho se calcula automáticamente, por defecto. Si necesita arreglar los anchos de columna en el selector con columnas dependientes que deberían estar en px . |
número | - |
| 6 | divider Se usa para la columna que debería ser un divisor visual, no tiene ningún valor. |
booleano | falso |
| 7 | content Se utiliza para especificar la columna divisora (divider: true) con el contenido de la columna. |
cuerda | - |
Parámetro de devolución de llamada de columna
| S. No | Devolución de llamada y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | onChange Siempre que el valor de la columna cambie, se ejecutará la función de devolución de llamada. El valor y displayValue representan el valor actual de la columna y displayValue . |
función (p, valor, displayValue) | - |
Propiedades del selector
La variable Picker tiene muchas propiedades que se dan en la siguiente tabla:
| S. No | Propiedades y descripción |
|---|---|
| 1 | myPicker.params Puede inicializar los parámetros pasados con el objeto. |
| 2 | myPicker.value El valor seleccionado para cada columna está representado por una matriz de elementos. |
| 3 | myPicker.displayValue El valor de visualización seleccionado para cada columna está representado por una matriz de elementos. |
| 4 | myPicker.opened Cuando se abre el selector, se establece en el valor verdadero . |
| 5 | myPicker.inline Cuando el selector está en línea, se establece en valor verdadero . |
| 6 | myPicker.cols Las columnas del selector tienen sus propios métodos y propiedades. |
| 7 | myPicker.container La instancia de Dom7 se utiliza para el contenedor HTML. |
Métodos de selector
La variable del selector tiene métodos útiles, que se dan en la siguiente tabla:
| S. No | Métodos y descripción |
|---|---|
| 1 | myPicker.setValue(values, duration) Úselo para establecer un nuevo valor de selector. Los valores están en una matriz donde cada elemento representa el valor de cada columna. duración - Es la duración de la transición en ms. |
| 2 | myPicker.open() Úselo para abrir Selector. |
| 3 | myPicker.close() Úselo para cerrar el selector. |
| 4 | myPicker.destroy() Úselo para destruir la instancia de Picker y eliminar todos los eventos. |
Propiedades de columna
Cada columna en la matriz myPicker.cols también tiene sus propias propiedades útiles, que se dan en la siguiente tabla:
//Get first column
var col = myPicker.cols[0];| S. No | Propiedades y descripción |
|---|---|
| 1 | col.container Puede crear una instancia con contenedor HTML de columna. |
| 2 | col.items Puede crear una instancia con elementos HTML de elementos de columna. |
| 3 | col.value Se utiliza para seleccionar el valor de la columna actual. |
| 4 | col.displayValue Se utiliza para seleccionar el valor de visualización de la columna actual. |
| 5 | col.activeIndex Proporcione el número de índice actual, que es el elemento seleccionado / activo. |
Métodos de columna
Los métodos de columna útiles se dan en la siguiente tabla:
| S. No | Métodos y descripción |
|---|---|
| 1 | col.setValue(value, duration) Se usa para establecer un nuevo valor para la columna actual. El valor debe ser un valor nuevo y la duración es la duración de la transición expresada en ms. |
| 2 | col.replaceValues(values, displayValues) Se utiliza para reemplazar los valores de columna y displayValues por otros nuevos. |
Se utiliza para acceder a la instancia de Picker desde su contenedor HTML, siempre que inicialice Picker como selector en línea.
var myPicker = $$('.picker-inline')[0].f7Picker;Hay diferentes tipos de selectores como se especifica en la siguiente tabla:
| S. No | Tipos de pestañas y descripción |
|---|---|
| 1 | Selector con valor único Es un componente poderoso que le permite elegir cualquier valor de la lista. |
| 2 | Dos valores y efecto de rotación 3D En el selector se puede utilizar para el efecto de rotación 3D. |
| 3 | Valores dependientes Los valores dependen unos de otros para el elemento especificado. |
| 4 | Barra de herramientas personalizada Puede utilizar uno o más selectores en una sola página para personalizar. |
| 5 | Selector en línea / Fecha-hora Puede seleccionar el número de valores en el selector en línea. Como la fecha tiene fecha, mes, año y la hora tiene horas, minutos, segundos. |
Descripción
El componente Calendario le permite manejar fechas fácilmente y puede usarse como un componente en línea o superpuesto. El calendario superpuesto se convertirá automáticamente en popover en tabletas.
El calendario se puede crear e inicializar solo mediante JavaScript. Debe utilizar el método de la aplicación relacionada como se muestra a continuación:
myApp.calendar(parameters)- Este método devuelve una instancia de calendario inicializada. Acepta un objeto como parámetros.
La siguiente tabla muestra el uso del calendario en Framework7:
| S. No | Uso y descripción del calendario |
|---|---|
| 1 | Parámetros de calendario Framework7 proporciona una lista de parámetros que se utilizan con el calendario. |
| 2 | Métodos y propiedades del calendario Obtendrá una variable de instancia inicializada para usar los métodos y propiedades del calendario, una vez que inicialice el calendario. |
| 3 | Acceso a la instancia de Calendar Es posible acceder a la instancia de calendario desde su contenedor HTML cuando inicializa el calendario como en línea. |
Descripción
Es un componente especial que se utiliza para actualizar (recargar) el contenido de la página tirando de él.
El siguiente código muestra cómo actualizar el contenido de la 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>Las siguientes clases se utilizan en la actualización:
page-content- Tiene una clase adicional de extracción para actualizar contenido y es necesaria para habilitar la extracción para actualizar.
pull-to-refresh-layer- Es una capa oculta, que se usa para tirar para refrescar el elemento visual y es solo un precargador y una flecha.
data-ptr-distance = "55" - Este es un atributo adicional que le permite establecer una distancia de activación personalizada para 'tirar para actualizar' y su valor predeterminado es 44px.
Tire para actualizar eventos
En 'Pull to Refresh' hay algunos eventos de JavaScript, que se dan en la siguiente tabla:
| S. No | Descripción del evento | Objetivo |
|---|---|---|
| 1 | pullstart Se activará cada vez que empiece a tirar para actualizar el contenido. |
Tire para actualizar el contenido. |
| 2 | pullmove Se activa cuando tira para actualizar el contenido. |
Tire para actualizar el contenido. |
| 3 | pullend Se activará cada vez que suelte la función de extracción para actualizar el contenido. |
Tire para actualizar el contenido. |
| 4 | refresh Este evento se activará cuando la extracción para actualizar ingrese en el estado "refrescante" . |
Tire para actualizar el contenido. |
| 5 | refreshdone Se activará después de que se actualice y vuelva al estado inicial. Esto se hará después de llamar al método pullToRefreshDone . |
Tire para actualizar el contenido. |
Hay métodos de la aplicación que se pueden usar con Pull to Refresh.
| S. No | Métodos y descripción de la aplicación |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Se utiliza para restablecer el contenido de extracción para actualizar . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Se utiliza para activar la actualización en una extracción especificada para actualizar el contenido . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Se utiliza para destruir / deshabilitar la extracción para actualizar en la extracción especificada para actualizar el contenido . |
| 4 | myApp.initPullToRefresh(ptrContent) Se utiliza para inicializar / habilitar la extracción para actualizar el contenido . |
Donde ptrContent se usa para HTMLElement o cadena para tirar para actualizar el contenido para restablecer / activar o deshabilitar / habilitar.
Ejemplo
El siguiente ejemplo demuestra el uso del componente de actualización que inicia la actualización del contenido de una 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como pull_to_refresh.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/pull_to_refresh.html y el resultado se muestra como se muestra a continuación.
Cuando el usuario tira hacia abajo, la página se actualizará con el contenido.
Descripción
Infinite Scroll le permite cargar contenido adicional y realiza las acciones necesarias cuando la página está cerca de la parte inferior.
El siguiente diseño HTML muestra el desplazamiento infinito:
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>El diseño anterior contiene las siguientes clases:
page-content infinite-scroll - Se utiliza para contenedor de desplazamiento infinito.
data-distance - Este atributo le permite configurar la distancia desde la parte inferior de la página (en px) para activar un evento de desplazamiento infinito y su valor predeterminado es 50px.
Si desea utilizar el desplazamiento infinito en la parte superior de la página, debe agregar una clase adicional "infinite-scroll-top" a "page-content" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Eventos de desplazamiento infinito
infinite- Se utiliza para disparar cuando el desplazamiento de la página alcanza la distancia especificada hasta la parte inferior. Será objetivo de div class = "page-content infinite-scroll" .
Hay dos métodos de la aplicación que se pueden usar con un contenedor de desplazamiento infinito:
Para agregar un detector de eventos de desplazamiento infinito al contenedor HTML especificado, use el siguiente método:
myApp.attachInfiniteScroll(container)Puede eliminar el detector de eventos de desplazamiento infinito del contenedor HTML especificado mediante el siguiente método:
myApp.detachInfiniteScroll(container)Donde los parámetros son opciones requeridas que se utilizan como HTMLElement o cadena para contenedor de desplazamiento infinito.
Ejemplo
El siguiente ejemplo demuestra el desplazamiento infinito que carga el contenido adicional cuando el desplazamiento de la página está cerca de la 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como infinite_scroll.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/infinite_scroll.html y el resultado se muestra como se muestra a continuación.
El ejemplo permite cargar contenido adicional cuando el desplazamiento de su página alcanza la distancia especificada hasta la parte inferior.
Descripción
Los mensajes son un componente de Framework7, que brinda visualización de comentarios y sistema de mensajería en la aplicación.
Diseño de mensajes
El framework7 tiene la siguiente estructura de diseño de mensajes:
<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>El diseño contiene las siguientes clases en diferentes áreas:
Diseño de página de mensajes
La siguiente tabla muestra las clases de diseño de página de mensajes con descripción.
| S. No | Clases y descripción |
|---|---|
| 1 | messages-content Es una clase adicional requerida que se agrega a "page-content" y se usa para el envoltorio de mensajes. |
| 2 | messages Es un elemento obligatorio para las burbujas de mensajes. |
| 3 | messages-date Utiliza un contenedor de sello de fecha para mostrar la fecha y hora del mensaje enviado o recibido. |
| 4 | message Es un solo mensaje que se mostrará. |
Partes internas de mensaje único
La siguiente tabla muestra las clases de partes internas de mensajes simples con descripción.
| S. No | Clases y descripción |
|---|---|
| 1 | message-name Proporciona el nombre del remitente. |
| 2 | message-text Defina el texto con el tipo de burbuja. |
| 3 | message-avatar Especifica el avatar del remitente. |
| 4 | message-label Especifica la etiqueta de texto debajo de la burbuja. |
Clases adicionales para contenedor de mensaje único
La siguiente tabla muestra clases adicionales para la descripción del contenedor de mensajes individuales.
| S. No | Clases y descripción |
|---|---|
| 1 | message-sent Especifica que el mensaje fue enviado por el usuario y se muestra con un color de fondo verde en el lado derecho. |
| 2 | message-received Se utiliza para mostrar el mensaje único que indica que el mensaje fue recibido por el usuario y permanece en el lado izquierdo con un color de fondo gris. |
| 3 | message-pic Es una clase adicional para mostrar imágenes con un solo mensaje. |
| 4 | message-with-avatar Es una clase adicional para mostrar un solo mensaje (recibido o enviado) con avatar. |
| 5 | message-with-tail Puede agregar una cola de burbuja para un solo mensaje (recibido o enviado). |
Clases adicionales disponibles para mensaje único
La siguiente tabla muestra las clases disponibles para un solo mensaje con descripción.
| S. No | Clases y descripción |
|---|---|
| 1 | message-hide-name Es una clase adicional para ocultar el nombre del mensaje de un solo mensaje (recibido o enviado). |
| 2 | message-hide-avatar Es una clase adicional para ocultar avatar de mensaje para un solo mensaje (recibido o enviado). |
| 3 | message-hide-label Es una clase adicional para ocultar la etiqueta del mensaje para un solo mensaje (recibido o enviado). |
| 4 | message-last Puede usar esta clase para indicar el último mensaje recibido o enviado en la conversación actual por un remitente para un solo mensaje (recibido o enviado). |
| 5 | message-first Puede usar esta clase para indicar el primer mensaje recibido o enviado en la conversación actual por un remitente para un solo mensaje (recibido o enviado). |
Inicializar mensajes con JavaScript
Puede inicializar los mensajes con JavaScript utilizando el siguiente método:
myApp.messages(messagesContainer, parameters)El método tiene dos opciones:
messagesContainer - Es un elemento HTML obligatorio o una cadena que incluye un elemento HTML contenedor de mensajes.
parameters - Especifica un objeto con parámetros de mensajes.
Parámetros de mensajes
La siguiente tabla muestra los parámetros de los mensajes con descripción.
| S. No | Descripción de parámetros | Tipo | Defecto |
|---|---|---|---|
| 1 | autoLayout Agrega clases requeridas adicionales a cada mensaje habilitándolo. |
booleano | cierto |
| 2 | newMessagesFirst Puede mostrar el mensaje en la parte superior en lugar de mostrarlo en la parte inferior habilitándolo. |
booleano | falso |
| 3 | messages Muestra una matriz de mensajes en la que cada mensaje debe representarse como un objeto con parámetros de mensaje. |
formación | - |
| 4 | messageTemplate Muestra la plantilla de mensaje único. |
cuerda | - |
Propiedades de mensajes
La siguiente tabla muestra las propiedades de los mensajes con descripción.
| S. No | Descripción de propiedad |
|---|---|
| 1 | myMessages.params Puede inicializar los parámetros pasados con object. |
| 2 | myMessages.container Define el elemento DOM7 con un contenedor HTML de barra de mensajes. |
Métodos de mensajes
La siguiente tabla muestra los métodos de los mensajes con descripción.
| S. No | Método y descripción |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); El mensaje se puede agregar al principio o al final utilizando el parámetro de método. Tiene los siguientes parámetros:
|
| 2 | myMessages.appendMessage(messageParameters, animate); Agrega un mensaje al final del contenedor de mensajes. |
| 3 | myMessages.prependMessage(messageParameters, animate); Agrega un mensaje al principio del contenedor de mensajes. |
| 4 | myMessages.addMessages(messages, method, animate); Puede agregar varios mensajes a la vez. Tiene el siguiente parámetro:
|
| 5 | myMessages.removeMessage(message); Se utiliza para eliminar el mensaje. Tiene el siguiente parámetro:
|
| 6 | myMessages.removeMessages(messages); Puede eliminar los mensajes múltiples. Tiene el siguiente parámetro:
|
| 7 | myMessages.scrollMessages(); Puede desplazarse por los mensajes de arriba a abajo y viceversa, según el primer parámetro del mensaje nuevo. |
| 8 | myMessages.layout(); El diseño automático se puede aplicar a los mensajes. |
| 9 | myMessages.clean(); Se utiliza para limpiar los mensajes. |
| 10 | myMessages.destroy(); Se usa para destruir los mensajes. |
Parámetros de mensaje único
La siguiente tabla muestra los parámetros para un solo mensaje con descripción.
| S. No | Descripción de parámetros | Tipo | Defecto |
|---|---|---|---|
| 1 | text Define el texto del mensaje, que podría ser una cadena HTML. |
cuerda | - |
| 2 | name Especifica el nombre del remitente. |
cuerda | - |
| 3 | avatar Especifica la cadena de URL del avatar del remitente. |
cuerda | - |
| 4 | time Especifica la cadena de tiempo del mensaje como '9:45 AM', '18: 35 '. |
cuerda | - |
| 5 | type Proporciona el tipo de mensaje, ya sea que se pueda enviar o recibir. |
cuerda | expedido |
| 6 | label Define la etiqueta del mensaje. |
cuerda | - |
| 7 | day Da la cadena del día del mensaje como 'domingo', 'lunes', 'ayer', etc. |
cuerda | - |
Inicializar mensajes con HTML
Puede inicializar los mensajes con HTML sin JavaScript utilizando la clase messages-init adicional a los mensajes y utilizar los atributos de datos para pasar los parámetros necesarios como se muestra en el fragmento de código que se proporciona a continuación
...
<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>
...Ejemplo
El siguiente ejemplo demuestra el uso de mensajes en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como messages.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/messages.html y la salida se muestra como se muestra a continuación.
Cuando escribe un mensaje en el cuadro de mensaje y hace clic en el botón Enviar, especifica que su mensaje ha sido enviado y se muestra con un color de fondo verde en el lado derecho.
El mensaje que recibe aparece en el lado izquierdo con el fondo gris junto con el nombre del remitente.
Descripción
Framework7 proporciona una barra de herramientas especial de tamaño variable para trabajar con el sistema de mensajería en la aplicación.
El siguiente código muestra el diseño de la barra de mensajes:
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>En la barra de mensajes, el interior de la "página" es muy importante y está a la derecha de "contenido de mensajes" -
<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>Puede utilizar el siguiente método para inicializar la barra de mensajes con JavaScript:
myApp.messagesbar(messagesbarContainer, parameters)El método tiene dos opciones:
messagesbarContainer - Es un elemento HTML obligatorio o una cadena que incluye el elemento HTML del contenedor de la barra de mensajes.
parameters - Especifica un objeto con parámetros de barra de mensajes.
Por ejemplo
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});Parámetro de la barra de mensajes
maxHeight- Se usa para establecer la altura máxima del área de texto y cambiará de tamaño dependiendo de la cantidad de texto. El tipo de parámetro es número y el valor predeterminado es nulo .
Propiedades de la barra de mensajes
La siguiente tabla muestra las propiedades de la barra de mensajes:
| S. No | Propiedades y descripción |
|---|---|
| 1 | myMessagebar.params Puede especificar un objeto con parámetros de inicialización pasados. |
| 2 | myMessagebar.container Puede especificar el elemento dom7 con el elemento HTML del contenedor de la barra de mensajes. |
| 3 | myMessagebar.textarea Puede especificar el elemento dom7 con el elemento HTML de área de texto de la barra de mensajes. |
Métodos de la barra de mensajes
La siguiente tabla muestra los métodos de la barra de mensajes:
| S. No | Métodos y descripción |
|---|---|
| 1 | myMessagebar.value(newValue); Establece el valor / texto del área de texto de la barra de mensajes y devuelve el valor del área de texto de la barra de mensajes, si newValue no se especifica. |
| 2 | myMessagebar.clear(); Borra el área de texto y actualiza / restablece el tamaño. |
| 3 | myMessagebar.destroy(); Destruye la instancia de la barra de mensajes. |
Inicializar la barra de mensajes con HTML
Puede inicializar la barra de mensajes usando HTML sin métodos y propiedades de JavaScript agregando la clase messagebar-init a la barra de mensajes y puede pasar los parámetros requeridos usando atributos de datos .
El siguiente código especifica la inicialización de la barra de mensajes con 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>Acceso a la instancia de Messagebar
Es posible acceder a la instancia de la barra de mensajes, si la inicializa usando HTML; se logra utilizando la propiedad f7 Message bar de su elemento contenedor.
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');Puede ver el ejemplo de la barra de mensajes, que se explica en este enlace
Descripción
Las notificaciones se utilizan para mostrar los mensajes requeridos, que aparecen como notificaciones Push (o locales) de iOS.
La siguiente tabla muestra el uso de notificaciones en detalle:
| S. No | Uso y descripción de notificaciones |
|---|---|
| 1 | API de JavaScript de notificaciones Las notificaciones también se pueden agregar o cerrar con JavaScript utilizando los métodos de aplicación relacionados. |
| 2 | Diseño de notificaciones Las notificaciones de Framework7 se agregarán mediante JavaScript. |
| 3 | Ejemplo de iOS Framework7 le permite utilizar diferentes tipos de notificaciones en su diseño de iOS. |
| 4 | Material de ejemplo Las notificaciones de Framework7 también se pueden utilizar en el diseño de material. |
Descripción
La carga diferida retrasa el proceso de carga de imágenes en una página determinada. La carga diferida mejora el rendimiento del desplazamiento, acelera la carga de la página y ahorra tráfico.
Los elementos e imágenes de carga diferida deben estar dentro de <div class = "page-content"> desplazable para que funcionen correctamente.
La siguiente tabla demuestra el uso de la carga diferida:
| S. No | Uso y descripción de carga diferida |
|---|---|
| 1 | Uso La carga diferida se puede aplicar a imágenes, imágenes de fondo y con efecto de aparición gradual. |
| 2 | Iniciar carga diferida manualmente Después de inicializar una página, si agrega imágenes de carga diferida manualmente, la carga diferida no funcionará y deberá utilizar métodos para inicializarla. |
Es posible activar la carga de imágenes manualmente utilizando perezoso evento en la imagen / elemento perezoso como se muestra a continuación -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');Ejemplo
El siguiente ejemplo demuestra el uso de la carga diferida en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como framework7_lazy_load.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/framework7_lazy_load.html y el resultado se muestra como se muestra a continuación.
El ejemplo especifica la carga diferida de imágenes donde las imágenes se cargarán en la página cuando las desplace hacia abajo.
Descripción
Framework7 proporciona diferentes temas de color para sus aplicaciones.
Un tema de color proporciona diferentes tipos de colores de tema que se utilizan para trabajar con las aplicaciones sin problemas, como se especifica en la siguiente tabla:
| S. No | Tipo de tema y descripción |
|---|---|
| 1 | Colores del tema de iOS Puede usar 10 temas de color de iOS predeterminados diferentes para la aplicación. |
| 2 | Colores del tema del material Framework7 proporciona 22 temas de color de material predeterminados diferentes para la aplicación. |
Aplicación de temas de color
Framework7 le permite aplicar temas de color en diferentes elementos como página, bloque de lista, barra de navegación, fila de botones, etc. utilizando la clase theme- [color] para el elemento principal.
Ejemplo
...
</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 diseño
Puede usar el tema de diseño predeterminado para su aplicación usando dos temas blanco y oscuro . Los temas se pueden aplicar usando la clase layout- [theme] al elemento padre.
Ejemplo
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>Clases de ayudantes
Framework7 proporciona clases de ayuda adicionales, que se pueden usar fuera o sin los temas que se enumeran a continuación:
color-[color] - Se puede utilizar para cambiar el color del texto del bloque o el color del botón, enlace, icono, etc.
bg-[color] - Establece el color de fondo predefinido en el bloque o elemento.
border-[color] - Establece el color de borde predefinido en el bloque o elemento.
Descripción
Hairline es una clase que agrega un borde de 1px alrededor de las imágenes mediante la clase de borde. Con el lanzamiento de 1.x, las líneas finas revisaron el trabajo con : after y : before pseudo elementos en lugar de usar bordes CSS.
Hairlines contiene las siguientes reglas:
:after- Este pseudo elemento se utiliza para las líneas inferiores y derechas .
:before- Este pseudo elemento se utiliza para las líneas capilares superior e izquierda .
El siguiente fragmento de código muestra el uso de : after element.
.navbar:after {
background-color: red;
}El siguiente fragmento de código elimina la barra de herramientas de la línea del cabello inferior:
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}clase "sin fronteras"
La línea del cabello se eliminará mediante el uso de la clase sin borde y es compatible con la barra de navegación, la barra de herramientas, la tarjeta y sus elementos.
El siguiente código se usa para eliminar la línea del cabello de la barra de navegación:
<div class = "navbar no-border">
...
</div>Descripción
Template7 es un motor de JavaScript liviano, primero para dispositivos móviles, que representa Ajax y páginas dinámicas como plantillas de Template7 con un contexto específico y no requiere ningún script adicional. Template7 está asociado con Framework7 como motor de plantilla ligero y predeterminado, que funciona más rápido para las aplicaciones.
Actuación
El proceso de compilación de cadenas para la función JS es el segmento más lento de template7. Por lo tanto, no es necesario compilar la plantilla varias veces, solo una vez es 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 es un motor de plantillas ligero que se utiliza como biblioteca independiente sin Framework7. Los archivos Template7 se pueden instalar de dos formas:
Puede descargar desde el repositorio de github de Template7 .
Puede instalarlo usando el siguiente comando a través de Bower:
O
bower install template7Descripción
En Template7 puede compilar sus plantillas automáticamente especificando atributos especiales en una etiqueta <script>.
El siguiente código muestra el diseño de compilación automática:
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>Puede utilizar los siguientes atributos para inicializar la compilación automática:
type = "text/template7" - Se utiliza para decirle a Template7 que se compile automáticamente y es un tipo de script obligatorio.
id = "myTemplate" - Se puede acceder a la plantilla a través de la identificación y es una identificación de plantilla obligatoria.
Para la compilación automática, debe habilitar la inicialización de la aplicación pasando el siguiente parámetro:
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
Se puede acceder a las plantillas compiladas automáticamente como propiedades de Template7.templates después de inicializar la aplicación. También se conoce como myApp.templates, donde myApp es una instancia inicializada de la aplicación.
Puede utilizar las siguientes plantillas en nuestro archivo 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>También puede acceder a las plantillas en JavaScript después de la inicialización de la aplicación:
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
});Descripción
Template7 es un motor de plantillas de JavaScript para dispositivos móviles con sintaxis similar a handlebars.js . Es un motor de plantilla predeterminado ultraligero y ultrarrápido en Framework7.
Primero, necesitamos pasar el siguiente parámetro en la inicialización de la aplicación que representa todas las páginas dinámicas y Ajax como plantilla Template7:
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S. No | Uso y descripción de Template7 Pages |
|---|---|
| 1 | Plantillas / Datos de páginas Puede pasar los datos / contexto necesarios para páginas específicas especificando todos los datos de las páginas en el parámetro template7Data , enviado al inicializar una aplicación. |
| 2 | Pasar contexto personalizado Framework7 le permite pasar contexto personalizado a cualquier página dinámica o cualquier Ajax cargado. |
| 3 | Cargar plantillas directamente Puede renderizar y cargar plantillas sobre la marcha como páginas dinámicas. |
| 4 | Consulta de URL Si está utilizando Template7 para representar páginas Ajax, su contexto siempre se extenderá con la propiedad especial url_query . |
Ejemplo
El siguiente ejemplo proporciona los enlaces, que muestra la información del usuario, como detalles del usuario, me gusta, etc., cuando hace clic en esos enlaces.
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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como index.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/index.html y la salida se muestra como se muestra a continuación.
El ejemplo proporciona los enlaces, que muestra la información del usuario, como los detalles del usuario, le gusta al usuario cuando hace clic en esos enlaces.
Descripción
Cuando toca los enlaces y botones, se resaltan. Esto se hace por estado activo en Framework7.
- Se comporta como una aplicación nativa, no como una aplicación web.
- Tiene una biblioteca de clics rápidos incorporada y debe estar habilitada.
- La clase de estado activo es la misma que la CSS : selector activo .
- El estado activo se habilita agregando la clase watch-active-state al elemento <html> .
El siguiente código se usa para el estado activo en estilo CSS:
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}El siguiente código muestra la compatibilidad de reserva, cuando el estado activo o los clics rápidos están deshabilitados:
/* 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;
}Descripción
El evento Tap hold se usa para disparar (habilitar) después de un evento táctil sostenido y completo, por lo que solo se llama evento tap hold . El Hold Tab es un built-inFast Clicks biblioteca.
Los siguientes parámetros se utilizan para deshabilitar o habilitar y se configuran de forma predeterminada:
| S. No | Descripción de parámetros | Tipo | Defecto |
|---|---|---|---|
| 1 | tapHold Para habilitar eventos de pulsación en espera cuando se establece en verdadero. |
booleano | falso |
| 2 | tapHoldDelay Especifica la duración de mantener presionado el grifo antes de activar el evento taphold en el elemento objetivo. |
número | 750 |
| 3 | tapHoldPreventClicks El evento de tocar en espera no se activará después de hacer clic en el evento. |
booleano | cierto |
El siguiente código se utiliza para habilitar eventos de pulsación en espera:
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Descripción
Touch Ripple es un efecto que solo se admite en el tema material de Framework7. De forma predeterminada, está habilitado en el tema material y puede deshabilitarlo utilizando el parámetro materialRipple: false .
Elementos de ondulación
Puede habilitar los elementos de ondulación para que coincidan con algunos selectores de CSS como:
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .etiqueta-casilla de verificación, etc.
Estos se especifican en el parámetro materialRippleElements . Debe habilitar la ondulación táctil , agregar el selector del elemento al parámetro materialRippleElements para hacer uso del efecto de ondulación o simplemente usar la clase de ondulación .
Color de onda ondulada
El color de la ondulación se puede cambiar en el elemento añadiendo la clase ondulación- [color] al elemento.
Por ejemplo
<a href = "#" class = "button ripple-orange">Ripple Button</a>o puede definir el color de la onda de ondulación usando el CSS como se muestra a continuación:
.button .ripple-wave {
background-color: #FFFF00;
}Deshabilitar elementos de ondulación
Puede deshabilitar la ondulación para algunos elementos especificados agregando la clase sin ondulación a esos elementos. Por ejemplo
<a href = "#" class = "button no-ripple">Ripple Button</a>