جاڤاسکڕێپت

پێکهاتەکانی Bootstrap بە ژیان بهێنە-ئێستا بە 13 پێوەکراوەکانی jQuery تایبەتمەند.

سەرەکان بەرز دەکەنەوە! ئەم دۆکیومێنتانە بۆ v2.3.2 یە کە چیتر بە فەرمی پشتگیری ناکرێت. سەیری نوێترین وەشانی Bootstrap بکەن!

تاکەکەسی یان کۆکراوە

دەتوانرێت پێوەکراوەکان بە تاک جێگیر بکرێن (هەرچەندە هەندێکیان پێویستیان بە وابەستەیی هەبووە)، یان هەموویان بە یەکجار. هەردوو bootstrap.js و bootstrap.min.js هەموو پێوەکراوەکان لە یەک فایلدا لەخۆدەگرن.

تایبەتمەندیەکانی داتا

دەتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی API ی مارکاپەوە بەبێ ئەوەی یەک دێڕی جاڤاسکڕێپت بنووسیت. ئەمە API ی پلە یەکەمی Bootstrap ە و دەبێت یەکەم ڕەچاوکردنت بێت لە کاتی بەکارهێنانی پێوەکراوێکدا.

کە ووتمان، لە هەندێک بارودۆخدا ڕەنگە خواستراو بێت ئەم کاراییە بکوژێنرێتەوە. بۆیە، ئێمە توانای لەکارخستنی API تایبەتمەندی داتاش دەدەین بە هەڵوەشاندنەوەی هەموو ڕووداوەکان لەسەر ناوی جەستە کە بە `'data-api'` جیاکراوەتەوە. ئەمەش بەم شێوەیە دەردەکەوێت:

  1. $ ( 'جەستە' ). کوژاوەتەوە ( '.data-api' )

یان بۆ بە ئامانجگرتنی پێوەکراوێکی دیاریکراو، تەنها ناوی پێوەکراوەکە وەک ناوچەی ناو لەگەڵ شوێنی ناوی data-api بەم شێوەیە دابنێ:

  1. $ ( 'جەستە' ). کوژاوەتەوە ( '.alert.data-api' )

API بەرنامەیی

هەروەها ئێمە پێمان وایە پێویستە بتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی JavaScript API ەوە. هەموو API گشتیەکان شێوازی تاک و زنجیرن و ئەو کۆکردنەوە دەگەڕێننەوە کە کاریان لەسەر کراوە.

  1. $ ( ".btn.مەترسی" ). دوگمەی ( "toggle" ). addClass ( "چەوری" )

هەموو شێوازەکان دەبێ شتێکی هەڵبژاردەی هەڵبژاردە قبوڵ بکەن، ڕستەیەک کە شێوازێکی دیاریکراو دەکاتە ئامانج، یان هیچ (کە پێوەکراوێک بە هەڵسوکەوتی پێشوەختە دەستپێدەکات):

  1. $ ( "#مۆداڵی من" ). modal () // بە پێشوەختە سەرەتایی کراوە
  2. $ ( "#مۆداڵی من" ). modal ({ keyboard : false }) // دەستپێکراوە بەبێ کیبۆرد
  3. $ ( "#مۆداڵی من" ). modal ( 'show' ) // دەستبەجێ دەستپێدەکات و بانگهێشتی show دەکات

هەروەها هەر پێوەکراوێک بنیاتنەرە خاوەکەی لەسەر تایبەتمەندییەکی `Constructor` ئاشکرا دەکات: $.fn.popover.Constructor. ئەگەر دەتەوێت نموونەیەکی پێوەکراوێکی تایبەت بەدەست بهێنیت، ڕاستەوخۆ لە توخمێکەوە وەریبگرەوە: $('[rel=popover]').data('popover').

بێ ململانێ

هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflictئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.

  1. var دوگمەی bootstrap = $ . fn . دوگمەی . noConflict () // گەڕانەوەی $.fn.button بۆ بەهای پێشتر دیاریکراو
  2. $ . fn . bootstrapBtn = bootstrapButton // کارایی bootstrap بدە بە $().bootstrapBtn

ڕووداوەکان

بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.

هەموو ڕووداوە بێکۆتاییەکان کارایی preventDefault دابین دەکەن. ئەمەش توانای وەستاندنی جێبەجێکردنی کردارێک پێش دەستپێکردنی دەدات.

  1. $ ( '#مۆداڵی من' ). on ( 'نیشاندان' , فەنکشن ( e ) {
  2. ئەگەر (! داتا ) بگەڕێنەرەوە e . preventDefault () // مۆدال لە پیشاندانی ڕادەگرێت
  3. })

دەربارەی گواستنەوەکان

بۆ کاریگەرییە سادەکانی گواستنەوە، جارێک bootstrap-transition.js لە پاڵ پەڕگەکانی تری JS دابنێ. ئەگەر تۆ bootstrap.js ی کۆکراوە (یان بچووککراو) بەکاردەهێنیت ، پێویست ناکات ئەمە بخەیتە ناوەوە- پێشتر لەوێیە.

کەیسەکانی بەکارهێنان

چەند نموونەیەک لە پێوەکراوەکەی گواستنەوە:

  • خلیسکان یان کاڵبوونەوە لە مۆداڵەکاندا
  • کاڵبوونەوەی تابەکان
  • کاڵبوونەوەی ئاگادارکردنەوەکان
  • پەنجەرەی کارۆسێلی خلیسکێنە

نموونە

مۆداڵەکان ڕێکخراون، بەڵام نەرم و نیان، دیالۆگ ئامۆژگاری بە کەمترین کارایی پێویست و پێشوەختە زیرەکەکان.

نموونەی ئیستاتیک

مۆداڵی ڕەندەرکراو بە سەردێڕ و جەستە و کۆمەڵێک کردار لە ژێرەوەدا.

  1. <div class = "کاڵبوونەوەی شاردنەوەی مۆداڵی" >
  2. <div class = "سەردێڕی مۆداڵی" >
  3. < جۆری دوگمە = "دوگمە" پۆل = "داخستنی" data-dismiss = "مۆداڵی" aria-hidden = "ڕاست" > × </دوگمەی>
  4. <h3> سەردێڕی مۆداڵی </h3>
  5. </div>
  6. <div class = "جەستەی مۆداڵی" >
  7. <p> یەک جەستەی ورد... </p>
  8. </div>
  9. <div class = "پێی مۆداڵی" >
  10. <a href = "#" class = "btn" > داخستنی </a>
  11. <a href = "#" class = "btn btn-primary" > گۆڕانکارییەکان هەڵبگرە </a>
  12. </div>
  13. </div>

دیمۆی ڕاستەوخۆ

مۆداڵێک لە ڕێگەی جاڤاسکڕێپتەوە بگۆڕە بە کرتەکردن لەسەر دوگمەی خوارەوە. لە سەرەوەی لاپەڕەکەوە دەخلیسکێتە خوارەوە و کاڵ دەبێتەوە.

  1. <!-- دوگمەی دەستپێکردنی مۆداڵی -->
  2. <a href = "#myModal" ڕۆڵ = "دوگمە" پۆل = "btn" data-toggle = "مۆداڵی" > مۆداڵی دیمۆ دەستپێبکە </a>
  3.  
  4. <!-- مۆداڵی -->
  5. <div id = "myModal" class = "مۆداڵی شاردنەوەی کاڵبوونەوە" tabindex = "-1" ڕۆڵ = "دیالۆگ" aria-labelledby = "myModalLabel" aria -hidden = "ڕاست" >
  6. <div class = "سەردێڕی مۆداڵی" >
  7. < جۆری دوگمە = "دوگمە" پۆل = "داخستنی" data-dismiss = "مۆداڵی" aria-hidden = "ڕاست" > × </button>
  8. <h3 id = "myModalLabel" > سەردێڕی مۆداڵی </h3>
  9. </div>
  10. <div class = "جەستەی مۆداڵی" >
  11. <p> یەک جەستەی ورد... </p>
  12. </div>
  13. <div class = "پێی مۆداڵی" >
  14. <button class = "btn" data-dismiss = "مۆداڵی" aria-hidden = "ڕاست" > داخستنی </button>
  15. <button class = "btn btn-primary" > گۆڕانکارییەکان هەڵبگرە </button>
  16. </div>
  17. </div>

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

مۆداڵێک چالاک بکە بەبێ نووسینی جاڤاسکڕێپت. لەسەر توخمێکی کۆنترۆڵکەر دابنێ data-toggle="modal"، وەک دوگمەیەک، لەگەڵ data-target="#foo"یان href="#foo"بۆ بە ئامانجگرتنی مۆداڵێکی دیاریکراو بۆ گۆڕینی.

  1. < جۆری دوگمە = "دوگمە" data-toggle = "modal" data-target = "#myModal" > مۆداڵی دەستپێبکە </button>

لە ڕێگەی جاڤاسکڕێپتەوە

بانگی مۆداڵێک بکە بە id myModalبە یەک دێڕی جاڤاسکڕێپت:

  1. $ ( '#مۆداڵی من' ). modal ( هەڵبژاردەکان )

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-backdrop="".

ناو جۆر بنەڕەتی وەسف
باکگراوند boolean ڕاست توخمێکی مۆداڵی-باکگراوند لەخۆدەگرێت. یانیش staticبۆ باکگراوندێک دیاری بکە کە مۆداڵی لەسەر کلیککردن داناخات.
کیبۆرد boolean ڕاست مۆداڵی دادەخات کاتێک کلیلی escape دەکرێت
نیشاندان boolean ڕاست مۆداڵی نیشان دەدات کاتێک دەستپێدەکات.
دوور ڕێڕەو هەڵە

ئەگەر url ی دوور دابین بکرێت، ناوەڕۆک لە ڕێگەی loadشێوازی jQuery باردەکرێت و دەخرێتە ناو .modal-body. ئەگەر تۆ data api بەکاردەهێنیت، دەتوانیت بە شێوەیەکی جێگرەوە hrefتاگەکە بەکاربهێنیت بۆ دیاریکردنی سەرچاوەی دوور. نموونەیەک لەم بابەتە لە خوارەوە نیشان دراوە:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

شێوازەکان

.modal(بژاردەکان)

ناوەڕۆکەکەت وەک مۆداڵ چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

  1. $ ( '#مۆداڵی من' ). مۆداڵی ({
  2. کیبۆرد : درۆ
  3. })

.modal('گۆڕین')

بە دەست مۆداڵێک دەگۆڕێت.

  1. $ ( '#مۆداڵی من' ). مۆداڵ ( 'toggle' )

.modal('پێشاندان')

بە دەستی مۆداڵێک دەکاتەوە.

  1. $ ( '#مۆداڵی من' ). modal ( 'نیشاندان' )

.modal('شاردنەوە')

بە دەستی مۆداڵێک دەشارێتەوە.

  1. $ ( '#مۆداڵی من' ). modal ( 'شاردنەوە' )

ڕووداوەکان

پۆلی مۆداڵی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی مۆداڵی.

پێشهات وەسف
نیشاندان ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی css دەکات).
شاردنەوە ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
شاراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی css).
  1. $ ( '#مۆداڵی من' ). لەسەر ( 'شاراوە' , فەنکشن () {
  2. // شتێک بکە…
  3. })

نموونە لە navbar

پێوەکراوەکەی 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.

@mdo

سکەیتبۆرد سمێڵ ڤێنیام مارفا، سمێڵی چەقۆی ڤێلیت ڤێلیت. سمێڵی فریگان ئەلیکوا کوپیداتات ڤێرۆی 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.

three

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 پیشەسازی. کاردیگان بیرەی دەستی سێتان ڤێلیتی ئامادەکراو. ڤی ئێچ ئێس چامبرای لابۆریس پۆپۆڕ ڤینیام. ئەنیم مۆلیت مینی کۆمۆدۆ ئولامکۆ ڕەشەبا پشیلە.


بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ گەشتکردن لە سەرەوەی بارەکەت، تەنها زیاد بکە data-spy="scroll"بۆ ئەو توخمەی کە دەتەوێت سیخوڕی لەسەر بکەیت (بە شێوەیەکی ئاسایی ئەمە دەبێتە جەستە) و data-target=".navbar"بۆ ئەوەی هەڵبژێریت کە کام nav بەکاربهێنیت. دەتەوێت scrollspy بەکاربهێنیت لەگەڵ .navپێکهاتەیەک.

  1. <body data-spy = "سکڕۆڵکردن" data-target = ".navbar" > ... </body>

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:

  1. $ ( '#navbar' ). سکڕۆڵسپی ()
سەرەکان بەرز دەکەنەوە! بەستەرەکانی ناوبار دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>دەبێت لەگەڵ شتێکدا بگونجێت لە دۆمەکەدا وەک <div id="home"></div>.

شێوازەکان

.scrollspy('نوێکردنەوە')

لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، پێویستە بەم شێوەیە بانگی شێوازی نوێکردنەوە بکەیت:

  1. $ ( '[data-spy="سکڕۆڵکردن"]' ). هەر ( فەنکشن () {
  2. var $spy = $ ( ئەمە ). scrollspy ( 'نوێکردنەوە' )
  3. });

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset="".

ناو جۆر بنەڕەتی وەسف
ئۆفسێت ژماره‌ 10. 10 پێکسڵەکان بۆ ئۆفسێت لە سەرەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ.

ڕووداوەکان

پێشهات وەسف
چالاک بکە ئەم ڕووداوە هەرکاتێک شتێکی نوێ لەلایەن 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.


بەکارهێنان

تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):

  1. $ ( '#تابەکەم a' ). کلیک لە ( فەنکشن ( e ) {
  2. هـ . ڕێگریکردن لە پێشوەختە ();
  3. $ ( ئەمە ). tab ( 'نیشاندان' );
  4. })

دەتوانیت بە چەند ڕێگەیەک تابەکانی تاک چالاک بکەیت:

  1. $ ( '#تابەکەم a[href="#profile"]' ). tab ( 'نیشاندان' ); // تاب بە ناو هەڵبژێرە
  2. $ ( '#تابەکەم a:یەکەم' ). tab ( 'نیشاندان' ); // تابی یەکەم هەڵبژێرە
  3. $ ( '#تابەکەم a:کۆتا' ). tab ( 'نیشاندان' ); // دوا تاب هەڵبژێرە
  4. $ ( '#تابەکەم li:eq(2) a' ). tab ( 'نیشاندان' ); // تابی سێیەم هەڵبژێرە (0-indexed)

مارکاپ

دەتوانیت گەشتکردنێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-toggle="tab"یان data-toggle="pill"لەسەر توخمێک. زیادکردنی پۆلەکانی navو بۆ تابەکە ستایلکردنی تابی Bootstrap جێبەجێ دەکات.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "تاب" > ماڵەوە </a></li>
  3. <li><a href = "#profile" data-toggle = "تاب" > پڕۆفایلی </a></li>
  4. <li><a href = "#messages" data-toggle = "تاب" > پەیامەکان </a></li>
  5. <li><a href = "#ڕێکخستنەکان" data-toggle = "تاب" > ڕێکخستنەکان </a></li>
  6. </ul>

شێوازەکان

$().tab

توخمێکی تاب و کۆنتێنەری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە DOM دا data-targetیان گرێیەکی ئامانجدار بکات.href

  1. <ul class = "nav nav-tabs" id = "تابەکەم" >
  2. <li class = "چالاك" ><a href = "#ماڵەوە" > ماڵەوە </a></li>
  3. <li><a href = "#profile" > پڕۆفایلی </a></li>
  4. <li><a href = "#messages" > پەیامەکان </a></li>
  5. <li><a href = "#ڕێکخستنەکان" > ڕێکخستنەکان </a></li>
  6. </ul>
  7.  
  8. <div class = "ناوەڕۆکی تاب" >
  9. <div class = "tab-pane چالاکە" id = "ماڵەوە" > ... </div>
  10. <div class = "tab-pane" id = "پڕۆفایلی" > ... </div>
  11. <div class = "tab-pane" id = "پەیامەکان" > ... </div>
  12. <div class = "tab-pane" id = "ڕێکخستنەکان" > ... </div>
  13. </div>
  14.  
  15. <سکریپت>
  16. $ ( فەنکشن () {
  17. $ ( '#تابەکەم a:کۆتا' ). tab ( 'نیشاندان' );
  18. })
  19. </script>

ڕووداوەکان

پێشهات وەسف
نیشاندان ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
نیشان دراوە ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
  1. $ ( 'a[data-toggle="تاب"]' ). لەسەر ( 'نیشاندراوە' , فەنکشن ( e ) {
  2. هـ . ئامانج // تاب چالاک کراوە
  3. هـ . relatedTarget // تابی پێشوو
  4. })

نموونە

ئیلهام لە پێوەکراوێکی ن��یابی jQuery.tipsy وەرگیراوە کە لەلایەن Jason Frame نووسراوە؛ ئامرازەکان وەشانێکی نوێکراوە، کە پشت بە وێنە نابەستێت، CSS3 بۆ ئەنیمەیشنەکان بەکاردەهێنێت، و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی.

لەبەر هۆکاری کارایی، ئامرازەکان و popover data-apis هەڵبژێردراون، واتە دەبێت خۆت دەستپێیان بکەیت .

بۆ بینینی ئامۆژگاری ئامرازەکان، ماوسەکەت لەسەر ئەم بەستەرانەی خوارەوە دابنێ:

پانتۆڵی توند ئاستی داهاتوو keffiyeh ڕەنگە نەتبیستبێت. کۆشکی وێنە سمێڵ خام جینز لێتەرپرێس جانتای نامەبەری ڤیگن stumptown. کێڵگە بۆ مێز seitan، mcsweeney's fixie بەردەوام quinoa 8-bit جل و بەرگی ئەمریکی خاوەنی تێری ڕیچاردسۆن ڤینێل chambray. سمێڵ ستۆمپتاون، کاردیگانەکان بانه می لۆمۆ ڕەشەبا پشیلە. تۆفۆ بایۆدیزەل ویلیامزبێرگ مارفا، چوار loko mcsweeney's پاککردنەوەی ڤیگن chambray. بەڕاستی پیشەسازێکی ئیرۆنی هەرچییەک بێت keytar , scenester کێڵگە-بۆ-مێز banksy ئاوستی تویتەر دەست freegan cred خاو جینز تاکە سەرچاوە قاوە ڤایرۆس.

چوار ئاراستە

ئامۆژگاری ئامرازەکان لە گروپەکانی چوونەژوورەوە

لە کاتی بەکارهێنانی ئامرازەکان و پۆپۆڤەرەکان لەگەڵ گروپەکانی چوونەژوورەوەی Bootstrap، دەبێت هەڵبژاردەی container(لە خوارەوە بەڵگەدار کراوە) دابنێیت بۆ ئەوەی کاریگەری لاوەکی نەخوازراو نەبێت.


بەکارهێنان

ئامرازەکە لە ڕێگەی جاڤاسکڕێپتەوە دەستپێبکە:

  1. $ ( '#نموونە' ). ئامرازی ئامۆژگاری ( هەڵبژاردەکان )

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان
html boolean هەڵە html بخەرە ناو ئامرازەکەوە. ئەگەر هەڵە بێت، شێوازی jquery textبەکاردەهێنرێت بۆ دانانی ناوەڕۆک لەناو dom. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
جێگیرکردن ڕستە | کردار 'سەروو' چۆنێتی جێگیرکردنی ئامرازەکان - سەرەوە | خوارەوە | چەپ | ڕاست
هەڵبژێرەر ڕستە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان.
ناونیشان ڕستە | کردار '' بەهای ناونیشانی پێشوەختە ئەگەر تاگی `title` ئامادە نەبێت
وورژاندن ڕستە 'hover focus' چۆن tooltip دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. تێبینی تۆ case pass trigger mutliple، بۆشایی جیاکراوەتەوە، جۆرەکانی trigger.
دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی ئامۆژگاری ئامرازەکان (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { show: 500, hide: 100 }

دەفرێک ڕستە | هەڵە هەڵە

ئامۆژگاری ئامرازەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوەcontainer: 'body'

سەرەکان بەرز دەکەنەوە! دەتوانرێت هەڵبژاردەکان بۆ ئامۆژگارییە تاکەکەسییەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت.

مارکاپ

  1. <a href = "#" data-toggle = "ئامۆژگاری ئامراز" title = "یەکەم ئامۆژگاری" > سەرم بخەرە سەرم </a>

شێوازەکان

$().ئامۆژگاری ئامرازەکان(هەڵبژاردەکان)

مامەڵەکارێکی ئامۆژگاری بە کۆمەڵە توخمێکەوە دەبەستێتەوە.

.tooltip('پێشاندان')

ئامۆژگاری ئامرازی توخمێک ئاشکرا دەکات.

  1. $ ( '#توخم' ). ئامرازی ئامۆژگاری ( 'نیشاندان' )

.tooltip('شاردنەوە')

ئامۆژگاری ئامرازی توخمێک دەشارێتەوە.

  1. $ ( '#توخم' ). tooltip ( 'شاردنەوە' )

.tooltip('گۆڕین')

ئامۆژگاری ئامرازی توخمێک دەگۆڕێت.

  1. $ ( '#توخم' ). ئامرازی ئامۆژگاری ( 'toggle' )

.tooltip('لەناوبردنی')

ئامرازی توولتیپێک دەشارێتەوە و لەناو دەبات.

  1. $ ( '#توخم' ). tooltip ( 'لەناوبردن' )

نموونە

زیادکردنی سەرپۆشی بچووکی ناوەڕۆک، وەک ئەوانەی لە ئایپاددان، بۆ هەر توخمێک بۆ نیشتەجێکردنی زانیارییە لاوەکییەکان. ماوسەکەت لەسەر دوگمەکە دابنێ بۆ ئەوەی پۆپۆڤەرەکە دەستپێبکات. پێویستی بە Tooltip هەیە کە لەگەڵیدا بێت.

پۆپۆڤەری ئیستاتیک

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو.

سەرەوەی پۆپۆڤەر

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

پۆپۆڤەر ڕاستە

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

بنی پۆپۆڤەر

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

پۆپۆڤەر ڕۆیشت

Sed posuere consectetur est لە لۆبۆرتیس. Aenean eu لیۆ کوام. پێلێنتێسک ئۆرنارێ سێم لاسینیا کوام ڤێنێناتیس ڤێنیتاس ڤێنیاتس ڤێنیتاس.

هیچ نیشانەیەک وەک popovers نیشان نادرێت لە جاڤاسکڕێپت و ناوەڕۆک لە ناو dataتایبەتمەندییەکدا دروست ناکرێت.

دیمۆی ڕاستەوخۆ

چوار ئاراستە


بەکارهێنان

چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:

  1. $ ( '#نموونە' ). popover ( هەڵبژاردەکان )

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان
html boolean هەڵە html بخەرە ناو popoverەکەوە. ئەگەر هەڵە بێت، شێوازی jquery textبەکاردەهێنرێت بۆ دانانی ناوەڕۆک لەناو dom. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
جێگیرکردن ڕستە | کردار 'ڕاست' چۆنێتی جێگیرکردنی پۆپۆڤەر - سەرەوە | خوارەوە | چەپ | ڕاست
هەڵبژێرەر ڕستە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان
وورژاندن ڕستە 'کلیک' چۆن popover دەستپێدەکات - کلیک لە | hover | فۆکەس | بەدەستی
ناونیشان ڕستە | کردار '' بەهای ناونیشانی پێشوەختە ئەگەر تایبەتمەندی `title` ئامادە نەبێت
ناوەڕۆک ڕستە | کردار '' بەهای ناوەڕۆکی پێشوەختە ئەگەر تایبەتمەندی `data-content` ئامادە نەبێت
دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی پۆپۆڤەر (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { show: 500, hide: 100 }

دەفرێک ڕستە | هەڵە هەڵە

پۆپۆڤەرەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوەcontainer: 'body'

سەرەکان بەرز دەکەنەوە! دەتوانرێت بژاردەکان بۆ تاکە پۆپۆڤەرەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت.

مارکاپ

لەبەر هۆکاری کارایی، Tooltip و Popover data-apis opt in. ئەگەر دەتەوێت بەکاریان بهێنیت تەنها بژاردەیەکی هەڵبژێرەر دیاری بکە.

شێوازەکان

$().popover(بژاردەکان)

پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.

.popover('پێشاندان')

ئاشکرا دەکات کە توخمەکان popover.

  1. $ ( '#توخم' ). popover ( 'پێشاندان' )

.popover('شاردنەوە')

پەپۆڤەرێکی توخمەکان دەشارێتەوە.

  1. $ ( '#توخم' ). popover ( 'شاردنەوە' )

.popover('گۆڕین')

توگڵێک توخمەکان popover دەگۆڕێت.

  1. $ ( '#توخم' ). popover ( 'تۆگڵ' )

.popover('لەناوبردن')

پۆپۆڤەری توخمێک دەشارێتەوە و لەناو دەبات.

  1. $ ( '#توخم' ). popover ( 'لەناوبردن' )

نموونەی ئاگادارکردنەوەکان

زیادکردنی کارایی ڕەتکردنەوە بۆ هەموو نامەکانی ئاگادارکردنەوە بەم پێوەکراوە.

گواکامۆلی پیرۆز! Best check yo self، تۆ زۆر باش دەرناکەویت.

ئای سناپ! هەڵەیەکت دەست کەوت!

ئەم و ئەو بگۆڕە و دووبارە هەوڵبدەرەوە. دویس مۆلیس، ئیست نۆن کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا، ئیگێت لاسینیا ئۆدیۆ سێم ئێلیت. کراس ماتیس کۆنسێکتێتور پوروس دانیشتن amet fermentum.

ئەم کردارە ئەنجام بدە یان ئەمە بکەن


بەکارهێنان

ڕەتکردنەوەی ئاگادارکردنەوەیەک لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە:

  1. $ ( ".ئاگادارکردنەوە" ). ئاگادارکردنەوە ()

مارکاپ

تەنها زیاد بکە data-dismiss="alert"بۆ دوگمەی داخستنی خۆت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کارایی داخستنی ئاگادارکردنەوە بدەیت.

  1. <a class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" href = "#" > × </a>

شێوازەکان

$().ئاگادارکردنەوە()

هەموو ئاگادارکردنەوەکان بە کارایی نزیک دەپێچێتەوە. بۆ ئەوەی ئاگادارکردنەوەکانت کاتێک دادەخرێن ئەنیمەیشن بن، دڵنیابە کە پێشتر پۆلی .fadeویان .inبۆ بەکارهێناوە.

.alert('داخستنی')

ئاگادارکردنەوەیەک دادەخات.

  1. $ ( ".ئاگادارکردنەوە" ). ئاگادارکردنەوە ( 'داخستنی' )

ڕووداوەکان

پۆلی ئاگادارکردنەوەی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی ئاگادارکردنەوە.

پێشهات وەسف
داخستن ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک closeشێوازی نموونە بانگ دەکرێت.
داخراوە ئەم ڕووداوە کاتێک ئاگادارکردنەوەکە داخراوە (چاوەڕوانی تەواوبوونی گواستنەوەکانی css دەکات) کاردەکات.
  1. $ ( '#ئاگادارکردنەوە-من' ). bind ( 'داخراو' , فەنکشن () {
  2. // شتێک بکە…
  3. })

نموونە بەکارهێنانەکان

بە دوگمەکان زیاتر بکە. دوگمەی کۆنترۆڵکردن دەڵێت یان گروپێک لە دوگمە دروست بکە بۆ پێکهاتەی زیاتر وەک توولبارەکان.

دەوڵەتدار

زیادکردن data-loading-text="Loading..."بۆ بەکارهێنانی دۆخی بارکردن لەسەر دوگمەیەک.

  1. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" data-loading-text = "بارکردن..." > دۆخی بارکردن </button>

تاکە گۆڕانکاری

زیادکردن data-toggle="button"بۆ چالاککردنی گۆڕانکاری لەسەر یەک دوگمە.

  1. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" data-toggle = "دوگمە" > تاکە گۆڕانکاری </button>

بۆکسی هەڵبژاردن

زیاد بکە data-toggle="buttons-checkbox"بۆ گۆڕینی شێوازی بۆکسی هەڵبژاردن لەسەر btn-group.

  1. <div class = "btn-group" data-toggle = "بۆکسی پشکنینی دوگمەکان" >
  2. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" > چەپ </دوگمە>
  3. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" > ناوەڕاست </button>
  4. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" > ڕاست </دوگمە>
  5. </div>

ڕادیۆ

زیاد بکە data-toggle="buttons-radio"بۆ گۆڕینی شێوازی ڕادیۆ لەسەر btn-group.

  1. <div class = "btn-group" داتا-تۆگڵ = "دوگمەکان-رادیۆ" >
  2. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" > چەپ </دوگمە>
  3. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" > ناوەڕاست </button>
  4. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" > ڕاست </دوگمە>
  5. </div>

بەکارهێنان

دوگمەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە:

  1. $ ( '.nav-tabs' ). دوگمەی ()

مارکاپ

تایبەتمەندیەکانی داتا بەشێکی دانەبڕاون لە پێوەکراوەکەی دوگمەکە. سەیری کۆدی نموونەیی خوارەوە بکە بۆ جۆرە جیاوازەکانی مارکاپ.

بژاردەکان

هیچ

شێوازەکان

$().دوگمەی('toggle')

دۆخی پاڵنەر دەگۆڕێت. ئەو ڕواڵەتە دەدات بە دوگمەکە کە چالاک کراوە.

سەرەکان بەرز دەکەنەوە! data-toggleدەتوانیت بە بەکارهێنانی تایبەتمەندییەکە گۆڕینی ئۆتۆماتیکی دوگمەیەک چالاک بکەیت .
  1. < جۆری دوگمە = "دوگمە" پۆل = "btn" data-toggle = "دوگمە" > ... </دوگمە>

$().button('بارکردن')

دۆخی دوگمەکان بۆ بارکردن دادەنێت - دوگمە لەکاردەخات و دەق دەگۆڕێت بۆ بارکردنی دەق. بارکردنی دەق پێویستە لەسەر توخمەکەی دوگمەکە بە بەکارهێنانی تایبەتمەندی داتا پێناسە بکرێت data-loading-text.

  1. < جۆری دوگمە = "دوگمە" پۆل = "btn" data-loading-text = "بارکردنی شتەکان..." > ... </button>
سەرەکان بەرز دەکەنەوە! فایەرفۆکس دۆخی لەکارخراو لە سەرانسەری بارکردنی لاپەڕەکاندا بەردەوام دەکات . چارەسەرێک بۆ ئەمە بەکارهێنانی autocomplete="off".

$().دوگمەی('ڕێکخستنەوە')

دۆخی دوگمە دەگەڕێنێتەوە - دەق دەگۆڕێت بۆ دەقی ئەسڵی.

$().دوگمەی(ڕیز)

دۆخی دوگمە دەگەڕێنێتەوە - دەق دەگۆڕێت بۆ هەر دۆخێکی دەقی پێناسەکراوی داتا.

  1. < جۆری دوگمە = "دوگمە" پۆل = "btn" data-complete-text = "تەواو بوو!" > ... </دوگمەی>
  2. <سکریپت>
  3. $ ( '.btn' ). دوگمەی ( 'تەواو' )
  4. </script>

دەربارەی

ستایلە بنەڕەتییەکان و پشتگیری نەرم و نیان بۆ پێکهاتە داڕووخاوەکانی وەک ئەکۆردیۆن و گەشتکردن بەدەستبهێنە.

* پێویستە پێوەکراوەکەی Transitions لەخۆبگرێت.

نموونەی ئەکۆردیۆن

بە بەکارهێنانی پێوەکراوەکەی collapse، ویجتێکی سادەی شێوازی ئەکۆردیۆنمان دروست کرد:

Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام VHS.
Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام VHS.
Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام VHS.
  1. <div class = "ئەکۆردیۆن" id = "ئەکۆردیۆن2" >
  2. <div class = "گرووپی ئەکۆردیۆن" >
  3. <div class = "سەردێڕی ئەکۆردیۆن" >
  4. <a class = "accordion-toggle" data-toggle = "داڕمان" داتا-دایک و باوک = "#ئەکۆردیۆن2" href = "#collapseOne" >
  5. بابەتی #1ی گروپی داخراو
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "داڕمانی جەستەی ئەکۆردیۆن لە" >
  9. <div class = "ناوەوەی ئەکۆردیۆن" >
  10. Anim pariatur کلیشە...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "گرووپی ئەکۆردیۆن" >
  15. <div class = "سەردێڕی ئەکۆردیۆن" >
  16. <a class = "accordion-toggle" data-toggle = "داڕمان" data-parent = "#ئەکۆردیۆن2" href = "#داڕماندوو" >
  17. بابەتی #2ی گروپی داخراو
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "داڕمانی جەستەی ئەکۆردیۆن" >
  21. <div class = "ناوەوەی ئەکۆردیۆن" >
  22. Anim pariatur کلیشە...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

هەروەها دەتوانیت پێوەکراوەکە بەکاربهێنیت بەبێ مارکاپی ئەکۆردیۆن. دوگمەیەک بکە کە فراوانکردن و داڕمانی توخمێکی تر بگۆڕێت.

  1. < جۆری دوگمە = "دوگمە" پۆل = "btn btn-مەترسی" data-toggle = "داڕمان" data-target = "#دیمۆ" >
  2. سادە دەڕووخێت
  3. </دوگمەی>
  4.  
  5. <div id = "demo" class = "داڕمان لە" > ... </div>

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

تەنها زیادکردن data-toggle="collapse"و data-targetتوخمێک بۆ توخمێک زیاد بکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی توخمێکی داڕووخاو دیاری بکەیت. تایبەتمەندییەکە data-targetهەڵبژێرەری css قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە collapseبۆ توخمە داخراوەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکە in.

بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ کۆنتڕۆڵێکی داخراو، تایبەتمەندی داتا زیاد بکە data-parent="#selector". بۆ بینینی ئەمە بە کردار ئاماژە بە دیمۆکە بکە.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەست چالاک بکە لەگەڵ:

  1. $ ( ".داڕمان" ). داڕمان ()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-parent="".

ناو جۆر بنەڕەتی وەسف
دایک و باوک هەڵبژێرەر هەڵە ئەگەر هەڵبژێرە ئەوا هەموو توخمە داخراوەکان لە ژێر دایک و باوکی دیاریکراو دادەخرێن کاتێک ئەم بابەتە داخراوە پیشان دەدرێت. (هاوشێوەی ڕەفتاری تەقلیدی ئەکۆردیۆن)
toggle بکە boolean ڕاست توخمە داخراوەکە لە کاتی بانگکردندا دەگۆڕێت

شێوازەکان

.collapse(بژاردەکان)

ناوەڕۆکەکەت وەک توخمێکی داخراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

  1. $ ( '#داشکێنراوی من' ). داڕمان ({
  2. toggle : درۆیە
  3. })

.collapse('گۆڕین')

توخمێکی داڕووخاو دەگۆڕێت بۆ پیشاندانی یان شاراوە.

.collapse('پێشاندان')

توخمێکی داڕووخاو نیشان دەدات.

.collapse('شاردنەوە')

توخمێکی داڕووخاو دەشارێتەوە.

ڕووداوەکان

پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.

پێشهات وەسف
نیشاندان ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی css دەکات).
شاردنەوە ئەم ڕووداوە دەستبەجێ تەقە دەکرێت کاتێک hideمیتۆدەکە بانگ کراوە.
شاراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان لە بەکارهێنەر شاراوەتەوە (چاوەڕوان دەکات بۆ تەواوبوونی گواستنەوەکانی css).
  1. $ ( '#داشکێنراوی من' ). لەسەر ( 'شاراوە' , فەنکشن () {
  2. // شتێک بکە…
  3. })

نموونە

پێوەکراوێکی بنەڕەتی و بە ئاسانی درێژکراوە بۆ دروستکردنی خێرای تایپی هێدەکانی ڕەسەن بە هەر نووسینێکی دەقی فۆرم.

  1. < جۆری چوونەژوورەوە = "دەق" data-provide = "پێش تایپکردن" >

تۆ دەتەوێت ڕێکبخەیت autocomplete="off"بۆ ئەوەی ڕێگری بکەیت لە دەرکەوتنی مینیوەکانی وێبگەڕی پێشوەختە لەسەر دابەزینی Bootstrap typeahead.


بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

تایبەتمەندی داتا زیاد بکە بۆ تۆمارکردنی توخمێک بە کارایی typeahead وەک لە نموونەی سەرەوەدا نیشان دراوە.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەستی پەیوەندی بە typeahead بکە بەم شێوەیە:

  1. $ ( '.پێش تایپکردن' ). تایپ هێد ()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-source="".

ناو جۆر بنەڕەتی وەسف
سەرچاوە ڕیزبەندی، فەنکشن [ ] سەرچاوەی داتا بۆ پرسیارکردن لە دژی. لەوانەیە ڕیزبەندییەک بێت لە ڕیزەکان یان فەنکشنێک. فەنکشنەکە دوو ئارگومێنت تێدەپەڕێت، queryبەهاکە لە بواری چوونەژوورەوە و processبانگکردنەوە. ڕەنگە فەنکشنەکە بە شێوەیەکی هاوکات بەکاربهێنرێت بە گەڕانەوەی سەرچاوەی داتا ڕاستەوخۆ یان بە شێوەیەکی ناهاوسەنگ لە ڕێگەی processتاکە ئارگومێنتی بانگکردنەوەکە.
کەرەستەکان ژماره‌ 8. 8 زۆرترین ژمارەی ئەو شتانەی کە لە درۆپ داونەکەدا پیشان دەدرێن.
minLength ژماره‌ 1. 1 کەمترین درێژی پیت کە پێویستە پێش دەستپێکردنی پێشنیارەکانی تەواوکردنی ئۆتۆماتیکی
matcher کردار بێ هەستیاری کەیس ئەو شێوازەی کە بەکاردێت بۆ دیاریکردنی ئەوەی کە ئایا پرسیارێک لەگەڵ شتێکدا دەگونجێت یان نا. یەک ئارگومێنت قبوڵ دەکات، ئەو ئارگیومێنتە itemکە لە بەرامبەردا پرسیارەکە تاقی بکرێتەوە. بە this.query. trueئەگەر پرسیارەکە یەکسان بێت، بولینێک بگەڕێنەرەوە .
ڕیزکەر کردار یەکسانکردنی ورد،
هەستیاری گەورە و بچووک،
بێ هەست بە گەورە و بچووک
شێوازێک کە بەکاردێت بۆ ڕیزکردنی ئەنجامەکانی تەواوکردنی ئۆتۆماتیکی. یەک ئارگومێنت قبوڵ دەکات itemsو مەودای نموونەی typeahead ی هەیە. ئاماژە بە پرسیاری ئێستا بکە بە this.query.
نوێکەرەوە کردار بابەتی هەڵبژێردراو دەگەڕێنێتەوە ئەو شێوازەی کە بەکاردێت بۆ گەڕانەوەی بابەتی هەڵبژێردراو. یەک ئارگومێنت قبوڵ دەکات، itemو مەودای نموونەی typeahead ی هەیە.
هایلایتەر کردار هەموو یەکسانە پێشوەختەکان تیشک دەخاتە سەر شێوازێک کە بەکاردێت بۆ تیشک خستنە سەر ئەنجامەکانی تەواوکردنی ئۆتۆماتیکی. یەک ئارگومێنت قبوڵ دەکات itemو مەودای نموونەی typeahead ی هەیە. پێویستە html بگەڕێنێتەوە.

شێوازەکان

.typeahead(بژاردەکان)

ئینپوتێک بە تایپئەهێد دەستپێدەکات.

نموونە

ژێرناوچەی لای چەپ دیمۆیەکی ڕاستەوخۆی پێوەکراوەکەی ئافیکسە.


بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی affix زیاد بکەیت بۆ هەر توخمێک، تەنها زیاد بکە data-spy="affix"بۆ ئەو توخمە کە دەتەوێت سیخوڕی لەسەر بکەیت. پاشان ئۆفسێتەکان بەکاربهێنە بۆ پێناسەکردنی کەی پینکردنی توخمێک بگۆڕیت و بکوژێنیتەوە.

  1. <div data-spy = "affix" داتا-ئۆفسێت-سەرەوە = "200" > ... </div>
سەرەکان بەرز دەکەنەوە! پێویستە شوێنی توخمێکی پینکراو و هەڵسوکەوتی دایک و باوکی دەستبەجێی بەڕێوەببەیت. پێگە لەلایەن affix, affix-top, و affix-bottom. لەبیرت بێت کە پشکنین بۆ دایک و باوکێک بکەیت کە ئەگەری داڕماوە کاتێک پاشگرەکە دەستپێدەکات چونکە ناوەڕۆک لە ڕەوتی ئاسایی لاپەڕەکە لا دەبات.

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە پێوەکراوەکانی affix بکە:

  1. $ ( '#navbar' ). affix ()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset-top="200".

ناو جۆر بنەڕەتی وەسف
ئۆفسێت ژمارە | فەنکشن | شت 10. 10 پێکسڵەکان بۆ ئۆفسێت لە شاشەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ. ئەگەر یەک ژمارە دابین بکرێت، ئۆفسێتەکە بە هەردوو ئاراستەی سەرەوە و چەپ جێبەجێ دەکرێت. بۆ گوێگرتن لە یەک ئاراستە، یان چەندین ئۆفسێتی ناوازە، تەنها شتێک دابین بکە offset: { x: 10 }. کاتێک پێویستت بە دابینکردنی ئۆفسێتێکە بە شێوەیەکی داینامیکی فەنکشنێک بەکاربهێنە (بۆ هەندێک دیزاینی وەڵامدەرەوە بەسوودە).