Skip to content

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

hello mui设置模板新增“头像设置”功能

parent 3085e695
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 83 deletions
examples/hello-mui/examples/setting.html
View file @ 6cc6a95d
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -91,7 +92,7 @@ ...@@ -91,7 +92,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-navbar-inner.mui-transitioning, .mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning { .mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease; -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
...@@ -126,6 +127,28 @@ ...@@ -126,6 +127,28 @@
.mui-table-view-divider:after { .mui-table-view-divider:after {
height: 0; height: 0;
} }
.head {
height: 40px;
}
#head {
line-height: 40px;
}
.head-img {
width: 40px;
height: 40px;
}
#head-img1{
position: absolute;
bottom: 10px;right: 40px;
width: 40px;height: 40px;
}
.update{font-style: normal;color: #999999;margin-right: -25px;font-size: 15px}
.mui-fullscreen{
position: fixed;
z-index: 20;
background-color: #000;
}
</style> </style>
</head> </head>
...@@ -154,6 +177,17 @@ ...@@ -154,6 +177,17 @@
<div class="mui-page-content"> <div class="mui-page-content">
<div class="mui-scroll-wrapper"> <div class="mui-scroll-wrapper">
<div class="mui-scroll"> <div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right" href="#account">
<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
<div class="mui-media-body">
Hello MUI
<p class='mui-ellipsis'>账号:hellomui</p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a href="#account" class="mui-navigate-right">账号与安全</a> <a href="#account" class="mui-navigate-right">账号与安全</a>
...@@ -171,8 +205,8 @@ ...@@ -171,8 +205,8 @@
</li> </li>
</ul> </ul>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI</a> <a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V1.9.0</i></a>
</li> </li>
</ul> </ul>
<ul class="mui-table-view"> <ul class="mui-table-view">
...@@ -195,24 +229,32 @@ ...@@ -195,24 +229,32 @@
</div> </div>
<div class="mui-page-content"> <div class="mui-page-content">
<div class="mui-scroll-wrapper"> <div class="mui-scroll-wrapper">
<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="head" class="mui-navigate-right">头像
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a> <span class="mui-pull-right head">
</li> <img class="head-img mui-action-preview" id="head-img1" src=""/>
</ul> </span>
<ul class="mui-table-view"> </a>
<li class="mui-table-view-cell"> </li>
<a>QQ号<span class="mui-pull-right">88888888</span></a> <li class="mui-table-view-cell">
</li> <a>姓名<span class="mui-pull-right">Hbuilder</span></a>
<li class="mui-table-view-cell"> </li>
<a>手机号<span class="mui-pull-right">18601234567</span></a> <li class="mui-table-view-cell">
</li> <a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
<li class="mui-table-view-cell"> </li>
<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a> </ul>
</li> <ul class="mui-table-view">
</ul> <li class="mui-table-view-cell">
</div> <a>QQ号<span class="mui-pull-right">88888888</span></a>
</li>
<li class="mui-table-view-cell">
<a>手机号<span class="mui-pull-right">18601234567</span></a>
</li>
<li class="mui-table-view-cell">
<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
...@@ -404,7 +446,7 @@ ...@@ -404,7 +446,7 @@
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置 <span class="mui-icon mui-icon-left-nav"></span>设置
</button> </button>
<h1 class="mui-center mui-title">关于MUI</h1> <h1 class="mui-center mui-title">关于MUI</h1>
</div> </div>
<div class="mui-page-content"> <div class="mui-page-content">
<div class="mui-scroll-wrapper"> <div class="mui-scroll-wrapper">
...@@ -419,6 +461,9 @@ ...@@ -419,6 +461,9 @@
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a id="tel" class="mui-navigate-right">客服电话</a> <a id="tel" class="mui-navigate-right">客服电话</a>
</li> </li>
<li class="mui-table-view-cell">
<a id="update" class="mui-navigate-right">检查更新</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -435,84 +480,131 @@ ...@@ -435,84 +480,131 @@
}); });
//初始化单页的区域滚动 //初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll(); mui('.mui-scroll-wrapper').scroll();
//分享操作
//分享操作
var shares = {}; var shares = {};
mui.plusReady(function () { mui.plusReady(function() {
plus.share.getServices(function (s) { plus.share.getServices(function(s) {
if(s&&s.length>0){ if (s && s.length > 0) {
for (var i = 0; i < s.length; i++) { for (var i = 0; i < s.length; i++) {
var t = s[i]; var t = s[i];
shares[t.id] = t; shares[t.id] = t;
} }
} }
},function () { }, function() {
console.log("获取分享服务列表失败"); console.log("获取分享服务列表失败");
}); });
defaultImg();
setTimeout(function () {
initImgPreview();
},500);
}); });
//分享链接点击事件
//分享链接点击事件 document.getElementById("share").addEventListener('tap', function() {
document.getElementById("share").addEventListener('tap',function () { var ids = [{
var ids=[{id:"weixin",ex:"WXSceneSession"},{id:"weixin",ex:"WXSceneTimeline"},{id:"sinaweibo"},{id:"tencentweibo"}], id: "weixin",
bts=[{title:"发送给微信好友"},{title:"分享到微信朋友圈"},{title:"分享到新浪微博"},{title:"分享到腾讯微博"}]; ex: "WXSceneSession"
if(plus.os.name=="iOS"){ }, {
ids.push({id:"qq"}); id: "weixin",
bts.push({title:"分享到QQ"}); ex: "WXSceneTimeline"
} }, {
plus.nativeUI.actionSheet({cancel:"取消",buttons:bts},function(e){ id: "sinaweibo"
var i=e.index; }, {
if(i>0){ id: "tencentweibo"
var s_id = ids[i-1].id; }],
bts = [{
title: "发送给微信好友"
}, {
title: "分享到微信朋友圈"
}, {
title: "分享到新浪微博"
}, {
title: "分享到腾讯微博"
}];
if (plus.os.name == "iOS") {
ids.push({
id: "qq"
});
bts.push({
title: "分享到QQ"
});
}
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
}, function(e) {
var i = e.index;
if (i > 0) {
var s_id = ids[i - 1].id;
var share = shares[s_id]; var share = shares[s_id];
if ( share.authenticated ) { if (share.authenticated) {
shareMessage(share,ids[i-1].ex); shareMessage(share, ids[i - 1].ex);
} else { } else {
share.authorize( function(){ share.authorize(function() {
shareMessage(share,ids[i-1].ex); shareMessage(share, ids[i - 1].ex);
},function(e){ }, function(e) {
console.log( "认证授权失败："+e.code+" - "+e.message ); console.log("认证授权失败：" + e.code + " - " + e.message);
}); });
} }
} }
}); });
}); });
function shareMessage(share,ex){ function shareMessage(share, ex) {
var msg={extra:{scene:ex}}; var msg = {
msg.href="http://www.dcloud.io/hellomui/"; extra: {
msg.title="最接近原生APP体验的高性能前端框架"; scene: ex
msg.content="我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距"; }
if(~share.id.indexOf('weibo')){ };
msg.content += "；体验地址：http://www.dcloud.io/hellomui/"; msg.href = "http://www.dcloud.io/hellomui/";
} msg.title = "最接近原生APP体验的高性能前端框架";
msg.thumbs=["_www/images/logo.png"]; msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
share.send( msg, function(){ if (~share.id.indexOf('weibo')) {
console.log( "分享到\""+share.description+"\"成功！ " ); msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
}, function(e){ }
console.log( "分享到\""+share.description+"\"失败: "+e.code+" - "+e.message ); 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){ }
//去评分
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'; 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){ } 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) {
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手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持"); mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持");
}, "com.qihoo.appstore" ); }, "com.qihoo.appstore");
}, "com.tencent.android.qqdownloader" ); }, "com.tencent.android.qqdownloader");
} }
}); });
//客服电话
//客服电话 document.getElementById("tel").addEventListener('tap', function() {
document.getElementById("tel").addEventListener('tap',function () {
plus.device.dial("114"); plus.device.dial("114");
}); });
// //意见反馈
// document.getElementById("quest").addEventListener('tap', function() {
//
// });
//
//检查更新
document.getElementById("update").addEventListener('tap', function() {
mui.getJSON(server,{"appid":plus.runtime.appid,"version":plus.runtime.version,"imei":plus.device.imei},function (data) {
if(data.status){
plus.ui.confirm( data.note, function(i){
if ( 0==i ) {
plus.runtime.openURL( data.url );
}
}, data.title, ["立即更新","取　　消"] );
}else{
mui.toast('Hello MUI 已是最新版本~')
}
});
});
var view = viewApi.view; var view = viewApi.view;
(function($) { (function($) {
//处理view的后退与webview后退 //处理view的后退与webview后退
...@@ -527,18 +619,146 @@ ...@@ -527,18 +619,146 @@
//监听页面切换事件方案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');
}); });
})(mui); })(mui);
//更换头像
mui(".mui-table-view-cell").on("tap", "#head", function(e) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改头像",
cancel: "取消",
buttons: a
}, function(b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
});
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
console.log(s);
document.getElementById("head-img").src = s;
document.getElementById("head-img1").src = s;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head"
})
}
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(fs) {
entry.copyTo(fs, 'head.jpg', function(e) {
var e = e.toLocalURL() + "?version=" + new Date().getTime();
document.getElementById("head-img").src = e;
document.getElementById("head-img1").src = e;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
}, function(e) {console.log(e.message);})
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
function defaultImg() {
plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
var s = entry.toLocalURL();
document.getElementById("head-img").src = s;
document.getElementById("head-img1").src = s;
}, function(e) {
document.getElementById("head-img").src = '../images/logo.png';
document.getElementById("head-img1").src = '../images/logo.png';
})
}
document.getElementById("head-img1").addEventListener('tap',function (e) {
e.stopPropagation();
});
function initImgPreview () {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
if(imgs&&imgs.length>0){
var slider = document.createElement("div");
slider.setAttribute("id","__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap",function () {
slider.style.display = "none";
});
slider.addEventListener("touchmove",function (event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id","__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function (value,index,array) {
//给图片添加点击事件，触发预览显示；
value.addEventListener('tap',function () {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index,0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
var img = document.createElement("img");
img.setAttribute("src",value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
}
}
</script> </script>
</html> </html>
\ No newline at end of file
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