آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ایجاد نما با bootstrap

ایجاد نما با تویتر بوت استرپ

نما اساسا یک دیالوگ باکس می باشد که برای ارائه ی اطلاعات مهم به یوزر یا پیش بردن یوزر برای انجام فعالیت های مهم قبل از ادامه دادن استفاده می شود. پنجره های نما به طور گسترده ای برای هشدار دادن به یوزرها در مورد موقعیت هایی مانند زمان وقفه و یا دریافت آخرین تایید قبل از اجرای هر فعالیتی، از قبیل ذخیره یا پاک کردن داده، استفاده می شوند.

با استفاده از تویتر بوت استرپ می توانید دیالوگ باکس های هوشمند و انعطاف پذیری با کمترین تلاش ایجاد کنید. مثال زیر به شما نشان خواهد داد که چگونه یک نمای ساده با یک تیتر ، بدنه ی پیام و قسمت پایین آن شامل دکمه های فعالیت برای یوزر ایجاد کنید.

مثال:

زمانی که DOM به طور کامل از طریق جاوااسکریپت بارگذاری شده باشد، مثال بالا پنجره ی نما را آغاز می کند. خروجی این مثال مانند تصویر زیر خواهد بود:

آموزش ایجاد نما با bootstrap

نکته:

نکته: گروه .fade با گروه .modal استفاده می شود تا تاثیر تغییر کم پنجره های یک نما را به کار بگیرد. اگر شما تمایلی به این تاثیر ندارید .fade گروه را حذف کنید.

فعال کردن نماها از طریق ویژگی های داد

با کلیک کردن روی دکمه یا لینک و بدون نوشتن کد جاوا اسکریپت و از طریق ویژگی های داده می توانید پنجره ی نمای تویتر بوت استرپ را فعال کنید. data-toggle="modal" را به همراه data-target="#myModal" یا href="#myModal" روی یک عنصر کنترل کننده، مانند یک دکمه و یا یک مکان نما، تنظیم کنید تا یک جعبه نمای خاص را هدف قرار دهید.

مثال:


Launch Demo Modal
 

مثال بالا پنجره نما را با کلیک "Launch Demo Modal" از طریق ویژگی های داده ی مربوط به تویتر بوت استرپ راه اندازی می کند.

فعال کردن نماها از طریق جاوااسکریپت

شما ممکن است پنجره ی یک نما را از طریق جاوا اسکریپت فعال کنید –روش modal() تویتربوت استرپ را با نمای انتخابگر "id" یا "class" در کد جاوااسکریپت خود جای دهید.

   $(document).ready(function () {
       $(".btn").click(function () {
           $("#myModal").modal('show');
       });
   });

تغییر اندازه های نماها:

بوت استرپ گزینه بیشتری در مورد مقیاس گذاری نما در قسمت بالا و یا پایین آن به شما ارائه می دهد. شما می توانید با اضافه کردن گروه .modal-lg یا .modal-sm روی .modal-dialog نماها را بزرگتر یا کوچکتر کنید.

مثال:




 

تغییر محتوای نما براساس دکمه ی اجرا:

اغلب اوقات نماهای بسیاری روی یک صفحه ی وب دارای محتوایی تقریبا مشابه و با تفاوت خیلی کمی می باشند.

شما می توانید از modal events برای ایجاد پنجره های نمای متفاوت بر اساس همان نمای HTML ایجاد کنید. مثال زیر عنوان پنجره ی نما را طبق مقدار ویژگی data-title و دکمه ی آغاز تغییر خواهد داد.

   $(document).ready(function () {
       $("#myModal").on('show.bs.modal', function (event) {
           // Get button that triggered the modal
           var button = $(event.relatedTarget);
           // Extract value from data-* attributes
           var titleData = button.data('title');
           $(this).find('.modal-title').text(titleData + ' Form');
       });
   });

گزینه های زیادی وجود دارند که ممکن است به روش modal() بوت استرپ منتقل شوند تا عملکرد یک پنجره ی نما را دلخواه سازی کنند.

Name
Type
Default Value
Description
backdrop
booleanor the string'static'
true
شامل عنصر modal-backdrop می شود. ممکن است شما static را برای یک بک دراپ تعیین کنید که نما را روی کلیک نمی بندد.
keyboard
boolean
true
نما را زمانی که آغازبه کار می کند یا فعال میشود نشان می دهد.
remote
URL
false
این گزینه به خاطر v3.3.0 طرد شده و در v4 حذف خواهد شد. به جای آن از قالب بخش کاربر استفاده کنید یا jQuery.load را فرا بخوانید. اگر یک url ارائه شده باشد، محتوا یک بار از طریق روش بارگذاری jQuery's بارگذاری خواهد شد و وارد .modal-content' div می شود.

همچنین می توانید این گزینه ها را با استفاده از ویژگی های داده روی یک جعبه ی نما تنظیم کنید –فقط نام گزینه را به داده ضمیمه کنید، به عنوان مثال data-backdrop="static", data-keyboard="false" و غیره.

اگر شما در حال استفاده از ویژگی api برای تنظیم گزینه ها برای پنجره ی نما می باشید، ممکن است از ویژگی "href" برای ارائه URL از منبع دور استفاده کنید، به عنوان مثال:

مثال:


Launch Demo Modal
 

نکته:

زمانی که یوزر روی بک دراپ کلیک می کند، با تنظیم مقدار ویژگی داده ی data-backdrop برایstatic مانند data-backdrop="static" از بسته شدن جعبه ی نما جلوگیری کنید.

این ها روش های استاندارد نماهای بوت استرپ می باشند:

.modal(options)

این روش محتوای شما را به عنوان یک نما فعال می کند.

مثال:

   $(document).ready(function () {
       $(".launch-modal").click(function () {
           $("#myModal").modal({
               keyboard: false
           });
       });
   });

.modal('toggle')

این روش پنجره ی نما را به طور دستی اجرا می کند.

مثال:

   $(document).ready(function () {
       $(".toggle-modal").click(function () {
           $("#myModal").modal('toggle');
       });
   });
 

.modal('show')

این روش برای باز کردن پنجره ی نما به طور دستی استفاده می شود.

مثال:

   $(document).ready(function () {
       $(".open-modal").click(function () {
           $("#myModal").modal('show');
       });
   });

.modal('hide')

این روش می تواند برای پنهان کردن پنجره ی نما به طور دستی استفاده شود.

مثال:

   $(document).ready(function () {
       $(".hide-modal").click(function () {
           $("#myModal").modal('hide');
       });
   });

گروه نمای بوت استرپ دارای رویدادهایی برای رسیدن به عملکرد نما می باشد.

Event
Description
show.bs.modal
زمانی که روش show instance فراخوانده می شود، این رویداد فورا اتفاق می افتد.
shown.bs.modal
زمانیکه نما برای یوزر قابل رویت شده باشد، این رویداد اتفاق می افتد. این رویداد تا زمان کامل شدن فرایند تغییر CSS منتظر می ماند.
hide.bs.modal
زمانیکه روش hide instance فراخوانده شود، این رویداد فورا اتفاق می افتد.
hidden.bs.modal
وقتی که مخفی ماندن نما از یوزر تمام شده باشد، این رویداد اتفاق می افتد. این رویداد تا زمان کامل شدن فرایند تغییر CSS منتظر می ماند.

زمانیکه تغییر محو نمای پنجره به طور کامل انجام شده باشد، پیام هشدار مثال زیر به یوزر نمایش داده می شود.

مثال:

   $(document).ready(function () {
       $("#myModal").on('hidden.bs.modal', function () {
           alert("Modal window has been completely closed.");
       });
   });
  • 1523
  •    0
  • تاریخ ارسال :   1394/07/27

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .