דראָפּדאָוונס
טאַגאַל קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון פֿאַרבינדונגען און מער מיט די באָאָטסטראַפּ דראָפּדאָוון פּלוגין.
דראָפּדאָוונס זענען טאַגאַלאַבאַל, קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון לינקס און מער. זיי זענען ינטעראַקטיוו מיט די אַרייַנגערעכנט 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>
דער בעסטער טייל איז אַז איר קענען טאָן דאָס מיט קיין וואַריאַנט פון קנעפּלעך:
סימילאַרלי, שאַפֿן שפּאַלטן קנעפּל דראָפּדאָוונס מיט כמעט דער זעלביקער מאַרקאַפּ ווי איין קנעפּל דראָפּדאָוונס, אָבער מיט די אַדישאַן פון .dropdown-toggle-split
די רעכט ספּייסינג אַרום די דראָפּדאָוון קאַרעט.
מיר נוצן דעם עקסטרע קלאַס צו רעדוצירן די האָריזאָנטאַל padding
אויף יעדער זייַט פון די קאַרעט מיט 25% און באַזייַטיקן די margin-left
וואָס איז צוגעגעבן פֿאַר רעגולער קנעפּל דראָפּדאָוונס. די עקסטרע ענדערונגען האַלטן די קאַרעט סענטערד אין די שפּאַלטן קנעפּל און צושטעלן אַ מער אַפּראָופּרייטלי סייזד שלאָגן געגנט ווייַטער צו די הויפּט קנעפּל.
קנעפּל דראָפּדאָוונס אַרבעט מיט קנעפּלעך פון אַלע סיזעס, אַרייַנגערעכנט פעליקייַט און שפּאַלטן דראָפּדאָוון קנעפּלעך.
צינגל דראָפּדאָוון מעניוז אויבן עלעמענטן דורך אַדינג .dropup
צו די פאָטער עלעמענט.
צינגל דראָפּדאָוון מעניוז אין די רעכט פון די עלעמענטן דורך אַדינג .dropright
צו די פאָטער עלעמענט.
צינגל דראָפּדאָוון מעניוז אין די לינקס פון די עלעמענטן דורך אַדינג .dropleft
צו די פאָטער עלעמענט.
היסטאָריש די אינהאַלט פון די דראָפּדאָוון מעניו האט צו זיין לינקס, אָבער דאָס איז ניט מער דער פאַל מיט 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"
צו אַ לינק אָדער קנעפּל צו באַשטימען אַ דראָפּדאָוון.
רופן די דראָפּדאָוונס דורך דזשאַוואַסקריפּט:
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 טראַנזישאַנז צו פאַרענדיקן). |