JavaScript

Bootstrap نىڭ زاپچاسلىرىنى ھاياتلىققا ئېرىشتۈرۈڭ ، ھازىر 13 خىل خاسلاشتۇرۇلغان jQuery قىستۇرمىسى بار.

يەككە ياكى تۈزۈلگەن

قىستۇرمىلارنى ئايرىم ئۆز ئىچىگە ئالغىلى بولىدۇ (گەرچە بەزىلىرى بېقىنىشنى تەلەپ قىلسىمۇ) ياكى ھەممىسىنى بىراقلا ئۆز ئىچىگە ئالىدۇ. Bootstrap.js ۋە bootstrap.min.js ھەر ئىككىسى بىرلا ھۆججەتتىكى بارلىق قىستۇرمىلارنى ئۆز ئىچىگە ئالىدۇ.

سانلىق مەلۇمات خاسلىقى

بارلىق Bootstrap قىستۇرمىلىرىنى JavaScript نىڭ بىر قۇرنى يازماي تۇرۇپلا بەلگە API ئارقىلىق ساپ ئىشلىتەلەيسىز. بۇ Bootstrap نىڭ بىرىنچى دەرىجىلىك API بولۇپ ، قىستۇرما ئىشلەتكەندە بىرىنچى ئويلىنىشىڭىز كېرەك.

دېمەك ، بەزى ئەھۋاللاردا بۇ ئىقتىدارنى تاقاشنى ئارزۇ قىلىش مۇمكىن. شۇڭلاشقا ، بىز يەنە «data-api» بىلەن بەدەن نامىدىكى بارلىق ۋەقەلەرنى باغلاپ سانلىق مەلۇمات خاسلىقى API نى چەكلەش ئىقتىدارى بىلەن تەمىنلەيمىز. بۇ ئوخشايدۇ:

  1. $ ( 'body' ). off ( '.data-api' )

ئۇنىڭدىن باشقا ، مەلۇم بىر قىستۇرمىنى نىشانلاش ئۈچۈن ، قىستۇرمىنىڭ نامىنى ئىسىم بوشلۇقى سۈپىتىدە سانلىق مەلۇمات api ئىسىم بوشلۇقى بىلەن قوشۇڭ:

  1. $ ( 'body' ). off ( '.alert.data-api' )

پروگرامما API

بىز يەنە بارلىق Bootstrap قىستۇرمىلىرىنى JavaScript API ئارقىلىقلا ئىشلىتەلەيدىغانلىقىڭىزغا ئىشىنىمىز. بارلىق ئاممىۋى API لار يەككە ، زەنجىرسىمان ئۇسۇل بولۇپ ، توپلانغان مەشغۇلاتنى قايتۇرىدۇ.

  1. $ ( ".btn.danger" ). كۇنۇپكا ( "ئالماشتۇرۇش" ). addClass ( "ماي" )

بارلىق ئۇسۇللار ئىختىيارى تاللاش ئوبيېكتىنى ، مەلۇم بىر ئۇسۇلنى نىشان قىلغان بىر قۇر ياكى ھېچنىمە (سۈكۈتتىكى ھەرىكەت بىلەن قىستۇرمىنى قوزغىتىدۇ) نى قوبۇل قىلىشى كېرەك:

  1. $ ( "#myModal" ). modal () // سۈكۈتتىكى ھالەتتە باشلانغان
  2. $ ( "#myModal" ). modal ({ كۇنۇپكا تاختىسى : يالغان }) // ھېچقانداق كۇنۇپكا تاختىسى يوق
  3. $ ( "#myModal" ). modal ( 'show' ) // دەرھال باشلايدۇ ۋە چاقىرىدۇ

ھەر بىر قىستۇرما خام ئەشياسىنى `Constructor` خاسلىقىدا ئاشكارىلايدۇ : $.fn.popover.Constructor. ئەگەر سىز مەلۇم قىستۇرما مىسالىغا ئېرىشمەكچى بولسىڭىز ، ئۇنى بىۋاسىتە ئېلېمېنتتىن ئېلىڭ : $('[rel=popover]').data('popover').

توقۇنۇش يوق

بەزىدە باشقا UI رامكىسى بىلەن Bootstrap قىستۇرمىلىرىنى ئىشلىتىشكە توغرا كېلىدۇ. بۇ خىل ئەھۋال ئاستىدا ، ئىسىم بوشلۇقى سوقۇلۇش بەزىدە يۈز بېرىشى مۇمكىن. ئەگەر بۇ خىل ئەھۋال كۆرۈلسە ، .noConflictقىممىتىنى ئەسلىگە كەلتۈرمەكچى بولغان قىستۇرمىغا تېلېفون قىلسىڭىز بولىدۇ.

  1. var bootstrapButton = $ . fn . كۇنۇپكا . noConflict () // $ .fn.button نى ئىلگىرى بېكىتىلگەن قىممەتكە قايتۇرۇڭ
  2. $ . fn . bootstrapBtn = bootstrapButton // بېرىڭ $ (). bootstrapBtn bootstrap ئىقتىدارىنى

Events

Bootstrap كۆپىنچە قىستۇرمىلارنىڭ ئۆزگىچە ھەرىكەتلىرى ئۈچۈن خاس پائالىيەتلەر بىلەن تەمىنلەيدۇ. ئادەتتە ، بۇلار چەكسىز ۋە ئۆتمۈشتىكى ئورتاقلىشىش شەكلىدە كېلىدۇ - بۇ يەردە ئىنفىنىت (مەسىلەن show) پائالىيەت باشلانغاندا قوزغىلىدۇ ، ئۇنىڭ ئىلگىرىكى ئىشتىراك شەكلى (مەسىلەن shown) ھەرىكەتنىڭ تاماملىنىشىدا قوزغىلىدۇ.

بارلىق چەكسىز ۋەقەلەر ئالدىنى ئېلىش ئىقتىدارى بىلەن تەمىنلەيدۇ. بۇ ھەرىكەت باشلىنىشتىن بۇرۇن ئىجرا قىلىشنى توختىتىش ئىقتىدارى بىلەن تەمىنلەيدۇ.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. if (! data ) return e . preventDefault () // مودېلنىڭ كۆرسىتىلىشىنى توختىتىدۇ
  3. })

ئۆتكۈنچى ھەققىدە

ئاددىي ئۆتكۈنچى ئۈنۈم ئۈچۈن ، باشقا JS ھۆججەتلىرى بىلەن بىللە bootstrap-transition.js نى ئۆز ئىچىگە ئالىدۇ. ئەگەر سىز تۈزۈلگەن (ياكى كىچىكلىتىلگەن) bootstrap.js نى ئىشلىتىۋاتقان بولسىڭىز ، بۇنى ئۆز ئىچىگە ئېلىشنىڭ ھاجىتى يوق - ئۇ ئاللىبۇرۇن بار.

دېلولارنى ئىشلىتىڭ

ئۆتكۈنچى قىستۇرمىنىڭ بىر قانچە مىسالى:

  • مودېللاردا سىيرىلىش ياكى سۇسلاش
  • بەتكۈچلەرنى يوقىتىۋاتىدۇ
  • ئاگاھلاندۇرۇش سۇسلاش
  • سىيرىلما كارۇسېل تاختىسى

مىساللار

مودېللار ئىخچام ، ئەمما جانلىق ، دىئالوگ ئەڭ تۆۋەن تەلەپتىكى ئىقتىدار ۋە ئەقلىي ئىقتىدارلىق سۈكۈتتىكى ئەسكەرتىش.

تۇراقلىق مىسال

بەت ئاستى قىسمىدا باش ، گەۋدە ۋە بىر يۈرۈش ھەرىكەتلەر بىلەن كۆرسىتىلگەن مودېل.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > & times; </button>
  4. <h3> مودېل ماۋزۇ </ h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> بىر ئېسىل بەدەن… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn"> تاقاش </a> _
  11. <a href = "#" class = "btn btn-primary"> ئۆزگەرتىشلەرنى ساقلاش </a>
  12. </div>
  13. </div>

Live demo

تۆۋەندىكى كۇنۇپكىنى بېسىش ئارقىلىق JavaScript ئارقىلىق مودېلنى ئالماشتۇرۇڭ. ئۇ سىيرىلىپ بەتنىڭ ئۈستىدىن سۇسلاپ كېتىدۇ.

  1. <! - مودېلنى قوزغىتىش كۇنۇپكىسى ->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> ئۈلگە كۆرسىتىش ئەندىزىسىنى قوزغىتىش </a>
  3.  
  4. <! - Modal ->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > مودېل بەت بېشى </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> بىر ئېسىل بەدەن… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > تاقاش </button>
  15. <button class = "btn btn-primary" > ئۆزگەرتىشلەرنى ساقلاش </button>
  16. </div>
  17. </div>

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript يازماي تۇرۇپ مودېلنى قوزغىتىڭ. كونتروللىغۇچ data-toggle="modal"ئېلېمېنتىغا ، بىر كۇنۇپكا بىلەن تەڭ data-target="#foo"ياكى href="#foo"مەلۇم مودېلنى ئالماشتۇرۇشقا توغرىلاڭ.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > قوزغىتىش مودېلى </button>

JavaScript ئارقىلىق

myModalبىر قۇر JavaScript بىلەن id بىلەن مودېلغا تېلېفون قىلىڭ :

  1. $ ( '#myModal' ). modal ( options )

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-backdrop="".

ئىسمى تىپى كۆڭۈلدىكى description
ئارقا كۆرۈنۈش boolean true مودېل ئارقا كۆرۈنۈش ئېلېمېنتىنى ئۆز ئىچىگە ئالىدۇ. staticئۇنىڭدىن باشقا ، چېكىشتە مودېلنى تاقىمايدىغان ئارقا كۆرۈنۈشنى بەلگىلەڭ .
كۇنۇپكا تاختىسى boolean true قېچىش كۇنۇپكىسى بېسىلغاندا مودېلنى تاقايدۇ
show boolean true قوزغالغاندا مودېلنى كۆرسىتىدۇ.
remote يول false

ئەگەر يىراقتىكى url تەمىنلەنسە ، jQuery ئۇسۇلى ئارقىلىق مەزمۇن يۈكلىنىدۇ loadۋە ئىچىگە ئوكۇل قىلىنىدۇ .modal-body. ئەگەر سانلىق مەلۇمات api نى ئىشلىتىۋاتقان بولسىڭىز ، hrefخەتكۈچنى ئىشلىتىپ يىراق مەنبەنى بەلگىلىسىڭىز بولىدۇ. تۆۋەندە بۇنىڭ بىر مىسالى كۆرسىتىلدى:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methods

.modal (تاللانما)

مەزمۇنلىرىڭىزنى مودېل سۈپىتىدە قوزغىتىدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object.

  1. $ ( '#myModal' ). modal ({
  2. كۇنۇپكا تاختىسى : يالغان
  3. })

.modal ('toggle')

قولدا مودېلنى ئالماشتۇرىدۇ.

  1. $ ( '#myModal' ). modal ( 'toggle' )

.modal ('show')

قولدا مودېل ئاچىدۇ.

  1. $ ( '#myModal' ). modal ( 'show' )

.modal ('hide')

قولدا مودېلنى يوشۇرىدۇ.

  1. $ ( '#myModal' ). modal ( 'hide' )

Events

Bootstrap نىڭ مودېل سىنىپى مودېل ئىقتىدارغا باغلىنىش ئۈچۈن بىر قانچە ۋەقەنى ئاشكارىلىدى.

Event چۈشەندۈرۈش
show showمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
كۆرسىتىلدى بۇ ھادىسە مودېلنى ئىشلەتكۈچىگە كۆرۈنگەندە ئېتىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
يوشۇر hideئۈلگە ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ .
يوشۇرۇنغان بۇ ھادىسە مودېل ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن چىقىرىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // بىرەر ئىش قىلىڭ…
  3. })

Navbar دىكى مىسال

ScrollSpy قىستۇرمىسى سىيرىلما ئورۇنغا ئاساسەن nav نىشانلىرىنى ئاپتوماتىك يېڭىلاش ئۈچۈندۇر. يولباشچىنىڭ ئاستىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ. تارتما تارماق تۈرلەرمۇ گەۋدىلىنىدۇ.

@fat

ئېلان بەلگە كۇنۇپكىسى ، چاتما id سەنئەت يىغىلىشى دولور ئەمگىكى. Pitchfork yr enim lo-fi ئۇلار سېتىلىپ بولغۇچە. Tumblr دېھقانچىلىق مەيدانىدىن ئۈستەلگە ۋېلىسىپىت ھوقۇقى نېمە. Anim keffiyeh carles cardigan. Velit seitan mcsweeney نىڭ رەسىم ئورنى 3 بۆرە ئايسىز. Cosby swater lomo jean كالتە ئىشتان ، ۋىللىيامسبۇرگ خۇدى مىننى كىي بەلكىم سىز ئۇلارنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. نىھىل چەكمە ئەيىبلەش ، ئىناۋەتلىك بىيو دىزېل كېفىيە ھۈنەرۋەن ئۇللامكو ئاقىۋەت.

@mdo

ۋېنىئام مارفا بۇرۇتلۇق تېيىلىش تاختىسى ، فۇگىيات تېز سۈرئەتلىك ساقاللىرىنى ماسلاشتۇرىدۇ. Freegan ساقال ئاليۇكا لوڭقىسى mcsweeney نىڭ ۋېروسى. Cupidatat تۆت لوكو نىسى ، ea helvetica nulla carles. چەكمە كوسبى تەرلىگۈچى يېمەكلىك يۈك ماشىنىسى ، mcsweeney نىڭ ھەقسىز ھەقسىز ۋىنىل. Lo-fi wes anderson +1 يۈرۈشلۈك. كارلېس ئېستېتىك بولمىغان چېنىقىش سوئاللىرىنى مۇلايىملاشتۇرىدۇ. برۇكلىن قول ھۈنەرۋەنچىلىك پىۋىسى مۇئاۋىن ئاچقۇچ ئاچقۇچ.

بىرى

Occaecat commodo aliqua delectus. Fap ھۈنەر-سەنئەت پىۋا چۆل تېيىلىش تاختىسى ea. لومو ۋېلىسىپىت ھوقۇقىنىڭ ماسلىشىشى بانخ mi ، velit ea sunt كېيىنكى دەرىجىدىكى ماگنا ۋېنىيادىكى يەرلىك يەككە يەرلىك قەھۋە. يۇقىرى ھاياتلىق id vinyl ، echo باغچىسى ئاقىۋىتى alikip banh mi pitchfork. Vero VHS est adipisising. Consectetur nisi DIY ئەڭ كىچىك ئۇچۇر خالتىسى. ئىشەنچلىك ، ئىمكانىيەتلىك سىجىل بولغان ئېلېكترونلۇق كونۇپكا تاختىسى iphone.

ئىككى

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee بىلوگى ، كۇلپا خەۋەرچى سومكىسى مارفا ھەر قانداق دېلېكتۇس يېمەكلىك يۈك ماشىنىسى. Sapiente synth id assnda. Locavore sed helvetica cliche مەسخىرە ، گۈلدۈرمامىلىق گۈلدۈرماما بەلكىم سىز ئۇلارنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. ئۇلار سېتىلىشتىن بۇرۇن ئەمگەك كۈچى لاياقەتلىك جاي. كاردىگان ھۈنەر-سەنئەت پىۋىسى سەيتان تەييارلانغان مەخمەل. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco گۈلدۈرماما.


ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

ئۈستۈنكى بالداق يول باشلىشىڭىزغا ئاسانلا سىيرىلما ھەرىكەت قوشۇش data-spy="scroll"ئۈچۈن ، سىز جاسۇسلۇق قىلماقچى بولغان ئېلېمېنتنى قوشۇڭ (كۆپىنچە بۇ بەدەن بولىدۇ) ۋە data-target=".navbar"قايسى nav نى ئىشلىتىشنى تاللاڭ. سىز .navزاپچاس بىلەن scrollspy نى ئىشلەتمەكچى بولىسىز.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

JavaScript ئارقىلىق

JavaScript ئارقىلىق scrollspy غا تېلېفون قىلىڭ:

  1. $ ( '#navbar' ). scrollspy ()
Heads up! Navbar ئۇلىنىشىدا ھەل قىلغىلى بولىدىغان id نىشانلىرى بولۇشى كېرەك. مەسىلەن ، <a href="#home">home</a>چوقۇم dom دىكىگە ئوخشاش نەرسىگە ماس كېلىشى كېرەك <div id="home"></div>.

Methods

.scrollspy ('يېڭىلاش')

DOM دىكى ئېلېمېنتلارنى قوشۇش ياكى چىقىرىۋېتىش بىلەن بىللە scrollspy نى ئىشلەتكەندە ، يېڭىلاش ئۇسۇلىنى مۇنداق چاقىرىشىڭىز كېرەك:

  1. $ ( '[data-spy = "scroll"]' ). each ( function () {
  2. var $ spy = $ ( بۇ ). scrollspy ( 'refresh' )
  3. });

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset="".

ئىسمى تىپى كۆڭۈلدىكى description
offset سان 10 دومىلىما ئورۇننى ھېسابلىغاندا يۇقىرىدىن ئۆچۈرۈلىدىغان پىكسېل.

Events

Event چۈشەندۈرۈش
ئاكتىپلاش بۇ پائالىيەت سىيرىلما ئارقىلىق يېڭى نەرسە قوزغىتىلغان ھامان ئوت ئاپىتى يۈز بېرىدۇ.

مىسال بەتكۈچ

تېز ، ھەرىكەتچان بەتكۈچ ئىقتىدارىنى قوشۇڭ ، ھەتتا تىزىملىك ​​تىزىملىكى ئارقىلىق يەرلىك مەزمۇننىڭ تاختىسىغا ئۆتۈڭ.

خام رەقەم بەلكىم سىز ئۇلارنىڭ قىسقا كالتە ئىشتاننى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. Nesciunt tofu stumptown aliqua, retro synth master cleanse. بۇرۇتنى ۋاقىتلىق بېسىش ، ۋىليامسبۇرگ كارلېس گۆشسىز قۇتقۇزۇش ماشىنىسى. Reprehenderit قاسساپ retro keffiyeh dreamcatcher synth. Cosby swater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ئامېرىكىلىق كىيىم-كېچەك ، قاسساپ ۋولۇپات نىسى كۇ.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


ئىشلىتىش

JavaScript ئارقىلىق جەدۋەل بەتكۈچلىرىنى قوزغىتىڭ (ھەر بىر بەتكۈچنى ئايرىم قوزغىتىش كېرەك):

  1. $ ( '#myTab a' ). Click ( function ( e ) {
  2. e . preventDefault ();
  3. $ ( this ). tab ( 'show' );
  4. })

يەككە بەتكۈچلەرنى بىر قانچە خىل ئۇسۇلدا قوزغىتالايسىز:

  1. $ ( '#myTab a [href = "# profile"]' ). tab ( 'show' ); // بەتكۈچنى ئىسىم بويىچە تاللاڭ
  2. $ ( '#myTab a: first' ). tab ( 'show' ); // بىرىنچى بەتكۈچنى تاللاڭ
  3. $ ( '#myTab a: last' ). tab ( 'show' ); // ئاخىرقى بەتكۈچنى تاللاڭ
  4. $ ( '#myTab li: eq (2) a' ). tab ( 'show' ); // ئۈچىنچى بەتكۈچنى تاللاڭ (0 كۆرسەتكۈچ)

Markup

data-toggle="tab"سىز پەقەت بىر ئېلېمېنت ياكى ئېلېمېنت ئارقىلىق JavaScript يازمايلا بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز data-toggle="pill". navبەتكۈچكە ۋە nav-tabsدەرسلەرنى قوشقاندا ulBootstrap بەتكۈچ ئۇسلۇبى قوللىنىلىدۇ.

  1. <ul class = "nav nav-tabs" >
  2. <li> <a href = "#home" data-toggle = "tab"> باشبەت </a> </li >
  3. <li> <a href = "#profile" data-toggle = "tab"> ئارخىپ </a> </li >
  4. <li> <a href = "#messages" data-toggle = "tab"> ئۇچۇرلار </a> </li >
  5. <li> <a href = "#settings" data-toggle = "tab"> تەڭشەكلەر </a> </li >
  6. </ul>

Methods

$ (). بەتكۈچ

بەتكۈچ ئېلېمېنتى ۋە مەزمۇن قاچىسىنى قوزغىتىدۇ. بەتكۈچتە DOM دىكى قاچا تۈگۈنى data-targetياكى نىشانلانغان بولۇشى كېرەك.href

  1. <ul class = "nav nav- tabs" id = "myTab" >
  2. <li class = "active" > <a href = "#home"> باشبەت </a> </li >
  3. <li> <a href = "#profile"> ئارخىپ </a> </li>
  4. <li> <a href = "#messages"> ئۇچۇرلار </a> </li>
  5. <li> <a href = "#settings"> تەڭشەكلەر </a> </li >
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "ئۇچۇر" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a: last' ). tab ( 'show' );
  18. })
  19. </script>

Events

Event چۈشەندۈرۈش
show بۇ پائالىيەت بەتكۈچ كۆرگەزمىسىدە ئوت ئاچىدۇ ، ئەمما يېڭى بەتكۈچ كۆرسىتىلىشتىن بۇرۇن. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.targetۋە نىشانلاڭ.event.relatedTarget
كۆرسىتىلدى بۇ ھادىسە بەتكۈچ كۆرسىتىلگەندىن كېيىن بەتكۈچتە كۆرۈنىدۇ. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.targetۋە نىشانلاڭ.event.relatedTarget
  1. $ ( 'a [data-toggle = "tab"]' ). on ( 'shown' , function ( e ) {
  2. e . نىشان // قوزغىتىلغان بەتكۈچ
  3. e . مۇناسىۋەتلىك نىشان // ئالدىنقى بەتكۈچ
  4. })

مىساللار

ئىلھامى Jason Frame تەرىپىدىن يېزىلغان ئېسىل jQuery.tipsy قىستۇرمىسى. قورال قوراللىرى يېڭىلانغان نەشرى بولۇپ ، ئۇ رەسىملەرگە تايانمايدۇ ، كارتون فىلىم ئۈچۈن CSS3 نى ئىشلىتىدۇ ، يەرلىك ماۋزۇ ساقلاش ئۈچۈن سانلىق مەلۇمات خاسلىقى.

ئىقتىدار سەۋەبىدىن ، قورال كۆرسەتكۈچى ۋە ئېلېكترونلۇق سانلىق مەلۇمات apis تاللىنىدۇ ، يەنى سىز چوقۇم ئۇلارنى ئۆزىڭىز باشلىشىڭىز كېرەك .

تۆۋەندىكى ئۇلىنىشلارنى بېسىپ قورال قوراللىرىنى كۆرۈڭ:

تار ئىشتان كېيىنكى دەرىجىلىك keffiyeh بەلكىم سىز ئۇلارنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. سۈرەت پونكىتى ساقال خام دېنىم خەت ساندۇقى گۆشسىز خەۋەرچى سومكىسى توختاپ قالدى. دېھقانچىلىق مەيدانىدىن ئۈستەلگە ئولتۇرىدىغان سەيتان ، mcsweeney نىڭ مۇقىم سىجىللىقىدىكى 8 بىتلىق ئامېرىكا كىيىم-كېچەكلىرىنىڭ تېررى رىچاردسون ۋىنىل چامبراي بار . ساقاللىرى توختاپ قالدى ، كارتىلار بانخ مى لومو گۈلدۈرماما. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleangan vegan chambray. ھەقىقەتەن كىشىنى ھەيران قالدۇرىدىغان ھۈنەرۋەن ھەر قانداق ئاچقۇچ ، مەنزىرىلىك دېھقانچىلىق مەيدانىدىن ئۈستەل بانكىسى Austin twitter بىر تەرەپ قىلغان ھەقسىز كرېدىت خام دېنى يەككە مەنبەلىك قەھۋە ۋىرۇسى.

تۆت يۆنىلىش

كىرگۈزۈش گۇرۇپپىسىدىكى قوراللار

Bootstrap كىرگۈزۈش گۇرۇپپىلىرى بىلەن قورال قوراللىرى ۋە كۆزنەكلەرنى ئىشلەتكەندە ، لازىملىق containerئەكىس تەسىرلەردىن ساقلىنىش ئۈچۈن (تۆۋەندىكى ھۆججەتلەرنى) تاللىشىڭىز كېرەك.


ئىشلىتىش

قورال قورالنى JavaScript ئارقىلىق قوزغىتىڭ:

  1. $ ( '# مىسال' ). tooltip ( تاللانما )

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-animation="".

ئىسمى تىپى كۆڭۈلدىكى description
animation boolean true قورال ساندۇقىغا css سۇس ئۆتۈشنى ئىشلىتىڭ
html boolean false قورال قورالىغا html قىستۇرۇڭ. ئەگەر يالغان بولسا ، jquery نىڭ textئۇسۇلى dom غا مەزمۇن قىستۇرۇشقا ئىشلىتىلىدۇ. ئەگەر XSS ھۇجۇمىدىن ئەنسىرىسىڭىز تېكىست ئىشلىتىڭ.
ئورۇنلاشتۇرۇش string | function 'top' قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئۈستى | ئاستى | left | توغرا
تاللىغۇچ string false ئەگەر تاللىغۇچ تەمىنلەنسە ، قورال كۆرسەتكۈچ ئوبيېكتى بەلگىلەنگەن نىشانغا تاپشۇرۇلىدۇ.
ماۋزۇ string | function '' ئەگەر «تېما» بەلگىسى بولمىسا ، سۈكۈتتىكى تېما قىممىتى
trigger string 'hover focus' قورال قوراللىرى قانداق قوزغىتىلىدۇ - نى چېكىڭ hover | فوكۇس | manual. شۇنىڭغا دىققەت قىلىڭكى ، قوزغاتقۇچنىڭ ئۆزگىرىشى ، بوشلۇق ئايرىلغان ، قوزغاتقۇچ تىپى.
كېچىكىش سان | ئوبيېكت 0

قورال كۆرسەتكۈچى (ms) نى كۆرسىتىش ۋە يوشۇرۇشنى كېچىكتۈرۈش - قولدا قوزغىتىش تىپىغا ماس كەلمەيدۇ

ئەگەر بىر سان تەمىنلەنسە ، يوشۇرۇش / كۆرسىتىشكە كېچىكىش قوللىنىلىدۇ

ئوبيېكت قۇرۇلمىسى:delay: { show: 500, hide: 100 }

قاچا string | false false

قورال قوراللىرىنى مەلۇم ئېلېمېنتقا قوشىدۇcontainer: 'body'

Heads up! يەككە قورال قوراللىرىنىڭ تاللانمىلىرىنى سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش ئارقىلىق بەلگىلىگىلى بولىدۇ.

Markup

  1. <a href = " # " data-toggle = " tooltip " title = "بىرىنچى قورال قورال "

Methods

$ (). tooltip (تاللانما)

قورال توپلىغۇچنى ئېلېمېنتلار توپلىمىغا باغلايدۇ.

.tooltip ('show')

بىر ئېلېمېنتنىڭ قورال قوراللىرىنى ئاشكارىلايدۇ.

  1. $ ( '#element' ). tooltip ( 'show' )

.tooltip ('hide')

ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ.

  1. $ ( '#element' ). tooltip ( 'hide' )

.tooltip ('toggle')

ئېلېمېنتنىڭ قورال قوراللىرىنى بىر تەرەپ قىلىدۇ.

  1. $ ( '#element' ). tooltip ( 'toggle' )

.tooltip ('يوقىتىش')

ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ ۋە يوقىتىدۇ.

  1. $ ( '#element' ). tooltip ( 'destroy' )

مىساللار

تۇرالغۇ ئۇچۇرلىرى ئۈچۈن ھەر قانداق ئېلېمېنتقا iPad دىكىگە ئوخشاش كىچىك مەزمۇنلارنى قوشۇڭ. كۇنۇپكىنى بېسىپ تۇرۇپ سەكرەشنى قوزغىتىڭ. قورال قورالنى ئۆز ئىچىگە ئالىدۇ.

تۇراقلىق ھالەت

تۆت خىل تاللاش بار: ئۈستى ، ئوڭ ، ئاستى ۋە سولغا توغرىلىنىدۇ.

Popover top

Sob posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sob posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sob posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sob posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

dataپوپايكا سۈپىتىدە كۆرسىتىلگەن بەلگە JavaScript ۋە خاسلىق ئىچىدىكى مەزمۇندىن ھاسىل بولمايدۇ.

Live demo

تۆت يۆنىلىش


ئىشلىتىش

JavaScript ئارقىلىق پوپايكىلارنى قوزغىتىڭ:

  1. $ ( '# مىسال' ). popover ( تاللانما )

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-animation="".

ئىسمى تىپى كۆڭۈلدىكى description
animation boolean true قورال ساندۇقىغا css سۇس ئۆتۈشنى ئىشلىتىڭ
html boolean false پوپايكىغا html قىستۇر. ئەگەر يالغان بولسا ، jquery نىڭ textئۇسۇلى dom غا مەزمۇن قىستۇرۇشقا ئىشلىتىلىدۇ. ئەگەر XSS ھۇجۇمىدىن ئەنسىرىسىڭىز تېكىست ئىشلىتىڭ.
ئورۇنلاشتۇرۇش string | function 'right' پوپايكىنى قانداق ئورۇنلاشتۇرۇش - ئۈستى | ئاستى | left | توغرا
تاللىغۇچ string false ئەگەر تاللىغۇچ تەمىنلەنسە ، قورال قوراللىرى بەلگىلەنگەن نىشانغا تاپشۇرۇلىدۇ
trigger string 'چېكىڭ' popover قانداق قوزغىلىدۇ - نى چېكىڭ hover | فوكۇس | manual
ماۋزۇ string | function '' كۆڭۈلدىكى ماۋزۇ قىممىتى `title` خاسلىقى بولمىسا
مەزمۇن string | function '' ئەگەر `data-content` خاسلىقى بولمىسا سۈكۈتتىكى مەزمۇن قىممىتى
كېچىكىش سان | ئوبيېكت 0

popover (ms) نى كۆرسىتىش ۋە يوشۇرۇشنى كېچىكتۈرۈش - قولدا قوزغىتىش تىپىغا ماس كەلمەيدۇ

ئەگەر بىر سان تەمىنلەنسە ، يوشۇرۇش / كۆرسىتىشكە كېچىكىش قوللىنىلىدۇ

ئوبيېكت قۇرۇلمىسى:delay: { show: 500, hide: 100 }

قاچا string | false false

پوپايكىنى مەلۇم ئېلېمېنتقا قوشىدۇcontainer: 'body'

Heads up! سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش ئارقىلىق ئايرىم پوپايكىلارنىڭ تاللانمىلىرىنى تاللىغىلى بولىدۇ.

Markup

ئىقتىدار سەۋەبلىرى ئۈچۈن ، Tooltip ۋە Popover سانلىق مەلۇمات apis تاللىنىدۇ. ئەگەر ئىشلەتمەكچى بولسىڭىز تاللىغۇچنى تاللاڭ.

Methods

$ (). popover (تاللانما)

ئېلېمېنت توپلاش ئۈچۈن پوپايكىلارنى قوزغىتىدۇ.

.popover ('show')

ئېلېمېنت ئېلېمېنتلىرىنى ئاشكارىلايدۇ.

  1. $ ( '#element' ). popover ( 'show' )

.popover ('hide')

ئېلېمېنت ئېلېمېنتنى يوشۇرىدۇ.

  1. $ ( '#element' ). popover ( 'hide' )

.popover ('toggle')

بىر ئېلېمېنتنىڭ ئېقىشىنى قوزغىتىدۇ.

  1. $ ( '#element' ). popover ( 'toggle' )

.popover ('يوقىتىش')

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى يوشۇرىدۇ ۋە يوقىتىدۇ.

  1. $ ( '#element' ). popover ( 'يوقىتىش' )

مىسال ئاگاھلاندۇرۇشى

بۇ قىستۇرما ئارقىلىق بارلىق ئاگاھلاندۇرۇش ئۇچۇرلىرىغا ئىشتىن بوشىتىش ئىقتىدارىنى قوشۇڭ.

Holy guacamole! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.

ئاھ! خاتالىق تاپتىڭىز!

بۇنى ۋە بۇنى ئۆزگەرتىپ قايتا سىناڭ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ


ئىشلىتىش

JavaScript ئارقىلىق ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇڭ:

  1. $ ( ".alert" ). alert ()

Markup

تاقاش كۇنۇپكىسىنى قوشسىڭىزلا data-dismiss="alert"ئاپتوماتىك ئاگاھلاندۇرۇش ئىقتىدارىنى بېرىدۇ.

  1. <a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>

Methods

$ (). ئاگاھلاندۇرۇش ()

بارلىق ئاگاھلاندۇرۇشلارنى يېقىن ئىقتىدار بىلەن ئورايدۇ. ئاگاھلاندۇرۇشلىرىڭىز تاقالغاندا جانلاندۇرۇلىدۇ ، ئۇلارنىڭ ئاللىقاچان ئۇلارغا .fadeۋە .inسىنىپقا ئىلتىماس قىلىنغانلىقىنى جەزملەشتۈرۈڭ.

.alert ('close')

ئاگاھلاندۇرۇشنى تاقايدۇ.

  1. $ ( ".alert" ). alert ( 'close' )

Events

Bootstrap نىڭ ئاگاھلاندۇرۇش سىنىپى ئاگاھلاندۇرۇش ئىقتىدارىغا باغلانغان بىر قانچە ۋەقەلەرنى ئاشكارىلىدى.

Event چۈشەندۈرۈش
close closeمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
تاقالدى بۇ پائالىيەت ئاگاھلاندۇرۇش يېپىلغاندا ئېتىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
  1. $ ( '# my-alert' ). bind ( 'closed' , function () {
  2. // بىرەر ئىش قىلىڭ…
  3. })

مىسال ئىشلىتىلىدۇ

كۇنۇپكىلار بىلەن كۆپرەك قىلىڭ. كونترول كۇنۇپكىسى قورال ستونىغا ئوخشاش تېخىمۇ كۆپ زاپچاسلار ئۈچۈن گۇرۇپپا كۇنۇپكىسىنى كۆرسىتىدۇ.

دۆلەت

data-loading-text="Loading..."بىر كۇنۇپكىنى قاچىلاش ھالىتىنى ئىشلىتىشكە قوشۇڭ .

  1. <button type = "button" class = "btn btn-primary" data-load-text = "يۈكلەۋاتىدۇ ..." > يۈكلەش ھالىتى </button>

تاق تاقاش

data-toggle="button"بىر كۇنۇپكىنى قوزغىتىشنى قوزغىتىشقا قوشۇڭ .

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > تاق كۆزنەك </button>

تەكشۈرۈش رامكىسى

Btn- data-toggle="buttons-checkbox"گۇرۇپپىغا تەكشۈرۈش رامكىسى ئۇسلۇبىنى ئالماشتۇرۇڭ.

  1. <div class = "btn-group" data-toggle = "كۇنۇپكا-تەكشۈرۈش ساندۇقى" >
  2. <button type = "button" class = "btn btn-primary" > سول </button>
  3. <button type = "button" class = "btn btn-primary" > ئوتتۇرا </button>
  4. <button type = "button" class = "btn btn-primary" > ئوڭ </button>
  5. </div>

Radio

data-toggle="buttons-radio"Btn گۇرۇپپىسىدا رادىئو ئۇسلۇبىنى ئالماشتۇرۇشقا قوشۇڭ .

  1. <div class = "btn-group" data-toggle = "كۇنۇپكا-رادىئو" >
  2. <button type = "button" class = "btn btn-primary" > سول </button>
  3. <button type = "button" class = "btn btn-primary" > ئوتتۇرا </button>
  4. <button type = "button" class = "btn btn-primary" > ئوڭ </button>
  5. </div>

ئىشلىتىش

JavaScript ئارقىلىق كۇنۇپكىلارنى قوزغىتىڭ:

  1. $ ( '.nav-tabs' ). كۇنۇپكا ()

Markup

سانلىق مەلۇمات خاسلىقى كۇنۇپكا قىستۇرمىسىدا كەم بولسا بولمايدۇ. ھەر خىل بەلگە تىپلىرى ئۈچۈن تۆۋەندىكى مىسال كودىنى تەكشۈرۈپ بېقىڭ.

تاللانما

ياق

Methods

$ (). كۇنۇپكا ('toggle')

Toggles ھالەتنى ئىلگىرى سۈرىدۇ. بۇ كۇنۇپكىنى قوزغىتىلغاندەك قىلىدۇ.

Heads up! data-toggleخاسلىقنى ئىشلىتىپ بىر كۇنۇپكىنى ئاپتوماتىك قوزغىتىشنى قوزغىتالايسىز .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$ (). كۇنۇپكا ('يۈكلەش')

كۇنۇپكا ھالىتىنى يۈكلەشكە تەڭشەيدۇ - كۇنۇپكىنى چەكلەيدۇ ۋە تېكىستنى يۈكلەش تېكىستىگە ئالماشتۇرىدۇ. تېكىستنى يۈكلەش سانلىق مەلۇمات خاسلىقى ئارقىلىق كۇنۇپكا ئېلېمېنتىغا ئېنىقلىما بېرىش كېرەك data-loading-text.

  1. <button type = "button" class = "btn" data-load-text = "يۈك قاچىلاش ..." > ... </button>
Heads up! Firefox بەت يۈكىدە چەكلەنگەن ھالەتنى ساقلايدۇ . بۇنىڭ ئۈچۈن بىر خىزمەت ئۇسۇلى autocomplete="off".

$ (). كۇنۇپكا ('reset')

كۇنۇپكا ھالىتىنى ئەسلىگە كەلتۈرىدۇ - تېكىستنى ئەسلى تېكىستكە ئالماشتۇرىدۇ.

$ (). كۇنۇپكا (string)

كۇنۇپكا ھالىتىنى ئەسلىگە كەلتۈرىدۇ - تېكىستنى ئېنىقلانغان تېكىست ھالىتىگە ئالماشتۇرىدۇ.

  1. <button type = "button" class = "btn" data-complete-text = "تامام!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). كۇنۇپكا ( 'تامام' )
  4. </script>

ھەققىدە

ئاككوردىيون ۋە يول باشلاش قاتارلىق قاتلىنىدىغان زاپچاسلارنى ئاساسىي ئۇسلۇب ۋە جانلىق قوللاشقا ئېرىشىڭ.

* ئۆتكۈنچى قىستۇرمىنىڭ ئۆز ئىچىگە ئېلىنىشىنى تەلەپ قىلىدۇ.

مىسال ئاككوردىيون

يىمىرىلىش قىستۇرمىسىنى ئىشلىتىپ ، ئاددىي ئاككوردىيون ئۇسلۇبىدىكى كىچىك قورال قۇردۇق:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 بۆرە ئاي ئىش بېجىرىش ئورنى ، لوڭقا تېيىلىش تاختىسى دولور غولى. يېمەكلىك يۈك ماشىنىسى quinoa nesciunt laborum eiusmod. برۇنچ 3 بۆرە ئاي تېمپېراتۇرىسى ، sunt aliqua ئۇنىڭغا بىر قۇش قويدى. Nihil anim keffiyeh helvetica ، ھۈنەر-سەنئەت پىۋا ئىشچىسى wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. لەۋ سۇرۇخ ھۈنەر-سەنئەت پىۋا دېھقانچىلىق مەيدانىدىن ئۈستەلگە ، خام دېنىم ئېستېتىك بىرىكمە نەسىللىك ، بەلكىم سىز ئۇلارنىڭ ئەيىبلەنگەنلىكىنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 بۆرە ئاي ئىش بېجىرىش ئورنى ، لوڭقا تېيىلىش تاختىسى دولور غولى. يېمەكلىك يۈك ماشىنىسى quinoa nesciunt laborum eiusmod. برۇنچ 3 بۆرە ئاي تېمپېراتۇرىسى ، sunt aliqua ئۇنىڭغا بىر قۇش قويدى. Nihil anim keffiyeh helvetica ، ھۈنەر-سەنئەت پىۋا ئىشچىسى wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. لەۋ سۇرۇخ ھۈنەر-سەنئەت پىۋا دېھقانچىلىق مەيدانىدىن ئۈستەلگە ، خام دېنىم ئېستېتىك بىرىكمە نەسىللىك ، بەلكىم سىز ئۇلارنىڭ ئەيىبلەنگەنلىكىنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 بۆرە ئاي ئىش بېجىرىش ئورنى ، لوڭقا تېيىلىش تاختىسى دولور غولى. يېمەكلىك يۈك ماشىنىسى quinoa nesciunt laborum eiusmod. برۇنچ 3 بۆرە ئاي تېمپېراتۇرىسى ، sunt aliqua ئۇنىڭغا بىر قۇش قويدى. Nihil anim keffiyeh helvetica ، ھۈنەر-سەنئەت پىۋا ئىشچىسى wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. لەۋ سۇرۇخ ھۈنەر-سەنئەت پىۋا دېھقانچىلىق مەيدانىدىن ئۈستەلگە ، خام دېنىم ئېستېتىك بىرىكمە نەسىللىك ، بەلكىم سىز ئۇلارنىڭ ئەيىبلەنگەنلىكىنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن.
  1. <div class = "ئاككوردىيون" id = "ئاككوردىيون 2" >
  2. <div class = "ئاككوردىيون گۇرۇپپىسى" >
  3. <div class = "ئاككوردىيون-ماۋزۇ" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _
  5. قاتلىنىدىغان گۇرۇپپا تۈرى # 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "ئاككوردىيون-بەدەننىڭ يىمىرىلىشى" >
  9. <div class = "ئاككوردىيون-ئىچكى" >
  10. Anim pariatur cliche ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "ئاككوردىيون گۇرۇپپىسى" >
  15. <div class = "ئاككوردىيون-ماۋزۇ" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _
  17. قاتلىنىدىغان گۇرۇپپا 2-تۈر
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "ئاككوردىيون-بەدەن يىمىرىلىش" >
  21. <div class = "ئاككوردىيون-ئىچكى" >
  22. Anim pariatur cliche ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

قىستۇرمىنى ئاككوردىيون بەلگىسىسىز ئىشلەتسىڭىزمۇ بولىدۇ. باشقا بىر ئېلېمېنتنىڭ كېڭىيىشى ۋە يىمىرىلىشىنى بىر كۇنۇپكا قىلىڭ.

  1. <button type = "button" class = "btn btn- danger" data-toggle = "يىمىرىلىش" data-target = "#demo" >
  2. simple collapsible
  3. </button>
  4.  
  5. <div id = "demo" class = "يىمىرىلىش" > </div>

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

پەقەت بىر ئېلېمېنتنى قوشۇپ data-toggle="collapse"، data-targetقاتلىنىدىغان ئېلېمېنتنىڭ كونتروللۇقىنى ئاپتوماتىك تەقسىملەيدۇ. بۇ data-targetخاسلىق يىمىرىلىشنى قوللىنىش ئۈچۈن css تاللىغۇچنى قوبۇل قىلىدۇ. collapseدەرسنى قاتلىنىدىغان ئېلېمېنتقا قوشۇشقا كاپالەتلىك قىلىڭ . ئەگەر سۈكۈتتىكى ھالەتتە ئېچىشنى ئويلىسىڭىز ، قوشۇمچە دەرسنى قوشۇڭ in.

قاتلىنىدىغان كونترولغا ئاككوردىيونغا ئوخشاش گۇرۇپپا باشقۇرۇشنى قوشۇش ئۈچۈن ، سانلىق مەلۇمات خاسلىقىنى قوشۇڭ data-parent="#selector". بۇنى ھەرىكەتتە كۆرۈش ئۈچۈن كۆرسەتمە دىن پايدىلىنىڭ.

JavaScript ئارقىلىق

قولدا قوزغىتىڭ:

  1. $ ( ".collapse" ). collapse ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-parent="".

ئىسمى تىپى كۆڭۈلدىكى description
ئاتا-ئانا تاللىغۇچ false ئەگەر تاللىغۇچ بولسا ، بۇ ئاتالايدىغان ئاتا-ئانىنىڭ ئاستىدىكى بارلىق قاتلىنىدىغان ئېلېمېنتلار تاقىلىدۇ. (ئەنئەنىۋى ئاككوردىيون ھەرىكىتىگە ئوخشايدۇ)
toggle boolean true دەۋەتتىكى قاتلىنىدىغان ئېلېمېنتنى بىر تەرەپ قىلىدۇ

Methods

.collapse (تاللانما)

مەزمۇنلىرىڭىزنى قاتلىنىدىغان ئېلېمېنت سۈپىتىدە ئاكتىپلايدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object.

  1. $ ( '#myCollapsible' ). collapse ({
  2. toggle : false
  3. })

.collapse ('toggle')

كۆرسىتىلىدىغان ياكى يوشۇرۇنغان قاتلىنىدىغان ئېلېمېنتنى توغرىلايدۇ.

.collapse ('show')

قاتلىنىدىغان ئېلېمېنتنى كۆرسىتىدۇ.

.collapse ('hide')

قاتلىنىدىغان ئېلېمېنتنى يوشۇرىدۇ.

Events

Bootstrap نىڭ يىمىرىلىش سىنىپى يىمىرىلىش ئىقتىدارىغا باغلانغان بىر قانچە ھادىسىنى ئاشكارىلىدى.

Event چۈشەندۈرۈش
show showمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
كۆرسىتىلدى بۇ ھادىسە ئىشلەتكۈچىگە يىمىرىلىش ئېلېمېنتى كۆرۈنگەندە ئېتىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
يوشۇر بۇ hideئۇسۇل ئۇسۇل چاقىرىلغاندا دەرھال ئېتىۋېتىلىدۇ.
يوشۇرۇنغان بۇ ھادىسە ئىشلەتكۈچىدىن يىمىرىلىش ئېلېمېنتى يوشۇرۇلغاندا (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // بىرەر ئىش قىلىڭ…
  3. })

مىسال

ھەر قانداق شەكىلدىكى تېكىست كىرگۈزۈش ئارقىلىق نەپىس خەت بېشىنى تېز قۇرۇش ئۈچۈن ئاساسىي ، ئاسان كېڭەيتىلگەن قىستۇرما.

  1. <input type = "text" data- provide = "typeahead" >

autocomplete="off"كۆڭۈلدىكى توركۆرگۈچ تىزىملىكلىرىنىڭ Bootstrap خەت بېسىش تىزىملىكىدە كۆرۈنمەسلىكىنى تەڭشىمەكچى بولىسىز.


ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

سانلىق مەلۇمات خاسلىقىنى قوشۇپ ، يۇقىرىدىكى مىسالدا كۆرسىتىلگەندەك خەت بېسىش ئىقتىدارى بار ئېلېمېنتنى تىزىملىتىڭ.

JavaScript ئارقىلىق

خەت بېسىش ماشىنىسىنى قولدا تېلېفون قىلىڭ:

  1. $ ( '.typeahead' ). typeahead ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-source="".

ئىسمى تىپى كۆڭۈلدىكى description
مەنبە array, function [] سوئال سورايدىغان سانلىق مەلۇمات مەنبەسى. بەلكىم بىر قاتار تىزمىلار ياكى ئىقتىدار بولۇشى مۇمكىن. queryبۇ ئىقتىدار كىرگۈزۈش ساھەسىدىكى قىممەت ۋە processچاقىرىشتىن ئىبارەت ئىككى خىل تالاش-تارتىشتىن ئۆتتى . processبۇ ئىقتىدار چاقىرىشنىڭ يەككە تاللىشى ئارقىلىق سانلىق مەلۇمات مەنبەسىنى بىۋاسىتە ياكى ماس قەدەمسىز قايتۇرۇش ئارقىلىق ماس قەدەمدە ئىشلىتىلىشى مۇمكىن .
تۈرلەر سان 8 چۈشۈشتە كۆرسىتىلىدىغان تۈرلەرنىڭ ئەڭ كۆپ سانى.
minLength سان 1 ئاپتوماتىك تەكلىپلەرنى قوزغىتىشتىن بۇرۇن ئەڭ تۆۋەن ھەرپ ئۇزۇنلۇقى
matcher function دېلو سەزگۈر ئەمەس سوئالنىڭ مەلۇم تۈرگە ماس كېلىدىغان-كەلمەيدىغانلىقىنى ئېنىقلاشتا قوللىنىلغان ئۇسۇل. itemبۇ سوئالنى سىناشقا قارشى بىرلا تالاش-تارتىشنى قوبۇل قىلىدۇ . نۆۋەتتىكى سوئالنى زىيارەت this.queryقىلىڭ. trueئەگەر سوئال ماس كەلسە ، ئاق رەڭنى قايتۇرۇڭ .
sorter function ئېنىق ماس ،
دېلو سەزگۈر ،
دېلو سەزگۈر ئەمەس
ئاپتوماتىك تولۇق نەتىجىنى رەتلەشتە قوللىنىلىدىغان ئۇسۇل. يەككە تالاش items-تارتىشنى قوبۇل قىلىدۇ ھەمدە خەت بېسىش مىسالىنىڭ دائىرىسى بار. نۆۋەتتىكى سوئالنى پايدىلىنىڭ this.query.
يېڭىلاش function تاللانغان تۈرنى قايتۇرىدۇ تاللانغان تۈرنى قايتۇرۇشتا قوللىنىلغان ئۇسۇل. يەككە تالاش-تارتىشنى قوبۇل قىلىدۇ ، itemھەمدە خەت بېسىش مىسالىنىڭ دائىرىسى بار.
يورۇق function بارلىق سۈكۈتتىكى مۇسابىقىنى گەۋدىلەندۈرىدۇ ئاپتوماتىك تولۇق نەتىجىنى گەۋدىلەندۈرۈشتە قوللىنىلغان ئۇسۇل. يەككە تالاش item-تارتىشنى قوبۇل قىلىدۇ ھەمدە خەت بېسىش مىسالىنىڭ دائىرىسى بار. Html نى قايتۇرۇشى كېرەك.

Methods

.typeahead (تاللانما)

خەت بېسىش ئارقىلىق كىرگۈزۈشنى باشلايدۇ.

مىسال

سول تەرەپتىكى بويسۇندۇرۇش قىستۇرما قىستۇرمىسىنىڭ نەق مەيدان نامايەندىسى.


ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

ھەر قانداق ئېلېمېنتقا چاپلاش ھەرىكىتىنى ئاسانلا قوشۇش ئۈچۈن data-spy="affix"، جاسۇسلۇق قىلماقچى بولغان ئېلېمېنتقا قوشۇڭ. ئاندىن offsets نى ئىشلىتىپ ئېلېمېنتنىڭ قاچىلىنىشىنى قاچان ئالماشتۇرۇۋېتىدىغانلىقىنى ئېنىقلاڭ.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Heads up! سىز چوقۇم باغلانغان ئېلېمېنتنىڭ ئورنى ۋە ئۇنىڭ بىۋاسىتە ئاتا-ئانىسىنىڭ ھەرىكىتىنى باشقۇرۇشىڭىز كېرەك. ئورۇن كونترول قىلىدۇ affix، affix-topۋە affix-bottom. بۇ بەت نورمال نورمال ئېقىمىدىكى مەزمۇنلارنى ئۆچۈرۈۋەتكەندە ، قوشۇمچە دېتال قوزغالغاندا بەلكىم يىمىرىلىپ كېتىش ئېھتىماللىقى بار ئاتا-ئانىسىنى تەكشۈرۈشنى ئۇنتۇپ قالماڭ.

JavaScript ئارقىلىق

JavaScript ئارقىلىق قوشۇمچە قىستۇرمىغا تېلېفون قىلىڭ:

  1. $ ( '#navbar' ). affix ()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset-top="200".

ئىسمى تىپى كۆڭۈلدىكى description
offset سان | function | ئوبيېكت 10 سىيرىلما ئورنىنى ھېسابلىغاندا ئېكراندىن ئۆچۈرۈلىدىغان پىكسېل. ئەگەر بىرلا سان تەمىنلەنسە ، offset ئۈستى ۋە سول يۆنىلىشتە قوللىنىلىدۇ. بىرلا يۆنىلىشنى ياكى كۆپ خىل ئۆزگىچە تور بېكەتلەرنى ئاڭلاش ئۈچۈن ، پەقەت بىر ئوبيېكت بىلەن تەمىنلەڭ offset: { x: 10 }. ھەرىكەتچان تولۇقلىما تەمىنلەشكە ئېھتىياجلىق بولغاندا بىر ئىقتىدار ئىشلىتىڭ (بەزى ئىنكاس لايىھىسىگە پايدىلىق).