بىزنىڭ Modal قىستۇرمىمىز ئەنئەنىۋى مودېل js قىستۇرمىسىغا دەرىجىدىن تاشقىرى نېپىز بولۇپ ، twitter دا بىز تەلەپ قىلىدىغان يالىڭاچ ئىقتىدارلارنىلا ئۆز ئىچىگە ئالىدۇ.

چۈشۈرۈش

Bootstrap-modal نى ئىشلىتىش

$ ( '# my-modal' ). modal ( options )

تاللانما

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

Markup

بىر قۇر javascript يازمىسىڭىزمۇ بېتىڭىزدىكى مودېللارنى ئاسانلا قوزغىتالايسىز. ئېلېمېنتقا data-controls-modalمودېل ئېلېمېنت id غا ماس كېلىدىغان خاسلىق بېرىڭ ، چەككەندە ئۇ مودىلىڭىزنى قوزغىتىدۇ. مودېل تاللاشلارنى قوشۇش ئۈچۈن ، ئۇلارنى سانلىق مەلۇمات خاسلىقى سۈپىتىدە قوشۇڭ.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true"> قوزغىتىش مودېلى </a>    

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

Methods

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

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

$ ( '# my-modal' ). modal ({
  closeOnEscape : true 
})

.modal ('toggle')

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

$ ( '# my-modal' ). modal ( 'toggle' )

.modal ('show')

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

$ ( '# my-modal' ). modal ( 'show' )

.modal ('hide')

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

$ ( '# my-modal' ). modal ( 'hide' )

.modal (true)

ئېلېمېنتلارنىڭ مودېل سىنىپ ئۈلگىسىنى قايتۇرىدۇ.

$ ( '# my-modal' ). modal ( true )

ئەسكەرتىش ئۇنىڭدىن باشقا ، بۇنى ئەسلىگە كەلتۈرگىلى بولىدۇ $().data('modal').

Events

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

Event	چۈشەندۈرۈش
show	showمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
كۆرسىتىلدى	بۇ ھادىسە مودېلنى ئىشلەتكۈچىگە كۆرۈنگەندە ئېتىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
يوشۇر	hideمىسال ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ .
يوشۇرۇنغان	بۇ ھادىسە مودېل ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن چىقىرىلىدۇ (css ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).

$ ( '# my-modal' ). bind ( 'hidden' , function () {   
  // بىرەر ئىش قىل ...
})

Demo

Launch Modal

بۇ قىستۇرما bootstrap ئۈستى بالداق ياكى بەتكۈچ يولباشچىغا چۈشۈش ئۆز-ئارا تەسىر كۆرسىتىش ئۈچۈن.

چۈشۈرۈش

Boostrap-dropdown.js نى ئىشلىتىش

$ ( '#topbar' ). dropdown ()

Markup

ھەر قانداق nav ئېلېمېنتىغا تېز سۈرئەتتە چۈشۈرۈش ئىقتىدارىنى قوشۇش ئۈچۈن ، data-dropdownخاسلىقنى ئىشلىتىڭ. ھەر قانداق ئىناۋەتلىك قوزغىتىش ئېغىزى چۈشۈش ئاپتوماتىك قوزغىتىلىدۇ.

<ul class = "بەتكۈچ" > 
  <li class = "active" > <a href = "#"> باشبەت </a> </li >  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle"> چۈشۈش </a> _  
    <ul class = "dropdown-menu" > 
      <li> <a href = "#"> ئىككىلەمچى ئۇلىنىش </a> </li> 
      <li> <a href = "#"> بۇ يەردە باشقا بىر نەرسە </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> باشقا ئۇلىنىش </a> </li> 
    </ul>
  </li>
</ul>

دىققەت ئەگەر ui دا بىر قانچە تۆۋەنلەش بار بولسا ، خاسلىقنى data-dropdownتېخىمۇ مۇھىم قاچا ئېلېمېنتىغا قوشۇشنى ئويلاڭ ..tabs.topbar

Methods

$ (). dropdown ()

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

Demo

بۇ قىستۇرما bootstrap ئۈستى بالداققا scrollspy (ئاپتوماتىك يېڭىلاش nav) ئۆز-ئارا تەسىر كۆرسىتىش ئۈچۈن ئىشلىتىلىدۇ.

چۈشۈرۈش

Boostrap-scrollspy.js نى ئىشلىتىش

$ ( '#topbar' ). dropdown ()

Markup

نامىڭىزغا سىيرىلما ھەرىكەتنى ئاسانلا قوشۇش ئۈچۈن ، data-scrollspyخاسلىقنى پەقەت .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Methods

$ (). scrollspy ()

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

$ ( 'body> .topbar' ). scrollSpy ()

ئەسكەرتىش Topbar لەڭگەر بەلگىسىنىڭ چوقۇم ھەل قىلغىلى بولىدىغان id نىشانى بولۇشى كېرەك. مەسىلەن ، <a href="#home">home</a>چوقۇم dom دىكىگە ئوخشاش نەرسىگە ماس كېلىشى كېرەك <div id="home"></div>.

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

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

$ ( 'body' ). scrollspy ( 'refresh' )

Demo

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

بۇ قىستۇرما تېز ، ھەرىكەتچان بەتكۈچ ۋە دورا ئىقتىدارىنى قوشىدۇ.

چۈشۈرۈش

Boostrap-tabs.js نى ئىشلىتىش

$ ( '.tabs' ). بەتكۈچ ()

Markup

data-tabsسىز پەقەت بىر ياكى data-pillsخاسلىق بېرىش ئارقىلىق ھېچقانداق javascript يازمايلا بىر بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز .

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Methods

$ (). بەتكۈچ ياكى $ ()

بېرىلگەن قاچىنىڭ بەتكۈچ ۋە دورىنىڭ ئىقتىدارىنى قوزغىتىدۇ. بەتكۈچ ئۇلانمىلىرى ھۆججەتتىكى id نى كۆرسىتىدۇ.

<ul class = "بەتكۈچ" > 
  <li class = "active" > <a href = "#home"> باشبەت </a> </li >  
  <li> <a href = "#profile"> ئارخىپ </a> </li> 
  <li> <a href = "#messages"> ئۇچۇرلار </a> </li> 
  <li> <a href = "#settings"> تەڭشەكلەر </a> </li > 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "ئۇچۇر" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). بەتكۈچ ()
  })
</script>

Demo

• ئۆي
• ئارخىپ
• ئۇچۇرلار
• تەڭشەك

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

چۈشۈرۈش

Bootstrap-twipsy.js نى ئىشلىتىش

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

تاللانما

ئىسمى	تىپى	كۆڭۈلدىكى	description
animate	boolean	true	قورال ساندۇقىغا css سۇس ئۆتۈشنى ئىشلىتىڭ
delayIn	سان	0	قورال كۆرسەتكۈچى (ms) نى كۆرسىتىشتىن بۇرۇن كېچىكىش
delayOut	سان	0	قورال قوراللىرىنى (ms) يوشۇرۇشتىن بۇرۇن كېچىكىش
ئارقىغا چېكىنىش	string	''	قورال قورال ماۋزۇسى يوق ۋاقىتتا ئىشلىتىدىغان تېكىست
ئورۇنلاشتۇرۇش	string	'above'	قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئۈستىدىكى | below | left | توغرا
html	boolean	false	قورال قوراللىرى ئىچىدىكى html مەزمۇنىغا يول قويىدۇ
live	boolean	false	پائالىيەت ۋەكىللىرىنى ئايرىم پائالىيەت بېجىرگۈچىلەرنىڭ ئورنىغا ئىشلىتىڭ
offset	سان	0	نىشان ئېلېمېنتتىن قورال قوراللىرىنىڭ پېكسىل ئۆچۈرۈلۈشى
ماۋزۇ	string | function	'title'	تېما تېكىستىنى ئېلىشنىڭ خاسلىقى ياكى ئۇسۇلى
trigger	string	'hover'	قورال قوراللىرى قانداق قوزغىتىلىدۇ - hover | فوكۇس | manual

Methods

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

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

.twipsy ('show')

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

$ ( '#element' ). twipsy ( 'show' )

.twipsy ('hide')

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

$ ( '#element' ). twipsy ( 'hide' )

.twipsy (true)

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

$ ( '#element' ). twipsy ( true )

ئەسكەرتىش ئۇنىڭدىن باشقا ، بۇنى ئەسلىگە كەلتۈرگىلى بولىدۇ $().data('twipsy').

Demo

قاڭقىش قىستۇرمىسى قوللىنىشچان پروگراممىڭىزغا قىستۇرما دېتال قوشۇش ئۈچۈن ئاددىي كۆرۈنمە يۈزى بىلەن تەمىنلەيدۇ. ئۇ boostrap-twipsy.js قىستۇرمىسىنى كېڭەيتىدۇ ، شۇڭا تۈرىڭىزگە پوپايكىلارنى قوشقاندا بۇ ھۆججەتنىمۇ تۇتۇڭ.

چۈشۈرۈش

Boostrap-popover.js نى ئىشلىتىش

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

تاللانما

ئىسمى	تىپى	كۆڭۈلدىكى	description
animate	boolean	true	قورال ساندۇقىغا css سۇس ئۆتۈشنى ئىشلىتىڭ
delayIn	سان	0	قورال كۆرسەتكۈچى (ms) نى كۆرسىتىشتىن بۇرۇن كېچىكىش
delayOut	سان	0	قورال قوراللىرىنى (ms) يوشۇرۇشتىن بۇرۇن كېچىكىش
ئارقىغا چېكىنىش	string	''	قورال قورال ماۋزۇسى يوق ۋاقىتتا ئىشلىتىدىغان تېكىست
ئورۇنلاشتۇرۇش	string	'right'	قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئۈستىدىكى | below | left | توغرا
html	boolean	false	قورال قوراللىرى ئىچىدىكى html مەزمۇنىغا يول قويىدۇ
live	boolean	false	پائالىيەت ۋەكىللىرىنى ئايرىم پائالىيەت بېجىرگۈچىلەرنىڭ ئورنىغا ئىشلىتىڭ
offset	سان	0	نىشان ئېلېمېنتتىن قورال قوراللىرىنىڭ پېكسىل ئۆچۈرۈلۈشى
ماۋزۇ	string | function	'title'	تېما تېكىستىنى ئېلىشنىڭ خاسلىقى ياكى ئۇسۇلى
مەزمۇن	string | function	'data-content'	مەزمۇن تېكىستىنى ئېلىشنىڭ خاسلىقى ياكى ئۇسۇلى
trigger	string	'hover'	قورال قوراللىرى قانداق قوزغىتىلىدۇ - hover | فوكۇس | manual

Methods

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

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

.popover ('show')

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

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

.popover ('hide')

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

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

Demo

popover

ئاگاھلاندۇرۇش قىستۇرمىسى ئاگاھلاندۇرۇشلارغا يېقىن ئىقتىدار قوشۇش ئۈچۈن دەرىجىدىن تاشقىرى كىچىك دەرس.

چۈشۈرۈش

Bootstrap-alerts.js نى ئىشلىتىش

$ ( ".alert-message" ). alert ()

Markup

ئاگاھلاندۇرۇش ئۇچۇرلىرىڭىزغا خاسلىق قوشسىڭىز ، data-alertئۇلارغا ئاپتوماتىك يېقىن ئىقتىدار بېرىدۇ.

Methods

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

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

.alert ('close')

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

$ ( ".alert-message" ). alert ( 'close' )

Demo