Source

کشویی

با افزونه کشویی Bootstrap، همپوشانی های متنی را برای نمایش لیست پیوندها و موارد دیگر تغییر دهید.

بررسی اجمالی

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

کرکره‌ها بر روی یک کتابخانه شخص ثالث به نام Popper.js ساخته شده‌اند که موقعیت‌یابی پویا و شناسایی پورت دید را ارائه می‌دهد. حتماً popper.min.js را قبل از جاوا اسکریپت Bootstrap اضافه کنید یا از bootstrap.bundle.min.js/ bootstrap.bundle.jsکه حاوی Popper.js است استفاده کنید. Popper.js برای قرار دادن کرکره‌ها در نوارهای ناوبری استفاده نمی‌شود، اگرچه موقعیت‌یابی پویا لازم نیست.

اگر جاوا اسکریپت ما را از منبع می‌سازید، به آن نیاز داردutil.js .

دسترسی

استاندارد WAI ARIArole="menu" یک ویجت واقعی را تعریف می کند ، اما این ویژه منوهای برنامه مانندی است که اقدامات یا عملکردها را راه اندازی می کنند. منوهای ARIA فقط می‌توانند شامل آیتم‌های منو، آیتم‌های منوی کادر انتخاب، آیتم‌های منوی دکمه‌های رادیویی، گروه‌های دکمه‌های رادیویی و منوهای فرعی باشند.

از سوی دیگر، فهرست‌های بازشوی Bootstrap به گونه‌ای طراحی شده‌اند که عمومی باشند و برای انواع موقعیت‌ها و ساختارهای نشانه‌گذاری قابل استفاده باشند. به عنوان مثال، امکان ایجاد کرکره‌هایی وجود دارد که حاوی ورودی‌های اضافی و کنترل‌های فرم، مانند فیلدهای جستجو یا فرم‌های ورود هستند. به همین دلیل، Bootstrap هیچ یک از ویژگی ها roleو aria-ویژگی های مورد نیاز برای منوهای ARIA واقعی را انتظار ندارد (و به طور خودکار اضافه نمی کند). نویسندگان باید خود این ویژگی‌های خاص‌تر را لحاظ کنند.

با این حال، Bootstrap پشتیبانی داخلی را برای اکثر تعاملات استاندارد منوی صفحه کلید، مانند توانایی حرکت در .dropdown-itemعناصر جداگانه با استفاده از کلیدهای مکان نما و بستن منو با ESCکلید، اضافه می کند.

مثال ها

کلید کشویی (دکمه یا پیوند خود) و منوی کشویی را در داخل .dropdownیا عنصر دیگری که اعلان می کند ، بپیچید position: relative;. کرکره ها را می توان از <a>یا <button>عناصری فعال کرد تا بهتر با نیازهای بالقوه شما مطابقت داشته باشد.

کشویی تک دکمه

هر تکی .btnرا می توان با برخی تغییرات نشانه گذاری به یک ضامن کشویی تبدیل کرد. در اینجا نحوه قرار دادن آنها با هر یک از <button>عناصر آمده است:

Action Another action Something else here 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

و با <a>عناصر:

Action Another action Something else here 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

بهترین بخش این است که می توانید این کار را با هر نوع دکمه ای نیز انجام دهید:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

کشویی دکمه تقسیم

به طور مشابه، کشویی دکمه های تقسیم را با نشانه گذاری تقریباً مشابه با منوهای کشویی تک دکمه ایجاد کنید، اما .dropdown-toggle-splitبرای ایجاد فاصله مناسب در اطراف کرکره کرکره ای به آن اضافه کنید.

ما از این کلاس اضافی برای کاهش padding25٪ افقی در دو طرف حفاظ استفاده می کنیم و آن را حذف می کنیم margin-leftکه برای کشویی دکمه های معمولی اضافه شده است. این تغییرات اضافی، حواشی را در مرکز دکمه تقسیم نگه می دارد و یک ناحیه ضربه با اندازه مناسب تری در کنار دکمه اصلی ایجاد می کند.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

سایز بندی

کشویی دکمه‌ها با دکمه‌های همه اندازه‌ها، از جمله دکمه‌های کشویی پیش‌فرض و تقسیم‌بندی کار می‌کنند.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

تنوع قطره ای

منوهای کشویی بالای عناصر را با افزودن .dropupبه عنصر والد فعال کنید.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

تنوع قطره ای

.droprightبا افزودن به عنصر والد، منوهای کشویی را در سمت راست عناصر فعال کنید.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

تنوع قطره ای

.dropleftبا افزودن به عنصر والد، منوهای کشویی را در سمت چپ عناصر فعال کنید.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

محتویات منوی کشویی از لحاظ تاریخی باید پیوند باشند، اما این دیگر در مورد نسخه 4 صدق نمی کند. اکنون می‌توانید به‌صورت اختیاری از <button>عناصر در فهرست‌های کشویی خود به‌جای <a>s استفاده کنید.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

به طور پیش فرض، یک منوی کشویی به طور خودکار 100٪ از بالا و در امتداد سمت چپ والد خود قرار می گیرد. .dropdown-menu-rightبه a اضافه کنید .dropdown-menuتا منوی کشویی را تراز کنید.

سر بالا! کرکره ها به لطف Popper.js قرار می گیرند (به جز زمانی که در یک نوار ناوبری قرار دارند).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

در هر منوی کشویی، یک سرصفحه برای برچسب زدن بخش‌های عملکردها اضافه کنید.

هدر کشویی
عمل یک اقدام دیگر 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

گروه هایی از آیتم های منوی مرتبط را با یک تقسیم کننده جدا کنید.

عمل یک اقدام دیگر یه چیز دیگه اینجا
لینک جدا شده 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

یک فرم را در یک منوی کشویی قرار دهید، یا آن را در یک منوی کشویی قرار دهید، و از ابزارهای حاشیه یا padding استفاده کنید تا فضای منفی مورد نیاز خود را به آن بدهید.

اینجا جدیده؟ ثبت نام رمز عبور را فراموش کرده اید؟ 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

آیتم های منو فعال

.activeبه موارد در منوی کشویی اضافه کنید تا آنها را فعال کنید.

لینک منظم لینک فعال لینک دیگه 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

موارد منو غیرفعال شده است

.disabledبه موارد در منوی کشویی اضافه کنید تا آنها را غیرفعال کنید.

لینک منظم لینک غیرفعال شده لینک دیگه 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

استفاده

از طریق ویژگی های داده یا جاوا اسکریپت، افزونه کشویی محتوای پنهان (منوهای کشویی) را با تغییر دادن .showکلاس در آیتم لیست والد تغییر می دهد. این data-toggle="dropdown"ویژگی برای بستن منوهای کشویی در سطح برنامه مورد استفاده قرار می گیرد، بنابراین ایده خوبی است که همیشه از آن استفاده کنید.

در دستگاه‌های دارای قابلیت لمس، باز کردن یک منوی بازشو، کنترل‌کننده‌های خالی ( $.noop) mouseoverرا به فرزندان اصلی <body>عنصر اضافه می‌کند. مسلماً این هک زشت برای حل یک اشتباه در نمایندگی رویداد iOS ضروری است ، که در غیر این صورت از ضربه زدن به هر جایی خارج از کرکره از راه‌اندازی کدی که فهرست کشویی را می‌بندد، جلوگیری می‌کند. پس از بسته شدن منوی بازشو، این کنترل کننده های خالی اضافی mouseoverحذف می شوند.

از طریق ویژگی های داده

data-toggle="dropdown"برای تغییر حالت کشویی به پیوند یا دکمه اضافه کنید.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

از طریق جاوا اسکریپت

کشویی ها را از طریق جاوا اسکریپت فراخوانی کنید:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"هنوز مورد نیاز است

صرف نظر از اینکه از طریق جاوا اسکریپت کشویی خود را فراخوانی می‌کنید یا در عوض از data-api استفاده می‌کنید، data-toggle="dropdown"همیشه لازم است در عنصر ماشه کشویی وجود داشته باشد.

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-offset="".

نام تایپ کنید پیش فرض شرح
انحراف شماره | رشته | عملکرد 0 افست کشویی نسبت به هدفش. برای اطلاعات بیشتر به اسناد افست Popper.js مراجعه کنید .
تلنگر بولی درست است، واقعی در صورت همپوشانی روی عنصر مرجع، به Dropdown اجازه دهید تا ورق بزند. برای اطلاعات بیشتر به اسناد تلنگر Popper.js مراجعه کنید .
مرز رشته | عنصر 'scrollParent' مرز محدودیت سرریز منوی کشویی. مقادیر 'viewport', 'window', 'scrollParent'یا مرجع HTMLElement (فقط جاوا اسکریپت) را می پذیرد. برای اطلاعات بیشتر به اسناد preventOverflow Popper.js مراجعه کنید .

توجه داشته باشید که وقتی boundaryروی هر مقداری غیر از ست تنظیم می شود 'scrollParent'، استایل روی ظرف position: staticاعمال می شود .dropdown.

مواد و روش ها

روش شرح
$().dropdown('toggle') منوی کشویی یک نوار ناوبری مشخص یا پیمایش تب شده را تغییر می دهد.
$().dropdown('update') موقعیت منوی کشویی یک عنصر را به روز می کند.
$().dropdown('dispose') فهرست بازشوی یک عنصر را از بین می برد.

مناسبت ها

.dropdown-menuهمه رویدادهای کشویی در عنصر والد ' شلیک می شوند و دارای یک relatedTargetویژگی هستند که مقدار آن عنصر لنگر تغییر دهنده است.

رویداد شرح
show.bs.dropdown این رویداد بلافاصله با فراخوانی متد show instance فعال می شود.
shown.bs.dropdown این رویداد زمانی فعال می شود که کشویی برای کاربر قابل مشاهده باشد (برای تکمیل شدن CSS منتظر می ماند).
hide.bs.dropdown این رویداد بلافاصله پس از فراخوانی متد hide instance فعال می شود.
hidden.bs.dropdown این رویداد زمانی فعال می‌شود که مخفی شدن فهرست کشویی از کاربر به پایان برسد (برای تکمیل شدن CSS منتظر می‌ماند). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})