Sourceشکست هێنان
بینینی ناوەڕۆک لە سەرانسەری پڕۆژەکەتدا بە چەند پۆلێک و پێوەکراوەکانی جاڤاسکڕێپتەکانمان بگۆڕە.
چۆن کاردەکات
پێوەکراوەکەی جاڤاسکڕێپتی داڕمان بەکاردێت بۆ پیشاندانی و شاردنەوەی ناوەڕۆک. دوگمەکان یان ئەنکرەکان وەکو تریگەر بەکاردەهێنرێن کە نەخشەیان بۆ دانراوە بۆ توخمە تایبەتەکان کە تۆ دەیگۆڕیت. داڕمانی توخمێک دەبێتە هۆی ئەنیمەیشن height
لە بەهای ئێستایەوە بۆ 0
. بە سەرنجدان بەوەی چۆن CSS مامەڵە لەگەڵ ئەنیمەیشنەکان دەکات، ناتوانیت padding
لەسەر .collapse
توخمێک بەکاری بهێنیت. لەبری ئەوە پۆلەکە وەک توخمێکی پێچانی سەربەخۆ بەکاربهێنە.
نموونە
بۆ پیشاندانی و شاردنەوەی توخمێکی تر لە ڕێگەی گۆڕینی پۆلەکانەوە کلیک لە دوگمەکانی خوارەوە بکە:
.collapse
ناوەڕۆک دەشارێتەوە
.collapsing
لە کاتی گواستنەوەکاندا بەکاردەهێنرێت
.collapse.show
ناوەڕۆک نیشان دەدات
دەتوانیت بەستەرێک بەکاربهێنیت کە href
تایبەتمەندییەکەی تێدایە، یان دوگمەیەک بە data-target
تایبەتمەندییەکە. لە هەردوو حاڵەتەکەدا، the data-toggle="collapse"
is required.
بەستەر لەگەڵ href دوگمەی بە data-target
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
کۆپی بکە
<p>
<a class= "btn btn-primary" data-toggle= "collapse" href= "#collapseExample" role= "button" aria-expanded= "false" aria-controls= "collapseExample" >
Link with href
</a>
<button class= "btn btn-primary" type= "button" data-toggle= "collapse" data-target= "#collapseExample" aria-expanded= "false" aria-controls= "collapseExample" >
Button with data-target
</button>
</p>
<div class= "collapse" id= "collapseExample" >
<div class= "card card-body" >
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
چەند ئامانجێک
A <button>
یان <a>
دەتوانێت چەندین توخم پیشان بدات و بیشارێتەوە بە ئاماژەکردنیان بە هەڵبژێرەری JQuery لە href
تایبەتمەندیەکەیدا data-target
. چەند <button>
یان <a>
دەتوانن توخمێک نیشان بدەن و بیشارنەوە ئەگەر هەریەکەیان بە تایبەتمەندی یانەکەیان href
ئاماژەی data-target
پێبکەن
توخمێکی یەکەم بگۆڕە توخمێکی دووەم بگۆڕە هەردوو توخمەکە بگۆڕە
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
کۆپی بکە
<p>
<a class= "btn btn-primary" data-toggle= "collapse" href= "#multiCollapseExample1" role= "button" aria-expanded= "false" aria-controls= "multiCollapseExample1" > Toggle first element</a>
<button class= "btn btn-primary" type= "button" data-toggle= "collapse" data-target= "#multiCollapseExample2" aria-expanded= "false" aria-controls= "multiCollapseExample2" > Toggle second element</button>
<button class= "btn btn-primary" type= "button" data-toggle= "collapse" data-target= ".multi-collapse" aria-expanded= "false" aria-controls= "multiCollapseExample1 multiCollapseExample2" > Toggle both elements</button>
</p>
<div class= "row" >
<div class= "col" >
<div class= "collapse multi-collapse" id= "multiCollapseExample1" >
<div class= "card card-body" >
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class= "col" >
<div class= "collapse multi-collapse" id= "multiCollapseExample2" >
<div class= "card card-body" >
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
نموونەی ئەکۆردیۆن
بە بەکارهێنانی پێکهاتەی کارتەکە دەتوانیت هەڵسوکەوتی داڕمانی پێشوەختە درێژ بکەیتەوە بۆ دروستکردنی ئەکۆردیۆن. بۆ ئەوەی بە باشی ستایلی ئەکۆردیۆن بەدەست بهێنیت، دڵنیابە .accordion
وەک پێچەر بەکاری بهێنیت.
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 high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
کۆپی بکە
<div class= "accordion" id= "accordionExample" >
<div class= "card" >
<div class= "card-header" id= "headingOne" >
<h2 class= "mb-0" >
<button class= "btn btn-link" type= "button" data-toggle= "collapse" data-target= "#collapseOne" aria-expanded= "true" aria-controls= "collapseOne" >
Collapsible Group Item #1
</button>
</h2>
</div>
<div id= "collapseOne" class= "collapse show" aria-labelledby= "headingOne" data-parent= "#accordionExample" >
<div class= "card-body" >
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class= "card" >
<div class= "card-header" id= "headingTwo" >
<h2 class= "mb-0" >
<button class= "btn btn-link collapsed" type= "button" data-toggle= "collapse" data-target= "#collapseTwo" aria-expanded= "false" aria-controls= "collapseTwo" >
Collapsible Group Item #2
</button>
</h2>
</div>
<div id= "collapseTwo" class= "collapse" aria-labelledby= "headingTwo" data-parent= "#accordionExample" >
<div class= "card-body" >
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class= "card" >
<div class= "card-header" id= "headingThree" >
<h2 class= "mb-0" >
<button class= "btn btn-link collapsed" type= "button" data-toggle= "collapse" data-target= "#collapseThree" aria-expanded= "false" aria-controls= "collapseThree" >
Collapsible Group Item #3
</button>
</h2>
</div>
<div id= "collapseThree" class= "collapse" aria-labelledby= "headingThree" data-parent= "#accordionExample" >
<div class= "card-body" >
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
دەستڕاگەیشتن
دڵنیابە زیاد بکە aria-expanded
بۆ توخمە کۆنترۆڵەکە. ئەم تایبەتمەندییە بە ڕوونی دۆخی ئێستای توخمە داڕووخاوەکە دەگەیەنێت کە بەستراوەتەوە بە کۆنتڕۆڵەکە بۆ خوێنەرانی شاشە و تەکنەلۆژیا یارمەتیدەرە هاوشێوەکان. ئەگەر توخمە داخراوەکە بە شێوازی پێشوەختە داخراو بێت، تایبەتمەندییەکە لەسەر توخمە کۆنترۆڵەکە دەبێت بەهای aria-expanded="false"
. ئەگەر توخمە داخراوەکەت بە شێوازی پێشوەختە بە بەکارهێنانی show
پۆلەکە ڕێکخستووە کە کراوە بێت، aria-expanded="true"
لەبری ئەوە لەسەر کۆنتڕۆڵەکە ڕێکبخە. پێوەکراوەکە بە شێوەیەکی ئۆتۆماتیکی ئەم تایبەتمەندییە لەسەر کۆنتڕۆڵەکە دەگۆڕێت بە پشتبەستن بەوەی کە ئایا توخمە داخراوەکە کراوەتەوە یان داخراوە یان نا (لە ڕێگەی جاڤاسکڕێپتەوە، یان لەبەر ئەوەی بەکارهێنەر توخمێکی کۆنترۆڵێکی دیکەی دەستپێکردووە کە هەروەها بەستراوەتەوە بە هەمان توخمە داخراوەکە). ئەگەر توخمە HTML ی توخمە کۆنترۆڵەکە دوگمەیەک نەبێت (بۆ نموونە، an <a>
یان <div>
)، تایبەتمەندییەکەrole="button"
پێویستە زیاد بکرێت بۆ توخمەکە.
ئەگەر توخمە کۆنترۆڵەکەت تاکە توخمێکی داڕووخاو دەکاتە ئامانج – واتە data-target
تایبەتمەندییەکە ئاماژە بە id
هەڵبژێرەرێک دەکات – پێویستە aria-controls
تایبەتمەندییەکە زیاد بکەیت بۆ توخمە کۆنترۆڵەکە، کە id
توخمە داڕووخاوەکەی تێدایە. خوێنەری شاشەی مۆدێرن و تەکنەلۆژیا یارمەتیدەرە هاوشێوەکان لەم تایبەتمەندییە کەڵک وەردەگرن بۆ دابینکردنی کورتکراوەی زیادە بۆ بەکارهێنەران بۆ ئەوەی ڕاستەوخۆ بچنە سەر خودی توخمە داڕووخاوەکە.
تێبینی بکە کە جێبەجێکردنی ئێستای Bootstrap کارلێکە جۆراوجۆرەکانی کیبۆرد ناگرێتەوە کە لە نەخشی ئەکۆردیۆنی WAI-ARIA Authoring Practices 1.1 باسکراوە - پێویستە خۆت ئەمانە لەگەڵ جاڤاسکڕێپتی تایبەتمەنددا جێگیر بکەیت.
بەکارهێنان
پێوەکراوەکەی داڕمان چەند پۆلێک بەکاردەهێنێت بۆ مامەڵەکردن لەگەڵ بەرزکردنەوەی قورس:
.collapse
ناوەڕۆکەکە دەشارێتەوە
.collapse.show
ناوەڕۆکەکەی نیشان دەدات
.collapsing
کاتێک گواستنەوەکە دەست پێدەکات زیاد دەکرێت، و کاتێک تەواو دەبێت لادەبرێت
ئەم پۆلانە دەتوانرێت لە _transitions.scss
.
لە ڕێگەی تایبەتمەندییەکانی داتا
تەنها زیاد بکە data-toggle="collapse"
و a data-target
بۆ توخمەکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی یەکێک یان چەند توخمێکی داڕووخاو دیاری بکەیت. تایبەتمەندییەکە data-target
هەڵبژێرەری CSS قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە collapse
بۆ توخمە داڕووخاوەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکە show
.
بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ ناوچەیەکی داخراو، تایبەتمەندی داتا زیاد بکە data-parent="#selector"
. بۆ بینینی ئەمە بە کردار ئاماژە بە دیمۆکە بکە.
لە ڕێگەی جاڤاسکڕێپتەوە
بە دەست چالاک بکە لەگەڵ:
کۆپی بکە
$ ( ' .collapse ' ). collapse ()
بژاردەکان
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-
, وەک لە data-parent=""
.
ناو
جۆر
بنەڕەتی
وەسف
دایک و باوک
هەڵبژێرەر | شتێکی jQuery | توخمێکی DOM
هەڵە
ئەگەر دایك و باوك دابین بكرێت، ئەوا هەموو توخمە داپۆشراوەكانی ژێر دایك و باوكی دیاریكراو دادەخرێن كاتێك ئەم بابەتە داخراوە پیشان دەدرێت. (هاوشێوەی ڕەفتاری تەقلیدی ئەکۆردیۆن - ئەمە وابەستەی card
پۆلەکەیەتی). تایبەتمەندییەکە دەبێت لەسەر ناوچەی داڕمانی ئامانجەکە دابنرێت.
toggle بکە
boolean
ڕاست
توخمە داخراوەکە لە کاتی بانگکردندا دەگۆڕێت
شێوازەکان
شێواز و گواستنەوە ناهاوسەنگەکان
هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی میتۆد لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .
بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .
.collapse(options)
ناوەڕۆکەکەت وەک توخمێکی داخراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object
.
کۆپی بکە
$ ( ' #myCollapsible ' ). collapse ({
toggle : false
})
.collapse('toggle')
توخمێکی داڕووخاو دەگۆڕێت بۆ پیشاندانی یان شاراوە. دەگەڕێتەوە بۆ بانگکەر پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.collapse
یان hidden.bs.collapse
ڕووبدات).
.collapse('show')
توخمێکی داڕووخاو نیشان دەدات. پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا پیشان بدرێت (واتە پێش ئەوەی shown.bs.collapse
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.
.collapse('hide')
توخمێکی داڕووخاو دەشارێتەوە. پێش ئەوەی توخمە داخراوەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.collapse
ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.
.collapse('dispose')
داڕمانی توخمێک لەناو دەبات.
ڕووداوەکان
پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.
جۆری ڕووداو
وەسف
نیشاندانی.bs.collapse
ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show
شێوازی نموونە بانگ دەکرێت.
نیشان دراوە.bs.collapse
ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات).
شاردنەوە.bs.collapse
ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide
میتۆدەکە بانگ کراوە.
شاراوە.bs.collapse
ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان لە بەکارهێنەر شاراوەتەوە (چاوەڕوان دەکات بۆ تەواوبوونی گواستنەوەکانی CSS).
کۆپی بکە
$ ( ' #myCollapsible ' ). on ( ' hidden.bs.collapse ' , function () {
// do something...
})