Dalam tutorial ini kita akan membuat sebuah portofolio HTML5 yang indah didukung oleh jQuery dan plugin Quicksand. Anda dapat menggunakannya untuk memamerkan karya terbaru Anda dan sepenuhnya disesuaikan, sehingga Anda bisa memperluas berpotensi untuk melakukan lebih banyak.
HTML
Langkah pertama adalah menuliskan markup dari sebuah dokumen HTML5 baru. Pada bagian kepala, kami akan menyertakan stylesheet untuk halaman. Perpustakaan jQuery, plugin Quicksand dan script.js kami akan pergi tepat sebelum tag penutup tubuh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Enabling HTML5 tags for older IE browsers -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<nav id="filter">
<!-- The menu items will go here (generated by jQuery) -->
</nav>
<section id="container">
<ul id="stage">
<!-- Your portfolio items go here -->
</ul>
</section>
<footer>
</footer>
<!-- Including jQuery, the Quicksand plugin, and our own script.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Enabling HTML5 tags for older IE browsers -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<nav id="filter">
<!-- The menu items will go here (generated by jQuery) -->
</nav>
<section id="container">
<ul id="stage">
<!-- Your portfolio items go here -->
</ul>
</section>
<footer>
</footer>
<!-- Including jQuery, the Quicksand plugin, and our own script.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Di dalam tubuh, ada sejumlah elemen HTML5 baru. Header memegang pos h1 kami (yang bergaya sebagai logo), elemen bagian memegang daftar unordered dengan item portofolio (daftar lebih ditambahkan oleh jQuery, karena Anda akan lihat nanti), dan elemen nav, ditata sebagai hijau bar, bertindak sebagai filter konten.
Tahap # daftar unordered item memegang portfolio kami. Anda dapat melihat apa barang-barang ini akan terlihat seperti di bawah ini. Masing-masing memiliki atribut HTML5 data, yang mendefinisikan serangkaian dipisahkan dengan koma tag. Kemudian, ketika kita menggunakan jQuery untuk loop melalui daftar ini, kita akan merekam tag dan membuat kategori yang bisa dipilih dari bar hijau.
Tahap # daftar unordered item memegang portfolio kami. Anda dapat melihat apa barang-barang ini akan terlihat seperti di bawah ini. Masing-masing memiliki atribut HTML5 data, yang mendefinisikan serangkaian dipisahkan dengan koma tag. Kemudian, ketika kita menggunakan jQuery untuk loop melalui daftar ini, kita akan merekam tag dan membuat kategori yang bisa dipilih dari bar hijau.
<li data-tags="Print Design">
<img src="assets/img/shots/1.jpg" />
</li>
<li data-tags="Logo Design,Print Design">
<img src="assets/img/shots/2.jpg" />
</li>
<li data-tags="Web Design,Logo Design">
<img src="assets/img/shots/3.jpg" />
</li>
<img src="assets/img/shots/1.jpg" />
</li>
<li data-tags="Logo Design,Print Design">
<img src="assets/img/shots/2.jpg" />
</li>
<li data-tags="Web Design,Logo Design">
<img src="assets/img/shots/3.jpg" />
</li>
Anda dapat menaruh apa pun yang Anda inginkan dalam item li dan menyesuaikan portofolio lebih lanjut. Plugin Quicksand akan menangani transisi animasi daftar ini, jadi anda bebas untuk bereksperimen.
HTML5 indah Portofolio dengan jQueryHTML5 indah Portofolio dengan jQuery
jQuery
Apa plugin Quicksand tidak, adalah membandingkan dua daftar unordered item, menemukan LIS cocok di dalamnya, dan menghidupkan mereka ke posisi baru mereka. Script jQuery kita akan menulis bagian ini, akan loop melalui item portofolio dalam daftar tahap #, dan membuat daftar (tersembunyi) baru unordered untuk setiap tag yang ditemukan. Ini juga akan membuat pilihan menu baru, yang akan memicu transisi pasir apung antara dua daftar.
Pertama kita perlu untuk mendengarkan acara siap (titik awal dalam pemuatan halaman di mana kita dapat mengakses DOM), dan loop melalui semua item li mendeteksi tag terkait.
Pertama kita perlu untuk mendengarkan acara siap (titik awal dalam pemuatan halaman di mana kita dapat mengakses DOM), dan loop melalui semua item li mendeteksi tag terkait.
script.js – Part 1
$(document).ready(function(){
var items = $('#stage li'),
itemsByTags = {};
// Looping though all the li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
var items = $('#stage li'),
itemsByTags = {};
// Looping though all the li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
Setiap tag ditambahkan ke objek itemsByTags sebagai array. Ini berarti bahwa itemsByTags ['Desain Web'] akan mengadakan sebuah array dengan semua item yang memiliki Web Design sebagai salah satu tag mereka. Kami akan menggunakan objek ini untuk membuat daftar unordered, tersembunyi di halaman untuk pasir hisap.
Ini akan menjadi yang terbaik untuk menciptakan sebuah fungsi pembantu yang akan menanganinya untuk kita:
script.js – Part 2
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('#container');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list')):
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('#container');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list')):
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}
Fungsi ini mengambil nama dari grup dan sebuah array dengan item LI sebagai parameter. Kemudian klon item ini ke UL baru dan menambahkan link di bar hijau.
Sekarang kita harus loop melalui semua kelompok dan memanggil fungsi di atas, dan juga mendengarkan untuk klik pada item menu.
Sekarang kita harus loop melalui semua kelompok dan memanggil fungsi di atas, dan juga mendengarkan untuk klik pada item menu.
script.js – Part 3
// Creating the "Everything" option in the menu:
createList('Everything',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#filter a').live('click',function(e){
var link = $(this);
link.addClass('active').siblings().removeClass('active');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});
// Selecting the first menu item by default:
$('#filter a:first').click();
createList('Everything',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#filter a').live('click',function(e){
var link = $(this);
link.addClass('active').siblings().removeClass('active');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});
// Selecting the first menu item by default:
$('#filter a:first').click();
Bagus! Sekarang kita memiliki segalanya di tempat kita bisa melanjutkan ke gaya halaman.
CSS
Styling halaman itu sendiri tidak yang menarik (Anda dapat melihat CSS untuk ini dalam aset / css / styles.css). Namun apa yang lebih menarik adalah bar berwarna hijau (atau bar # filter), yang menggunakan: sebelum /: setelah elemen pseudo untuk menambahkan sudut menarik di sisi bar. Seperti diposisikan benar-benar, mereka juga tumbuh bersama dengan bar.
styles.css
#filter {
background: url("../img/bar.png") repeat-x 0 -94px;
display: block;
height: 39px;
margin: 55px auto;
position: relative;
width: 600px;
text-align:center;
-moz-box-shadow:0 4px 4px #000;
-webkit-box-shadow:0 4px 4px #000;
box-shadow:0 4px 4px #000;
}
#filter:before, #filter:after {
background: url("../img/bar.png") no-repeat;
height: 43px;
position: absolute;
top: 0;
width: 78px;
content: '';
-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
box-shadow:0 2px 0 rgba(0,0,0,0.4);
}
#filter:before {
background-position: 0 -47px;
left: -78px;
}
#filter:after {
background-position: 0 0;
right: -78px;
}
#filter a{
color: #FFFFFF;
display: inline-block;
height: 39px;
line-height: 37px;
padding: 0 15px;
text-shadow:1px 1px 1px #315218;
}
#filter a:hover{
text-decoration:none;
}
#filter a.active{
background: url("../img/bar.png") repeat-x 0 -138px;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
-1px 0 0 rgba(255, 255, 255, 0.2),
1px 0 1px rgba(0,0,0,0.2) inset,
-1px 0 1px rgba(0,0,0,0.2) inset;
}
background: url("../img/bar.png") repeat-x 0 -94px;
display: block;
height: 39px;
margin: 55px auto;
position: relative;
width: 600px;
text-align:center;
-moz-box-shadow:0 4px 4px #000;
-webkit-box-shadow:0 4px 4px #000;
box-shadow:0 4px 4px #000;
}
#filter:before, #filter:after {
background: url("../img/bar.png") no-repeat;
height: 43px;
position: absolute;
top: 0;
width: 78px;
content: '';
-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
box-shadow:0 2px 0 rgba(0,0,0,0.4);
}
#filter:before {
background-position: 0 -47px;
left: -78px;
}
#filter:after {
background-position: 0 0;
right: -78px;
}
#filter a{
color: #FFFFFF;
display: inline-block;
height: 39px;
line-height: 37px;
padding: 0 15px;
text-shadow:1px 1px 1px #315218;
}
#filter a:hover{
text-decoration:none;
}
#filter a.active{
background: url("../img/bar.png") repeat-x 0 -138px;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
-1px 0 0 rgba(255, 255, 255, 0.2),
1px 0 1px rgba(0,0,0,0.2) inset,
-1px 0 1px rgba(0,0,0,0.2) inset;
}
Dengan portofolio kami yang indah, tutorial HTML5 ini telah lengkap!
Kesimpulan
Anda dapat menggunakan template ini untuk mempresentasikan hasil kerja Anda. Hal terbaik tentang itu adalah bahwa itu benar-benar mudah untuk menyesuaikan. Anda hanya perlu mengubah isi dari item LI awal daftar stage #, dan menentukan beberapa tag baru - script akan melakukan sisanya. Jika pengunjung tidak memiliki JavaScript diaktifkan, mereka masih akan melihat semua portofolio Anda item, yang juga baik untuk tujuan SEO.
Download kodenya :Download - Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand
Contoh lihat disini :Demo - Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand
Download kodenya :Download - Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand
Contoh lihat disini :Demo - Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand
