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

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

今天我们主要来看侧滑菜单的制作

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

支持QQ、微信、微博的登陆，

一、先把CSS和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自定义图标