純Javascript實作Windows 8 Metro風格實作_javascript技巧

Metro風格設計主要特點

1.Windows 8 Metro風格設計，實現網站或系統功能的導航

2.純Javascript實現

3 .支援所有IE、360、Chrome等常用瀏覽器

4.支援圓角、陰影、卡片切換等特效

5.支援卡片的放大、縮小、增加、刪除等功能

6.可自訂卡片背景色、背景圖片、卡片圖片、卡片文字

7.卡片間可任意切換

Metro風格截圖
 
Metro部分演算法

卡片顯示部分程式碼：

複製程式碼 程式碼如下

str='

';
str ='

';
str ='

';
str ='

';

行動單元格JS腳本：

複製程式碼 程式碼如下:

function moveItem(objid,indexList){
//判斷是否有效移動.
var curItem=getCurItem(objid);
var curIndex=curItem.index;
for( var i=0;ivar miIndex=parseInt(indexList[i]);
if((curIndex 1)==miIndex&&(curIndex 1)%colSize==0) {
alertInfo("最後一列不能調大！");
return false;
}
if(miIndex>=(rowSize*colSize)){
alertInfo("不能超過三行！ ");
return false;
}
var cellnum=getItemCellNum(miIndex);
if(cellnum!=1){
alertInfo("被移動單元格目前只支援1個單元格！ ();
for(var i=0;ivar tmpItem=itemArray[i];
var objvalue=tmpItem.value;
if(itemvalueforspace= =objvalue||itemvaluefornull==objvalue){
var isexitarea=false;
for(var j=0;jvar miIndex=parseInt(indexList[j]) ;
if(i==miIndex){
isexitarea=true;
break;
}
}
nullnum=nullnum 1;
if(!isexitarea){
nullIndexArray.push(i);
}
}
}
if((itemArray.length-nullnum indexList.length)>(rowSize*colSize)){
alertInfo("調大單元格已超出所顯示區域！ ");
return false;
}
//調整移動單元格的隊列.
for(var i=0;ivar miIndex= parseInt(indexList[i]);
var moveItem=itemArray[miIndex];
if(moveItem==undefined){//不存在.
for(var j=itemArray.length;jaddNullItem("");
}
moveItem=itemArray[miIndex];
}
//undefined
var moveValue=moveItem; >moveItem.value=curItem.value;
itemArray[miIndex]=moveItem;
if(moveValue!=itemvalueforspace){//覆蓋單元格中已有物件.
///覆蓋單元格移到最後
var moveIndex=itemArray.length;
var col=moveIndex%colSize;
var row=(moveIndex-col)/colSize;
var moveLeft=splitspace col 🎜>var moveTop=splitspace row*(initheight splitspace);
var moveCacheItem=new Object();
moveCacheItem.index=moveIndex;
moveCacherefix.id=itemac.index=moveIndex;
moveCacherefix.id=itemache.index=moveIndex;
moveCacherefix.id=itemache.index=moveIndex;
moveCacherefix.id=itemache.index=moveIndex;
moveCacherefix。 .x=moveLeft;
moveCacheItem.y=moveTop;
moveCacheItem.value=moveValue;
itemArray.push(moveCacheItem);
var moveObjjdocument.get .style.top=moveTop "px";
moveObj.style.left=moveLeft "px";
}else{//null單元格，需要刪除null單元格.
//del(moveItem .id);
}

}

//檢查空缺單元格，如果存在，就填入null物件.
for(var i=itemArray.length-1; i>=(rowSize*colSize);i--){
var movitem=itemArray[i];
var nulitemIndex=nullIndexArray[nullIndexArray.length-1];
var litenum ;
var moveObj=document.getElementById(movitem.value);
//console.log("id=" movitem.id "//value=" movitem.value "//top=" nulitem.y "//left=" nulitem.x);
moveObj.style.top=parseInt(nulitem.y) "px";
moveObj.style.left=parseInt(nulitem.x) "px";
//console.log("nullid=" nulitem.id "//moveid=" movitem.id "//value=" movitem.value "//top=" nulitem.y "//left=" nulitem. x);
getElement(sortablecurid).removeChild(getElement(nulitem.id));
nulitem.value=movitem.value;
itemArray[nulitemIndex]=nulitem;
itemArray。 ;
nullIndexArray.pop();
}

printItemArray();
return true;
}


待續…