Framework7浮动操作按钮 Framework7浮动操作按钮|Framewor

本文概述

浮动动作按钮布局
变形弹出窗口
快速拨号

Framework7浮动操作按钮用于提升操作。它就像一个漂浮在UI上方的带圆圈的图标, 并具有包括变形, 启动和转移锚点在内的运动行为。
注意：“浮动动作”按钮仅在“材质”主题中受支持。Framework7中使用3种类型的操作按钮：

浮动操作按钮布局：非常简单。你只需要将其放置为页面或视图的子级即可。
变形弹出窗口：如果要在单击浮动操作按钮时打开弹出窗口, 则可以使用浮动按钮弹出窗口类。
快速拨号：单击快速操作上的浮动操作按钮可以调用相关操作。

浮动动作按钮布局这是一个非常简单的布局。你只需要将其放置为页面或视图的子级即可。使用“浮动按钮”？类以在你的应用程序中使用浮动操作按钮。
例
让我们以一个示例来演示浮动操作按钮的布局。

< !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> Create and open Action Sheet< /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"> Floating Action Button Layout< /div> < /div> < /div> < a href = "http://www.srcmini.com/#" class ="floating-button color-teal"> < i class = "icon icon-plus"> < /i> < /a> < 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> < /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}); < /script> < /body> < /html>

立即测试
变形弹出窗口如果要在单击浮动操作按钮时打开弹出窗口, 则使用“浮动按钮弹出窗口”类。
例
让我们以一个示例来演示从变体到弹出框的过渡。

< !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> Morph To Popover< /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"> Morph To Popover< /div> < /div> < /div> < a href = "http://www.srcmini.com/#" class = "floating-button floating-button-to-popover open-popover color-orange"> < i class = "icon icon-form-email"> < /i> < /a> < 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> 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> 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> 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> 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> 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> 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> 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> < /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 = "http://www.srcmini.com/#" class = "item-content item-link"> < div class = "item-inner"> < div class = "item-title"> Mail 1< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-content item-link"> < div class = "item-inner"> < div class = "item-title"> Mail 2< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" 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>

立即测试
快速拨号你可以在浮点按钮上使用快速拨号。通过单击浮动动作按钮, 可以调用相关动作。快速拨号动作中可以使用最少3个动作, 最多6个动作。
例
让我们举个例子, 看看按下浮动按钮时不同类型的快速拨号动作。

< !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 = "http://www.srcmini.com/#" 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 = "http://www.srcmini.com/#" class = "color-orange"> < i class = "icon icon-form-email"> < /i> < /a> < a href = "http://www.srcmini.com/#" class = "color-orange"> < i class = "icon icon-form-calendar"> < /i> < /a> < a href = "http://www.srcmini.com/#" 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> 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> 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> 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> 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> 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> 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> < /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 = "http://www.srcmini.com/#" class = "item-content item-link"> < div class = "item-inner"> < div class = "item-title"> Mail 1< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-content item-link"> < div class = "item-inner"> < div class = "item-title"> Mail 2< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" 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>

【Framework7浮动操作按钮】立即测试