您的位置：首页 > 产品设计 > UI/UE

MUI仿今日头条第三集--侧滑菜单制作

2015-06-11 09:41 225 查看

MUI仿今日头条第三集--侧滑菜单制作
今天我们主要来看侧滑菜单的制作
使用第二集中的打开侧滑菜单代码--打开侧滑菜单，我们参照今日头条发现，侧滑菜单的最顶部是登陆按钮。支持第三登陆以及本应用内的登陆

支持QQ、微信、微博的登陆，
一、先把CSS和html效果做出来

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>

<body>
<div class="mui-content login">
<div class="auth_login">
<ul>
<li class="mui-icon iconfont icon-shouji" id="login_tel"></li>
<li class="mui-icon iconfont icon-qq" id="qq"></li>
<li class="mui-icon iconfont icon-weixin" id="weixin"></li>
<li class="mui-icon iconfont icon-weibo" id="weibo"></li>
</ul>
<button class="mui-btn mui-btn-negative" style="margin-top: 15px; margin-left: 25%;">更多登陆方式</button>
</div>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

上面的是html代码，在上面的代码中我们使用了自定义图标的功能，由于MUI把所有的图标都压缩成字体了文件了，所以我们也要参照MUI的做好把图标压缩为字体文件，此操作在作为单独一集来讲解
下面是CSS代码

body {
background-color: #fff;
border-radius: 3px;
}
@font-face {font-family: "iconfont";
src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
.iconfont {
font-family: "iconfont" !important;
font-size: 35px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.5px;
padding: 0 8px;
}

.icon-shouji:before { content: "\e629"; color: #4CD964;cursor: pointer;}
.icon-weixin:before { content: "\e603"; color: #2AC845; cursor: pointer;}
.icon-qq:before { content: "\e610";color: #007AFF;}
.icon-weibo:before { content: "\e62a"; color:#CF2D28}

.auth_login {
background: #F3F3F3;
margin: 0;
padding: 0;
border: 1px solid #FAFAFA;
}
.auth_login ul { list-style: none;}
.auth_login ul li{ float: left; height: 25px;}
.reg{
color: #666;
font-size:12px ;
padding-top: 50px;
}
.reg span{width: 30px; height: 35px; line-height: 35px; margin-left: 10px;}
.reg input{width: 200px; border: none;}
.reg_notpass ul {
list-style: none;
}
#reg{text-align: left; float: left;}
#notpass{float: left; padding-left: 50%;}
.login_btn{
margin: 10% 15%;
border: 1px solid red;
width: 70%;
color: red;
font-size: 24px;
font-weight: bold;
height: 50px;
}

细心的同学可能已经发现了我们在上面的CSS代码中已经使用了字体文件和字体代码了
下面是侧滑菜单的JS代码

mui.init();
var aniShow = "slide-in-right";
//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
if (!mui.os.android) {
var span = document.getElementById("android-only")
if (span) {
span.style.display = "none";
}
aniShow = "pop-in";
}
var subWebview = null,
template = null,
index = null;
//页面加载完毕后 获得首页的webview引用
mui.plusReady(function() {
//获得主页面webview引用；
index = plus.webview.currentWebview().opener();
});
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart', function(e) {
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragleft', function(e) {
if (!mui.isScrolling) {
e.detail.gesture.preventDefault();
}
});
//监听左滑事件，若菜单已展开，左滑要关闭菜单；
window.addEventListener("swipeleft", function(e) {
if (Math.abs(e.detail.angle) > 170) {
close();
}
});
//打开登陆页面
document.getElementById('login_tel').addEventListener('tap', function() {
//打开电话登陆页面
mui.openWindow({
url: 'login_tel.html',
id:'login_tel'
});
});
//打开QQ登陆页面
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('qq').addEventListener('tap', function() {
//打开电话登陆页面
mui.openWindow({
url: 'login_qq.html',
id:'login_qq'
});
});
//打开微信登陆页面
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('weixin').addEventListener('tap', function() {
//打开电话登陆页面
mui.openWindow({
url: 'login_weixin.html',
id:'login_weixin'
});
});
//打开微博登陆页面
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('weibo').addEventListener('tap', function() {
//打开电话登陆页面
mui.openWindow({
url: 'login_weibo.html',
id:'login_weibo'
});
});

好了，到此呢我们的侧滑菜单的登陆部分就算是做好了，当然此页面现在仅仅只有页面还没有实际功能，在下集中我们主要来讲解在MUI自定义图标

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航