Javascript ~ switch grid view, list view

這功能就是讓user可以這樣看又那樣看XD

list或grid view

我這邊做的是直接在網頁上改變顯示方式

做法是張睪提供的方法

就是先寫好兩種view的css

然後寫個修改最上層element的class的程式

我是這樣寫XD

function switchView(v){

switch(v){
case 'list':
$("#items").removeClass('grid list');
$("#items").addClass('list');

break;
case 'grid':
$("#items").removeClass('grid list');
$("#items").addClass('grid');

break;
}
//$("#items").toggleClass('list grid');

}


css大概的樣子

div.list div.productTitle{
position:absolute;

left:203px;
top:25px;
}

div.grid div.productTitle{
position:absolute;

left:13px;
top:208px;
}

div.grid div.productItem{
width:221px;
height:308px;
margin-left:35px;
position:relative;
margin-bottom:30px;
float:left;
background:#FFF;

border:solid 1px #c5c5c5;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius:10px;
}
div.list div.productItem{
width:741px;
height:210px;
margin-left:8px;
position:relative;
margin-bottom:20px;
}


個人蠻推薦這種方法的~~~~~cool~~~

感謝張睪提供的方法XD