离子框架如何在离子内容图下面放置一个div或按钮 [英] Ionic Framework How to place a div or buttons below ion-content map
本文介绍了离子框架如何在离子内容图下面放置一个div或按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在开发离子项目,在标签中,我放置了一个google地图, this 教程。现在我想放一些按钮(在div里面)来触发该地图上的一些操作。怎么可以实现呢?
I'm working on an ionic project and in a tab I placed a google map following this tutorial. Now I want to put some buttons (inside a div?) to trigger some actions over that map. how can achieve that? I'm really newbie with this framework, I'll appreciate any help.
我的index.html
My index.html
<body>
<ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-a"></i>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<a class="button" href="#/tab/twitter">
<i class="icon ion-social-twitter"></i>
</a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right-ios7">
</ion-nav-view>
</body>
我的maps.html
My maps.html
<ion-view title="Ubicación">
<ion-content id="maps" scroll="false" data-tap-disabled="true">
</ion-content>
</ion-view>
推荐答案
为什么不将地图添加到单独的div
Why don't you add your map into a separate div
<ion-view title="Ubicación">
<ion-content>
<div id="maps" scroll="false" data-tap-disabled="true"></div>
<div class="testHello "> My Button </div>
</ion-content>
</ion-view>
并将您的商品放置在固定位置
And position your items on position fixed
.testHello {
position : absolute;
background-color: red;
width : 100%;
bottom:0px;
}
查看更新的codepen
http://codepen.io/anon/pen/eNgRpR
See updated codepen http://codepen.io/anon/pen/eNgRpR
这篇关于离子框架如何在离子内容图下面放置一个div或按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文