整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天，我又用Axure中繼器功能做了一個交互原型，就是對列表頁添加排序和篩選功能，可以對列表中的項進行排序或者篩選，希望對大家制作原型有一定的幫助。
以商品列表為例，點擊價格排序，可以對商品進行價格由低到高或由高到低排序，點擊品牌，可以篩選出小米品牌手機或者蘋果品牌手機。
1.1首先我們要畫出大體框架，商品列表使用中繼器制作，如下圖所示
1.2然后制作“價格”點擊變?yōu)榧t色，且彈出“價格由低到高”“價格由高到底”菜單，設置“價格”選中狀態(tài)為紅色；畫出彈出菜單，轉(zhuǎn)化成動態(tài)面板，命名為“price”，設置為隱藏；添加用例，點擊“價格”時，“價格”選中狀態(tài)為Ture，且動態(tài)面板“price”向下滑動顯示
“品牌”點擊時也發(fā)生同樣的交互，品牌彈出菜單動態(tài)面板命名為“pinpai”，制作就不一一詳細說了，注意：價格和品牌點擊彈出菜單只能有唯一一個觸發(fā)，我們把文案變紅唯一性通過設置“價格”和“品牌”為選項組，然后根據(jù)這個唯一性再設置當“價格”或“品牌”未選中時，彈出菜單向上滑動隱藏即可，這樣就只能觸發(fā)唯一一個彈出菜單了。
1.3制作當滑出價格排序菜單，點擊由低到高或由高到底，商品按照價格高低排序，雙擊“price”，打開面板，設置“價格由低到高”點擊時，向上滑動隱藏“price”，并且設置中繼器添加排序，名稱自定義為價格由低到高，屬性是數(shù)據(jù)集中的“Price”（區(qū)別于動態(tài)面板“price”，不是一個東西，我這邊可能命名有點問題），排序類型選擇“Number”，順序是升序，確認就可以達到點排序的效果了。
價格由高到底同樣如此設置，只不過順序改為“降序”。注意：之前設置“價格”未選中時，隱藏動態(tài)面板“price”，反過來，我們也應該設置動態(tài)面板“price”隱藏時，“價格”選中狀態(tài)為False。
1.4制作當滑出“品牌”彈出菜單時，點擊小米或者蘋果，篩選出這個品牌的商品，首先我們在數(shù)據(jù)集里為每個商品項目添加品牌屬性Label，有利于下一步動作的設置，如下圖所示
雙擊“pinpai”動態(tài)面板你，打開面板，設置“小米”點擊時，向上滑動隱藏“pinpai”，并且設置中繼器添加篩選，名稱自定義為篩選小米，條件是[[Item.Label==’小米’]]（之前設置過Label），確認就可以達到點擊篩選小米品牌商品的效果了。篩選蘋果也是同樣的設置原理。
注意：不勾選Remove other filters，意為當有多個篩選條件時，確保能夠多條件篩選。
好了，生成一下Html看一下吧。
今天主要說了中繼器設置添加排序和添加篩選的功能，你可以嘗試著玩一下其它的如移除排序或移除篩選什么的，主要是多練多想就好了，希望大家一起交流學習。
本文由 @ 一位焦戶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
使用jQuery時候，我們經(jīng)常會看到或者使用到方法鏈，例如：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
這段代碼的意思是選擇器選擇id為p1的html標簽，顏色變紅，之后slideup，再slidedown。
自然是可以將這幾個方法分開寫，但是不分開的話不僅有很好的易讀性，代碼量也會有減少，那么何樂而不為？這種調(diào)用函數(shù)的方式在jQuery中稱為“Chaining”，原理也很簡單：能夠chaining的方法調(diào)用后返回對象本身即可。
下面用java代碼做個演示：
Person.java
public class Persion {
private int id;
private String name;
private String phoneNumber;
private String address;
public Persion() {
}
public void setId(int id) {
this.id=id;
}
public void setName(String name) {
this.name=name;
}
public void setPhoneNumber(String phoneNumber) {
this.phoneNumber=phoneNumber;
}
public void setAddress(String address) {
this.address=address;
}
public void printId() {
System.out.println(this.id);
}
public void printName() {
System.out.println(this.name);
}
public void printPhoneNumber() {
System.out.println(this.phoneNumber);
}
public void printAddress() {
System.out.println(this.address);
}
}
Test.java
public class Test {
public static void main(String[] args) {
Persion persion1=new Persion();
persion1.setId(3);
persion1.setName("John");
persion1.setPhoneNumber("1111111");
persion1.setAddress("US");
persion1.printId();
persion1.printName();
persion1.printPhoneNumber();
persion1.printAddress();
}
}
使用chaining：
Person.java
public class Persion {
private int id;
private String name;
private String phoneNumber;
private String address;
public Persion() {
}
public Persion setId(int id) {
this.id=id;
return this;
}
public Persion setName(String name) {
this.name=name;
return this;
}
public Persion setPhoneNumber(String phoneNumber) {
this.phoneNumber=phoneNumber;
return this;
}
public Persion setAddress(String address) {
this.address=address;
return this;
}
public Persion printId() {
System.out.println(this.id);
return this;
}
public Persion printName() {
System.out.println(this.name);
return this;
}
public Persion printPhoneNumber() {
System.out.println(this.phoneNumber);
return this;
}
public Persion printAddress() {
System.out.println(this.address);
return this;
}
}
Test.java：
public class Test {
public static void main(String[] args) {
Persion persion1=new Persion();
persion1.setId(3).setName("John")
.setPhoneNumber("1111111").setAddress("US");
persion1.printId()
.printName()
.printPhoneNumber()
.printAddress();
}
}
鏈式方法，就是在除最后一個方法外，每個方法都返回一個對象或者調(diào)用同一個對象的多個方法。這種編程方式：編程性強；可讀性強；代碼簡潔。但是不易于調(diào)試。
用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什么呢？
經(jīng)過研究，是devicePixelRatio作怪，因為手機分辨率太小，如果按照分辨率來顯示網(wǎng)頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640分辨率，在網(wǎng)頁里只顯示了480320，這樣devicePixelRatio＝2。現(xiàn)在android比較亂，有1.5的，有2的也有3的。
想讓圖片在手機里顯示更為清晰，必須使用2x的背景圖來代替img標簽（一般情況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，然后background-size:contain;，這樣顯示出來的圖片就比較清晰了。
代碼可以如下：
background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain;都可以，大家試試！
若您遇到圖片加載很慢的問題，對這種情況，手機開發(fā)一般用canvas方法加載：
具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html
下面舉例說明一個canvas的例子：
<li><canvas></canvas></li> s動態(tài)加載圖片和li 總共舉例17張圖片！
var total=17; var zWin=$(window); var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl='''''''';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc=''''img/''''+i+''''.jpg'''';
if(i%4==1){
p=0;
}
tmpl +=''''<li style="width:''''+picWidth+''''px;height:''''+picWidth+''''px;padding-left:''''+p+''''px;padding-top:''''+padding+''''px;"><canvas id="cvs_''''+i+''''"></canvas></li>'''';
var imageObj=new Image();
imageObj.index=i;
imageObj.onload=function(){
var cvs=$(''''#cvs_''''+this.index)[0].getContext(''''2d'''');
cvs.width=this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
} } render(); 看了一下zeptio新版的API，已經(jīng)支持IE10以上瀏覽器，對zeptojs可以選擇使用！
還有就是，有些手機網(wǎng)站我們看到如下聲明：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">設置了DTD的方式是XHTML的寫法，假如我們頁面運用的是html5，可以不用設置DTD,直接聲明<!DOCTYPE html>。
使用viewport使頁面禁止縮放。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為。
<meta name="viewport" content="user-scalable=0" />但是為了更好的兼容，我們會使用完整的viewport設置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />當然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。
apple-mobile-web-app-capable是設置Web應用是否以全屏模式運行。
語法：
<meta name="apple-mobile-web-app-capable" content="yes">說明：
如果content設置為yes，Web應用會以全屏模式運行，反之，則不會。content的默認值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示。
兼容性：
iOS 2.1 +
format-detection 啟動或禁用自動識別頁面中的電話號碼。
語法：
<meta name="format-detection" content="telephone=no">說明：
默認情況下，設備會自動識別任何可能是電話號碼的字符串。設置telephone=no可以禁用這項功能。
兼容性
iOS 1.0 +
html5提供了自動調(diào)用撥號的標簽，只要在a標簽的href中添加tel:就可以了。
如下：
<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>撥打手機直接如下
<a href="tel:15677776767">點擊撥打15677776767</a>具體請看：http://www.sj520.cn/listdetail/1/8227/2290.html（HTML5中GPS定位之getCurrentPosition）
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }解決移動設備可選中頁面文本(視產(chǎn)品需要而定)
element { -webkit-touch-callout: none; }Element{ -webkit-appearance: none; }Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }設置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。
后面一篇文章有詳細介紹，手機網(wǎng)站點擊鏈接觸發(fā)顏色塊的問題解決:地址：http://www.sj520.cn/listdetail/1/8227/2291.html
方法一：body添加ontouchstart
<body ontouchstart="">方法二：js給 document 綁定 touchstart 或 touchend 事件
<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener(''''touchstart'''',function(){},false); </script>Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); }注意：3D變形會消耗更多的內(nèi)存與功耗
Element{ border-width: thin; }某些低端手機不支持css3 mask，可以選擇性的降級處理。
比如可以使用js判斷來引用不同class：
if( ''''WebkitMask'''' in document.documentElement.style){ alert(''''支持mask''''); } else { alert(''''不支持mask''''); }html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }/設置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留3D /
-webkit-transform-style: preserve-3d;/ 設置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏 /
-webkit-backface-visibility:hidden;某些Android手機圓角失效
background-clip: padding-box;<meta name="apple-mobile-web-app-status-bar-style" content="black" />說明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta標簽不會起任何作用。
如果content設置為default，則狀態(tài)欄正常顯示。如果設置為blank，則狀態(tài)欄會有一個黑色的背景。如果設置為blank-translucent，則狀態(tài)欄顯示為黑色半透明。如果設置為default或blank，則頁面顯示在狀態(tài)欄的下方，即狀態(tài)欄占據(jù)上方部分，頁面占據(jù)下方部分，二者沒有遮擋對方或被遮擋。如果設置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態(tài)欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。默認值是default。
兼容性 iOS 2.1 +
<meta http-equiv="Cache-Control" content="no-cache" />手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務器發(fā)送請求。如果不希望使用緩存可以設置no-cache。
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />iOS下針對不同設備定義不同的桌面圖標。如果不定義則以當前屏幕截圖作為圖標。
上面的寫法可能大家會覺得會有默認光澤，下面這種設置方法可以去掉光澤效果，還原設計圖的效果！
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />圖片尺寸可以設定為5757（px）或者Retina可以定為114114（px），ipad尺寸為72*72（px)
<link rel="apple-touch-startup-image" href="start.png"/>iOS下頁面啟動加載時顯示的畫面圖片，避免加載時的白屏。
可以通過madia來指定不同的大小：
<!--iPhone--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> <!-- iPhone Retina --> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPhone 5 --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> <!-- iPad portrait --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> <!-- iPad landscape --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> <!-- iPad Retina portrait --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad Retina landscape --> <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />以下屬性在項目中沒有應用過，可以寫一個demo測試以下！
QQ瀏覽器私有
全屏模式
<meta name="x5-fullscreen" content="true">強制豎屏
<meta name="x5-orientation" content="portrait">強制橫屏
<meta name="x5-orientation" content="landscape">應用模式
<meta name="x5-page-mode" content="app">UC瀏覽器私有
全屏模式
<meta name="full-screen" content="yes">強制豎屏
<meta name="screen-orientation" content="portrait">強制橫屏
<meta name="screen-orientation" content="landscape">應用模式
<meta name="browsermode" content="application">其它
針對手持設備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name="HandheldFriendly" content="true">微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">windows phone 點擊無高光
<meta name="msapplication-tap-highlight" content="no">問題是這樣的，用input search做模糊搜索的時候，在鍵盤里面輸入關鍵詞，會通過ajax后臺查詢，然后返回數(shù)據(jù)，然后再對返回的數(shù)據(jù)進行關鍵詞標紅。用input監(jiān)聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之后，并未立刻相應keyup事件，只有在通過刪除之后才能相應！
解決辦法：
可以用html5的oninput事件去代替keyup
<input type="text" id="testInput"> <script type="text/javascript"> document.getElementById(''''testInput'''').addEventListener(''''input'''', function(e){ var value=e.target.value; }); </script>然后就達到類似keyup的效果！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
