miniui页面跳转的具体例子
时间: 2024-04-29 21:23:42 浏览: 103
以下是一个使用miniui的页面跳转的具体例子:
假设我们有两个页面,一个是主页面,另一个是子页面。我们需要在主页面中添加一个按钮,点击按钮后跳转到子页面。具体操作如下:
1. 在主页面中添加按钮,代码如下:
```
<div class="mini-toolbar" style="padding: 5px;">
<a class="mini-button" iconCls="icon-add" onclick="onAddClick()">添加</a>
</div>
```
2. 在主页面的JavaScript代码中添加跳转函数,代码如下:
```
function onAddClick() {
mini.open({
url: "subpage.html",
title: "子页面",
width: 600,
height: 400,
onload: function () {
// 子页面加载完成后的回调函数
},
ondestroy: function (action) {
// 子页面关闭后的回调函数
}
});
}
```
3. 创建子页面(subpage.html)并在其中添加需要显示的内容。当子页面加载完成后,可以在onload回调函数中执行一些操作,例如初始化表单数据等。如果需要在子页面中执行一些逻辑并返回结果,则可以在子页面中添加一个按钮,点击按钮后关闭子页面并返回结果。代码如下:
```
<div class="mini-toolbar" style="padding: 5px;">
<a class="mini-button" iconCls="icon-ok" onclick="onOkClick()">确定</a>
<a class="mini-button" iconCls="icon-cancel" onclick="onCancelClick()">取消</a>
</div>
<script type="text/javascript">
function onOkClick() {
var data = {
name: mini.get("name").getValue(),
age: mini.get("age").getValue()
};
mini.parentWindow.close(data, "ok");
}
function onCancelClick() {
mini.parentWindow.close(null, "cancel");
}
</script>
```
在上面的代码中,我们定义了两个函数,分别是onOkClick和onCancelClick。当用户点击确定按钮时,我们获取表单数据并使用close函数关闭子页面并返回数据给父页面。当用户点击取消按钮时,我们直接关闭子页面并不返回任何数据。
4. 在主页面的ondestroy回调函数中获取子页面返回的数据,并根据返回结果执行相应的操作。代码如下:
```
function onAddClick() {
mini.open({
url: "subpage.html",
title: "子页面",
width: 600,
height: 400,
onload: function () {
// 子页面加载完成后的回调函数
},
ondestroy: function (action, data) {
if (action === "ok") {
// 用户点击了确定按钮,并返回了数据
console.log(data);
} else {
// 用户取消了操作,或者子页面发生了错误
console.log("操作取消或发生错误");
}
}
});
}
```
在上面的代码中,我们判断返回的action是"ok"还是"cancel",如果是"ok"则表示用户点击了确定按钮并返回了数据,我们可以在控制台上输出返回的数据;如果是"cancel"则表示用户取消了操作,或者子页面发生了错误,我们可以在控制台上输出相应的提示信息。
这就是一个使用miniui的页面跳转的具体例子。在实际开发中,我们可以根据需要对页面跳转进行更加灵活的控制。
阅读全文