چگونگی استفاده از Fullscreen API در HTML5
چگونگی استفاده از Fullscreen API در HTML5
ما همیشه قادر به مشاهده تمام صفحه وب در حالت تمام صفحه بودهایم. برای انجام اینکار میتوانیم در ویندوز کلید F11 و در OS X کلیدهای ترکیبی Shift + Cmd + F را بکار ببریم.
هر چند که گاهی اوقات به عنوان توسعهدهنده وب، ممکن است بخواهیم امکانی را در صفحه وب برای انجام اینکار ایجاد کنیم.
علاوه بر اینکه HTML5 المنتهای جدیدی را ارائه میدهد، همچنین یک API به نام Fullscreen API معرفی کرده است که در این پست به بررسی آن خواهیم پرداخت. این API به ما کمک میکند تا تمام وبسایتمان یا بخشی از آنرا با استفاده از قابلیتهای Native مرورگزها، بصورت Fullscreen (تمام صفحه) نمایش دهیم.
پیادهسازی این API، خصوصا برای ویدیوها، عکسها، بازیهای آنلاین و ارائههای تحت HTML-CSS بسیار مفید و حرفهای خواهد بود
برای دسترسی به دوره آنلاین و رایگان آموزش HTML5 در کدفرند کلیک کنید
پشتیبانی مرورگرها
در هنگام نوشتن این پست، این API فقط در مرورگرهای Google Chroome و Safari و Firefox کار میکند. با این حال، باید از پیشوندهای CSS3 این API مطابق جدول زیر استفاده کنیم زیرا هنوز در مرحله آزمایشی است.
Description | Firefox | Webkit |
متد نمایش صفحه وب یا المنت خاصی در حالت تمام صفحه. | mozRequestFullScreen | webkitRequestFullScreen |
متد خروج از حالت تمام صفحه | mozCancelFullscreen | webkitCancelFullscreen |
متد برای تشخیص اینکه آیا المنت در حالت تمام صفحه است | mozFullScreenElement | webkitFullScreenElement |
شایان ذکر است که Fullscreen API در آینده تغییر خواهد کرد.
نحوه استفاده از Fullscreen API
یکی از بهترین روشهای یادگیری یک چیز جدید، یادگیری به واسطه مثال است. در این پست ما یک پروژه ساده توسعه خواهیم داد. ایده این است که ما یک تصویر و یک دکمه داریم که تصویر را در حالت تمام صفحه قرار میدهد و یا با یک کلیک روی آن، عکس را به حالت عادی برمیگرداند.
HTML
با ایجاد طرح html به کارمان شروع میکنیم. یک تگ div برای احاطه عکس و یک تگ span برای احاطه دکمه مانند زیر داریم:
<div id="fullscreen" class="html5-fullscreen-api"> <img src="img/arokanddedes.jpg"> <span class="fs-button"></span> </div>
CSS
با استفاده از CSS محل قرارگیری عکس را وسط صفحه میکنیم و همچنین با استایلدهی، ظاهر کار را بهتر میکنیم:
.demo-wrapper { width: 38%; margin: 0 auto; } .html5-fullscreen-api { position: relative; } .html5-fullscreen-api img { max-width: 100%; border: 10px solid #fff; box-shadow: 0px 0px 50px #ccc; } .html5-fullscreen-api .fs-button { z-index: 100; display: inline-block; width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; cursor: pointer; }
نتیجه کار تا به اینجا به شکل زیر خواهد بود:
من ترجیح دادم تا آیکون بزرگ نمایی را درون تگ span با استفاده از خاصیت :after قرار بدم. بنابراین میتوانیم با تغییر مقدار content در CSS، آیکون را نیز تغییر دهیم.
.html5-fullscreen-api .fs-button:after { display: inline-block; width: 100%; height: 100%; font-size: 32px; font-family: 'ModernPictogramsNormal'; color: rgba(255,255,255,.5); cursor: pointer; content: "v"; } .html5-fullscreen-api .fs-button:hover:after { color: rgb(255,255,255); }
نتیجه کار پس از کدهای بالا:
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۵۹ هزار تومان
Javascript
از jQuery برای اینکه کدمان کوتاهتر و سادهتر شود استفاده خواهیم کرد. (دوره جامع آموزش jQuery در کدفرند )
همانطور که قبلا اشاره کردم، با کلیک بر روی دکمه، تصویر به حالت تمام صفحه در خواهد آمد. پس فانکشن مناسب را زیر متد on جی کوئری به شکل زیر بکار خواهیم برد:
$('.fs-button').on('click', function(){ }
ابتدا بررسی میکنیم که آیا تصویر در حالت تمام صفحه قرار دارد یا خیر، اگر این شرایط به ما نشان داده شود، ما WebkitCancelFullScreen را اجرا خواهیم کرد تا آن را به حالت عادی برگردانیم. در غیر این صورت، با استفاده از متد webkitRequestFullScreen، آن را به صورت تمام صفحه نمایش خواهیم داد:
$('.fs-button').on('click', function(){ var elem = document.getElementById('fullscreen'); if(document.webkitFullscreenElement) { document.webkitCancelFullScreen(); } else { elem.webkitRequestFullScreen(); }; });
همانطور که در تصویر زیر نشان داده شده، با کلیک روی آیکون Fullscreen تصویر مان به صورت تمام صفحه نمایش داده میشود:
نحوه استفاده از Fullscreen API در CSS
Webkit (و البته Firefox)، همچنین مجموعه جدیدی از کلاسهای CSS برایمان ارائه میدهند تا بتوانیم هنگامی که عکس در حال تمام صفحه است، استایلدهی موردنظرمان را انجام دهیم. فرض کنیم که میخواهیم backgrond را تغییر دهیم، میتوانیم به شکل زیر عمل کنیم:
#fullscreen:-webkit-full-screen { background-image: url('../img/ios-linen.jpg'); width: 100%; }
به این ترتیب توانستید که از Fullscreen API در HTML5 استفاده کنید. ممنون از همراهیتان.
*
برچسب:api, API های html, codefriend, css, CSS3, fullscreen, HTML5, JavaScript, js, استفاده از api, برنامه_نویسی, تمام_صفحه, طراحی_سایت, کدفرند, وب