Source

سقوط

د څو ټولګیو او زموږ د جاواسکریپټ پلگ انونو سره ستاسو د پروژې په اوږدو کې د مینځپانګې لید بدل کړئ.

څنګه کار کوي

د جاواسکریپټ سقوط پلگ ان د مینځپانګې ښودلو او پټولو لپاره کارول کیږي. تڼۍ یا اینکرونه د محرکونو په توګه کارول کیږي کوم چې د ځانګړو عناصرو سره نقشه شوي چې تاسو یې بدل کړئ. د یو عنصر ماتول به heightد خپل اوسني ارزښت څخه تر 0. د دې په پام کې نیولو سره چې CSS حرکتونه څنګه اداره کوي، تاسو نشئ کولی paddingپه .collapseعنصر کې کار واخلئ. پرځای یې، ټولګي د خپلواک ریپینګ عنصر په توګه وکاروئ.

د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

بېلګه

د ټولګي بدلونونو له لارې د بل عنصر ښودلو او پټولو لپاره لاندې بټونو کلیک وکړئ:

  • .collapseمواد پټوي
  • .collapsingد لیږد پرمهال پلي کیږي
  • .collapse.showمنځپانګه ښيي

تاسو کولی شئ د ځانګړتیا سره یو لینک hrefوکاروئ، یا د ځانګړتیا سره تڼۍ data-target. په دواړو حالتونو کې، data-toggle="collapse"دا اړینه ده.

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 high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. د خوړو لارۍ 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 تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار 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 عنصر تڼۍ نه وي (د مثال په توګه، یو <a>یا <div>)، خاصیتrole="button"باید عنصر ته اضافه شي.

که ستاسو د کنټرول عنصر یو واحد مات کیدونکی عنصر په نښه کوي - د بیلګې په توګه data-targetخاصیت یو idانتخاب کونکي ته اشاره کوي - تاسو باید aria-controlsد کنټرول عنصر ته خاصیت اضافه کړئ ، چې idد سقوط وړ عنصر لري. عصري سکرین لوستونکي او ورته مرستندویه ټیکنالوژي د دې ځانګړتیا څخه کار اخلي ترڅو کاروونکو ته اضافي شارټ کټونه چمتو کړي ترڅو مستقیم د سقوط وړ عنصر ته لاړ شي.

په یاد ولرئ چې د بوټسټریپ اوسنۍ پلي کول د کیبورډ مختلف تعاملات نه پوښي چې د WAI-ARIA لیکوال کولو طرزالعمل 1.1 accordion نمونه کې تشریح شوي - تاسو به اړتیا ولرئ دا پخپله د دودیز جاوا سکریپټ سره شامل کړئ.

کارول

د سقوط پلگ ان د دروند پورته کولو اداره کولو لپاره څو ټولګي کاروي:

  • .collapseمواد پټوي
  • .collapse.showمنځپانګه ښيي
  • .collapsingاضافه کیږي کله چې لیږد پیل شي، او کله چې پای ته ورسیږي لرې کیږي

دا ټولګي په کې موندل کیدی شي _transitions.scss.

د معلوماتو ځانګړتیاو له لارې

یوازې عنصر ته اضافه کړئ data-toggle="collapse"او a data-targetپه اتوماتيک ډول د یو یا ډیرو ماتیدو وړ عناصرو کنټرول وټاکئ. خاصیت د data-targetCSS انتخاب کونکی مني چې د سقوط پلي کولو لپاره. ډاډ ترلاسه کړئ چې ټولګي collapseد سقوط وړ عنصر ته اضافه کړئ. که تاسو غواړئ چې دا په ډیفالټ خلاص شي، اضافي ټولګي اضافه کړئ show.

د تړل کیدو وړ ساحې ته د اکارډین په څیر ګروپ مدیریت اضافه کولو لپاره ، د ډیټا خاصیت اضافه کړئ data-parent="#selector". ډیمو ته مراجعه وکړئ ترڅو دا په عمل کې وګورئ.

د جاواسکریپټ له لارې

په لاسي ډول د دې سره فعال کړئ:

$('.collapse').collapse()

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-parent="".

نوم ډول ډیفالټ تفصیل
مور او پلار انتخاب کونکی | jQuery څيز | د DOM عنصر دروغ که چیرې والدین چمتو شي، نو د ټاکل شوي والدین لاندې ټول تړل کیدونکي عناصر به وتړل شي کله چې دا د ماتیدو وړ توکي وښودل شي. (د دودیز اکارډین چلند سره ورته - دا په cardټولګي پورې اړه لري). خاصیت باید د هدف د سقوط وړ ساحه کې تنظیم شي.
بدلول بولین ریښتیا په بلنه کې د سقوط وړ عنصر بدلوي

میتودونه

غیر متناسب میتودونه او لیږدونه

ټولې 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')

د یو عنصر سقوط له منځه وړي.

پیښې

د بوټسټریپ سقوط ټولګي د سقوط فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

د پیښې ډول تفصیل
show.bs.collapse دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی.bs.collapse دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.collapse دا پیښه سمدلاسه له مینځه وړل کیږي کله چې hideمیتود ویل کیږي.
hidden.bs.collaps دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})