Framework7 - Marcación rápida del botón de acción flotante
Descripción
Puede invocar acciones relacionadas al hacer clic en el botón de acción flotante utilizando la marcación rápida . Se pueden usar un mínimo de 3 y un máximo de 6 acciones para realizar acciones de marcación rápida.
ejemplo
El siguiente ejemplo especifica diferentes tipos de acciones al presionar el botón de marcación rápida:
<!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>Floating Action Button Speed Dial</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">Speed Dial</div>
</div>
</div>
<div class = "speed-dial">
<a href = "#" class = "floating-button color-orange"><i class = "icon icon-plus"></i><i class = "icon icon-close"></i></a>
<div class = "speed-dial-buttons">
<a href = "#" class = "color-orange"><i class = "icon icon-form-email"></i></a><a href = "#" class = "color-orange"><i class = "icon icon-form-calendar"></i></a><a href = "#" class = "color-orange"><i class = "icon icon-form-comment"></i></a>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<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.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</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>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.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</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.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.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.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</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.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.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 style = "width:250px%" class = "popover demo-popover">
<div class = "popover-inner">
<div class = "list-block">
<ul>
<li>
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title">Mail 1</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title">Mail 2</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title">Mail 3</div>
</div>
</a>
</li>
</ul>
</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
});
</script>
</body>
</html>salida
Realicemos los siguientes pasos dados anteriormente para ver cómo funciona el código:
Guarde el código HTML proporcionado anteriormente como action_button_speed_dial.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/action_button_speed_dial.html y la salida se muestra como se muestra a continuación.
Cuando hace clic en los botones de acción flotantes, los diferentes tipos de acciones se denominan marcación rápida como se muestra y muestra información relacionada cuando hace clic en él. Aquí, el código muestra cómo puede crear acciones de marcación rápida en la interfaz de usuario utilizando el botón de acción flotante.