Skip to content

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

解决图片预览双指缩放失效的问题

parent d2549d1a
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 185 deletions
Gruntfile.js
View file @ bd2f183c
...@@ -62,6 +62,7 @@ module.exports = function(grunt) { ...@@ -62,6 +62,7 @@ module.exports = function(grunt) {
'js/mui.gestures.tap.js', 'js/mui.gestures.tap.js',
'js/mui.gestures.longtap.js', 'js/mui.gestures.longtap.js',
'js/mui.gestures.hold.js', 'js/mui.gestures.hold.js',
'js/mui.gestures.pinch.js',
'js/mui.init.js', 'js/mui.init.js',
'js/mui.init.5+.js', 'js/mui.init.5+.js',
'js/mui.back.js', 'js/mui.back.js',
......
dist/js/mui.js
View file @ bd2f183c
...@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) { ...@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) {
} }
}); });
})(mui, 'hold'); })(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/** /**
* mui.init * mui.init
* @param {type} $ * @param {type} $
......
dist/js/mui.min.js
View file @ bd2f183c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/setting.html
View file @ bd2f183c
...@@ -136,14 +136,20 @@ ...@@ -136,14 +136,20 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
#head-img1{ #head-img1 {
position: absolute; position: absolute;
bottom: 10px;right: 40px; bottom: 10px;
width: 40px;height: 40px; right: 40px;
width: 40px;
height: 40px;
} }
.update{font-style: normal;color: #999999;margin-right: -25px;font-size: 15px} .update {
font-style: normal;
.mui-fullscreen{ color: #999999;
margin-right: -25px;
font-size: 15px
}
.mui-fullscreen {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
background-color: #000; background-color: #000;
...@@ -152,6 +158,7 @@ ...@@ -152,6 +158,7 @@
position: static; position: static;
} }
</style> </style>
<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
</head> </head>
<body> <body>
...@@ -207,7 +214,7 @@ ...@@ -207,7 +214,7 @@
</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 <i class="mui-pull-right update">V2.0.0</i></a> <a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.0.0</i></a>
</li> </li>
</ul> </ul>
...@@ -448,7 +455,7 @@ ...@@ -448,7 +455,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">
...@@ -466,6 +473,9 @@ ...@@ -466,6 +473,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="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a id="update" class="mui-navigate-right">检查更新</a> <a id="update" class="mui-navigate-right">检查更新</a>
</li> </li>
...@@ -474,9 +484,40 @@ ...@@ -474,9 +484,40 @@
</div> </div>
</div> </div>
</div> </div>
<div id="feedback" class="mui-page feedback">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<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>关于MUI
</button>
<h1 class="mui-center mui-title">问题反馈</h1>
</div>
<div class="mui-page-content">
<p>问题和意见</p>
<div class="row mui-input-row">
<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
</div>
<p>图片(选填,提供问题截图)</p>
<div id='image-list' class="row image-list">
</div>
<p>QQ/邮箱</p>
<div class="mui-input-row">
<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
</div>
<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
</div>
<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。</p>
</div>
</body> </body>
<script src="../js/mui.min.js "></script> <script src="../js/mui.min.js "></script>
<script src="../js/mui.view.js "></script> <script src="../js/mui.view.js "></script>
<script src='../libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
<script src='../libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
<script src='../libs/easymob-webim-sdk/json2.js'></script>
<script src="../libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
<script src='../js/feedback.js'></script>
<script src="../js/feedback-page.js"></script>
<script> <script>
mui.init(); mui.init();
//初始化单页view //初始化单页view
...@@ -499,11 +540,11 @@ ...@@ -499,11 +540,11 @@
console.log("获取分享服务列表失败"); console.log("获取分享服务列表失败");
}); });
defaultImg(); defaultImg();
setTimeout(function () { setTimeout(function() {
initImgPreview(); initImgPreview();
},500); }, 500);
}); });
//分享链接点击事件 //分享链接点击事件
document.getElementById("share").addEventListener('tap', function() { document.getElementById("share").addEventListener('tap', function() {
var ids = [{ var ids = [{
id: "weixin", id: "weixin",
...@@ -515,8 +556,8 @@ ...@@ -515,8 +556,8 @@
id: "sinaweibo" id: "sinaweibo"
}, { }, {
id: "tencentweibo" id: "tencentweibo"
},{ }, {
id:"qq" id: "qq"
}], }],
bts = [{ bts = [{
title: "发送给微信好友" title: "发送给微信好友"
...@@ -526,7 +567,7 @@ ...@@ -526,7 +567,7 @@
title: "分享到新浪微博" title: "分享到新浪微博"
}, { }, {
title: "分享到腾讯微博" title: "分享到腾讯微博"
},{ }, {
title: "分享到QQ" title: "分享到QQ"
}]; }];
plus.nativeUI.actionSheet({ plus.nativeUI.actionSheet({
...@@ -537,7 +578,7 @@ ...@@ -537,7 +578,7 @@
if (i > 0) { if (i > 0) {
var s_id = ids[i - 1].id; var s_id = ids[i - 1].id;
var share = shares[s_id]; var share = shares[s_id];
if(share){ if (share) {
if (share.authenticated) { if (share.authenticated) {
shareMessage(share, ids[i - 1].ex); shareMessage(share, ids[i - 1].ex);
} else { } else {
...@@ -547,7 +588,7 @@ ...@@ -547,7 +588,7 @@
console.log("认证授权失败：" + e.code + " - " + e.message); console.log("认证授权失败：" + e.code + " - " + e.message);
}); });
} }
}else{ } else {
mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包") mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包")
} }
} }
...@@ -589,26 +630,29 @@ ...@@ -589,26 +630,29 @@
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("quest").addEventListener('tap', function() {
// //
// }); // });
// //
//检查更新 //检查更新
document.getElementById("update").addEventListener('tap', function() { document.getElementById("update").addEventListener('tap', function() {
var server="http://www.dcloud.io/check/update";//获取升级描述文件服务器地址 var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
mui.getJSON(server,{"appid":plus.runtime.appid,"version":plus.runtime.version,"imei":plus.device.imei},function (data) { mui.getJSON(server, {
if(data.status){ "appid": plus.runtime.appid,
plus.ui.confirm( data.note, function(i){ "version": plus.runtime.version,
if ( 0==i ) { "imei": plus.device.imei
plus.runtime.openURL( data.url ); }, function(data) {
if (data.status) {
plus.ui.confirm(data.note, function(i) {
if (0 == i) {
plus.runtime.openURL(data.url);
} }
}, data.title, ["立即更新","取　　消"] ); }, data.title, ["立即更新", "取　　消"]);
}else{ } else {
mui.toast('Hello MUI 已是最新版本~') mui.toast('Hello MUI 已是最新版本~')
} }
}); });
}); });
var view = viewApi.view; var view = viewApi.view;
(function($) { (function($) {
...@@ -636,7 +680,7 @@ ...@@ -636,7 +680,7 @@
// 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) { mui(".mui-table-view-cell").on("tap", "#head", function(e) {
var a = [{ var a = [{
title: "拍照" title: "拍照"
...@@ -687,40 +731,40 @@ ...@@ -687,40 +731,40 @@
function galleryImg() { function galleryImg() {
plus.gallery.pick(function(a) { plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) { plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function (root) { plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.jpg",{},function (file) { root.getFile("head.jpg", {}, function(file) {
//文件已存在 //文件已存在
file.remove(function () { file.remove(function() {
console.log("file remove success"); console.log("file remove success");
entry.copyTo(root, 'head.jpg', function(e) { entry.copyTo(root, 'head.jpg', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime(); var e = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img").src = e; document.getElementById("head-img").src = e;
document.getElementById("head-img1").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('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'head.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img").src = path;
document.getElementById("head-img1").src = path;
//变更大图预览的src //变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现 //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();; document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
}, },
function(e) { function(e) {
console.log('copy image fail:'+e.message); console.log('copy image fail:' + e.message);
}); });
},function () {
console.log("delete image fail:"+e.message);
});
},function () {
//文件不存在
entry.copyTo(root, 'head.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img").src = path;
document.getElementById("head-img1").src = path;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
},
function(e) {
console.log('copy image fail:'+e.message);
});
}); });
},function (e) { }, function(e) {
console.log("get _www folder fail"); console.log("get _www folder fail");
}) })
}, function(e) { }, function(e) {
...@@ -733,7 +777,7 @@ ...@@ -733,7 +777,7 @@
function defaultImg() { function defaultImg() {
plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) { plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
var s = entry.fullPath+ "?version=" + new Date().getTime();; var s = entry.fullPath + "?version=" + new Date().getTime();;
document.getElementById("head-img").src = s; document.getElementById("head-img").src = s;
document.getElementById("head-img1").src = s; document.getElementById("head-img1").src = s;
}, function(e) { }, function(e) {
...@@ -741,68 +785,62 @@ ...@@ -741,68 +785,62 @@
document.getElementById("head-img1").src = '../images/logo.png'; document.getElementById("head-img1").src = '../images/logo.png';
}) })
} }
document.getElementById("head-img1").addEventListener('tap', function(e) {
document.getElementById("head-img1").addEventListener('tap',function (e) {
e.stopPropagation(); e.stopPropagation();
}); });
document.getElementById("welcome").addEventListener('tap', function(e) {
document.getElementById("welcome").addEventListener('tap',function (e) {
//显示启动导航 //显示启动导航
mui.openWindow({ mui.openWindow({
id:'guide', id: 'guide',
url:'guide.html', url: 'guide.html',
show:{ show: {
aniShow:'fade-in', aniShow: 'fade-in',
duration:300 duration: 300
}, },
waiting:{ waiting: {
autoShow:false autoShow: false
} }
}); });
}); });
function initImgPreview () { function initImgPreview() {
var imgs = document.querySelectorAll("img.mui-action-preview"); var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs); imgs = mui.slice.call(imgs);
if(imgs&&imgs.length>0){ if (imgs && imgs.length > 0) {
var slider = document.createElement("div"); var slider = document.createElement("div");
slider.setAttribute("id","__mui-imageview__"); slider.setAttribute("id", "__mui-imageview__");
slider.classList.add("mui-slider"); slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen"); slider.classList.add("mui-fullscreen");
slider.style.display = "none"; slider.style.display = "none";
slider.addEventListener("tap",function () { slider.addEventListener("tap", function() {
slider.style.display = "none"; slider.style.display = "none";
}); });
slider.addEventListener("touchmove",function (event) { slider.addEventListener("touchmove", function(event) {
event.preventDefault(); event.preventDefault();
}) })
var slider_group = document.createElement("div"); var slider_group = document.createElement("div");
slider_group.setAttribute("id","__mui-imageview__group"); slider_group.setAttribute("id", "__mui-imageview__group");
slider_group.classList.add("mui-slider-group"); slider_group.classList.add("mui-slider-group");
imgs.forEach(function(value, index, array) {
imgs.forEach(function (value,index,array) {
//给图片添加点击事件，触发预览显示； //给图片添加点击事件，触发预览显示；
value.addEventListener('tap',function () { value.addEventListener('tap', function() {
slider.style.display = "block"; slider.style.display = "block";
_slider.refresh(); _slider.refresh();
_slider.gotoItem(index,0); _slider.gotoItem(index, 0);
}) })
var item = document.createElement("div"); var item = document.createElement("div");
item.classList.add("mui-slider-item"); item.classList.add("mui-slider-item");
var a = document.createElement("a"); var a = document.createElement("a");
var img = document.createElement("img"); var img = document.createElement("img");
img.setAttribute("src",value.src); img.setAttribute("src", value.src);
a.appendChild(img) a.appendChild(img)
item.appendChild(a); item.appendChild(a);
slider_group.appendChild(item); slider_group.appendChild(item);
}); });
slider.appendChild(slider_group); slider.appendChild(slider_group);
document.body.appendChild(slider); document.body.appendChild(slider);
var _slider = mui(slider).slider(); var _slider = mui(slider).slider();
} }
} }
</script> </script>
......
examples/hello-mui/examples/template.html
View file @ bd2f183c
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
} }
menu.style.display = display; menu.style.display = display;
if(mui.os.android&&parseFloat(mui.os.version)>=4.4){ if(mui.os.android&&aniShow&&parseFloat(mui.os.version)>=4.4){
if(contentWebview==null){ if(contentWebview==null){
contentWebview = self.children()[0]; contentWebview = self.children()[0];
} }
......
examples/hello-mui/js/feedback-page.js
View file @ bd2f183c
...@@ -62,7 +62,11 @@ ...@@ -62,7 +62,11 @@
if (file) { if (file) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function() { reader.onload = function() {
placeholder.style.backgroundImage = 'url("' + reader.result + '")'; //处理 android 4.1 兼容问题
var base64 = reader.result.split(',')[1];
var dataUrl = 'data:image/png;base64,' + base64;
//
placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
} }
reader.readAsDataURL(file); reader.readAsDataURL(file);
placeholder.classList.remove('space'); placeholder.classList.remove('space');
...@@ -79,7 +83,7 @@ ...@@ -79,7 +83,7 @@
(ui.contact.value != '' && (ui.contact.value != '' &&
ui.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) { ui.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
return mui.toast('信息填写不符合规范'); return mui.toast('信息填写不符合规范');
} }
plus.nativeUI.showWaiting(); plus.nativeUI.showWaiting();
feedback.send({ feedback.send({
question: ui.question.value, question: ui.question.value,
......
examples/hello-mui/js/feedback.js
View file @ bd2f183c
(function($, feedback, window, document) { (function($, feedback, window, document) {
/*******************************************/ /*************** 环信配置开始 ****************/
//以后信息更改后，需卸载 “调试 app” 重新调用运行
var APP_KEY = 'dcloudio#mui'; var APP_KEY = 'dcloudio#mui';
var CUSTOM_ID = 'customer'; var CUSTOM_ID = 'customer';
//-- /*************** 环信配置结束 ****************/
//一组 “常量”
var PASSWORD = 'pass01!'; var PASSWORD = 'pass01!';
var LOCAL_STORE_KEY = 'mui://user'; var LOCAL_STORE_KEY = 'mui://user';
var USER_PREFIX = 'mui-user-'; var USER_PREFIX = 'mui-user-';
/*******************************************/
/** /**
* 生成一个 IM 用户名 * 生成一个 IM 用户名
......
examples/hello-mui/js/mui.dtpicker.js
View file @ bd2f183c
...@@ -339,10 +339,23 @@ ...@@ -339,10 +339,23 @@
}, },
hide: function() { hide: function() {
var self = this; var self = this;
if (self.disposed) return;
var ui = self.ui; var ui = self.ui;
ui.picker.classList.remove($.className('active')); ui.picker.classList.remove($.className('active'));
ui.mask.close(); ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page')); document.body.classList.remove($.className('dtpicker-active-for-page'));
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.ui.picker.parentNode.removeChild(self.ui.picker);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
} }
}); });
......
examples/hello-mui/js/mui.imageViewer.js
View file @ bd2f183c
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
if (touches.length == 2) { if (touches.length == 2) {
var p1 = touches[0]; var p1 = touches[0];
var p2 = touches[1]; var p2 = touches[1];
var x = p1.pageX = p2.pageX; //x1-x2 var x = p1.pageX - p2.pageX; //x1-x2
var y = p1.pageY - p2.pageY; //y1-y2 var y = p1.pageY - p2.pageY; //y1-y2
self.scaleStart = Math.sqrt(x * x + y * y); self.scaleStart = Math.sqrt(x * x + y * y);
self.isMultiTouch = true; self.isMultiTouch = true;
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
event.cancelBubble = true; event.cancelBubble = true;
var p1 = touches[0]; var p1 = touches[0];
var p2 = touches[1]; var p2 = touches[1];
var x = p1.pageX = p2.pageX; var x = p1.pageX - p2.pageX;
var y = p1.pageY - p2.pageY; var y = p1.pageY - p2.pageY;
self.scaleEnd = Math.sqrt(x * x + y * y); self.scaleEnd = Math.sqrt(x * x + y * y);
self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart)); self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart));
......
examples/hello-mui/js/mui.indexedlist.js
View file @ bd2f183c
/** /**
* 分组列表 * IndexedList
* 类似联系人应用中的联系人列表，可以按首字母分组 * 类似联系人应用中的联系人列表，可以按首字母分组
* 右侧的字母定位工具条，可以快速定位列表位置 * 右侧的字母定位工具条，可以快速定位列表位置
* varstion 1.0.0 * varstion 1.0.0
...@@ -13,16 +13,16 @@ ...@@ -13,16 +13,16 @@
return '.' + $.className(name); return '.' + $.className(name);
} }
var GroupList = $.GroupList = $.Class.extend({ var IndexedList = $.IndexedList = $.Class.extend({
/** /**
* 通过 element 和 options 构造 GroupList 实例 * 通过 element 和 options 构造 IndexedList 实例
**/ **/
init: function(holder, options) { init: function(holder, options) {
var self = this; var self = this;
self.options = options || {}; self.options = options || {};
self.box = holder; self.box = holder;
if (!self.box) { if (!self.box) {
throw "实例 GroupList 时需要指定 element"; throw "实例 IndexedList 时需要指定 element";
} }
self.createDom(); self.createDom();
self.findElements(); self.findElements();
......
examples/hello-mui/js/mui.js
View file @ bd2f183c
...@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) { ...@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) {
} }
}); });
})(mui, 'hold'); })(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/** /**
* mui.init * mui.init
* @param {type} $ * @param {type} $
......
examples/hello-mui/js/mui.locker.js
View file @ bd2f183c
...@@ -280,14 +280,14 @@ ...@@ -280,14 +280,14 @@
new Locker(element, options); new Locker(element, options);
} else { } else {
var optionsText = element.getAttribute('data-locker-options'); var optionsText = element.getAttribute('data-locker-options');
var options = optionsText ? JSON.parse(optionsText) : {}; var _options = optionsText ? JSON.parse(optionsText) : {};
options.lineColor = element.getAttribute('data-locker-line-color') || options.lineColor; _options.lineColor = element.getAttribute('data-locker-line-color') || _options.lineColor;
options.ringColor = element.getAttribute('data-locker-ring-color') || options.ringColor; _options.ringColor = element.getAttribute('data-locker-ring-color') || _options.ringColor;
options.fillColor = element.getAttribute('data-locker-fill-color') || options.fillColor; _options.fillColor = element.getAttribute('data-locker-fill-color') || _options.fillColor;
options.pointColor = element.getAttribute('data-locker-point-color') || options.pointColor; _options.pointColor = element.getAttribute('data-locker-point-color') || _options.pointColor;
options.width = element.getAttribute('data-locker-width') || options.width; _options.width = element.getAttribute('data-locker-width') || _options.width;
options.height = element.getAttribute('data-locker-height') || options.height; _options.height = element.getAttribute('data-locker-height') || _options.height;
new Locker(element, options); new Locker(element, _options);
} }
}); });
return this; return this;
......
examples/hello-mui/js/mui.locker.md deleted 100644 → 0
View file @ d2549d1a
### 集成方式
1. 首先在页面中引入 mui ，包括相关 style 和 script
### 使用方式
1. 通过实例化 Locker, 示例: new Locker(element, options);
2. 通过扩展方法, 示例: mui('选择器').locker(options);
3. 通过添加 className, 示例: <div class='mui-locker' data-locker-options='{}'></div> (注: data-locker-options 值为 options 的 json 字符串);
### options 结构说明
```javascript
{
lineColor: "#999", //连接线颜色，省略时此参数将使用默认值
ringColor: "#888", //圆圈边框颜色，省略时此参数将使用默认值
fillColor: "#f3f3f3", //圆圈填充颜色，省略时此参数将使用默认值
pointColor: "#777", //圆圈中心点颜色，省略时此参数将使用默认值
width:300 , //宽度，通常省略，省略时可以通过 element 的样式控制
height:300, //高度，通常少略，省略时可以通过 element 的样式控制
}
```
### done 事件
1. 可以通过 element.addEventListener('done',function(event){},false); 处理 "绘的制完成" 事件
2. event.detail.points 为绘制结果，points 是一个数组，包括了当时绘制手势数据
3. event.detail.sender 为当前 "手势解锁" 实例，包括 clear 方法，可以清除当前会制的内容
### 示例
HMTL:
```html
<div id='holder' class="mui-locker" style="width:300px;height:300px;" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div>
<div id='alert'></div>
```
JavaScript:
```javascript
(function($,doc){
$.init();
var holder = doc.querySelector('#holder'),
alert = doc.querySelector('#alert'),
record = [];
//处理事件
holder.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
alert.innerText = '设定的手势太简单了';
record = [];
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 {
alert.innerText = '请确认手势设定';
rs.sender.clear();
}
});
}(mui,document));
```
examples/hello-mui/js/mui.min.js
View file @ bd2f183c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.poppicker.js
View file @ bd2f183c
...@@ -104,9 +104,22 @@ ...@@ -104,9 +104,22 @@
//隐藏 //隐藏
hide: function() { hide: function() {
var self = this; var self = this;
if (self.disposed) return;
self.panel.classList.remove($.className('active')); self.panel.classList.remove($.className('active'));
self.mask.close(); self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page')); document.body.classList.remove($.className('poppicker-active-for-page'));
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
} }
}); });
......
examples/hello-mui/list.html
View file @ bd2f183c
...@@ -363,11 +363,11 @@ ...@@ -363,11 +363,11 @@
chat（聊天窗口） chat（聊天窗口）
</a> </a>
</li> </li>
<li id='feedback' class="mui-table-view-cell"> <!-- <li id='feedback' class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/feedback.html"> <a class="mui-navigate-right" href="examples/feedback.html">
feedback（问题反馈） feedback（问题反馈）
</a> </a>
</li> </li> -->
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html"> <a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html">
image viewer（图片预览） image viewer（图片预览）
...@@ -427,7 +427,7 @@ ...@@ -427,7 +427,7 @@
//Android平台暂时使用slide-in-right动画 //Android平台暂时使用slide-in-right动画
if(mui.os.android&&parseFloat(mui.os.version)<4.4){ if(mui.os.android&&parseFloat(mui.os.version)<4.4){
aniShow = "slide-in-right"; aniShow = "slide-in-right";
document.getElementById('feedback').style.display = 'none'; // document.getElementById('feedback').style.display = 'none';
} }
} }
//初始化，并预加载webview模式的选项卡 //初始化，并预加载webview模式的选项卡
......
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