Membuat Halaman Portfolio yang ‘Sortable’
Banyak cara untuk menambahkan user experience (UX) pada website kita. Kali ini, kita akan memanfaatkan satu plugin jQuery sederhana, yang bisa digunakan untuk mempercantik tampilan halaman portfolio Anda atau kegunaan lainnya. Plugin ini berfungsi untuk menyortir elemen-elemen yang memiliki class sejenis.
Seperti biasa kita mulai dari mark-upnya terlebih dahulu:
Kita panggil jQuery library dan sorting pluginnya:
<script src="js/jquery-1.4.2.min.js"></script> <script src="js/jquery-sortgrid.js"></script>
Kemudian untuk body-nya:
<div id="container"> <h1>My Portfolio</h1> <ul class="nav"> <li><a href="#" rel="item">All</a></li> <li><a href="?type=design" rel="design">Web Design</a></li> <li><a href="?type=dev" rel="dev">Web Development</a></li> <li><a href="?type=print" rel="print">Print</a></li> </ul> <div class="portfolio clearfix"> <div class="item design"> <p>Client Name</p> <span><img src="images/portfolio/a.gif" alt="a" /></span> </div> <div class="item design"> <p>Client Name</p> <span><img src="images/portfolio/b.gif" alt="b" /></span> </div> <div class="item dev"> <p>Client Name</p> <span><img src="images/portfolio/c.gif" alt="c" /></span> </div> <div class="item design"> <p>Client Name</p> <span><img src="images/portfolio/d.gif" alt="d" /></span> </div> <div class="item design"> <p>Client Name</p> <span><img src="images/portfolio/e.gif" alt="e" /></span> </div> <div class="item dev"> <p>Client Name</p> <span><img src="images/portfolio/f.gif" alt="f" /></span> </div> <div class="item print"> <p>Client Name</p> <span><img src="images/portfolio/g.gif" alt="g" /></span> </div> <div class="item dev"> <p>Client Name</p> <span><img src="images/portfolio/h.gif" alt="h" /></span> </div> <div class="item print"> <p>Client Name</p> <span><img src="images/portfolio/i.gif" alt="i" /></span> </div> <div class="item design"> <p>Client Name</p> <span><img src="images/portfolio/j.gif" alt="j" /></span> </div> <div class="item print"> <p>Client Name</p> <span><img src="images/portfolio/k.gif" alt="k" /></span> </div> <div class="item dev"> <p>Client Name</p> <span><img src="images/portfolio/l.gif" alt="l" /></span> </div> <div class="item dev"> <p>Client Name</p> <span><img src="images/portfolio/m.gif" alt="m" /></span> </div> <div class="item print"> <p>Client Name</p> <span><img src="images/portfolio/n.gif" alt="n" /></span> </div> <div class="item dev"> <p>Client Name</p> <span><img src="images/portfolio/o.gif" alt="o" /></span> </div> </div> <div class="alpha"></div> </div>
Element ul dengan class .nav berfungsi sebagai controller-nya. Setiap link memiliki atribut rel yang mengarah ke tipe-tipe portfolio yang akan kita sort.
Di paling bawah, ada element div dengan class .alpha, itu merupakan trik untuk membuat transparent background untuk portfolio itu sendiri.
Berikutnya kita menambahkan basic style seperti ini:
#container {
width: 960px;
margin: 0 auto;
position: relative
}
#container ul, .portfolio { margin: 0 15px }
#container h1 {
font-family: 'Lobster', Georgia, serif;
text-shadow: 1px 1px 0 #FFFFFF;
-moz-text-shadow: 1px 1px 0 #FFFFFF;
-webkit-text-shadow: 1px 1px 1px #FFFFFF;
margin: 15px
}
#container ul {
list-style: none;
padding: 0
}
#container ul li {
display: inline-block;
margin: 0;
padding: 0;
margin-right: 15px;
margin-bottom: 15px
}
#container ul a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
display: inline-block
}
#container ul a:hover, #container ul li.select a{
color: #D6D6A2;
border-bottom: dotted 1px #D6D6A2
}
.alpha {
width: 100%;
height: 100%;
background: #FFFFFF;
opacity: .5;
-moz-opacity: .5;
-webkit-opacity: .5px;
filter: alpha(opacity=50);
position: absolute;
top: 0;
left: 0;
z-index: -1
}
.portfolio { position: relative }
Background (div.alpha) memiliki posisi absolute, dengan lebar dan tinggi penuh, dan berada pada layer terbawah.
Kemudian untuk bagian portfolio, kita menambahkan style berikut:
.item {
float: left;
background: #CDCFC5;
border: solid 1px #A9A9A0;
padding: 7px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
margin-right: 17px;
margin-bottom: 17px;
display: block
}
.item span {
display: block;
width: 150px;
height: 120px;
overflow: hidden;
border: solid 1px #FFFFFF
}
.item p {
position: absolute;
bottom: -9px;
left: 1px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0 7px;
padding: 5px;
text-align: center;
font-size: 12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px
}
.design p { background: #000; color: #FFFFFF }
.dev p { background: #95C18E; color: #FFFFFF }
.print p { background: #F05A28; color: #FFFFFF }
Style yang digunakan sederhana saja, untuk mengatur layout item-item portfolio, dengan menambahkan inline-block sebagai display-nya. Kemudian setiap jenis portfolio memiliki class yang unik. Untuk jenis desain, memiliki class .design dengan warna dasar hitam, demikian juga untuk development dengan class .dev dan warna dasar hijau, serta print dengan class .print dan warna dasar jingga.
Tampilan awal kurang lebih seperti ini:
Kemudian kita mulai menjalankan plugin tersebut dengan memakai script berikut:
(function($){
$(function(){
$(".nav li a").live("click", function(e){
e.preventDefault();
var el = $(this);
if(!el.parent().hasClass("select")){
el.parent().addClass("select").siblings().removeClass("select");
$(".portfolio").sortGrid(el.attr("rel"), 500);
}
});
});
})(jQuery);
Kita memakai jQuery event live untuk menambahkan handler (dalam hal ini adalah click) untuk digunakan saat ini dan seterusnya. Jika kita lihat pada markup sebelumnya, kita mengisi atribut href-nya dengan url ?type=…. Maka dari itu kita menambahkan event preventDefault() untuk menghindari dipanggilnya default action dari link tersebut. Untuk selanjutnya, Anda bisa menambahkan fungsi tersendiri untuk ditujukan pada user yang mematikan javascript-nya.
Note: Berjalan dengan baik di Firefox 3.6+, Opera 10, Chrome 6. Untuk IE masih belum berjalan dengan baik. Jika Anda memliki solusinya, silakan berbagi 
Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.
Yaah ga ada demonya
, no demo = hoax :p
ooh ada ternyata, abis kecil banget link demonya
:ngakak. tuh udah saya gedein.
macan…