MUI 窗体切换(setting设置)即窗口从右往左切换,返回从左往右切换。
1)引入mui.min.css
2)引入mui.min.js
引入mui.view.js
1.HTML:
//这是页面的主体结构
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar"></div>
<div class="mui-pages"></div>
</div>
</div>
//这是主页面
<div id="这是主页面的ID" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>返回 //此处是返回按钮
</button>
<p class="">这里是顶部导航栏的title</p>
//如果想在右上角也添加一个按钮的话,可以在此处也添加一个标签,然后绝对定位就行了。例如:<a href="#user_change_ifo" class="mycenter_nav_bianji">编辑</a> 这a标签里的href就用#ID的形式来实现页面跳转
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
主页面的内容
</div>
</div>
</div>
</div>
//这是单一页面
<div id="这是单一页面的ID" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>返回 //此处是返回按钮
</button>
<p class="">这里是顶部导航栏的title</p>
//如果想在右上角也添加一个按钮的话,可以在此处也添加一个标签,然后绝对定位就行了。例如:<a href="#user_change_ifo" class="mycenter_nav_bianji">编辑</a> 这a标签里的href就用#ID的形式来实现页面跳转
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
主页面的内容
</div>
</div>
</div>
</div>
2.CSS
.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {
position: absolute;
left:;
right:;
top:;
bottom:;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-pages {
top: 46px;
height: auto;
}
.mui-scroll-wrapper,.mui-scroll { /*好像是为了把单一页面的内容覆盖掉*/
background-color: #efeff4;
}
.mui-page.mui-transitioning { /*页面切换的特效*/
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-android .mui-navbar-inner.mui-navbar-left { /*顶部导航栏文字的隐藏*/ opacity:;
}
.mui-navbar .mui-btn-nav { /*这个可要可不要,是返回按钮那点的效果*/
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
3.JS
//初始化单页view
var viewApi = mui('这是页面的主体结构的ID').view({
defaultPage: '这是主页面的ID'
});
var view = viewApi.view;
(function($) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};
//监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) {
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
// console.log(e.detail.page.id + ' show');
});
view.addEventListener('pageBeforeBack', function(e) {
// console.log(e.detail.page.id + ' beforeBack');
});
view.addEventListener('pageBack', function(e) {
// console.log(e.detail.page.id + ' back');
});
})(mui);
MUI 窗体切换(setting设置)即窗口从右往左切换,返回从左往右切换。的更多相关文章
- 设置windows窗口ICON 【windows 编程】【API】【原创】
1. ICON介绍 最近开始接触windows 编程,因此将自己所接触的一些零散的知识进行整理并记录.本文主要介绍了如何更改windows对话框窗口的ICON图标.这里首先介绍一下windows IC ...
- MFC 窗体背景图片设置
很多人在做MFC 界面的时候想要给对话框加入背景图片,很多人都会想到在OnPaint()里面来加一段代码来实现,其实这样做并不怎么科学,因为它会导致窗口不断重绘,在很多项目中窗口会闪烁(比如带播放视频 ...
- 3dsmax不同版本 pyside qt UI 设置max窗口为父窗口的方法
3dsmax不同版本 pyside qt widget 设置 max 窗口为父窗口的方法 前言: 3dsmax 在 2014 extension 之后开始集成 Python 和 PySide,但是在版 ...
- pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例 脚本专栏 python 1. 用qt designer编写主窗体,窗体类型是MainWindow,空白窗口上一个按钮.并转换成mai ...
- 设置CMD窗口为UTF-8编码
Windows下的CMD窗口默认是采用非UTF-8编码的,有时候运行一些UTF-8编写的批处理文件在控制台中的输出就是乱码, CHCP是MD DOS中的命令,用来显示或设置活动代码页编号的.用法是: ...
- 设置dos窗口的背景色与前景色
在dos中输入help会列出各种命令,其中有一个color命令可以用来设置当前窗口的前景色和背景色,输入help color会列出使用方法,内容如下: 设置默认的控制台前景和背景颜色. COLOR [ ...
- iOS10 UI教程基础窗口的内容与设置起始窗口
iOS10 UI教程基础窗口的内容与设置起始窗口 iOS10 UI教程基础窗口的内容与设置起始窗口,本章我们从iOS10开发中UI的基础知识开始讲解,其中包括了窗口.视图以及UI层次结构和Views的 ...
- JAVA GUI学习 - 窗体背景图片设置方法:重写paintComponent(Graphics g)方法
public class BackgroundImage extends JFrame { public BackgroundImage() { this.setTitle("窗体背景图片设 ...
- SetConsoleWindowInfo 函数--设置控制台窗口的大小和位置
SetConsoleWindowInfo函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686125(v=vs.85) ...
随机推荐
- 定义类型别名(typedef,using)
说到类型别名,无非是给类型名(如int,char,float,double,bool)取一个比较有特殊含义的名字而已 最常用的关键莫过于 typedef 吧 typedef最常见的用法是与结构体str ...
- HDU 2011 多项式求和
http://acm.hdu.edu.cn/showproblem.php?pid=2011 Problem Description 多项式的描述如下:1 - 1/2 + 1/3 - 1/4 + 1/ ...
- MYSQL jdbc autoReconnect
http://blog.csdn.net/a9529lty/article/details/7104351 http://blog.163.com/huangfei_person/blog/stati ...
- Docker(二十)-Docker容器CPU、memory资源限制
背景 在使用 docker 运行容器时,默认的情况下,docker没有对容器进行硬件资源的限制,当一台主机上运行几百个容器,这些容器虽然互相隔离,但是底层却使用着相同的 CPU.内存和磁盘资源.如果不 ...
- oracle 18c centos7 设置开机自动启动Oracle
学习自: http://blog.csdn.net/condywl/article/details/57129696 1. 在root用户下进行修改 配置文件 /etc/oratab vim /etc ...
- webstrom 安装Babel
https://www.jianshu.com/p/b9bd2ec9ec80 https://www.cnblogs.com/zhishaofei/p/6061568.html https://blo ...
- delphi 右键删除dbgrid行
Delphi DBGrid右键删除行并提交至数据库.在form上添加,控件TPopupMenu,并指定右键名称:删行 2.编写删除语句: If ADOQuery1.State in [dsEdit, ...
- 如何停止处于stopping状态的windows服务
工作中有时需要启动和停止windows service,有时候会出现服务处于stopping或者starting的状态,但是,在services界面中,start service/stop servi ...
- CNN tricks
Must Know Tips/Tricks in Deep Neural Networks (by Xiu-Shen Wei) http://lamda.nju.edu.cn/weixs/projec ...
- 关于js特效轮播图练习
[出现问题] js轮播图,图片未正常轮播. [解决方法] 通过对代码的检查,发现是以下三个原因造成的错误. 1.js代码问题 js代码使用alert(test);,测试修改完毕后,发现依然没有解决错误 ...