سفارشی سازی کامپوننت modal بوت استرپ توسط جاوا اسکریپت
بوت استرپ یک فریم ورک css ای است که کامپوننت های مختلفی را مانند button و dropdown و… در اختیار کاربران قرار می دهد. از فریم ورک bootstrap می توان برای طراحی سریع رابط کاربری وب سایت یا وب اپلیکیشن استفاده کرد. برای طراحی قالب سایت توسط بوت استرپ فقط کافیست یک دانش متوسط در زمینه HTML-CSSداشته باشید.
اما برای اینکه بتوانید برخی از عملکردها یا FUNCTIONALITY کامپوننت های بوت استرپ را تغییر دهید نیاز به دانش javascript دارید. در این مقاله می خواهیم نحوه سفارشی کردن کامپوننت های بوت استرپ را بوسیله زبان برنامه نویسی جاوا اسکریپت آموزش دهیم.
مثالی که قصد داریم در این مقاله کار کنیم نمایش یک پیغام مودال یا modal box است.
همانطور که می توانید در مستندات کامپوننت های Carousel و DropDown و Collapse مشاهده کنید، رابط کاربری یا interface این کامپوننت ها شبیه هم است. پس اگر یک کامپوننت را بتوانید با کدنویسی جاوا اسکریپت، سفارشی سازی کنید، قادر خواهید بود سایر کامپوننت ها را نیز با کمی تغییر، customize کنید.
مثال: ساختار اولیه (Basic Structure):
در قطعه کد زیر یک ساختار اولیه HTML را از قالب Starter فریم ورک بوت استرپ مشاهده می کنید. در container-fluid هم محتوای صفحه لود می شود:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Bootstrap Example</title>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap Modal | Rahkarino.com</h1>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>دو نکته را باید مد نظر داشت:
– در بوت استرپ 5 دیگر چیزی بنام جی کوئری نخواهیم داشت. در واقع در Boostrap 5 از کتابخانه jQuery استفاده نشده است.
– فایل های css و js مورد نیاز صفحه، از طریق CDN یا Content Delivery Network در صفحه فراخوانی می شوند.
نکته: در صورت استفاده از CDN برای بارگذاری منابع سایت، این فایل ها از سرورهای خارجی یا External لود خواهند شد. همچنین می توانید فایل های بوت استرپ را دانلود کرده و آنها را بصورت دستی در هاست خود آپلود کنید و آدرس دهی منابع را از هاست خود انجام دهید.
در مثال زیر ابتدا می خواهیم کامپوننت modal بوت استرپ را بدون استفاده از جاوا اسکریپت سفارشی مشاهده کنیم. مودال می تواند با کلیک کاربر بر روی button باز شود و نمایش داده شود و با کلیک کاربر روی دکمه close یا ضربدر بسته شود. برای افزودن عملکردهای دیگر نیاز به کدنویسی javascript داریم. مانند اینکه وقتی کاربر روی دکمه save کلیک کرد چه اتفاقی بیوفتد؟
کامپوننت modal بوت استرپ بودن کدنویسی جاوا اسکریپت:
بیایید مثال خود را با افزودن یک دکمه یا button به قطعه کد بالا ادامه دهیم:
<div class="container-fluid">
<h1>Bootstrap Modal | Rahkarino</h1>
<button type="button" class="btn btn-success">Task 1</button>
</div>وقتی روی این دکمه کلیک می شود، مودال بوت استرپ باز می شود و متن “Click Save to complete the task.” را نمایش می دهد.
با کلیک روی Live Demo می توانید نحوه عملکرد این کامپوننت را در عمل مشاهده کنید.
اما دکمه فوق باید با دو اتریبیوت زیر همراه شود:
– data-toggle=”modal”
– data-target=”#task1_Modal”
پس کد نهایی button به شکل زیر خواهد شد:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#task1_Modal">Task 1</button>
حالا نوبت اینست که کد HTML مربوط به مودال را تعریف کنیم:
<div class="modal fade" id="task1_Modal" tabindex="-1" aria-labelledby="task1_ModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="task1_ModalLabel">Task 1</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
دقت کنید که اتریبیوت ID مربوط به div مودال باید با اتریبیوت data-target مربوط به دکمه یعنی یکسان باشد. یعنی task1_Modal
همانطور که در دموی زنده مشاهده می کنید، با کلیک روی button مودال باز می شود و با کلیک روی دکمه close یا X در بالای مودال، مودال بسته می شود.
در این codepen می توانید سورس کد این مودال را مشاهده کنید و نحوه عملکرد آن را تست کنید.
See the Pen Bootstrap Modal by Ehsan Safari
اگر می خواستیم بدون استفاده از فریم ورک بوت استرپ کامپوننت modal را شبیه سازی کنیم، نیاز بود تمام این کارها را توسط کدنویسی جاوا اسکریپت پیاده سازی کنیم. مثلا رویداد کلیک دکمه و غیره. اما bootstrap تمام اینکارها را برای ما انجام می دهد.
پیاده سازی کامپوننت های تعاملی بوت استرپ با استفاده از جاوا اسکریپت سفارشی:
دقت داشته باشید که برای ادامه کار نیاز است کتابخانه جی کوئری در وب سایت تان لود شود. یعنی jQuery CDN را در صفحه وب خود فراخوانی کنید.
متدهای مودال یا Modal Methods:
در بخش متدهای مودال در مستندات سایت getbootstrap یک متد وجود دارد بنام toggle که وظیفه اش toggle کردن نمایش مودال است. یعنی اگر مودال فعال نیست آن را نمایش می دهد و بالعکس، اگر مودال در حال نمایش است آن را می بندد.
<script>
$("#task1_Modal").modal("toggle");
</script>در صورتی که کد فوق را در اسکریپت های این مثال بنویسیم، به محض لود شدن صفحه، مودال نمایش می یابد. که البته ما این را نمی خواهیم.
می خواهیم وقتی روی دکمه یا button کلیک شد، مودال نمایش یابد و با کلیک روی یکی از سه مورد زیر، مودال بسته شود:
– اطراف باکس مودال (تمام window به غیر از خود مودال)
– دکمه close
– آیکون ضربدر X
– دکمه Save changes
فریم ورک بوت استرپ بسته شدن مودال را در موارد اول تا سوم انجام می دهد. ما نیاز است توسط کدهای جاوا اسکریپت، رویداد onclick دکمه save را تعریف کنیم. کد html دکمه را به شکل زیر آپدیت کنید:
<button type="button" class="btn btn-primary" onclick="task1_save()">Save changes</button>
سپس بدنه تابع task1_save را با استفاده از متد hide بوت استرپ تعریف می کنیم:
<script>
function task1_save() {
$("#task1_Modal").modal("hide");
}
</script>نکته: سایر کامپوننت های تعاملی یا interactive بوت استرپ عملکردی مشابه modal دارند و می توان مانند مودال برای آنها کدهای جاوا اسکریپت سفارشی تعریف کرد.
رویدادهای کامپوننت modal:
برخی از کامپوننت های بوت استرپ، علاوه بر methods شامل event های پیش فرض هستند که لیست رویدادهای modal را می توانید در سایت getbootstrap مشاهده کنید.
بعنوان مثال، رویداد show.bs.modal زمانی اجرا می شود که مودال با استفاده از متدهای show یا toggle نمایش یابد. در ادامه می خواهیم بگوییم که در هنگام نمایش/عدم نمایش مودال چه اتفاقی رخ دهد.
وقتی modal نمایش یافت می خواهیم متن دکمه button به Task 1 in progress…تغییر کند و وقتی مجدد مودال hide شد، متن دکمه به حالت قبل یعنی Task1 بازگردد.
مشابه تصویر زیر:
بنابراین می توان کدهای زیر را برای رویدادهای show و hide تعریف کرد:
$('#task1_Modal').on('show.bs.modal', function (e) {
$("#task1_button").text("Task 1 in process...");
});
$('#task1_Modal').on('hide.bs.modal', function (e) {
$("#task1_button").text("Task 1");
});نکته: با اجرای کد فوق مشاهده خواهید کرد که پس از بستن مودال، متن دکمه به Task1 باز می گردد. بدون توجه به اینکه مودال به چه روشی بسته شده است (کلیک روی دکمه close یا save یا X)
سورس کد و دموی این مثال را می توانید در CODEPEN مشاهده کنید.
See the Pen Bootstrap Modal by Ehsan Safari
نمایش نوار پیشرفت یا Progress Bar:
در ادامه تکمیل مثال، می خواهیم یک progress-bar را در صفحه نمایش دهیم تا جنبه بصری مثال ما بیشتر شود. برای مطالعه مستندات progress bar به سایت getbootstrap مراجعه کنید.
بصورت زیر کد html نوار پیشرفت یا progress bar را تعریف می کنیم:
<h1>Bootstrap | Rahkarino</h1> <button id="task1_button" type="button" class="btn btn-success" data-toggle="modal" data-target="#task1_Modal">Task 1</button> <div id="task1_progress" class="progress"> <div id="task1_progressbar" class="progress-bar bg-success" style="width:0%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div>
در حالت پیش فرض یعنی قبل از کلیک روی دکمه، خاصیت width کامپوننت progress bar برابر 0% است. می خواهیم زمانی که باکس مودال در حال نمایش است، میزان پیشرفت progressbar از 0 به 100 درصد برسد. پس باید از خاصیت width در css کمک بگیریم.
می خواهیم وقتی task در حال پردازش است، یعنی در مدت زمانی که modal باز است، افکت انیمیشن progress bar نمایش یابد. با استفاده از دو کلاس progress-bar-striped و progress-bar-animated می توان این افکت را پیاده سازی کرد.
کافیست اسکریپت زیر را برای رویداد show تعریف کنید:
$('#task1_Modal').on('show.bs.modal', function (e) {
$("#task1_button").text("Task 1 in progress...");
$("#task1_progressbar").css("width", "100%");
$("#task1_progressbar").addClass("progress-bar-striped");
$("#task1_progressbar").addClass("progress-bar-animated");
});سپس با بسته شدن modal افکت های انیمیشن از روی کامپوننت progressbar حذف شوند و خاصیت width آن نیز به 0 برسد.
$('#task1_Modal').on('hide.bs.modal', function (e) {
$("#task1_button").text("Task 1");
$("#task1_progressbar").css("width", "0%");
$("#task1_progressbar").removeClass("progress-bar-striped");
$("#task1_progressbar").removeClass("progress-bar-animated");
});در ادامه می خواهیم اگر کاربر روی دکمه save کلیک کرد، درصد پیشرفت progress bar به 100 درصد برسد و رنگ بک گراند دکمه از success به secondary تغییر کند.
کد زیر را برای تابع task1_save تعریف کنید:
function task1_save() {
$("#task1_Modal").modal("hide");
$("#task1_button").removeClass("btn-success");
$("#task1_button").addClass("btn-secondary");
$("#task1_progressbar").css("width", "100%");
}کار دیگری که می خواهیم در این مثال انجام دهیم اینست که پس از کلیک کاربر روی دکمه save، در دفعات بعدی کلیک روی button، متن باکس مودال به You have already finished the task آپدیت شود.
برای اینکار ابتدا یک کامپوننت مودال دیگر در کد html تعریف می کنیم با آیدی task1_Message
<!-- Modal 2--> <div class="modal fade" id="task1_Message" tabindex="-1" aria-labelledby="task1_MessageLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="task1_MessageLabel">Task 1</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> You have already finished the task. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
سپس در رویداد onclick دکمه save با استفاده از دستور زیر، اتریبیوت data-target دکمه را به مودال دوم متصل کرده ایم:
$("#task1_button").attr("data-target", "#task1_Message");یعنی اگر کاربر روی دکمه save کلیک کند، تسک برای همیشه done می شود و پس از کلیک مجدد روی دکمه Task 1 مودال دوم نمایش می یابد که شامل متن You have already finished the task. می باشد.
شما می توانید سورس کد کامل این مقاله را در codepen راهکارینو مشاهده و دانلود کنید.
See the Pen Bootstrap Modal by Ehsan Safari
جمع بندی:
با اینکه بدون کدنویسی جاوا اسکریپت سفارشی هم می توانید براحتی از کامپوننت های تعاملی بوت استرپ مانند dropdown و carousel و modal در پروژه های خود استفاده کنید. اما اگر کمی کد javascript را در اسکریپت های خود تعریف کنید، انعطاف پذیری و کنترل بیشتری روی عملکرد کامپوننت های بوت استرپ خواهید داشت. مشابه مثال همین مقاله که با استفاده از کدهای سفارشی جاوا اسکریپت توانستیم رویداد کلیک دکمه save را کنترل کنیم.
دیدگاهتان را بنویسید