Framework7-action-button-speed-dial
提供：Dev Guides
Framework7-フローティングアクションボタンスピードダイヤル
説明
_speed dial_を使用して、フローティングアクションボタンをクリックすると、関連するアクションを呼び出すことができます。 スピードダイヤルアクションでは、最小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 = "#" 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>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを action_button_speed_diall ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/action_button_speed_diallとして開くと、出力は以下のように表示されます。
- フローティングアクションボタンをクリックすると、表示されているようにさまざまなタイプの短縮ダイヤルアクションが呼び出され、クリックすると関連情報が表示されます。 このコードは、フローティングアクションボタンを使用してUIでスピードダイヤルアクションを作成する方法を示しています。
