اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
دو دقیقه
Thickbox یکی از پلاگینهای jQuery است که جهت نمایش صفحات modal بکار میرود.
روش استفاده بسیار سادهای هم دارد:
الف) jquery.js باید به صفحه معرفی شود.
ب) سپس thickbox.js باید به صفحه الحاق شود.
ج) و فایل css آن یعنی thickbox.css نیز باید به صفحه افزوده شود.
برای استفاده از آن کافی است یک لینک به صفحه اضافه کنید که ویژگی class آن مساوی thickbox باشد. مثلا:
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
و مثالهای دیگری از این دست که در صفحه رسمی آن موجود است و نیازی به تکرار آنها نیست.
اما مشکلی که در بلاگر وجود دارد این است که شما نمیتوانید این ویژگیها را در بسیاری از موارد به صورت دستی تنظیم کنید. یک ویجت ظاهر میشود که فقط به شما امکان ثبت یک عنوان و لینک مربوطه را میدهد و همین.
برای انتساب ویژگیهای thickBox به این نوع لینکها که کنترلی روی آن نیست میتوان از خود jQuery کمک گرفت:
$(document).ready(function(){
$("a[href='http://www.mysite.com/page.htm?TB_iframe=true&height=340&width=530']").each(function(){
var obj = $(this);
obj.attr("title","Contact me");
obj.attr("class","thickbox");
}).bind("contextmenu",function(e){
return false;
});
});
همچنین در اینجا کلیک راست نیز بر روی این لینک بسته شده تا کاربر فقط کلیک معمولی را انجام دهد (فقط روی همین یک لینک در صفحه اعمال میشود و نه کل صفحه).