pada penciptaan portofolio HTML5 yang indah yang didukung oleh jQuery dan plugin Quicksand. Ini memiliki desain yang bagus yang sangat bagus untuk pekerjaan Anda dan sangat disesuaikan juga.
Berikut adalah bagaimana kelanjutannya.
HTML
Index.html
<!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>
Tahap # unordered list memegang item portofolio yang terlihat di bawah ini.
<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>
jQueryscript.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); }); });
Script.js – Part 2function 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'); }
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();
CSSStyles.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; }
Untuk Memperjelas pandangan anda lihat Demonya !
dan saya tidak tega untuk membiarkan anda kebingungan Klik untuk Mendownload !
Kreasikan semaksimal mungkin menurut imajinasi anda !
karena kita akan lebih pandai jika kita mencoba sesuatu yang baru !
0 komentar:
Posting Komentar