پلاگین turn.js براحتی می تواند سایت شما را تبدیل به یک دفترچه کند که کاربر بتواند با ورق زدن دفترچه با موس تمامی قستهای آن را ببیند .
می توانید دموی آن را در خود سایت سازنده مشاهده کنید و نسخه کم حجم 17kb آن را هم از اینجا دانلود کنید .
این پلاگین فقط با مرورگرهایی که از HTML5 پشتیبانی می کنند کار می کند ، از مزایای آن می توان به :
– حجم کم
– سازگاری با تبلتها و موبایلهای لمسی
– در مقابل فلش که استاتیک است ، می توان با آن به ایجاد سایت های دینامیک پرداخت .
– در مقابل فلش که در موتورهای جستجو index نمی شود ، این صفحه چون با متن و javascript کار می کند مشکلی ندارد .
– و در آخر می توان به راحتی استفاده از آن اشاره کرد .
نحوه ی کار کردن آن هم بسیار ساده است ، ابتدا Jquery و پلاگین turn.js را ابتدای کد خود لود کنید .
<script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="turn.js"></script>
سپس کافیست یک DIV مثلا در اینجا magazine# را در نظر بگیرید و مطالب خود را درون DIV های زیر مجموعه بصورت کد زیر که با page1 , page2 , page3 مشخص شده است بنویسید ، این پلاگین بطور خودکار از این مطالب دفترچه را درست می کند . برای اینکه دفترچه کامل شود تعداد DIV هایی که در آیدی magazine قرار داده اید می بایست زوج باشد ، ( صفحه ی اول و آخر ) و در هنگام صدا زدن تابع هم تعداد صفحات را به او خواهیم گفت .
قسمت HTML
<div id='magazine'> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> </div>
قسمت CSS
اولی کل دفترچه در حالت باز را مشخص می کند و دومی هر صفحه ( به عرض قرار داده شده توجه کنید )
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}قسمت Jquery
در آخر هم تابع را برای این آیدی صدا می زنیم و تعداد صفحات را هم به او می گوییم .
$('magazine#').turn('page', 6);
