جاڤاسکڕێپت
پێکهاتەکانی Bootstrap بهێنە ژیانەوە بە زیاتر لە دەیان پێوەکراوەکانی تایبەت بە jQuery. بە ئاسانی هەموویان لەخۆ بگرە، یان یەک بە یەک.
پێکهاتەکانی Bootstrap بهێنە ژیانەوە بە زیاتر لە دەیان پێوەکراوەکانی تایبەت بە jQuery. بە ئاسانی هەموویان لەخۆ بگرە، یان یەک بە یەک.
دەتوانرێت پێوەکراوەکان بە تاک (بە بەکارهێنانی *.js
فایلە تاکەکەسییەکانی Bootstrap)، یان هەموویان بە یەکجار (بە بەکارهێنانی bootstrap.js
یان بچووککراو bootstrap.min.js
) جێگیر بکرێن.
هەردووکیان bootstrap.js
و bootstrap.min.js
هەموو پێوەکراوەکان لە یەک فایلدا لەخۆدەگرن. تەنها یەکێکیان لەخۆ بگرە.
هەندێک لە پێوەکراوەکان و پێکهاتەکانی CSS پشت بە پێوەکراوەکانی تر دەبەستن. ئەگەر پێوەکراوەکان بە تاک بە تاک جێگیر دەکەیت، دڵنیابە لە پشکنینی ئەم وابەستەییانە لە دۆکیومێنتەکاندا. هەروەها تێبینی ئەوە بکە کە هەموو پێوەکراوەکان پشت بە jQuery دەبەستن (ئەمە واتە jQuery دەبێت پێش فایلەکانی پێوەکراوەکان بێت). راوێژ بە ئێمە بکەbower.json
بۆ ئەوەی بزانیت کام وەشانی jQuery پشتگیری دەکرێت.
دەتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی API ی مارکاپەوە بەبێ ئەوەی یەک دێڕی جاڤاسکڕێپت بنووسیت. ئەمە API ی پلە یەکە لە Bootstrap ە و دەبێت یەکەم شت بێت کە لەبەرچاو بگیرێت لەکاتی بەکارهێنانی پێوەکراوێکدا.
کە ووتمان، لە هەندێک بارودۆخدا ڕەنگە خواستراو بێت ئەم کاراییە بکوژێنرێتەوە. بۆیە ئێمە توانای لەکارخستنی API تایبەتمەندی داتاش دەدەین بە هەڵوەشاندنەوەی هەموو ڕووداوەکان لەسەر بەڵگەنامەکە کە بە data-api
. ئەمەش بەم شێوەیە دەردەکەوێت:
یان بۆ بە ئامانجگرتنی پێوەکراوێکی دیاریکراو، تەنها ناوی پێوەکراوەکە وەک ناوچەی ناو لەگەڵ شوێنی ناوی data-api بەم شێوەیە دابنێ:
تایبەتمەندی داتا لە چەندین پێوەکراو لەسەر هەمان توخم بەکارمەهێنە. بۆ نموونە دوگمەیەک ناتوانێت هەم ئامرازی هەبێت و هەم مۆداڵێک بگۆڕێت. بۆ بەدیهێنانی ئەمە، توخمێکی پێچان بەکاربهێنە.
هەروەها ئێمە پێمان وایە پێویستە بتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی JavaScript API ەوە. هەموو API گشتیەکان شێوازی تاک و زنجیرن و ئەو کۆکردنەوە دەگەڕێننەوە کە کاریان لەسەر کراوە.
هەموو شێوازەکان دەبێ شتێکی هەڵبژاردەی هەڵبژاردە قبوڵ بکەن، ڕستەیەک کە شێوازێکی دیاریکراو دەکاتە ئامانج، یان هیچ (کە پێوەکراوێک بە هەڵسوکەوتی پێشوەختە دەستپێدەکات):
هەروەها هەر پێوەکراوێک بنیاتنەرە خاوەکەی لەسەر Constructor
تایبەتمەندییەک ئاشکرا دەکات: $.fn.popover.Constructor
. ئەگەر دەتەوێت نموونەیەکی پێوەکراوێکی تایبەت بەدەست بهێنیت، ڕاستەوخۆ لە توخمێکەوە وەریبگرەوە: $('[rel="popover"]').data('popover')
.
دەتوانیت ڕێکخستنە پێشوەختەکان بۆ پێوەکراوێک بگۆڕیت بە دەستکاریکردنی Constructor.DEFAULTS
شتەکەی پێوەکراوەکە:
هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflict
ئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.
بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show
) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown
) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.
لە 3.0.0ەوە، هەموو ڕووداوەکانی Bootstrap ناویان بۆ دانراوە.
هەموو ڕووداوە بێکۆتاییەکان preventDefault
کارایی دابین دەکەن. ئەمەش توانای وەستاندنی جێبەجێکردنی کردارێک پێش دەستپێکردنی دەدات.
دەتوانرێت لە ڕێگەی VERSION
تایبەتمەندی بنیاتنەری پێوەکراوەکەوە دەست بە وەشانی هەریەک لە پێوەکراوەکانی jQuery ی Bootstrap بگات. بۆ نموونە بۆ پێوەکراوەکەی tooltip:
پێوەکراوەکانی Bootstrap بە تایبەتی بە ڕەوشتەوە ناگەڕێنەوە کاتێک جاڤاسکڕێپت لەکاردەخرێت. ئەگەر لەم حاڵەتەدا گرنگی بە ئەزموونی بەکارهێنەر دەدەیت، بەکاری بهێنە <noscript>
بۆ ڕوونکردنەوەی دۆخەکە (و چۆن جاڤاسکڕێپت چالاک بکەیتەوە) بۆ بەکارهێنەرانت، و/یان زیادکردنی پاشەکشەی تایبەت بە خۆت.
بووتستراپ بە فەرمی پشتگیری لە کتێبخانەکانی جاڤاسکڕێپتی لایەنی سێیەم وەک Prototype یان jQuery UI ناکات. سەرەڕای .noConflict
ڕووداوەکان و ناوەکان، لەوانەیە کێشەی گونجان هەبن کە پێویستە لەسەر خۆت چارەسەریان بکەیت.
بۆ کاریگەرییە سادەکانی گواستنەوە، transition.js
جارێک شانبەشانی فایلەکانی تری JS دابنێ. ئەگەر تۆ کۆمپایڵکراو (یان بچووککراو) بەکاردەهێنیت bootstrap.js
، پێویست ناکات ئەمە بخەیتە ناوەوە- پێشتر لەوێیە.
Transition.js یارمەتیدەرێکی بنەڕەتییە بۆ transitionEnd
ڕووداوەکان هەروەها ئیمۆلیتەرێکی گواستنەوەی CSS. لەلایەن پێوەکراوەکانی ترەوە بەکاردێت بۆ پشکنینی پشتگیری گواستنەوەی CSS و بۆ گرتنی گواستنەوە هەڵواسراوەکان.
دەتوانرێت گواستنەوەکان بە شێوەیەکی جیهانی لەکاربخرێن بە بەکارهێنانی ئەم پارچە جاڤاسکڕێپتەی خوارەوە، کە دەبێت دوای بارکردنی transition.js
(یان bootstrap.js
یان bootstrap.min.js
, بەپێی حاڵەتەکە) بێت:
مۆداڵەکان ڕێکخراون، بەڵام نەرم و نیان، دیالۆگ ئامۆژگاری بە کەمترین کارایی پێویست و پێشوەختە زیرەکەکان.
دڵنیابە کە مۆداڵێک مەکەرەوە لەکاتێکدا مۆداڵێکی تر هێشتا دیارە. پیشاندانی زیاتر لە یەک مۆداڵ لە یەک کاتدا پێویستی بە کۆدی تایبەت هەیە.
هەمیشە هەوڵبدە کۆدی HTML ی مۆداڵێک لە شوێنێکی ئاستی سەرەوە لە بەڵگەنامەکەتدا دابنێیت بۆ ئەوەی پێکهاتەکانی تر کاریگەرییان لەسەر دەرکەوتن و/یان کارایی مۆداڵەکە نەبێت.
هەندێک ئاگادارکردنەوە هەیە سەبارەت بە بەکارهێنانی مۆداڵەکان لەسەر ئامێرە مۆبایلەکان. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی پشتگیری وێبگەڕەکەمان بکە.
بەهۆی چۆنێتی پێناسەکردنی HTML5 ماناکانی، autofocus
تایبەتمەندی HTML هیچ کاریگەرییەکی نییە لە مۆداڵی Bootstrap. بۆ بەدەستهێنانی هەمان کاریگەری، هەندێک جاڤاسکڕێپتی تایبەت بەکاربهێنە:
مۆداڵی ڕەندەرکراو بە سەردێڕ و جەستە و کۆمەڵێک کردار لە ژێرەوەدا.
مۆداڵێک لە ڕێگەی جاڤاسکڕێپتەوە بگۆڕە بە کرتەکردن لەسەر دوگمەی خوارەوە. لە سەرەوەی لاپەڕەکەوە دەخلیسکێتە خوارەوە و کاڵ دەبێتەوە.
دڵنیابە زیاد بکە role="dialog"
و aria-labelledby="..."
, بە ئاماژەدان بە ناونیشانی مۆداڵی، بۆ .modal
, و role="document"
بۆ .modal-dialog
خۆی.
سەرەڕای ئەوە، دەتوانیت وەسفێک لە دیالۆگی مۆداڵی خۆت بدەیت بە aria-describedby
on .modal
.
جێگیرکردنی ڤیدیۆکانی یوتیوب لە مۆداڵەکاندا پێویستی بە جاڤاسکڕێپتی زیادە هەیە کە لە بووتستراپدا نەبێت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی پەخشکردنەکە بوەستێنێت و زۆر شتی تر. بۆ زانیاری زیاتر سەیری ئەم پۆستە یارمەتیدەرەی Stack Overflow بکە .
مۆداڵەکان دوو قەبارەی هەڵبژاردەیان هەیە، لە ڕێگەی پۆلەکانی دەستکاریکەرەوە بەردەستە بۆ ئەوەی لەسەر .modal-dialog
.
بۆ ئەو مۆداڵانەی کە بە سادەیی دەردەکەون نەک کاڵ ببنەوە بۆ بینین، .fade
پۆلەکە لە نیشانە مۆداڵەکەت دەربهێنە.
بۆ ئەوەی سوود لە سیستەمی تۆڕی Bootstrap وەربگریت لەناو مۆداڵێکدا، تەنها .row
s لەناو مۆداڵێکدا هێلانە بکە .modal-body
و پاشان پۆلەکانی سیستەمی تۆڕی ئاسایی بەکاربهێنە.
کۆمەڵێک دوگمەت هەیە کە هەموویان هەمان مۆداڵی دەستپێدەکەن، تەنها بە ناوەڕۆکێکی کەمێک جیاواز؟ تایبەتمەندیەکانی بەکارهێنان event.relatedTarget
و HTMLdata-*
(ڕەنگە لە ڕێگەی jQuery ) بۆ گۆڕینی ناوەڕۆکی مۆداڵەکە بەپێی ئەوەی کام دوگمە کرتە کراوە. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی ڕووداوە مۆداڵییەکان بکە لەسەر relatedTarget
,
پێوەکراوەکەی مۆداڵی ناوەڕۆکی شاراوەت لەسەر داواکاری دەگۆڕێت، لە ڕێگەی تایبەتمەندیەکانی داتا یان جاڤاسکڕێپتەوە. هەروەها زیاد دەکات .modal-open
بۆ <body>
بۆ سەرپێچیکردنی هەڵسوکەوتی سکڕۆڵکردنی پێشوەختە و دروست دەکات .modal-backdrop
بۆ دابینکردنی ناوچەیەکی کلیک بۆ ڕەتکردنەوەی مۆداڵی پیشان دراو کاتێک کلیککردن لە دەرەوەی مۆداڵەکە.
مۆداڵێک چالاک بکە بەبێ نووسینی جاڤاسکڕێپت. لەسەر توخمێکی کۆنترۆڵکەر دابنێ data-toggle="modal"
، وەک دوگمەیەک، لەگەڵ data-target="#foo"
یان href="#foo"
بۆ بە ئامانجگرتنی مۆداڵێکی دیاریکراو بۆ گۆڕینی.
بانگی مۆداڵێک بکە بە id myModal
بە یەک دێڕی جاڤاسکڕێپت:
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-backdrop=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
باکگراوند | boolean یان ڕیزەکە'static' |
ڕاست | توخمێکی مۆداڵی-باکگراوند لەخۆدەگرێت. یانیش static بۆ باکگراوندێک دیاری بکە کە مۆداڵی لەسەر کلیککردن داناخات. |
کیبۆرد | boolean | ڕاست | مۆداڵی دادەخات کاتێک کلیلی escape دەکرێت |
نیشاندان | boolean | ڕاست | مۆداڵی نیشان دەدات کاتێک دەستپێدەکات. |
دوور | ڕێڕەو | هەڵە | ئەم هەڵبژاردنە لە v3.3.0 ەوە بەکارنەهاتووە و لە v4 لابراوە. ئێمە پێشنیار دەکەین لەبری ئەوە قاڵبسازی لایەنی مشتەری یان چوارچێوەی بەستنەوەی داتا بەکاربهێنیت، یان خۆت بانگی jQuery.load بکەیت. ئەگەر URL ی دوور دابین بکرێت، ناوەڕۆک جارێک لە ڕێگەی شێوازی jQuery باردەکرێت |
.modal(options)
ناوەڕۆکەکەت وەک مۆداڵ چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object
.
.modal('toggle')
بە دەست مۆداڵێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی مۆداڵەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.modal
یان hidden.bs.modal
ڕووبدات).
.modal('show')
بە دەستی مۆداڵێک دەکاتەوە. پێش ئەوەی مۆداڵەکە بەڕاستی پیشان بدرێت دەگەڕێتەوە بۆ پەیوەندیکەر (واتە پێش ئەوەی shown.bs.modal
ڕووداوەکە ڕووبدات).
.modal('hide')
بە دەستی مۆداڵێک دەشارێتەوە. پێش ئەوەی مۆداڵەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.modal
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.
.modal('handleUpdate')
شوێنی مۆداڵەکە ڕێکدەخاتەوە بۆ بەرپەرچدانەوەی سکڕۆڵبارێک لە ئەگەری دەرکەوتنی یەکێکیان، کە وا دەکات مۆداڵەکە باز بدات بۆ لای چەپ.
تەنها کاتێک پێویستە کە بەرزی مۆداڵەکە بگۆڕێت لەکاتێکدا کراوە بێت.
پۆلی مۆداڵی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی مۆداڵی.
هەموو ڕووداوە مۆداڵییەکان لە خودی مۆداڵەکەدا تەقە دەکرێن (واتە لە <div class="modal">
).
جۆری ڕووداو | وەسف |
---|---|
show.bs.modal | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. ئەگەر بەهۆی کلیکێکەوە بێت، ئەوا توخمە کلیککراوەکە وەک relatedTarget تایبەتمەندی ڕووداوەکە بەردەستە. |
نیشان دراوە.bs.modal | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). ئەگەر بەهۆی کلیکێکەوە بێت، ئەوا توخمە کلیککراوەکە وەک relatedTarget تایبەتمەندی ڕووداوەکە بەردەستە. |
شاردنەوە.bs.modal | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
شاراوە.bs.modal | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن). |
بارکراوە.bs.modal | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە ناوەڕۆکی بارکردبێت بە بەکارهێنانی remote بژاردەکە. |
زیادکردنی مینیوی دابەزین بۆ نزیکەی هەر شتێک بەم پێوەکراوە سادەیە، لەوانەش navbar، تابەکان و حەبەکان.
لە ڕێگەی تایبەتمەندیەکانی داتا یان جاڤاسکڕێپتەوە، پێوەکراوەکە ناوەڕۆکی شاراوە (مینیوەکانی دابەزین) دەگۆڕێت بە گۆڕینی .open
پۆلەکە لەسەر بابەتی لیستی باوک.
لە ئامێرە مۆبایلەکاندا، کردنەوەی درۆپداونێک زیاد دەکات .dropdown-backdrop
وەک ناوچەیەکی لێدان بۆ داخستنی مینیوەکانی دابەزین لەکاتی پەنجەدان لە دەرەوەی مینیوەکە، کە پێویستە بۆ پشتگیرییەکی دروستی iOS. ئەمەش واتە گۆڕین لە مینیویەکی کراوەوە بۆ مینیوی دابەزینێکی جیاواز پێویستی بە لێدانی زیادە هەیە لە مۆبایلدا.
تێبینی: data-toggle="dropdown"
تایبەتمەندییەکە پشتی پێدەبەسترێت بۆ داخستنی مینیوەکانی دابەزین لە ئاستی بەرنامەیەکدا، بۆیە باشترە هەمیشە بەکاری بهێنیت.
زیادکردن data-toggle="dropdown"
بۆ بەستەرێک یان دوگمەیەک بۆ گۆڕینی دابەزینێک.
بۆ ئەوەی URLەکان بە دوگمەکانی بەستەرەکان وەک خۆیان بمێننەوە، data-target
تایبەتمەندییەکە بەکاربهێنە لەبری href="#"
.
لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە درۆپداونەکانەوە بکە:
data-toggle="dropdown"
هێشتا پێویستەبەبێ گوێدانە ئەوەی کە ئایا لە ڕێگەی جاڤاسکڕێپتەوە بانگی دابەزینەکەت دەکەیت یان لەبری ئەوە data-api بەکاردەهێنیت، data-toggle="dropdown"
هەمیشە پێویستە لەسەر توخمە دەستپێکەری دابەزینەکە ئامادە بیت.
هیچ
$().dropdown('toggle')
مینیوی دابەزینی ناوبارێکی دیاریکراو یان گەشتێکی تابکراو دەگۆڕێت.
هەموو ڕووداوەکانی دابەزین لە .dropdown-menu
توخمە باوکەکەی 's تەقە دەکرێن.
هەموو ڕووداوە دابەزینەکان relatedTarget
تایبەتمەندییەکیان هەیە، کە بەهاکەی توخمە ئەنکرەکەی دەگۆڕێت.
جۆری ڕووداو | وەسف |
---|---|
show.bs.دابەزاندن | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک شێوازی show instance بانگ دەکرێت. |
shown.bs.دابەزاندن | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە دابەزینەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون). |
hide.bs.دابەزاندن | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک شێوازی hide instance بانگ کراوە. |
hidden.bs.دابەزاندن | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە درۆپداونەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون). |
پێوەکراوەکەی ScrollSpy بۆ نوێکردنەوەی ئۆتۆماتیکی ئامانجەکانی nav بە پشتبەستن بە شوێنی سکڕۆڵکردنە. ناوچەی خوارەوەی navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە. هەروەها بابەتە لاوەکییەکانی دابەزین تیشک دەخرێنە سەر.
ڕیکلام قیاس keytar، brunch id هونەر ئاهەنگ dolor labore. Pitchfork yr enim lo-fi پێش ئەوەی qui بفرۆشرێن. Tumblr مافی پاسکیل لە کێڵگە بۆ مێز هەرچییەک بێت. Anim keffiyeh کارلێس کاردیگان. کۆشکی وێنەی Velit seitan mcsweeney 3 گورگ مانگ irure. کۆسبی بلوز لۆمۆ جین شۆرت، ویلیامسبێرگ هودی مینیم qui ڕەنگە نەتبیستبێت لەوان et سندوقی متمانە کاردیگان culpa biodiesel wes anderson جوانکاری. Nihil تاتۆی accusamus، cred ئیرۆنی بایۆدیزەل keffiyeh پیشەسازی ullamco consequat.
سکەیتبۆرد سمێڵ ڤێنیام مارفا، سمێڵی چەقۆی ڤێلیت ڤێلیت. سمێڵی فریگان ئەلیکوا کوپیداتات ڤێرۆی mcsweeney. کوپیداتات چوار لۆکۆ نیسی، ئیا هێلڤێتیکا نولا کارلێس. بارهەڵگرێکی خۆراکی بلوزێکی کۆسبی تاتۆی لەسەر کراوە، ڤینێلی mcsweeney's quis non freegan. لۆ-فای وێس ئەندەرسۆن +1 سەرتۆریال. کارلێس ڕاهێنانی نا جوانکاری quis gentrify. بروکلن adipisicing بیرەی دەستی جێگری keytar deserunt.
ئۆکایکات کۆمۆدۆ ئەلیکوا دیلێکتوس. Fap کرافت بیرە deserunt سکەیتبۆرد ea. مافی پاسکیل لۆمۆ adipisicing banh mi, velit ea sunt ئاستی داهاتوو locavore تاکە سەرچاوە قاوە لە magna veniam. ژیانی بەرز id ڤینێل، ئیکۆ پارک consequat quis aliquip banh mi pitchfork. ڤێرۆ ڤی ئێچ ئێس est adipisicing. جانتای نامەبەری کەمترین DIY Consectetur nisi. Cred ex لە، بەردەوام delectus consectetur فەنی پاکەت ئایفۆن.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa جانتای نامەبەر مارفا هەرچییەک بێت بارهەڵگری خۆراکی دیلێکتوس. Sapiente synth id گریمانە. Locavore sed helvetica cliche irony, ڕەشەبا پشیلە کە ڕەنگە نەتبیستبێت لەوان consequat hoodie گلوتین-بێ گلوتین lo-fi fap aliquip. Labore elit placeat پێش ئەوەی بفرۆشرێن، تێری ڕیچاردسۆن proident brunch nesciunt quis cosby بلوز pariatur keffiyeh ut helvetica پیشەسازی. کاردیگان بیرەی دەستی سێتان ڤێلیتی ئامادەکراو. ڤی ئێچ ئێس چامبرای لابۆریس پۆپۆڕ ڤینیام. ئەنیم مۆلیت مینی کۆمۆدۆ ئولامکۆ ڕەشەبا پشیلە.
بەستەرەکانی ناوبار دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>
دەبێت لەگەڵ شتێکدا بگونجێت لە DOM وەک <div id="home"></div>
.
:visible
توخمە نائامانجەکان پشتگوێ دەخرێنئەو توخمانەی ئامانج کە :visible
بەپێی jQuery نین پشتگوێ دەخرێن و بابەتە nav ی هاوبەشیان هەرگیز تیشک ناخرێنە سەر.
گرنگ نییە شێوازی جێبەجێکردنەکە، scrollspy پێویستی بە بەکارهێنانی position: relative;
لەسەر ئەو توخمە هەیە کە سیخوڕی لەسەر دەکەیت. لە زۆربەی حاڵەتەکاندا ئەمە <body>
. لەکاتی سکڕۆڵسپیکردن لەسەر توخمەکانی تر جگە لە <body>
, دڵنیابە کە height
کۆمەڵەیەکت هەیە و overflow-y: scroll;
جێبەجێی دەکەیت.
بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ گەشتکردن لە سەرەوە، زیاد بکە data-spy="scroll"
بۆ ئەو توخمەی کە دەتەوێت سیخوڕی لەسەر بکەیت (بە شێوەیەکی ئاسایی ئەمە دەبێتە <body>
). پاشان data-target
تایبەتمەندییەکە زیاد بکە لەگەڵ ID یان پۆلی توخمە باوکەکەی هەر .nav
پێکهاتەیەکی Bootstrap.
دوای زیادکردنی position: relative;
لە CSS ـەکەتدا، لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:
.scrollspy('refresh')
لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، پێویستە بەم شێوەیە بانگی شێوازی نوێکردنەوە بکەیت:
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-offset=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئۆفسێت | ژماره | 10. 10 | پێکسڵەکان بۆ ئۆفسێت لە سەرەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ. |
جۆری ڕووداو | وەسف |
---|---|
چالاک بکە.bs.scrollspy | ئەم ڕووداوە هەرکاتێک شتێکی نوێ لەلایەن scrollspy چالاک بوو، ئاگرەکە. |
زیادکردنی کارایی تابی خێرا و داینامیکی بۆ گواستنەوە لە ڕێگەی پەنجەرەی ناوەڕۆکی ناوخۆییەوە، تەنانەت لە ڕێگەی مینیوە دابەزینەکانەوە. تابەکانی هێلانەکراو پشتگیری ناکرێت.
جینز خاو ڕەنگە نەتبیستبێت لەوان شۆرت جین ئۆستین. Nesciunt تۆفۆ stumptown aliqua، پاککردنەوەی وەستای ڕیترۆ سینت. سمێڵ کلیشە کاتی، ویلیامسبێرگ کارلێس ڤیگن هێلڤێتیکا. Reprehenderit قەساب ڕیترۆ keffiyeh خەون گیر synth. بلوزێکی کۆسبی eu banh mi، qui irure تێری ڕیچاردسۆن ex squid. Aliquip placeat سەلڤیا سیلوم ئایفۆن. Seitan aliquip quis کاردیگان جل و بەرگی ئەمریکی، قەساب voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
ئەم پێوەکراوە پێکهاتەی گەشتکردنی تابدار درێژ دەکاتەوە بۆ زیادکردنی ناوچەی تابکراو.
تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):
دەتوانیت بە چەند ڕێگەیەک تابەکانی تاک چالاک بکەیت:
دەتوانیت گەشتکردنێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-toggle="tab"
یان data-toggle="pill"
لەسەر توخمێک. زیادکردنی پۆلەکانی nav
و بۆ تابەکە ستایلکردنی تابی Bootstrap جێبەجێ دەکات ، لە کاتێکدا زیادکردنی پۆلەکانی و ستایلکردنی حەب جێبەجێ دەکات .nav-tabs
ul
nav
nav-pills
بۆ ئەوەی تابەکان کاڵ ببنەوە، زیاد بکە .fade
بۆ هەر یەکەیان .tab-pane
. هەروەها دەبێت یەکەم پەنجەرەی تاب دەبێت .in
ناوەڕۆکی سەرەتایی دیار بکات.
$().tab
توخمێکی تاب و کۆنتێنەری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە DOM دا data-target
یان گرێیەکی ئامانجدار بکات. href
لە نموونەکانی سەرەوەدا، تابەکان ئەو <a>
s ن کە data-toggle="tab"
تایبەتمەندییان هەیە.
.tab('show')
تابە پێدراوەکە هەڵدەبژێرێت و ناوەڕۆکی پەیوەندیدار بەوەوە پیشان دەدات. هەر تابێکی تر کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و ناوەڕۆکی پەیوەندیدار بەوەوە دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.tab
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.
لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:
hide.bs.tab
(لە تابە چالاکەکەی ئێستا)show.bs.tab
(لە سەر تابی پیشان دەدرێت)hidden.bs.tab
(لە تابی چالاک پێشوودا، هەمان تابی بۆ hide.bs.tab
ڕووداوەکە)shown.bs.tab
(لە تابی تازە چالاک کە تازە پیشان دراوە، هەمان تابی بۆ show.bs.tab
ڕووداوەکە)ئەگەر پێشتر هیچ تابێک چالاک نەبووە، ئەوا ڕووداوەکانی hide.bs.tab
و hidden.bs.tab
تەقە ناکرێن.
جۆری ڕووداو | وەسف |
---|---|
show.bs.tab | ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت. |
نیشان دراوە.bs.tab | ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت. |
شاردنەوەی.bs.tab | ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت. |
شاراوە.bs.tab | ئەم ڕووداوە دوای ئەوەی تابێکی نوێ پیشان دەدرێت ئاگر دەدات (و بەم شێوەیە تاب چالاکەکەی پێشوو دەشاردرێتەوە). event.target و بەکاربهێنە event.relatedTarget بۆ ئامانجکردنی تابی چالاک پێشوو و تابی چالاک نوێ، بە رێککەوت. |
ئیلهام لە پێوەکراوێکی نایابی jQuery.tipsy وەرگیراوە کە لەلایەن Jason Frame نووسراوە؛ ئامرازەکان وەشانێکی نوێکراوە، کە پشت بە وێنە نابەستێت، CSS3 بۆ ئەنیمەیشنەکان بەکاردەهێنێت، و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی.
ئەو ئامۆژگارییانەی کە ناونیشانەکانیان درێژی سفرە هەرگیز پیشان نادرێن.
بۆ بینینی ئامۆژگاری ئامرازەکان، ماوسەکەت لەسەر ئەم بەستەرانەی خوارەوە دابنێ:
پانتۆڵی توند ئاستی داهاتوو keffiyeh ڕەنگە نەتبیستبێت. کۆشکی وێنە سمێڵ خام جینز لێتەرپرێس جانتای نامەبەری ڤیگن stumptown. کێڵگە بۆ مێز seitan، mcsweeney's fixie بەردەوام quinoa 8-bit جل و بەرگی ئەمریکی خاوەنی تێری ڕیچاردسۆن ڤینێل chambray. سمێڵ ستۆمپتاون، کاردیگانەکان بانه می لۆمۆ ڕەشەبا پشیلە. تۆفۆ بایۆدیزەل ویلیامزبێرگ مارفا، چوار loko mcsweeney's پاککردنەوەی ڤیگن chambray. بەڕاستی پیشەسازێکی ئیرۆنی هەرچییەک بێت keytar , scenester کێڵگە-بۆ-مێز banksy ئاوستی تویتەر دەست freegan cred خاو جینز تاکە سەرچاوە قاوە ڤایرۆس.
چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو.
لەبەر هۆکاری کارایی، Tooltip و Popover data-apis هەڵبژێردراون، واتە دەبێت خۆت سەرەتایییان بکەیت .
یەکێک لە ڕێگاکانی دەستپێکردنی هەموو ئامۆژگارییەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی تایبەتمەندییەکانیان هەڵیانبژێریت data-toggle
:
پێوەکراوەکەی ئامرازەکان ناوەڕۆک و نیشانە لەسەر داواکاری دروست دەکات، و بە شێوازی پێشوەختە ئامرازەکان لە دوای توخمە دەستپێکەرەکەیان دادەنێت.
ئامرازەکە لە ڕێگەی جاڤاسکڕێپتەوە دەستپێبکە:
ئاماژەپێکراوی پێویست بۆ ئامۆژگارییەک تەنها data
تایبەتمەندییەکە و title
لەسەر توخمەکەی HTML دەتەوێت ئامرازێکت هەبێت. مارکاپی دروستکراوی ئامرازێک تا ڕادەیەک سادەیە، هەرچەندە پێویستی بە شوێنێک هەیە (بە شێوازی پێشوەختە، top
لەلایەن پێوەکراوەکەوە بۆ دانراوە).
هەندێک جار دەتەوێت ئامرازێک زیاد بکەیت بۆ هایپەرلینکێک کە چەند دێڕێک دەپێچێتەوە. هەڵسوکەوتی پێشوەختەی پێوەکراوەکەی tooltip ئەوەیە کە بە شێوەی ئاسۆیی و ڕاست لە ناوەڕاستیدا بێت. زیاد بکە white-space: nowrap;
بۆ ئەنکرەکانت بۆ ئەوەی ئەمە ڕوونەدات.
لە کاتی بەکارهێنانی ئامۆژگاری ئامرازەکان لەسەر توخمەکانی ناو a .btn-group
یان an .input-group
, یان لەسەر توخمەکانی پەیوەست بە خشتەکە ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
)، دەبێت بژاردەکە دیاری بکەیت container: 'body'
(لە خوارەوە بەڵگەی لەسەرە) بۆ ئەوەی کاریگەری لاوەکی نەخوازراو نەبێت (وەک گەشەکردنی فراوانتربوونی توخمەکە و/ یان لەدەستدانی گۆشە گوڵاوەکانی کاتێک کە ئامرازەکە دەستپێدەکات).
بۆ ئەو بەکارهێنەرانەی کە بە کیبۆردێک دەڕۆن، و بە تایبەتی بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان، پێویستە تەنها ئامۆژگاری ئامرازەکان زیاد بکەیت بۆ توخمە تەرکیزکراوەکانی کیبۆرد وەک بەستەرەکان، کۆنتڕۆڵەکانی فۆڕم، یان هەر توخمێکی ئارەزوومەندانە کە tabindex="0"
تایبەتمەندییەکی هەیە.
بۆ زیادکردنی ئامرازێک بۆ توخمێک disabled
یان .disabled
توخمێک، توخمەکە بخەرە ناو a <div>
و <div>
لەبری ئەوە توولتیپەکە بەکاربهێنە بۆ ئەو توخمە.
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-animation=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئەنیمەیشن | boolean | ڕاست | گواستنەوەی کاڵبوونەوەی CSS بۆ ئامرازەکە جێبەجێ بکە |
دەفرێک | ڕستە | هەڵە | هەڵە | ئامۆژگاری ئامرازەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: |
دواخستن | ژمارە | شت | 0. 0 | دواکەوتنی پیشاندانی و شاردنەوەی ئامۆژگاری ئامرازەکان (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت پێکهاتەی شت بریتییە لە: |
html | boolean | هەڵە | HTML بخەرە ناو ئامرازەکەوە. ئەگەر هەڵە بێت، text شێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە. |
جێگیرکردن | ڕستە | کردار | 'سەروو' | چۆنێتی جێگیرکردنی ئامرازەکان - سەرەوە | خوارەوە | چەپ | ڕاستە | auto. کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی DOMی ئامرازی وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە |
هەڵبژێرەر | ڕستە | هەڵە | ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی ئامرازەکانی زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە . |
قاڵب | ڕستە | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی ئامرازەکەدا. ئامرازەکان
دەرەوەترین توخمە پێچراوەکە دەبێت |
ناونیشان | ڕستە | کردار | '' | بەهای ناونیشانی پێشوەختە ئەگەر ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە |
وورژاندن | ڕستە | 'hover focus' | چۆن tooltip دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. manual ناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت. |
دەرچەی بینین | ڕستە | شت | کردار | { هەڵبژێرەر: 'جەستە'، پادکردن: 0 } | ئامرازەکە لە سنووری ئەم توخمەدا دەهێڵێتەوە. نموونە: ئەگەر فەنکشنێک بدرێت، بە توخمە دەستپێکەرەکەی DOM node وەک تاکە ئارگومێنتەکەی بانگ دەکرێت. کۆنتێکستەکە |
دەتوانرێت بژاردەکان بۆ ئامۆژگارییە تاکەکەسییەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.
$().tooltip(options)
مامەڵەکارێکی ئامۆژگاری بە کۆمەڵە توخمێکەوە دەبەستێتەوە.
.tooltip('show')
ئامۆژگاری ئامرازی توخمێک ئاشکرا دەکات. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا پیشان بدرێت (واتە پێش ئەوەی shown.bs.tooltip
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمە بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت. ئەو ئامرازانەی کە ناونیشانەکانیان درێژی سفرە هەرگیز پیشان نادرێن.
.tooltip('hide')
ئامۆژگاری ئامرازی توخمێک دەشارێتەوە. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.tooltip
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمە بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت.
.tooltip('toggle')
ئامۆژگاری ئامرازی توخمێک دەگۆڕێت. پێش ئەوەی ئامۆژگاری ئامرازەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.tooltip
یان hidden.bs.tooltip
ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمە بە دەستپێکردنی "دەستی" ئامۆژگاری ئامرازەکە دادەنرێت.
.tooltip('destroy')
ئامرازی توخمێک دەشارێتەوە و لەناو دەبات. ئەو ئامرازانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی هەڵبژاردەی دروست دەکرێن ) selector
ناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.
جۆری ڕووداو | وەسف |
---|---|
نیشاندانی ئامۆژگاری.bs | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
نیشان دراوە.bs.tooltip | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامرازەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
hide.bs.تول ئامۆژگاری | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
hidden.bs.ئامۆژگاری | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە ئامۆژگاری ئامێرەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی CSS). |
inserted.bs.ئامۆژگاری ئامرازەکان | ئەم ڕووداوە دوای show.bs.tooltip ڕووداوەکە کاتێک قاڵبی ئامۆژگاری ئامرازەکان بۆ DOM زیاد کراوە، ئاگر دەکرێتەوە. |
زیادکردنی سەرپۆشی بچووکی ناوەڕۆک، وەک ئەوانەی لە ئایپاددان، بۆ هەر توخمێک بۆ نیشتەجێکردنی زانیارییە لاوەکییەکان.
ئەو پۆپۆڤەرانەی کە هەردوو ناونیشان و ناوەڕۆکیان درێژی سفرە هەرگیز پیشان نادرێن.
Popovers پێویستە پێوەکراوەکەی tooltip لە وەشانی Bootstrap ی تۆدا هەبێت.
لەبەر هۆکاری کارایی، Tooltip و Popover data-apis هەڵبژێردراون، واتە دەبێت خۆت سەرەتایییان بکەیت .
یەکێک لە ڕێگاکانی دەستپێکردنی هەموو پۆپۆڤەرەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی data-toggle
تایبەتمەندیەکەیان هەڵبژێریت:
لە کاتی بەکارهێنانی popovers لەسەر توخمەکانی ناو a .btn-group
یان an .input-group
، یان لەسەر توخمەکانی پەیوەست بە خشتەکە ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
)، دەبێت بژاردەکە دیاری بکەیت container: 'body'
(لە خوارەوە بەڵگەی لەسەرە) بۆ ئەوەی کاریگەری لاوەکی نەخوازراو نەبێت (وەک گەشەکردنی فراوانتربوونی توخمەکە و/ یان لەدەستدانی گۆشە گوڵاوەکانی کاتێک پۆپۆڤەرەکە دەستپێدەکات).
بۆ زیادکردنی پۆپۆڤەر بۆ a disabled
یان .disabled
توخمەکە، توخمەکە بخەرە ناو a <div>
و لەبری ئەوە پۆپۆڤەرەکە بەکاربهێنە بۆ ئەو توخمە <div>
.
هەندێک جار دەتەوێت پۆپۆڤەرێک زیاد بکەیت بۆ هایپەرلینکێک کە چەند دێڕێک دەپێچێتەوە. هەڵسوکەوتی پێشوەختەی پێوەکراوەکەی popover ئەوەیە کە بە شێوەی ئاسۆیی و ڕاست لە ناوەڕاستیدا بێت. زیاد بکە white-space: nowrap;
بۆ ئەنکرەکانت بۆ ئەوەی ئەمە ڕوونەدات.
چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو.
Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.
Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.
Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.
Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.
بەکارهێنانی focus
تریگەر بۆ ڕەتکردنەوەی پۆپۆڤەرەکان لە کلیکی داهاتوودا کە بەکارهێنەر دەیکات.
بۆ هەڵسوکەوتی دروستی cross-browser و cross-platform، پێویستە تاگەکە بەکاربهێنیت <a>
نەک تاگەکە ، <button>
هەروەها دەبێت تایبەتمەندیەکانی role="button"
و tabindex
لەخۆبگریت.
چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-animation=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئەنیمەیشن | boolean | ڕاست | گواستنەوەی کاڵبوونەوەی CSS بۆ popover بەکاربهێنە |
دەفرێک | ڕستە | هەڵە | هەڵە | پۆپۆڤەرەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: |
ناوەڕۆک | ڕستە | کردار | '' | بەهای ناوەڕۆکی پێشوەختە ئەگەر ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە |
دواخستن | ژمارە | شت | 0. 0 | دواکەوتنی پیشاندانی و شاردنەوەی پۆپۆڤەر (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت پێکهاتەی شت بریتییە لە: |
html | boolean | هەڵە | HTML بخەرە ناو popoverەکەوە. ئەگەر هەڵە بێت، text شێوازی jQuery بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە. |
جێگیرکردن | ڕستە | کردار | 'ڕاست' | چۆنێتی جێگیرکردنی پۆپۆڤەر - سەرەوە | خوارەوە | چەپ | ڕاستە | auto. کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی popover DOM وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە |
هەڵبژێرەر | ڕستە | هەڵە | ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی پۆپۆڤەر دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی popovers زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە . |
قاڵب | ڕستە | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی popover. پۆپۆڤەرەکان پۆپۆڤەرەکان
دەرەوەترین توخمە پێچراوەکە دەبێت |
ناونیشان | ڕستە | کردار | '' | بەهای ناونیشانی پێشوەختە ئەگەر ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە |
وورژاندن | ڕستە | 'کلیک' | چۆن popover دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. manual ناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت. |
دەرچەی بینین | ڕستە | شت | کردار | { هەڵبژێرەر: 'جەستە'، پادکردن: 0 } | پۆپۆڤەر لە سنووری ئەم توخمەدا دەهێڵێتەوە. نموونە: ئەگەر فەنکشنێک بدرێت، بە توخمە دەستپێکەرەکەی DOM node وەک تاکە ئارگومێنتەکەی بانگ دەکرێت. کۆنتێکستەکە |
دەتوانرێت بژاردەکان بۆ تاکە پۆپۆڤەرەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.
$().popover(options)
پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.
.popover('show')
پۆپۆڤەری توخمێک ئاشکرا دەکات. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.popover
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت. ئەو پۆپۆڤەرانەی کە هەردوو ناونیشان و ناوەڕۆکیان درێژی سفرە هەرگیز پیشان نادرێن.
.popover('hide')
پۆپۆڤەری توخمێک دەشارێتەوە. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.popover
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت.
.popover('toggle')
پۆپۆڤەری توخمێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی لە ڕاستیدا popover پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.popover
یان hidden.bs.popover
ڕووبدات). ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت.
.popover('destroy')
پۆپۆڤەری توخمێک دەشارێتەوە و لەناو دەبات. ئەو پۆپۆڤەرانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی بژاردەی دروست دەکرێن ) selector
ناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.
جۆری ڕووداو | وەسف |
---|---|
show.bs.popover | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
نیشان دراوە.bs.popover | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە پۆپۆڤەرەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
شاردنەوە.bs.popover | ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide شێوازی نموونە بانگ کراوە. |
شاراوە.bs.popover | ئەم ڕووداوە کاتێک تەقە دەکرێت کە popover تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن). |
جێگیرکراوە.bs.popover | ئەم ڕووداوە دوای show.bs.popover ڕووداوەکە کاتێک قاڵبی popover زیاد کراوە بۆ DOM کاردەکاتە دەرەوە. |
زیادکردنی کارایی ڕەتکردنەوە بۆ هەموو نامەکانی ئاگادارکردنەوە بەم پێوەکراوە.
لە کاتی بەکارهێنانی .close
دوگمەیەکدا، دەبێت یەکەم منداڵی ئەو بێت .alert-dismissible
و هیچ ناوەڕۆکێکی دەق نابێت لە مارکاپەکەدا پێشی بێت.
ئەم و ئەو بگۆڕە و دووبارە هەوڵبدەرەوە. دویس مۆلیس، ئیست نۆن کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا، ئیگێت لاسینیا ئۆدیۆ سێم ئێلیت. کراس ماتیس کۆنسێکتێتور پوروس دانیشتن amet fermentum.
تەنها زیاد بکە data-dismiss="alert"
بۆ دوگمەی داخستنی خۆت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کارایی داخستنی ئاگادارکردنەوە بدەیت. داخستنی ئاگادارکردنەوەیەک لە DOM لا دەبات.
بۆ ئەوەی ئاگادارکردنەوەکانت لە کاتی داخستنیدا ئەنیمەیشن بەکاربهێنن، دڵنیابە کە .fade
و ....in
پێشتر پۆلەکانی ویان بۆ جێبەجێ کراوە
$().alert()
وا دەکات ئاگادارکردنەوەیەک گوێ لە ڕووداوەکانی کلیک بگرێت لەسەر توخمە نەوەکان کە data-dismiss="alert"
تایبەتمەندیەکەیان هەیە. (پێویست نییە لە کاتی بەکارهێنانی دەستپێکردنی ئۆتۆماتیکی data-api.)
$().alert('close')
ئاگادارکردنەوەیەک دادەخات بە لابردنی لە DOM. ئەگەر پۆلەکانی .fade
و .in
لەسەر توخمەکە ئامادە بن، ئاگادارکردنەوەکە پێش لابردنی کاڵ دەبێتەوە.
پێوەکراوەکەی ئاگادارکردنەوەی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی ئاگادارکردنەوە.
جۆری ڕووداو | وەسف |
---|---|
داخستنی.bs.alert | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک close شێوازی نموونە بانگ دەکرێت. |
داخراو.bs.alert | ئەم ڕووداوە کاتێک ئاگادار دەکرێتەوە کە ئاگادارکردنەوەکە داخراوە (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن). |
بە دوگمەکان زیاتر بکە. دوگمەی کۆنترۆڵکردن دەڵێت یان گروپێک لە دوگمە دروست بکە بۆ پێکهاتەی زیاتر وەک توولبارەکان.
فایەرفۆکس بەردەوام دەبێت لە دۆخی کۆنترۆڵکردنی فۆڕم (ناچالاکبوون و پشکنین) لە سەرانسەری بارکردنی لاپەڕەکاندا . چارەسەرێک بۆ ئەمە بەکارهێنانی autocomplete="off"
. سەیری هەڵەی مۆزیلا بکە #654072 .
زیادکردن data-loading-text="Loading..."
بۆ بەکارهێنانی دۆخی بارکردن لەسەر دوگمەیەک.
ئەم تایبەتمەندییە لە v3.3.5 ەوە بەکارنەهاتووە و لە v4 دا لابراوە.
لە پێناو ئەم نمایشەدا، ئێمە data-loading-text
و بەکاردەهێنین $().button('loading')
، بەڵام ئەوە تاکە ویلایەت نییە کە دەتوانیت بەکاری بهێنیت. لە خوارەوە لە $().button(string)
بەڵگەنامەکاندا زیاتر لەم بارەیەوە ببینە .
زیادکردن data-toggle="button"
بۆ چالاککردنی گۆڕانکاری لەسەر یەک دوگمە.
.active
و ...aria-pressed="true"
بۆ دوگمەکانی پێش گۆڕانکاری، دەبێت .active
پۆلەکە و aria-pressed="true"
تایبەتمەندییەکە زیاد بکەیت بۆ button
خۆت.
زیاد بکە data-toggle="buttons"
بۆ .btn-group
سندوقێکی هەڵبژاردن یان هاتنەژوورەوەی ڕادیۆیی تێدایە بۆ چالاککردنی گۆڕانکاری لە ستایلەکانیاندا.
.active
بۆ هەڵبژاردە پێشوەختە هەڵبژێردراوەکان، پێویستە خۆت .active
پۆلەکە زیاد بکەیت بۆ ئینپوتەکە label
.
ئەگەر دۆخی هەڵبژێردراوی دوگمەی سندوقی هەڵبژاردن نوێ بکرێتەوە بەبێ ئەوەی click
ڕووداوێک لەسەر دوگمەکە تەقێنرێت (بۆ نموونە لە ڕێگەی <input type="reset">
یان لە ڕێگەی ڕێکخستنی checked
تایبەتمەندی ئینپوتەکە)، پێویستە خۆت .active
پۆلەکە لەسەر ئینپوتەکە بگۆڕیت label
.
$().button('toggle')
دۆخی پاڵنەر دەگۆڕێت. ئەو ڕواڵەتە دەدات بە دوگمەکە کە چالاک کراوە.
$().button('reset')
دۆخی دوگمە دەگەڕێنێتەوە - دەق دەگۆڕێت بۆ دەقی ئەسڵی. ئەم شێوازە ناهاوسەنگە و پێش ئەوەی ڕێستکردنەکە بەڕاستی تەواو بێت دەگەڕێتەوە.
$().button(string)
دەق دەگۆڕێت بۆ هەر دۆخێکی دەقی پێناسەکراوی داتا.
پێوەکراوێکی نەرم و نیان کە مشتێک پۆل بەکاردەهێنێت بۆ هەڵسوکەوتی ئاسانی گۆڕینی.
داڕشتن پێویستی بەوەیە کە پێوەکراوەکەی transitions لە وەشانی Bootstrap ـەکەتدا جێگیر بکرێت.
بۆ پیشاندانی و شاردنەوەی توخمێکی تر لە ڕێگەی گۆڕینی پۆلەکانەوە کلیک لە دوگمەکانی خوارەوە بکە:
.collapse
ناوەڕۆک دەشارێتەوە.collapsing
لە کاتی گواستنەوەکاندا بەکاردەهێنرێت.collapse.in
ناوەڕۆک نیشان دەداتدەتوانیت بەستەرێک بەکاربهێنیت کە href
تایبەتمەندییەکەی تێدایە، یان دوگمەیەک بە data-target
تایبەتمەندییەکە. لە هەردوو حاڵەتەکەدا، the data-toggle="collapse"
is required.
هەڵسوکەوتی داڕمانی پێشوەختە درێژ بکەرەوە بۆ دروستکردنی ئاکۆردیۆنێک لەگەڵ پێکهاتەی پانێڵەکە.
هەروەها دەتوانرێت .panel-body
s بە .list-group
s بگۆڕدرێتەوە.
دڵنیابە زیاد بکە aria-expanded
بۆ توخمە کۆنترۆڵەکە. ئەم تایبەتمەندییە بە ڕوونی دۆخی ئێستای توخمە داڕووخاوەکە بۆ خوێنەرانی شاشە و تەکنەلۆژیا یارمەتیدەرە هاوشێوەکان پێناسە دەکات. ئەگەر توخمە داخراوەکە بە شێوازی پێشوەختە داخراو بێت، پێویستە بەهای aria-expanded="false"
. ئەگەر توخمە داخراوەکەت بە شێوازی پێشوەختە بە بەکارهێنانی in
پۆلەکە ڕێکخستووە کە کراوە بێت، aria-expanded="true"
لەبری ئەوە لەسەر کۆنتڕۆڵەکە ڕێکبخە. پێوەکراوەکە بە شێوەیەکی ئۆ��ۆماتیکی ئەم تایبەتمەندییە دەگۆڕێت بە پشتبەستن بەوەی کە ئایا توخمە داخراوەکە کراوەتەوە یان داخراوە یان نا.
سەرەڕای ئەوە، ئەگەر توخمە کۆنترۆڵەکەت تاکە توخمێکی داڕووخاو دەکاتە ئامانج – واتە data-target
تایبەتمەندییەکە ئاماژە بە id
هەڵبژێرەرێک دەکات – دەتوانیت تایبەتمەندییەکی زیادە زیاد بکەیت aria-controls
بۆ توخمە کۆنترۆڵەکە، کە id
توخمە داڕووخاوەکەی تێدایە. خوێنەری شاشەی مۆدێرن و تەکنەلۆژیای یارمەتیدەری هاوشێوە لەم تایبەتمەندییە کەڵک وەردەگرن بۆ ئەوەی بەکارهێنەران کورتە ڕێگای زیادە بدەن بۆ ئەوەی ڕاستەوخۆ بچنە سەر خودی توخمە داڕووخاوەکە.
پێوەکراوەکەی داڕمان چەند پۆلێک بەکاردەهێنێت بۆ مامەڵەکردن لەگەڵ بەرزکردنەوەی قورس:
.collapse
ناوەڕۆکەکە دەشارێتەوە.collapse.in
ناوەڕۆکەکەی نیشان دەدات.collapsing
کاتێک گواستنەوەکە دەست پێدەکات زیاد دەکرێت، و کاتێک تەواو دەبێت لادەبرێتئەم پۆلانە دەتوانرێت لە component-animations.less
.
تەنها زیاد بکە data-toggle="collapse"
و a data-target
بۆ توخمەکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی توخمێکی داڕووخاو دیاری بکەیت. تایبەتمەندییەکە data-target
هەڵبژێرەری CSS قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە collapse
بۆ توخمە داخراوەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکەin
.
بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ کۆنتڕۆڵێکی داخراو، تایبەتمەندی داتا زیاد بکە data-parent="#selector"
. بۆ بینینی ئەمە بە کردار ئاماژە بە دیمۆکە بکە.
بە دەست چالاک بکە لەگەڵ:
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-parent=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
دایک و باوک | هەڵبژێرەر | هەڵە | ئەگەر هەڵبژێرەرێک دابینکرابێت، ئەوا هەموو توخمە داڕووخێنراوەکانی ژێر دایک و باوکی دیاریکراو دادەخرێن کاتێک ئەم بابەتە داخراوە پیشان دەدرێت. (هاوشێوەی ڕەفتاری ئەکۆردیۆنی تەقلیدییە - ئەمە وابەستەی panel پۆلەکەیەتی) |
toggle بکە | boolean | ڕاست | توخمە داخراوەکە لە کاتی بانگکردندا دەگۆڕێت |
.collapse(options)
ناوەڕۆکەکەت وەک توخمێکی داخراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object
.
.collapse('toggle')
توخمێکی داڕووخاو دەگۆڕێت بۆ پیشاندانی یان شاراوە. دەگەڕێتەوە بۆ بانگکەر پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.collapse
یان hidden.bs.collapse
ڕووبدات).
.collapse('show')
توخمێکی داڕووخاو نیشان دەدات. پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا پیشان بدرێت (واتە پێش ئەوەی shown.bs.collapse
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.
.collapse('hide')
توخمێکی داڕووخاو دەشارێتەوە. پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.collapse
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.
پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.
جۆری ڕووداو | وەسف |
---|---|
نیشاندانی.bs.collapse | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
نیشان دراوە.bs.collapse | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
شاردنەوە.bs.collapse | ئەم ڕووداوە دەستبەجێ تەقە دەکرێت کاتێک hide میتۆدەکە بانگ کراوە. |
شاراوە.bs.collapse | ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان لە بەکارهێنەر شاراوەتەوە (چاوەڕوان دەکات بۆ تەواوبوونی گواستنەوەکانی CSS). |
پێکهاتەیەکی سلایدشۆ بۆ پاسکیلسواری بەناو توخمەکاندا، وەکو کارۆسێل. کارۆسێلەکانی هێلانەکراو پشتگیری ناکرێت.
پێکهاتەی کارۆسێل بەگشتی لەگەڵ ستانداردەکانی دەستڕاگەیشتن ناگونجێت. ئەگەر پێویستت بە پابەندبوونە، تکایە بژاردەی تر لەبەرچاو بگرە بۆ پێشکەشکردنی ناوەڕۆکەکەت.
بووتستراپ بە تایبەتی CSS3 بەکاردەهێنێت بۆ ئەنیمەیشنەکانی، بەڵام ئینتەرنێت ئێکسپلۆرەر ٨ و ٩ پشتگیری لە تایبەتمەندییە پێویستەکانی CSS ناکات. بەم شێوەیە لە کاتی بەکارهێنانی ئەم وێبگەڕانەدا هیچ ئەنیمەیشنێکی گواستنەوەی سلاید نییە. ئێمە بە مەبەست بڕیارمان داوە کە فالباکەکانی بنەمادار بە jQuery بۆ گواستنەوەکان نەخەینە ناوەوە.
پێویستە .active
پۆلەکە زیاد بکرێت بۆ یەکێک لە سلایدەکان. ئەگەرنا کارۆسێلەکە دیار نابێت.
مەرج نییە پۆلەکانی .glyphicon .glyphicon-chevron-left
و .glyphicon .glyphicon-chevron-right
پێویست بن بۆ کۆنتڕۆڵەکان. Bootstrap دابین دەکات .icon-prev
و .icon-next
وەک بەدیلەکانی یونیکۆدی سادە.
زیادکردنی کەپشن بۆ سلایدەکانت بە ئاسانی بە .carousel-caption
توخمەکە لەناو هەر .item
. تەنها نزیکەی هەر HTML ی هەڵبژاردە لەناو ئەوێدا دابنێ و بە شێوەیەکی ئۆتۆماتیکی ڕێکدەخرێت و فۆرمات دەکرێت.
کارۆسێلەکان پێویستیان بە بەکارهێنانی ئامێرێک هەیە id
لەسەر دەرەوەترین دەفر (the .carousel
) بۆ ئەوەی کۆنتڕۆڵەکانی کارۆسێلەکان بە باشی کاربکەن. لە کاتی زیادکردنی چەندین کارۆسێل، یان لە کاتی گۆڕینی کارۆسێلێک id
، دڵنیابە لە نوێکردنەوەی کۆنتڕۆڵە پەیوەندیدارەکان.
تایبەتمەندی داتا بەکاربهێنە بۆ ئەوەی بە ئاسانی شوێنی کارۆسێلەکە کۆنتڕۆڵ بکەیت. data-slide
وشە سەرەکییەکان prev
یان قبوڵ دەکات next
، کە شوێنی سلایدەکە دەگۆڕێت بە بەراورد بە شوێنی ئێستای. یانیش، بەکاربهێنە data-slide-to
بۆ تێپەڕاندنی ئیندێکسی خام سلاید بۆ کارۆسێل data-slide-to="2"
, کە شوێنی سلایدەکە دەگۆڕێت بۆ ئیندێکسێکی تایبەت کە بە0
.
تایبەتمەندییەکە data-ride="carousel"
بەکاردێت بۆ نیشاندانی کارۆسێلێک وەک ئەنیمەیشنێک کە لە کاتی بارکردنی لاپەڕەوە دەست پێدەکات. ناتوانرێت بە تێکەڵکردن لەگەڵ (زیادە و ناپێویست) دەستپێکردنی ڕوونی جاڤاسکڕێپتی هەمان کارۆسێل بەکاربهێنرێت.
بە دەستی پەیوەندی بە کارۆسێلەوە بکە بەم شێوەیە:
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-interval=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
نێوانیان | ژماره | 5000 | بڕی کات بۆ دواکەوتن لە نێوان پاسکیلکردنی ئۆتۆماتیکی شتێک. ئەگەر درۆ بێت، کارۆسێل بە شێوەیەکی ئۆتۆماتیکی خول ناکات. |
وچان | ڕستە | هیچ | "hover" | ئەگەر لەسەر . "hover" _ ئەگەر لەسەر .mouseenter mouseleave null |
پێچانەوە | boolean | ڕاست | ئایا کارۆسێلەکە دەبێت بە بەردەوامی پاسکیل بسوڕێتەوە یان وێستگەی سەختی هەبێت. |
کیبۆرد | boolean | ڕاست | ئایا پێویستە کارۆسێلەکە کاردانەوەی هەبێت بەرامبەر بە ڕووداوەکانی کیبۆرد. |
.carousel(options)
کارۆسێلەکە بە بژاردەیەکی ئیختیاری object
دەستپێدەکات و دەست دەکات بە پاسکیلسواری لە ڕێگەی شتەکانەوە.
.carousel('cycle')
لە چەپەوە بۆ ڕاست بەناو شتەکانی کارۆسێلدا دەسوڕێتەوە.
.carousel('pause')
کارۆسێلەکە لە پاسکیلسواری لە ڕێگەی شتەکانەوە ڕادەگرێت.
.carousel(number)
کارۆسێلەکە دەخولێنێتەوە بۆ چوارچێوەیەکی دیاریکراو (بە بنەمای 0، هاوشێوەی ڕیزبەندییەک).
.carousel('prev')
خولگە دەکات بۆ بابەتی پێشوو.
.carousel('next')
خولگە دەکات بۆ بابەتی داهاتوو.
پۆلی کارۆسێلی بووتستراپ دوو ڕووداو بۆ پەیوەستکردن بە کارایی کارۆسێلەوە ئاشکرا دەکات.
هەردوو ڕووداوەکە ئەم تایبەتمەندییە زیادانەی خوارەوەیان هەیە:
direction
: ئەو ئاراستەیەی کە کارۆسێلەکە پێی دەخلیسکێت (یان "left"
یان "right"
).relatedTarget
: ئەو توخمەی DOM کە وەک بابەتی چالاک دەخلیسکێتە شوێنی خۆی.هەموو ڕووداوەکانی کارۆسێلەکە لە خودی کارۆسێلەکە تەقە دەکرێن (واتە لە <div class="carousel">
).
جۆری ڕووداو | وەسف |
---|---|
slide.bs.carousel | ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک slide شێوازی نموونە بانگهێشت دەکرێت. |
slid.bs.کارۆسێل | ئەم ڕووداوە کاتێک تەقە دەکرێت کە کارۆسێلەکە گواستنەوەی خلیسکێنەی خۆی تەواو کردبێت. |
پێوەکراوەکانی پەیوەستکردنەکە دەگۆڕێت position: fixed;
و دەکوژێتەوە، ئەو کاریگەرییەی کە بە دۆزراوەتەوە وەرئەگرێت position: sticky;
. ژێرناوچەی لای ڕاست دیمۆیەکی ڕاستەوخۆی پێوەکراوەکەی ئافیکسە.
پێوەکراوەکە لە ڕێگەی تایبەتمەندییەکانی داتا یان بە دەستی بە جاڤاسکڕێپتی تایبەت بە خۆت بەکاربهێنە. لە هەردوو بارودۆخەکەدا، پێویستە CSS بۆ شوێن و پانایی ناوەڕ��کی لێدراوەکەت دابین بکەیت.
تێبینی: پێوەکراوەکەی پەیوەستکردن لەسەر توخمێک بەکارمەهێنە کە لە توخمێکی تاڕادەیەک جێگیردا هەیە، وەک ستوونی ڕاکێشراو یان پاڵنراو، بەهۆی هەڵەی ڕەندەری سەفاری .
پێوەکراوەکە لە نێوان سێ پۆلدا دەگۆڕێت، هەریەکەیان نوێنەرایەتی دۆخێکی تایبەت دەکەن: .affix
, .affix-top
, و .affix-bottom
. پێویستە ستایلەکان دابین بکەیت، جگە لە position: fixed;
on .affix
, بۆ ئەم پۆلانە خۆت (سەربەخۆ لەم پێوەکراوە) بۆ مامەڵەکردن لەگەڵ شوێنە ڕاستەقینەکان.
لێرەدا چۆنێتی کارکردنی پێوەکراوەکانی affix دەبینین:
.affix-top
بۆ ئەوەی ئاماژە بەوە بکات کە توخمەکە لە سەرەوەترین شوێنی خۆیدایە. لەم خاڵەدا پێویست بە جێگیرکردنی CSS ناکات..affix
جێگرەوە .affix-top
و سێت دەکات position: fixed;
(لەلایەن CSS ی Bootstrap دابینکراوە)..affix
بە .affix-bottom
. بەو پێیەی ئۆفسێتەکان هەڵبژاردەن، ڕێکخستنی یەکێکیان پێویستە CSS ی گونجاو دابنێیت. لەم حاڵەتەدا position: absolute;
لەکاتی پێویستدا زیاد بکە. پێوەکراوەکە تایبەتمەندی داتا یان هەڵبژاردەی جاڤاسکڕێپت بەکاردەهێنێت بۆ دیاریکردنی ئەوەی کە توخمەکە لەوێوە لە کوێ دابنێت.بۆ ڕێکخستنی CSS ـەکەت بۆ هەریەکێک لە هەڵبژاردەکانی بەکارهێنان لە خوارەوە هەنگاوەکانی سەرەوە پەیڕەو بکە.
بۆ ئەوەی بە ئاسانی هەڵسوکەوتی affix زیاد بکەیت بۆ هەر توخمێک، تەنها زیاد بکە data-spy="affix"
بۆ ئەو توخمە کە دەتەوێت سیخوڕی لەسەر بکەیت. ئۆفسێتەکان بەکاربهێنە بۆ پێناسەکردنی کەی پینکردنی توخمێک بگۆڕیت.
لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە پێوەکراوەکانی affix بکە:
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-offset-top="200"
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
ئۆفسێت | ژمارە | فەنکشن | شت | 10. 10 | پێکسڵەکان بۆ ئۆفسێت لە شاشەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ. ئەگەر یەک ژمارە دابین بکرێت، ئۆفسێتەکە بە هەردوو ئاراستەی سەرەوە و خوارەوە جێبەجێ دەکرێت. بۆ دابینکردنی ئۆفسێتی ناوازە و خوارەوە و سەرەوە تەنها شتێک دابین بکە offset: { top: 10 } یان offset: { top: 10, bottom: 5 } . کاتێک پێویستت بە حیسابکردنی ئۆفسێتێکە بە شێوەیەکی داینامیکی فەنکشنێک بەکاربهێنە. |
ئامانج | هەڵبژێرەر | گرێ | توخمێکی jQuery | window شتەکە _ |
توخمە ئامانجی پاشگرەکە دیاری دەکات. |
.affix(options)
ناوەڕۆکەکەت وەک ناوەڕۆکی لکێنراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object
.
.affix('checkPosition')
دۆخی هاوپێچەکە بە پشتبەستن بە ڕەهەندەکان و شوێن و شوێنی سکڕۆڵی توخمە پەیوەندیدارەکان حیساب دەکاتەوە. , .affix
, .affix-top
و .affix-bottom
پۆلەکان بەپێی دۆخی نوێ زیاد دەکرێن یان لە ناوەڕۆکی لێدراو لادەبرێن. ئەم شێوازە پێویستی بە بانگکردن هەیە هەرکاتێک ڕەهەندەکانی ناوەڕۆکی لکێنراو یان توخمە ئامانجەکە بگۆڕدرێن، بۆ دڵنیابوون لە جێگیرکردنی دروستی ناوەڕۆکی لکێنراو.
پێوەکراوەکەی affix ی Bootstrap چەند ڕووداوێک بۆ پەیوەستکردن بە کارایی affix ئاشکرا دەکات.
جۆری ڕووداو | وەسف |
---|---|
affix.bs.ئافیکس | ئەم ڕووداوە ڕاستەوخۆ پێش ئەوەی توخمەکە لێبدرێت ئاگر دەداتەوە. |
پەیوەست.bs.affix | ئەم ڕووداوە دوای ئەوەی توخمەکە لکێنراوە، ئاگر دەکرێتەوە. |
affix-top.bs.ئافیکس | ئەم ڕووداوە ڕاستەوخۆ پێش ئەوەی توخمەکە چەسپێنرێت-سەرەوە ئاگرەکە. |
affixed-top.bs.لێدان | ئەم ڕووداوە دوای ئەوەی توخمەکە لکێنراوە-top دەکرێتەوە. |
affix-bottom.bs.ئافیکس | ئەم ڕووداوە ڕاستەوخۆ پێش ئەوەی توخمەکە چەسپێنرێت-خوارەوە ئاگر دەدات. |
affixed-bottom.bs.لێدان | ئەم ڕووداوە دوای ئەوەی توخمەکە لکێنراوە-خوارەوە تەقێنراوە. |