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>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -91,7 +92,7 @@
.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: 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 {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
......@@ -126,6 +127,28 @@
.mui-table-view-divider:after {
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>
</head>
......@@ -154,6 +177,17 @@
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<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">
<li class="mui-table-view-cell">
<a href="#account" class="mui-navigate-right">账号与安全</a>
......@@ -171,8 +205,8 @@
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI</a>
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V1.9.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
......@@ -195,24 +229,32 @@
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<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>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head">
<img class="head-img mui-action-preview" id="head-img1" src=""/>
</span>
</a>
</li>
<li class="mui-table-view-cell">
<a>姓名<span class="mui-pull-right">Hbuilder</span></a>
</li>
<li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<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>
......@@ -404,7 +446,7 @@
<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>设置
</button>
<h1 class="mui-center mui-title">关于MUI</h1>
<h1 class="mui-center mui-title">关于MUI</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
......@@ -419,6 +461,9 @@
<li class="mui-table-view-cell">
<a id="tel" class="mui-navigate-right">客服电话</a>
</li>
<li class="mui-table-view-cell">
<a id="update" class="mui-navigate-right">检查更新</a>
</li>
</ul>
</div>
</div>
......@@ -435,84 +480,131 @@
});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();
//分享操作
//分享操作
var shares = {};
mui.plusReady(function () {
plus.share.getServices(function (s) {
if(s&&s.length>0){
mui.plusReady(function() {
plus.share.getServices(function(s) {
if (s && s.length > 0) {
for (var i = 0; i < s.length; i++) {
var t = s[i];
shares[t.id] = t;
}
}
},function () {
}, function() {
console.log("获取分享服务列表失败");
});
defaultImg();
setTimeout(function () {
initImgPreview();
},500);
});
//分享链接点击事件
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"});
}
plus.nativeUI.actionSheet({cancel:"取消",buttons:bts},function(e){
var i=e.index;
if(i>0){
var s_id = ids[i-1].id;
//分享链接点击事件
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"
});
}
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];
if ( share.authenticated ) {
shareMessage(share,ids[i-1].ex);
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 );
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){
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.qihoo.appstore" );
}, "com.tencent.android.qqdownloader" );
} 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.qihoo.appstore");
}, "com.tencent.android.qqdownloader");
}
});
//客服电话
document.getElementById("tel").addEventListener('tap',function () {
//客服电话
document.getElementById("tel").addEventListener('tap', function() {
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;
(function($) {
//处理view的后退与webview后退
......@@ -527,18 +619,146 @@
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) {
// console.log(e.detail.page.id + ' beforeShow');
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
// console.log(e.detail.page.id + ' show');
// console.log(e.detail.page.id + ' show');
});
view.addEventListener('pageBeforeBack', function(e) {
// console.log(e.detail.page.id + ' beforeBack');
// console.log(e.detail.page.id + ' beforeBack');
});
view.addEventListener('pageBack', function(e) {
// console.log(e.detail.page.id + ' back');
// console.log(e.detail.page.id + ' back');
});
})(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>
</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