معرفی پلاگین جی کوئری fullPage.js

6 امتیاز

Loading…

یکی از نام آشناهای عرصه طراحی و کدنویسی وب طراحی های تک صفحه ای هستند.طراحی هایی که اکثر عناصر اصلی سایت و یا خدمات آن در صفحه اول قابل رویت بوده و نیاز به خارج شدن از اون یا باز کردن لینک جدید نیست.به عنوان مثال اگر یک سایت سه قسمت معرفی/تماس/خدمات داشته باشد میتواند با یک طراحی زیبای تک صفحه ای این کار را انجام دهد.که هر سه بخش زیر هم در صفحه اول قرار داده شده اند و با کلیک بر روی هر کدوم از منوها به بخش مربوطه اسکرول خواهید شد.

برای طراحی چنین صفحاتی می توان از پلاگین جی کوئری fullPage.js استفاده کرد که امکانات مناسبی برای این کار در اختیار ما می گذارد.

در ادامه همراه ما باشید 🙂

شروع به کار با fullPage.js

برای شروع کار با پلاگین fullPage.js ابتدا باید فایل‌های زیر را دانلود کرده و به صفحه وب خود اضافه کنید:

•  کتابخانه جی کوئری نسخه بالاتر از ۱٫۶ (jQuery > 1.6.0)
•  فایل jquery.fullpage.css
•  فایل jquery.fullpage.js و یا فایل فشرده آن (jquery.fullpage.min.js)

از اینجا می‌توانید دانلود کنید.

ایجاد بخش‌های تمام صفحه (Full-Width Sections)

بعد از قرار دادن و اتصال فایل‌ها ما باید تمام صفحات را مشخص کنیم و بخش‌بندی کنیم و درون آن بخش‌ها عناصر و اطلاعات را وارد کنیم، خب این کار بخش‌بندی در html باید کد نویسی کرد:

<div id="fullpage">
 <div class="section">Some section</div>
 <div class="section">Some section</div>
 <div class="section">Some section</div>
 <div class="section">Some section</div>
</div>

در اینجا ما چهار بخش‌داریم اگر بخواهیم تعداد این بخش‌ها که همان صفحه‌های ما می‌باشند را بیشتر کنیم باید تعداد div را بیشتر کرد. به‌صورت پیش‌فرض اولین div فعال هست اگر بخواهید این‌که یک بخش دیگر از سایت فعال باشد کافی هست کلاس active رو نسبت بدید.

<div class="section active">Some section</div>

صفحه‌ها تا اینجا به‌صورت عمودی تغییر می‌کنند شاید بخواهیم در یک صفحه چند المنت و صفحه دیگر را جا بدهیم که به‌صورت افقی جابه‌جا شوند. باید مانند زیر عمل کرد:

<div class="section">
 <div class="slide"> Slide 1 </div>
 <div class="slide"> Slide 2 </div>
 <div class="slide"> Slide 3 </div>
 <div class="slide"> Slide 4 </div>
</div>

می‌بینید که 4 اسلاید در این بخش قراردادم. حالا می‌توانید به هر طریقی بین این اسلایدها جابه‌جا شوید. با استفاده از کیبورد و یا قرار دادن دکمه و … .

به‌وسیله دکمه‌های می‌توانیم بفهمیم که در کدام صفحه هستیم یا با کلیک کردن بر روی آن دکمه‌ها جابه‌جا شویم و به صفحه موردنظر خودمان برویم.

<ul id="menu">
  <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
  <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

می‌بینید که در خاصیت href هر لینک و خاصیت data-menuanchor هر li، باید آدرس و نام قسمت مربوطه رو وارد کنیم. با این کار، با کلیک بر روی این لینک، به آن بخش منتقل میشیم. با تغییرات در css این li ها می‌توان تغییرات ایجاد کرد که اینجا بستگی به سلیقه شما دارد.

خب در اینجا ما هنوز پلاگین را فعال و معرفی نکردیم. برای این کار باید در تگ script نهایی کدهای زیر رو قرار بدیم:

$(document).ready(function() {
  $('#fullpage').fullpage({
 anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
 menu: '#menu'
  });
});

برای مطالعه بیشتر به  این لینک مراجعه کنید.با تشکر