ساخت صفحه نمونه کار

ساخت صفحه نمونه کار

در این آموزش ما با استفاده از HTML5 و jQuery یک صفحه نمایش نمونه کارها  ایجاد می کنیم.شما میتوانید از این اموزش برای نمایش نمونه کار های قبلی خودتون استفاده کنید.

برای مشاهده لینک وارد شود

اولین مرحله ایجاد صفحه HTML  است که در آن  کتابخانهjQuery   و پلاگین Quicksand و script.js را قبل از بستن تگ body  مینویسیم.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Making a Beautiful HTML5 Portfolio  </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>

در قسمت body تعدادی المان جدیدHTML5وجود دارد.تگ header نام نمونه کار های ما را نگه میدارد.المانsection  نمونه کار ها را به صورت نامرتب نگه میدارد.المانnav، استایل نوار سبز،به عنوان یک فیلتر محتوا عمل می کند.

تگ stage ایتم های نامتب نمونه کار ها را نگه میدارد.

<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>

شما می توانید هر ایتمی رو داخل این <li> ها قرار دهید.پلاگین Quicksand نحوه نمایش نمونه کار ها را مدیریت می کند.

کد jQuery

پلاگین Quicksand   کاری که میکند،مخلوط کردن  لیست نا مرتب نمونه کار ها،پیدا کردن و نشان دادن آنها و انتقال آنها با نوعی انیمیشن به مکانی دیگر است.اسکریپت jQuery باید داخل section نوشته شود تا از طریق تکرار نمونه کار ها در stage ،یک لیست نامرتب از نمونه کار ها به صورت نامرئی تولید کند.

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);
        });

    });

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');
}

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();

Css  کد

ظاهر صفحه  به تنهایی دارای ظاهری زیبا نیست پس ما با استفاده از کد های CSS ظاهری زیبا به قالبمان می دهیم.

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:	۱px 0 0 rgba(255, 255, 255, 0.2),
                -۱px 0 0 rgba(255, 255, 255, 0.2),
                ۱px 0 1px rgba(0,0,0,0.2) inset,
                -۱px 0 1px rgba(0,0,0,0.2) inset;
}

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


5 − = چهار

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>