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

آموزش ایجاد عنصر ضمیمه با bootstrap

Affix plug – in در تویتر بوت استرپ برای افزودن رفتار ضمیمه به هر عنصری به کار می رود.

ایجاد عنصر ضمیمه با تویتر بوت استرپ:

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

برای انجام این کار ضمیمه ی پلاگین بین سه گروه پیچیده می شود:

.affix, .affix-top, و .affix-bottom. هر گروه یک وضعیت خاص را نشان می دهد.

در واقع پلاگین گروه .affix-top یا .affix-bottomرا اضافه می کند تا نشان دهد عنصر در بالاترین یا پایین ترین موقعیت خود قرار دارد.

وقتیکه عنصر به قبل برمی گردد، محدودیت آفست ارائه شده توسط ویژگی "data-offset-" مربوط به پلاگین، گروه .affix-top یا .affix-bottom را با .affix جایگزین می کند که ضمیمه کردن حقیقی را اجرا می کند.

در این نقطه ویژگی top یا bottom مربوط به CSS برای مشخص کردن موقعیت عنصر ضمیمه روی ویو پرت لازم می باشد.

مثال زیر را برای مشاهده ی ضمیمه ی پلاگین در عمل چک کنید.

شما به راحتی می توانید رفتار ضمیمه را به هر عنصری اضافه کنید – تنها کافیست data-spy="affix" را به عنصری که قصد اکتشاف آن را دارید اضافه کنید. سپس از ویژگی های "data-offset-" برای تعریف زمان on و off مربوط به ضمیمه ی یک عنصر، استفاده کنید.

مثال:


نکته:

ویژگی "data-offset-" فقط تعداد پیکسل هایی را مشخص می کنند که باید برای اتصال ضمیمه ی یک عنصر اسکرول کنید. این ویژگی موقعیت عنصر ضمیمه شده را مشخص نمی کند. شما باید بالا یا پایین ویژگی CSS را به طور مشخص برای عنصر ضمیمه شده در برگه ی طراحی خود تعریف کنید تا موقعیت آن را در ویوپرت تنظیم کنید.

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

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

مثال:

$(document).ready(function () {

$("#myNav").affix({

offset: {

top: 190

}

});

});

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

Name
Type
Default Value
Description
offset
number | function | object
10
در هنگام محاسبه ی موقعیت اسکرول، تعداد پیکسل های منشعب شده از صفحه را مشخص می کند. اگر یک عدد مجزا ارائه شده باشد، انشعاب هم در بالا و هم در پایین مسیرها به کار گرفته خواهد شد. برای تنظیم انشعاب در یک مسیر مجزا یا انشعاب های چندتایی خاص – کافیست آبجکتی مانند را offset: {top:50, bottom:100} ارائه دهید.
target
selector | node | jQuery element
the windowobject
عنصر هدف مربوط به ضمیمه را مشخص می کند.

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

Event
Description
affix.bs.affix
این رویداد فورا قبل از ضمیمه شدن عنصر آغاز می شود.
affixed.bs.affix
این رویداد پس از ضمیمه شدن عنصر آغاز می شود.
affix-top.bs.affix
این رویداد قبل از اینکه عنصر به بالا ضمیمه شده باشد، فورا آغاز می شود.
affixed-top.bs.affix
این رویداد پس از اینکه عنصر به بالا ضمیمه شده باشد، آغاز می شود.
affix-bottom.bs.affix
این رویداد قبل از اینکه عنصر به پایین ضمیمه شده باشد، فورا آغاز می شود.
affixed-bottom.bs.affix
این رویداد پس از اینکه عنصر به پایین ضمیمه شده باشد، آغاز می شود.

وقتی که منوی مسیریابی ضمیمه شده باشد پیام هشدار مثال زیر ارائه می شود.

مثال:

$(document).ready(function () {

$("#myNav").on('affixed.bs.affix', function () {

alert("The navigation menu has been affixed. Now it doesn't scroll with the page.");

});

});
  • 3194
  •    1406
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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