1 Star 0 Fork 0

oschina_Nsg / jfbbs_mui

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index-menu.html 6.80 KB
一键复制 编辑 原始数据 按行查看 历史
= 提交于 2015-07-17 22:47 . init
<!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">
<style type="text/css">
body,
.mui-content {
background-color: #333;
color: #fff;
}
p {
margin-bottom: 0px;
}
.title {
margin: 10px 0;
text-align: center;
}
.menu-name {
padding-left: 15px;
font-size: 16px;
background-color: #3b3b3b;
height: 43px;
line-height: 43px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="title">
<img src="img/menu-logo.png" width="180">
</div>
<ul class="mui-table-view mui-table-view-inverted mui-hidden" id="login_ul">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="login" href="html/barcode_scan.html">
登录
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-inverted mui-hidden" id="user_ul">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="user" href="html/user.html" id="nickname" tab="my"></a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="user" href="html/msg.html" tab="msg">我的消息</a>
</li>
</ul>
<p class="menu-name">话题</p>
<ul class="mui-table-view mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="topic" href="html/list.html" tab="all">
全部
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="topic" href="html/gs-list.html" tab="gs">
灌水
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="topic" href="html/news-list.html" tab="news">
资讯
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="topic" href="html/ask-list.html" tab="ask">
问答
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="topic" href="html/blog-list.html" tab="blog">
博客
</a>
</li>
</ul>
<p class="menu-name">其他</p>
<ul class="mui-table-view mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" type="setting" href="html/setting.html" tab="setting">
设置
</a>
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript" charset="utf-8">
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 index = null;
mui.plusReady(function() {
//获得主页面webview引用;
index = plus.webview.currentWebview().opener();
//判断用户是否登录
if(isLogin()) {
document.getElementById('nickname').innerHTML = plus.storage.getItem(_user_nickname);
document.getElementById('login_ul').className = "mui-table-view mui-table-view-inverted mui-hidden";
document.getElementById('user_ul').className = "mui-table-view mui-table-view-inverted mui-block";
//index show createTopic
mui.fire(index, "showCreateTopic", {});
mui.fire(index, "hideLogout", {});
} else {
document.getElementById('login_ul').className = "mui-table-view mui-table-view-inverted mui-block";
document.getElementById('user_ul').className = "mui-table-view mui-table-view-inverted mui-hidden";
}
});
mui('.mui-table-view').on('tap', 'a', function() {
var type = this.getAttribute("type");
var _tab = this.getAttribute("tab");
var id = this.getAttribute("href");
var href = this.href;
if (type && type == "login") {
var bts = ["取消", "好的"];
plus.nativeUI.confirm("PC端登录jfbbs.tomoya.cn后,扫描设置页面的Access Token二维码即可完成登录", function(e) {
var i = e.index;
if(i == 1) {
mui.openWindow({
id: 'barcode_scan.html',
url: id
});
}
}, "扫码登录", bts);
} else if (type && (type == "topic" || type == "user" || type == "setting")) {
var tab = "全部";
if (_tab == 'gs') {
tab = "灌水";
} else if (_tab == 'ask') {
tab = "问答";
} else if (_tab == 'news') {
tab = "资讯";
} else if (_tab == 'blog') {
tab = "博客";
} else if(_tab == "my") {
tab = plus.storage.getItem(_user_nickname);
} else if(_tab == "msg") {
tab = "消息";
} else if(_tab == "setting") {
tab = "设置";
}
plus.webview.getWebviewById('list').loadURL(href);
mui.fire(index, "changeTabTitle", {
tab: tab
});
close();
}
});
/**
* 关闭侧滑菜单
*/
function close() {
mui.fire(mui.currentWebview.opener(), "menu:close");
}
//点击“关闭侧滑菜单”按钮处理逻辑
// document.getElementById("close-btn").addEventListener("tap",close);
//在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();
}
});
window.addEventListener("scanresult", function(e) {
var result = e.detail.result;
if(result) {
plus.storage.setItem(_user_token, result.split("@||@")[0]);
plus.storage.setItem(_user_nickname, result.split("@||@")[1]);
document.getElementById('nickname').innerHTML = result.split("@||@")[1];
document.getElementById('login_ul').className = "mui-table-view mui-table-view-inverted mui-hidden";
document.getElementById('user_ul').className = "mui-table-view mui-table-view-inverted mui-block";
mui.fire(mui.currentWebview.opener(), "showCreateTopic", {});
}
});
window.addEventListener("logout", function(e) {
plus.storage.removeItem(_user_nickname);
plus.storage.removeItem(_user_token);
document.getElementById('login_ul').className = "mui-table-view mui-table-view-inverted mui-block";
document.getElementById('user_ul').className = "mui-table-view mui-table-view-inverted mui-hidden";
});
</script>
</body>
</html>
1
https://gitee.com/nsg/jfbbs_mui.git
git@gitee.com:nsg/jfbbs_mui.git
nsg
jfbbs_mui
jfbbs_mui
master

搜索帮助