ساخت لایه بندی داینامیک در کمتر از 10 دقیقه
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
شروع به کار : ابزار مورد نیاز
برای شروع کتابخانه ی جاوااسکریپت 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 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
هم اکنون شما اولین دیدگاه را ارسال کنید.