Source

דראָפּדאָוונס

טאַגאַל קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון פֿאַרבינדונגען און מער מיט די באָאָטסטראַפּ דראָפּדאָוון פּלוגין.

איבערבליק

דראָפּדאָוונס זענען טאַגאַלאַבאַל, קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון לינקס און מער. זיי זענען ינטעראַקטיוו מיט די אַרייַנגערעכנט Bootstrap דראָפּדאָוון דזשאַוואַסקריפּט פּלוגין. זיי זענען טאַגאַלד דורך קליקינג, נישט דורך כאַווערינג; דאָס איז אַ ינטענשאַנאַל פּלאַן באַשלוס.

דראָפּדאָוונס זענען געבויט אויף אַ דריט טיילווייַז ביבליאָטעק, Popper.js , וואָס גיט דינאַמיש פּאַזישאַנינג און וויופּאָרט דיטעקשאַן. זייט זיכער צו אַרייַננעמען popper.min.js איידער Bootstrap ס דזשאַוואַסקריפּט אָדער נוצן bootstrap.bundle.min.js/ bootstrap.bundle.jsוואָס כּולל Popper.js. Popper.js איז נישט געניצט צו שטעלן דראָפּדאָוונס אין נאַוובאַרס, כאָטש דינאַמיש פּאַזישאַנינג איז נישט פארלאנגט.

אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .

אַקסעסאַביליטי

די WAI ARIA נאָרמאַל דיפיינז אַ פאַקטיש role="menu"ווידזשיט , אָבער דאָס איז ספּעציפיש פֿאַר אַפּלאַקיישאַן-ווי מעניוז וואָס צינגל אַקשאַנז אָדער פאַנגקשאַנז. ARIA מעניוז קענען בלויז אַנטהאַלטן מעניו זאכן, טשעקקבאָקס מעניו זאכן, ראַדיאָ קנעפּל מעניו זאכן, ראַדיאָ קנעפּל גרופּעס און סאַב-מעניוז.

די דראָפּדאָוונס פון Bootstrap, אויף די אנדערע האַנט, זענען דיזיינד צו זיין דזשאַנעריק און אָנווענדלעך צו אַ פאַרשיידנקייַט פון סיטואַטיאָנס און מאַרקאַפּ סטראַקטשערז. פֿאַר בייַשפּיל, עס איז מעגלעך צו שאַפֿן דראָפּדאָוונס וואָס אַנטהאַלטן נאָך ינפּוץ און פאָרעם קאָנטראָלס, אַזאַ ווי זוכן פעלדער אָדער לאָגין פארמען. פֿאַר דעם סיבה, Bootstrap קען נישט דערוואַרטן (און ניט אויטאָמאַטיש לייגן) קיין פון די roleאון aria-אַטריביוץ פארלאנגט פֿאַר אמת ARIA מעניוז. מחברים וועלן האָבן צו אַרייַננעמען די מער ספּעציפיש אַטריביוץ זיך.

אָבער, Bootstrap לייגט אַ געבויט-אין שטיצן פֿאַר רובֿ נאָרמאַל קלאַוויאַטור מעניו ינטעראַקשאַנז, אַזאַ ווי די פיייקייט צו מאַך דורך יחיד .dropdown-itemעלעמענטן ניצן די לויפֿער שליסלען און פאַרמאַכן די מעניו מיט די ESCשליסל.

ביישפילן

ייַנוויקלען די טאַגאַל פון די דראָפּדאָוון (דיין קנעפּל אָדער לינק) און די דראָפּדאָוון מעניו אין .dropdown, אָדער אן אנדער עלעמענט וואָס דערקלערט position: relative;. דראָפּדאָוונס קענען זיין טריגערד פֿון <a>אָדער <button>עלעמענטן צו בעסער פּאַסיק דיין פּאָטענציעל באדערפענישן.

איין קנעפּל דראָפּדאָוונס

יעדער איינער .btnקענען זיין פארוואנדלען אין אַ דראָפּדאָוון טאַגאַל מיט עטלעכע מאַרקאַפּ ענדערונגען. דאָ ס ווי איר קענען שטעלן זיי צו אַרבעטן מיט יעדער <button>עלעמענטן:

<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>עלעמענטן:

<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>

דער בעסטער טייל איז אַז איר קענען טאָן דאָס מיט קיין וואַריאַנט פון קנעפּלעך:

<!-- 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די רעכט ספּייסינג אַרום די דראָפּדאָוון קאַרעט.

מיר נוצן דעם עקסטרע קלאַס צו רעדוצירן די האָריזאָנטאַל paddingאויף יעדער זייַט פון די קאַרעט מיט 25% און באַזייַטיקן די margin-leftוואָס איז צוגעגעבן פֿאַר רעגולער קנעפּל דראָפּדאָוונס. די עקסטרע ענדערונגען האַלטן די קאַרעט סענטערד אין די שפּאַלטן קנעפּל און צושטעלן אַ מער אַפּראָופּרייטלי סייזד שלאָגן געגנט ווייַטער צו די הויפּט קנעפּל.

<!-- 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צו די פאָטער עלעמענט.

<!-- 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צו די פאָטער עלעמענט.

<!-- 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צו די פאָטער עלעמענט.

<!-- 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>

היסטאָריש די אינהאַלט פון די דראָפּדאָוון מעניו האט צו זיין לינקס, אָבער דאָס איז ניט מער דער פאַל מיט v4. איצט איר קענען אָפּטיאָנאַללי נוצן <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צו אַ .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>

שטעלן אַ פאָרעם אין אַ דראָפּדאָוון מעניו, אָדער מאַכן עס אין אַ דראָפּדאָוון מעניו, און נוצן גרענעץ אָדער וואַטן יוטילאַטיז צו געבן עס די נעגאַטיוו פּלאַץ איר דאַרפֿן.

<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>עלעמענט. דעם אַדמיטאַדלי מיעס כאַק איז נייטיק צו אַרבעטן אַרום אַ קנאַפּ אין יאָס 'עווענט דעלאַגיישאַן , וואָס אַנדערש וואָלט פאַרמייַדן אַ צאַפּן ערגעץ אַרויס פון די דראָפּדאָוון פון טריגערינג די קאָד וואָס קלאָוזיז די דראָפּדאָוון. אַמאָל די דראָפּדאָוון איז פארמאכט, די נאָך ליידיק 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-toggle="dropdown"איז שטענדיק פארלאנגט צו זיין פאָרשטעלן אויף די צינגל עלעמענט פון די דראָפּדאָוון.

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-offset="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
אָפסעט נומער | שטריקל | פֿונקציע 0 אָפסעט פון די דראָפּדאָוון קאָרעוו צו זיין ציל. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס פאָטאָ דאָקומענטן .
פליפּ בוליאַן אמת לאָזן דראָפּדאָוון פליפּ אין פאַל פון אַ אָוווערלאַפּינג אויף די רעפֿערענץ עלעמענט. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס פליפּ דאָקומענטן .
גרענעץ שטריקל | עלעמענט 'סקראָלפּאַרענט' אָוווערפלאָו קאַנסטריינץ גרענעץ פון די דראָפּדאָוון מעניו. אַקסעפּץ די וואַלועס פון 'viewport', 'window', 'scrollParent', אָדער אַן HTMLElement דערמאָנען (בלויז דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js's preventOverflow docs .

באַמערקונג ווען boundaryאיז באַשטימט צו קיין ווערט אנדערע ווי 'scrollParent', דער נוסח position: staticאיז געווענדט צו דעם .dropdownקאַנטיינער.

מעטהאָדס

מעטאָד באַשרייַבונג
$().dropdown('toggle') טאַגאַלס די דראָפּדאָוון מעניו פון אַ געגעבן נאַוובאַר אָדער טאַבבעד נאַוויגאַציע.
$().dropdown('update') דערהייַנטיקונגען די שטעלע פון ​​אַ עלעמענט ס דראָפּדאָוון.
$().dropdown('dispose') דיסטרויז אַן עלעמענט ס דראָפּדאָוון.

געשעענישן

אַלע דראָפּדאָוון געשעענישן זענען פייערד אויף די .dropdown-menuפאָטער עלעמענט און האָבן אַ relatedTargetפאַרמאָג, וועמענס ווערט איז די טאַגאַלינג אַנקער עלעמענט.

געשעעניש באַשרייַבונג
show.bs.dropdown די געשעעניש פירט גלייך ווען די ווייַזן בייַשפּיל אופֿן איז גערופן.
shown.bs.dropdown דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
hide.bs.dropdown דעם געשעעניש איז פייערד מיד ווען די באַהאַלטן בייַשפּיל אופֿן איז גערופן.
hidden.bs.dropdown דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})