Skip to content

M
mui
Commit bfb1f589 authored by hbcui1984's avatar hbcui1984
Browse files
Options

hello mui中setting模板增加评分鼓励

parent 19575856
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 91 deletions
examples/hello-mui/examples/locker-dom.html
View file @ bfb1f589
...@@ -26,51 +26,49 @@ ...@@ -26,51 +26,49 @@
margin: 50px auto; margin: 50px auto;
background-color: #fff; background-color: #fff;
} }
#alert{ #alert {
text-align:center; text-align: center;
padding: 20px 10px ; padding: 20px 10px;
} }
</style> </style>
</head> </head>
<body> <body>
<div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div> <div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='300' data-locker-height='300'></div>
<div id='alert'></div> <div id='alert'></div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/mui.locker.js"></script> <script src="../js/mui.locker.js"></script>
<script> <script>
(function($,doc){ (function($, doc) {
$.init(); $.init();
var holder = doc.querySelector('#holder'),
var holder = doc.querySelector('#holder'), alert = doc.querySelector('#alert'),
alert = doc.querySelector('#alert'),
record = [];
//处理事件
holder.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
alert.innerText = '设定的手势太简单了';
record = []; record = [];
rs.sender.clear(); //处理事件
return; holder.addEventListener('done', function(event) {
} var rs = event.detail;
record.push(rs.points.join('')); if (rs.points.length < 4) {
if (record.length >= 2) { alert.innerText = '设定的手势太简单了';
if (record[0] == record[1]) { record = [];
alert.innerText = '手势设定完成'; rs.sender.clear();
return;
}
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
alert.innerText = '手势设定完成';
} else {
alert.innerText = '两次手势设定不一致';
}
rs.sender.clear();
record = [];
} else { } else {
alert.innerText = '两次手势设定不一致'; alert.innerText = '请确认手势设定';
rs.sender.clear();
} }
rs.sender.clear(); });
record = []; }(mui, document));
} else {
alert.innerText = '请确认手势设定';
rs.sender.clear();
}
});
}(mui,document));
</script> </script>
</body> </body>
......
examples/hello-mui/examples/modals.html
View file @ bfb1f589
...@@ -10,14 +10,15 @@ ...@@ -10,14 +10,15 @@
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
<script> <script>
mui.init(); mui.init({
swipeBack:true //启用右滑关闭功能
});
</script> </script>
</head> </head>
<body> <body>
......
examples/hello-mui/examples/offcanvas-drag-down.html
View file @ bfb1f589
...@@ -285,7 +285,7 @@ ...@@ -285,7 +285,7 @@
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a> <a id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a> <a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">div模式下沉菜单</h1> <h1 class="mui-title">div模式下拉菜单</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded" > <div class="mui-content-padded" >
......
examples/hello-mui/examples/setting.html
View file @ bfb1f589
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -48,10 +47,6 @@ ...@@ -48,10 +47,6 @@
-webkit-transform: translate3d(-20%, 0, 0); -webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);
} }
/*.mui-page-center {
background-color: red;
}*/
.mui-navbar { .mui-navbar {
position: fixed; position: fixed;
right: 0; right: 0;
...@@ -96,12 +91,7 @@ ...@@ -96,12 +91,7 @@
.mui-page-shadow { .mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
} }
/*.mui-android .mui-page-shadow {
width: 1px;
background-color: rgba(0, 0, 0);
}*/
.mui-navbar-inner.mui-transitioning, .mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning { .mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease; -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
...@@ -421,19 +411,13 @@ ...@@ -421,19 +411,13 @@
<div class="mui-scroll"> <div class="mui-scroll">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a id="rate">去评分</a> <a id="rate" class="mui-navigate-right">评分鼓励</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
欢迎页 <a id="share" class="mui-navigate-right">分享推荐</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
功能介绍 <a id="tel" class="mui-navigate-right">客服电话</a>
</li>
<li class="mui-table-view-cell">
系统通知
</li>
<li class="mui-table-view-cell">
帮助与反馈
</li> </li>
</ul> </ul>
</div> </div>
...@@ -451,20 +435,87 @@ ...@@ -451,20 +435,87 @@
}); });
//初始化单页的区域滚动 //初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll(); mui('.mui-scroll-wrapper').scroll();
var view = viewApi.view;
(function($) { //分享操作
//去评分 var shares = {};
var rateLinkEl = document.getElementById("rate"); mui.plusReady(function () {
var rateLink = ''; plus.share.getServices(function (s) {
if ($.os.ios) { if(s&&s.length>0){
rateLink = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8'; for (var i = 0; i < s.length; i++) {
} else if ($.os.plus && $.os.android) { var t = s[i];
rateLink = 'market://details?id=io.dcloud.HelloMUI'; shares[t.id] = t;
}
}
},function () {
console.log("获取分享服务列表失败");
});
});
//分享链接点击事件
document.getElementById("share").addEventListener('tap',function () {
var ids=[{id:"weixin",ex:"WXSceneSession"},{id:"weixin",ex:"WXSceneTimeline"},{id:"sinaweibo"},{id:"tencentweibo"}],
bts=[{title:"发送给微信好友"},{title:"分享到微信朋友圈"},{title:"分享到新浪微博"},{title:"分享到腾讯微博"}];
if(plus.os.name=="iOS"){
ids.push({id:"qq"});
bts.push({title:"分享到QQ"});
} }
if (rateLink) { plus.nativeUI.actionSheet({cancel:"取消",buttons:bts},function(e){
rateLinkEl.classList.add('mui-navigate-right'); var i=e.index;
rateLinkEl.href = rateLink; if(i>0){
var s_id = ids[i-1].id;
var share = shares[s_id];
if ( share.authenticated ) {
shareMessage(share,ids[i-1].ex);
} else {
share.authorize( function(){
shareMessage(share,ids[i-1].ex);
},function(e){
console.log( "认证授权失败："+e.code+" - "+e.message );
});
}
}
});
});
function shareMessage(share,ex){
var msg={extra:{scene:ex}};
msg.href="http://www.dcloud.io/hellomui/";
msg.title="最接近原生APP体验的高性能前端框架";
msg.content="我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
if(~share.id.indexOf('weibo')){
msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
} }
msg.thumbs=["_www/images/logo.png"];
share.send( msg, function(){
console.log( "分享到\""+share.description+"\"成功！ " );
}, function(e){
console.log( "分享到\""+share.description+"\"失败: "+e.code+" - "+e.message );
} );
}
//去评分
document.getElementById("rate").addEventListener('tap',function () {
if(mui.os.ios){
location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8';
}else if(mui.os.android){
plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){
plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){
mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持");
}, "com.tencent.android.qqdownloader" );
}, "com.qihoo.appstore" );
}
});
//客服电话
document.getElementById("tel").addEventListener('tap',function () {
plus.device.dial("114");
});
var view = viewApi.view;
(function($) {
//处理view的后退与webview后退 //处理view的后退与webview后退
var oldBack = $.back; var oldBack = $.back;
$.back = function() { $.back = function() {
...@@ -477,31 +528,17 @@ ...@@ -477,31 +528,17 @@
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发) //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象 //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) { view.addEventListener('pageBeforeShow', function(e) {
console.log(e.detail.page.id + ' beforeShow'); // console.log(e.detail.page.id + ' beforeShow');
}); });
view.addEventListener('pageShow', function(e) { view.addEventListener('pageShow', function(e) {
console.log(e.detail.page.id + ' show'); // console.log(e.detail.page.id + ' show');
}); });
view.addEventListener('pageBeforeBack', function(e) { view.addEventListener('pageBeforeBack', function(e) {
console.log(e.detail.page.id + ' beforeBack'); // console.log(e.detail.page.id + ' beforeBack');
}); });
view.addEventListener('pageBack', function(e) { view.addEventListener('pageBack', function(e) {
console.log(e.detail.page.id + ' back'); // console.log(e.detail.page.id + ' back');
}); });
//监听页面切换事件方案2,通过viewApi对象添加对单个页面的事件监听
//第一个参数为页面的id(即mui-page元素的html id属性)，第二个参数为事件回调
// viewApi.onPageBeforeShow('about', function() {
// console.log('about beforeShow');
// });
// viewApi.onPageShow('about', function() {
// console.log('about show');
// });
// viewApi.onPageBeforeBack('about', function() {
// console.log('about beforeBack');
// });
// viewApi.onPageBack('about', function() {
// console.log('about back');
// });
})(mui); })(mui);
</script> </script>
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ bfb1f589
...@@ -190,13 +190,13 @@ ...@@ -190,13 +190,13 @@
if (item2.querySelector('.mui-loading')) { if (item2.querySelector('.mui-loading')) {
setTimeout(function() { setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2; item2.querySelector('.mui-scroll').innerHTML = html2;
}, 700); }, 500);
} }
} else if (e.detail.slideNumber === 2) { } else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) { if (item3.querySelector('.mui-loading')) {
setTimeout(function() { setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3; item3.querySelector('.mui-scroll').innerHTML = html3;
}, 700); }, 500);
} }
} }
}); });
......
examples/hello-mui/list.html
View file @ bfb1f589
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-down.html"> <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-down.html">
div模式下滑菜单 div模式下拉菜单
</a> </a>
</li> </li>
</ul> </ul>
......
js/tableviews.js
View file @ bfb1f589
...@@ -464,7 +464,7 @@ ...@@ -464,7 +464,7 @@
var isExpand = false; var isExpand = false;
var classList = cell.classList; var classList = cell.classList;
var ul = cell.parentNode; var ul = cell.parentNode;
if (ul.classList.contains(CLASS_RADIO_VIEW)) { if (ul && ul.classList.contains(CLASS_RADIO_VIEW)) {
if (classList.contains(CLASS_SELECTED)) { if (classList.contains(CLASS_SELECTED)) {
return; return;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment