浮动 DOM ,固定位置 - Telerik Kendo-Mobile AppBuilder Icenium
Floating DOM , Fixed Position - Telerik Kendo-Mobile AppBuilder Icenium
我正在使用 Telerik Kendo-Mobile AppBuilder Icenium,构建一个 混合 应用程序。我已经查看了关于同一主题的其他帖子,但 none 有效。我在想可能有一些 Kendo 具体的东西,并且有人知道如何解决这个问题。在特定视图中
<div data-role="view"
data-title="Rules..."
data-layout="main"
data-model="app.workoutTypeRuleInterstatial"
data-show="app.workoutTypeRuleInterstatial.onShow"
data-after-show="app.workoutTypeRuleInterstatial.afterShow"
id="workoutTypeRuleInterstatial_View">
<ul data-role="listview"
data-auto-bind="false"
data-style="inset"
data-template="workoutTypeRuleInterstatialModelTemplate"
data-bind="{ source: workoutTypeRuleInterstatialModel.dataSource }"
data-pull-to-refresh="true"
data-endless-scroll="false"></ul>
<script type="text/x-kendo-template" id="workoutTypeRuleInterstatialModelTemplate">
<div class="image-with-text">
<table style="width: 100%;">
<tr>
<td style="width:100%;">
<a onclick="app.workoutTypeRuleInterstatial.workoutRuleClick('#: TypeId #')">
<h4 id="id" class="workoutRule">#: Name #</h4>
</a>
</td>
</tr>
</table>
</div>
</script>
<div id="addButton">
<img src="images/add.png" class="button" id="addNewWorkoutType" />
</div>
</div>
和这个css
<style>
#addButton {
top: 70%;
left: 90%;
width: 2.3em;
height: 2.3em;
margin-top: -9em;
margin-left: 0em;
border: 0;
position: fixed;
}
.button {
padding: 0;
width: 2.3em;
height: 2.3em;
}
</style>
不允许元素在滚动列表时保持 "fixed" 在原位,它会随列表滚动,我希望它像下图一样(不随列表滚动)
答案是:
<footer data-role="footer">
<div data-role="tabstrip" id="navigation-container">
<a href="components/homeView/view.html" data-icon="home">Home View</a>
<a href="components/settingsView/view.html" data-icon="settings">Settings</a>
<a href="components/contactsView/view.html" data-icon="contacts">Contacts</a>
</div>
<a data-role="button" class="floating" data-icon="compose"></a>
</footer>
<style>
.km-nova .km-button.floating {
position: fixed;
right: 20px;
bottom: 70px;
border-color: transparent;
border-radius: 35px;
width: 50px;
height: 50px;
line-height: 35px;
background-color: red;
color: white;
}
.km-nova .km-button.floating span {
font-size: 1.5em;
}
</style>
我正在使用 Telerik Kendo-Mobile AppBuilder Icenium,构建一个 混合 应用程序。我已经查看了关于同一主题的其他帖子,但 none 有效。我在想可能有一些 Kendo 具体的东西,并且有人知道如何解决这个问题。在特定视图中
<div data-role="view"
data-title="Rules..."
data-layout="main"
data-model="app.workoutTypeRuleInterstatial"
data-show="app.workoutTypeRuleInterstatial.onShow"
data-after-show="app.workoutTypeRuleInterstatial.afterShow"
id="workoutTypeRuleInterstatial_View">
<ul data-role="listview"
data-auto-bind="false"
data-style="inset"
data-template="workoutTypeRuleInterstatialModelTemplate"
data-bind="{ source: workoutTypeRuleInterstatialModel.dataSource }"
data-pull-to-refresh="true"
data-endless-scroll="false"></ul>
<script type="text/x-kendo-template" id="workoutTypeRuleInterstatialModelTemplate">
<div class="image-with-text">
<table style="width: 100%;">
<tr>
<td style="width:100%;">
<a onclick="app.workoutTypeRuleInterstatial.workoutRuleClick('#: TypeId #')">
<h4 id="id" class="workoutRule">#: Name #</h4>
</a>
</td>
</tr>
</table>
</div>
</script>
<div id="addButton">
<img src="images/add.png" class="button" id="addNewWorkoutType" />
</div>
</div>
和这个css
<style>
#addButton {
top: 70%;
left: 90%;
width: 2.3em;
height: 2.3em;
margin-top: -9em;
margin-left: 0em;
border: 0;
position: fixed;
}
.button {
padding: 0;
width: 2.3em;
height: 2.3em;
}
</style>
不允许元素在滚动列表时保持 "fixed" 在原位,它会随列表滚动,我希望它像下图一样(不随列表滚动)
答案是:
<footer data-role="footer">
<div data-role="tabstrip" id="navigation-container">
<a href="components/homeView/view.html" data-icon="home">Home View</a>
<a href="components/settingsView/view.html" data-icon="settings">Settings</a>
<a href="components/contactsView/view.html" data-icon="contacts">Contacts</a>
</div>
<a data-role="button" class="floating" data-icon="compose"></a>
</footer>
<style>
.km-nova .km-button.floating {
position: fixed;
right: 20px;
bottom: 70px;
border-color: transparent;
border-radius: 35px;
width: 50px;
height: 50px;
line-height: 35px;
background-color: red;
color: white;
}
.km-nova .km-button.floating span {
font-size: 1.5em;
}
</style>