m.taobao.com for iphone&android optimization
DESCRIPTION
m.taobao.com for iPhone&Android Optimization,something about F2E......TRANSCRIPT
高端版优化总结高端版优化总结张 军
优化功能点优化功能点 搜索联想即时反馈
筛选和排序优化
查看大图功能
自定义详情页
搜索即时反馈搜索即时反馈首页的搜索框
顶部搜索 ICON点开的搜索框
• autocomplete ( on => off )
• placeholder = “请输入搜索内容”
• 键盘事件 onkeyup 、 oninput
• 处理 keyCode 键值
autocompleteautocomplete
Var textInput = $('#J-Input');
textInput.attr('autocomplete','off');
palceholderpalceholderplaceholder="请输入搜索内容“
textInput.focus(function(){
if($(this).val() == ''){
$(this).val('');
}
}); // 解决 Android Webkit上的 BUG
oonkeyup nkeyup 、、 oninputoninput
onkeyup触发事件，并 ajax请求数据
onchange与 oninput 的区别
(oninput 时时触发， ie 用 onpropertychange)
KeycodeKeycode 键值键值
空格 32
Enter 13
if(e.keyCode==13 || e.keyCode==32) return;
关于 Android焦点框
关于 Android焦点框<div class="wrap">
<ul><li rel=“href"><img src="img" alt=“" /></li> <li rel=“href"><img src="img" alt=“" /></li> <li rel=“href"><img src="img" alt=“" /></li>
</ul></div>
关于 Android焦点框if(navigator.userAgent.match(/iPhone/i)) { //如果是 iPhone $("#J_Slide .wrap li").each(function(){ var url = $(this).attr('rel'); $(this).find('img').wrap('<a href="+ url
+"></a>'); });}else{ $('#J_Slide .wrap li').bind('touchend',function(){ var url = $(this).attr('rel'); location.href = url; return false; });}
筛选和排序优化筛选和排序优化• 修改分类筛选方式
• 优化高级搜索
• 增加按地区筛选
• ListList 点击区域优化 点击区域优化
• 优化优化 <label><label>
• 地区筛选 繁 地区筛选 繁 ->-> 简简
ListList 点击区域 点击区域
<li>标签样式不要使用 margin
使用 display:table、 display:table-cell，替代
display:block
优化优化 <label><label><li>
<label for="mall" onClick="">
<input type=“checkbox” id=“mall” />商城宝贝
</label>
</li>
label {display:block;}
地区筛选 繁地区筛选 繁 ->-> 简简
去掉 border-radius 、 box-shadow 、 background:-webkit-gradient...
去掉 animation 动画
查看大图功能查看大图功能启动大图浏览模式
大图模式支持图片拖动功能
支持查看原始尺寸图片
• Click、 touch事件
• 设置标识，处理当前状态下的图片样式、链接
• 图片大小处理（图片尺寸有限 160×160， 310×310）
SlideSlide的原理
SlideSlide - html- html<div class="gallery" id="J_Gallery">
<div class="wrap">
<ul class="holder"> <li class="loading"><img
src=“…./loading.gif" alt="加载中 " /> 加载中，请稍候… </li>
</ul>
</div>
<div class="switch-nav"> </div>
</div>
SlideSlide - css- css.wrap{
overflow: hidden;
}
.wrap ul{
position: absolute;left:0;top:0;
}
.wrap ul li{
float:left;
}
SlideSlide – – 获取宽度获取宽度var touch = $(‘#J_Gallery’) .find(‘. holder’). ;
Var wrapWidth = $(‘#J_Gallery’) find(‘. wrap’).
width(); //得到每次滑动的宽度
for(var i=0;i<$(‘# J_Gallery’) .find(‘li’).size();i++) {
width += child.eq(i).width();
}
touch.width(width); //得到 touch层的宽度
SlideSlide –– 获取动作当前坐标获取动作当前坐标function getClient(e){ // 获取 touch 事件 event 对象的 clientX
var coors = 0;
if (e.changedTouches){ //iPhone多根手指情况
coors = e.changedTouches[0].clientX;
else{
coors = e.clientY;
}return coors;
}
SlideSlide –– 拖动事件拖动事件touch[0].ontouchstart = startDrag;
function startDrag(e){
var pos = [touch.position().left , touch.position().top];
var startPoint = getClient(e); //touch开始点……
touch[0].ontouchmove = moveDrag;
touch[0].ontouchend = endDrag;
return false;
}
SlideSlide –– 拖动事件拖动事件
function moveDrag(e){
var currentPos = getClient(e);
var newPos = (currentPos - startPoint) + pos[0];
touch[0].style.left = newPos + 'px';
}
SlideSlide –– 拖动事件拖动事件function endDrag(e){
var endPoint = getClient(e);
var dist = endPoint - startPoint;
if(dist < 0){
next(); //下一张
}else{
prev(); //上一张
}
自定义详情页自定义详情页自定义详情页增加图片展示
……
沟 通沟 通
pd
开发
SCM
交互
视觉
前 端
谢 谢！谢 谢！