ساخت لایه بندی داینامیک در کمتر از 10 دقیقه

ساخت لایه بندی داینامیک در کمتر از 10 دقیقه
در این مقاله از Salvattore و Twitter Bootstrap استفاده میکنیم و به شما قول میدهیم که در کمتر از 10 دقیقه میتوانید 3 لایه بندی داینامیک و زیبا ایجاد کنید، در اصل این لایه بندی بجای اینکه با JavaScript باشد با CSS است و همچنین اینگونه لایه های زیبا را احتمالا در وبسایت های مختلفی دیده اید برای مثال وبسایت معروف Pinterest از اینگونه لایه بندی استفاده میکند، با مجیدآنلاین در این مقاله همراه باشید تا طریقه ی ساخت اینگونه لایه بندی را در کمتر از 10 دقیقه یاد بگیرید.
گوسفند زنده
گوسفند زنده
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
ردیاب
ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
نقاشی ساختمان
نقاشی ساختمان
آموزش اندروید
آموزش برنامه نویسی اندروید به همراه پشتیبانی رایگان برای رفع خطاهای شما
خودتان را اینجا معرفی کنید

شروع به کار : ابزار مورد نیاز

 برای شروع کتابخانه ی جاوااسکریپت Salvattore را باید در پروژه ی خود بارگزاری کنید ( به صورت مینیفای شده یا سورس اصلی ) ، سپس کتابخانه Bootstrap را در پروژه ی خود بارگزاری کنید، لینک های زیر مستقیما از سرور بارگزاری میکنند اما میتوانید دانلود کنید و از آدرس محلی کامپیوتر خود آدرس دهی کنید :
<html>
    <head>
        <link rel="stylesheet" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <title>Salvattore + Bootstrap</title>
    </head>
    <body>
     
    <!-- This is where the magic happens! -->
     
    <script src="salvattore.js"></script>
     
    </body>
</html>
خب کانفیگ ما تمام شد !
سپس نیاز به یک فایل CSS دارید که کارهای خود را در آنجا انجام دهید برای همین با استفاده از :
<style type='text/css'>
این فایل را اضافه میکنیم.
نکته : برای کتابخانه Salvattore باید حتما type و rel را بنویسید تا به خوبی کار کند.

لایه بندی ابتدایی بوت استرپ

بوت استرپ یک لایه بندی قوی و مناسب ایجاد میکند ( اطلاعات بیشتر ) که از طریق آن میتوانید ساختار اصلی صفحه ی خود را مشخص کنید، به قطعه کد زیر توجه کنید :
<div class="row">
    <div class="col-xs-12 col-md-4"></div>
    <div class="col-xs-6 col-sm-3 col-md-4"></div>
    <div class="col-xs-6 col-sm-3 col-md-4"></div>
    <div class="col-xs-12 col-sm-3 col-md-4"></div>
    <div class="col-xs-6 col-md-4"></div>
    <div class="col-xs-6 col-md-4"></div>
</div>
دقت کنید که لایه بندی بالا به صورت col-size-columnNumber میباشد و از این ساختار پیروی میکند، همچنین سایزهایی که میتوانید استفاده کنید xs ، sm ، md و lg میباشد، برای دیدن یک مثال جامع میتوانید به اینجا مراجعه کنید.

 ساخت Panel در Bootstrap

در این مرحله باید با استفاده از کامپونتت های Bootstrap یک Panel بسازیم، به قطعه کد زیر توجه کنید :
<div class="panel panel-primary">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">Panel content</div>
</div>

استفاده از Salvattore

اکنون ما تمام قطعات را با استفاده از Bootstrap ایجاد کردیم، زمان آن رسیده که آنها را از طریق Salvattore در کنار همدیگر قرار دهیم، با 6 panel کارمان را شروع میکنیم اما بعدا میتوانیم آن را به صورت داینامیک در نظر بگیریم تا با محتوا هایی که پشت هم می آیند پر شود. برای اینکه Salvattore به خوبی کار کند نیاز به یک data-column داریم، به قطعه کد زیر توجه کنید :
<div id="grid" data-columns>
    <div class="panel panel-primary">
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body"> Panel content </div>
    </div>
     
    <!-- repeat the panel as many times as you'd like -->
     
</div>
حالا به فایل CSS میرویم و کدهای زیر را با استفاده از المنت های pseudo وارد میکنیم :
@media screen and (min-width: 1px) and (max-width: 767px){
    #columns[data-columns]::before {
        content: '2 .col-xs-6';
    }
}
@media screen and (min-width:768px) and (max-width: 991px){
    #columns[data-columns]::before {
        content: '3 .col-sm-4';
    }
}
@media screen and (min-width:992px) and (max-width: 9999px){
    #columns[data-columns]::before {
        content: '4 .col-md-3';
    }
}
Salvattore از ::before که یک المنت pseudo است و content استفاده میکند تا ستون هایی که ساختیم را به صورت کلاس تعریف کند.

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

کدی که تا اینجا ایجاد کردیم یک کد استاتیک است، در این قسمت میخواهیم این کد را داینامیک کنیم، برای این کار از جاوا اسکریپت استفاده میکنیم، در این قسمت از Google’s Book API استفاده میکنیم تا یک اطلاعات داینامیک به صفحه اضافه کنیم :
function append(title, content) {
    // build/select our elements
    var grid = $('#columns')[0];
    var item = document.createElement('div');
    // build the html
    var h = '<div class="panel panel-primary">';
    h += '<div class="panel-heading">';
    h += title;
    h += '</div>';
    h += '<div class="panel-body">';
    h += content;
    h += '</div>';
    h += '</div>';
    salvattore['append_elements'](grid, [item])
    item.outerHTML = h;
}
$.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
    $(data.items).each(function (i, book) {
        append(book.volumeInfo.title, book.volumeInfo.description);
    });
});
نکته : نیاز به jQuery دارید.
ابتدا یک تابع append ساختیم که title و content را میگیرد و آن را درون یک ساختار قرار میدهد، سپس از تابع salvattore['append_elements'](grid, [item]) استفاده کردیم تا آیتم ها را به صفحه مان اضافه کنیم و از AJAX استفاده کردیم تا اطلاعات داینامیک را بگیریم.
برای این اینکه کدمان به خوبی کار کند باید تمام محتواها را از grid holder پاک کنیم :
<div id="grid" data-columns></div>
Salvattore خودش محتوا را برای ما پر میکند.
قطعه کد ما در نهایت به صورت زیر خواهد شد :
<!DOCTYPE html>
 
<html>
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        @media screen and min-width 1px and max-width 767px {
            #columns[data-columns]::before {
                content: '2 .col-xs-6';
            }
         
        }
         
        @media screen and min-width768px and max-width 991px {
            #columns[data-columns]::before {
                content: '3 .col-sm-4';
            }
         
        }
         
        @media screen and min-width992px and max-width 9999px {
            #columns[data-columns]::before {
                content: '4 .col-md-3';
            }
         
        }       
    </style>
 
    <title></title>
</head>
 
<body>
    <div class="container">
        <h1 class="col-xs-12">Books by Ernest Hemingway</h1>
 
        <div data-columns="" id="columns">
            <div></div>
            <div></div>
            <div></div>          
        </div>
    </div>
     
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="salvattore.js"></script>
    <script>
        function append(title, content) {
            var grid = document.querySelector('#columns');
            var item = document.createElement('div');
            var h = '<div class="panel panel-primary">';
            h += '<div class="panel-heading">';
            h += title;
            h += '</div>';
            h += '<div class="panel-body">';
            h += content;
            h += '</div>';
            h += '</div>';
            salvattore['append_elements'](grid, [item]) item.outerHTML = h;
        }
        $.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
            $(data.items).each(function (i, book) {
                append(book.volumeInfo.title, book.volumeInfo.description);
            });
        });
    </script>
</body>
</html>

نتیجه گیری

Salvattore یک ابزار بسیار مناسب برای ساخت لایه بندی داینامیک است خصوصا برای کسانی که به تنهایی نمیتوانند اینگونه لایه بندی را ایجاد کنند و همچنین جاوا اسکریپت را به خوبی بلد نیستند و Bootstrap یک لایه بندی بسیار مناسب و ساختار یافته را در اختیار شما قرار میدهد.

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.