Манай Modal залгаас нь уламжлалт modal js залгаастай маш нарийн шийдэл бөгөөд зөвхөн энд twitter дээр шаардлагатай нүцгэн функцуудыг багтаахад онцгой анхаарал хандуулдаг.

Татаж авах

Bootstrap-modal ашиглаж байна

$ ( '#my-modal' ). загвар ( сонголт )

Сонголтууд

Нэр	төрөл	анхдагч	тайлбар
дэвсгэр	логик, мөр	худлаа	Modal-backdrop элементийг агуулдаг. "static"Backdrop дээр дарахад модыг хаахыг хүсэхгүй байвал backdrop-ыг тохируулна уу.
гар	логик	худлаа	Escape товчийг дарахад модальыг хаадаг
шоу	логик	худлаа	Ангиа эхлүүлэх горимыг нээнэ

Тэмдэглэгээ

Та javascript-ийн нэг мөр бичихгүйгээр өөрийн хуудсан дээрх модлуудыг хялбархан идэвхжүүлж болно. data-controls-modalЭлементэд модаль элементийн id-д тохирох атрибутыг өгөхөд л хангалттай бөгөөд дарахад энэ нь таны модыг эхлүүлэх болно. Модал сонголтуудыг нэмэхийн тулд тэдгээрийг өгөгдлийн шинж чанар болгон оруулаарай.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Модалыг эхлүүлэх </a>    

Анхаарна.fade уу. Хэрэв та өөрийн модыг дотор болон гадагшлуулахыг хүсвэл өөрийн элементэд анги нэмэхэд хангалттай .modal(үүнийг хэрхэн ажиллаж байгааг харахын тулд демо-г үзнэ үү).

Арга зүй

.modal(сонголт)

Таны агуулгыг модаль байдлаар идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object.

$ ( '#my-modal' ). загвар ({
  гар : үнэн 
})

.modal('унтраах')

Модалыг гараар сэлгэдэг.

$ ( '#my-modal' ). модаль ( 'шилжүүлэх' )

.modal('шоу')

Модалыг гараар нээнэ.

$ ( '#my-modal' ). модаль ( 'шоу' )

.modal('нуух')

Модалыг гараар нууна.

$ ( '#my-modal' ). модаль ( 'нуух' )

.modal(үнэн)

Элементүүдийн модаль ангийн жишээг буцаана.

$ ( '#my-modal' ). загвар ( үнэн )

Анхаарна уу. Эсвэл үүнийг ашиглан сэргээх боломжтой $().data('modal').

Үйл явдал

Bootstrap-ийн модаль анги нь модаль функцэд холбогдох хэд хэдэн үйл явдлыг дэлгэдэг.

Үйл явдал	Тодорхойлолт
шоу	showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн	Модалыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (css шилжилтийг дуусгахыг хүлээх болно).
нуугдах	hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
далд	Модал нь хэрэглэгчээс нуугдаж дуусах үед энэ үйл явдал идэвхждэг (css шилжилт дуусахыг хүлээх болно).

$ ( '#my-modal' ). холбох ( 'далд' , функц () {   
  // ямар нэг юм хий ...
})

Демо

Modal-г ажиллуул

Энэхүү залгаас нь ачаалах самбарын дээд самбар эсвэл цонхтой навигац руу унадаг харилцан үйлчлэлийг нэмэхэд зориулагдсан.

Татаж авах

bootstrap-dropdown.js ашиглаж байна

$ ( '#topbar' ). унадаг ()

Тэмдэглэгээ

Дурын элементэд унадаг функцийг хурдан нэмэхийн тулд data-dropdownатрибутыг ашиглана уу. Аливаа хүчинтэй ачаалах унадаг цэс автоматаар идэвхжинэ.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Нүүр хуудас </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Хоёрдогч холбоос </a></li> 
      <li><a href = "#" > Энд өөр зүйл байна </a></li> 
      <li анги = "хуваагч" ></li> 
      <li><a href = "#" > Өөр холбоос </a></li> 
    </ul>
  </li>
</ul>

Анхааруулга Хэрэв таны ui хэд хэдэн унадаг цэстэй бол атрибутыг эсвэл data-dropdownгэх мэт илүү чухал контейнер элементэд нэмэх талаар бодож үзээрэй ..tabs.topbar

Арга зүй

$().dropdown()

Өгөгдсөн дээд самбар эсвэл чихтэй навигацийн цэсийг идэвхжүүлэх программчлагдсан api.

Демо

Энэ залгаас нь ачаалах самбарын дээд самбарт scrollspy (автоматаар шинэчлэх nav) харилцан үйлчлэлийг нэмэхэд зориулагдсан.

Татаж авах

bootstrap-scrollspy.js ашиглаж байна

$ ( '#topbar' ). scrollSpy ()

Тэмдэглэгээ

Navigate-д гүйлгэх ажиллагааг хялбархан нэмэхийн тулд data-scrollspyатрибутыг .topbar.

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

Арга зүй

$().scrollSpy()

Хэрэглэгч гүйлгэх байрлалаар навигацийн товчлууруудыг автоматаар идэвхжүүлдэг.

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

Topbar зангуу шошгууд нь шийдвэрлэх боломжтой id зорилттой байх ёстойг анхаарна уу. Жишээ нь, <a href="#home">home</a>заавал байх ёстой нь дом доторх зүйлтэй тохирч байх ёстой <div id="home"></div>.

.scrollSpy('шинэчлэх')

Scrollspy нь гүйцэтгэлийн хувьд navigation товчлуур болон хэсгийн координатуудыг кэш болгодог. Хэрэв та энэ кэшийг шинэчлэх шаардлагатай бол (хэрэв танд динамик контент байгаа бол) энэ сэргээх аргыг дуудна уу. Хэрэв та өөрийн scrollspy-ээ тодорхойлохдоо өгөгдлийн атрибутыг ашигласан бол үндсэн дээрх шинэчлэлтийг дуудна уу.

$ ( 'бие' ). scrollSpy ( 'шинэчлэх' )

Демо

Энэ хуудасны дээд талын навигацийг шалгана уу.

Энэхүү залгаас нь товчлуурын төлөвийг удирдах нэмэлт функцийг санал болгодог.

Татаж авах

bootstrap-buttons.js ашиглаж байна

$ ( '.tabs' ). товчлуур ()

Арга зүй

$().товчлуур('унтраах')

Түлхэх төлөвийг сэлгэх. btn-д үүнийг идэвхжүүлсэн мэт харагдуулна.

Анхааруулгаdata-toggle Та атрибутыг ашиглан товчлуурыг автоматаар солихыг идэвхжүүлж болно .

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().товчлуур('ачаалах')

Товчлуурын төлөвийг ачаалахаар тохируулна - товчлуурыг идэвхгүй болгож, текстийг ачаалах текст рүү шилжүүлнэ. Ачаалах текстийг өгөгдлийн шинж чанарыг ашиглан товчлуурын элемент дээр тодорхойлсон байх ёстой data-loading-text.

<button class = "btn" data-loading-text = "зүйлийг ачаалж байна..." > ... </button>   

$().товчлуур('дахин тохируулах')

Товчлуурын төлөвийг дахин тохируулах - текстийг эх текст рүү шилжүүлнэ.

$().товчлуур(мөр)

Товчлуурын төлөвийг дахин тохируулах - текстийг ямар ч өгөгдөлд тодорхойлсон текст төлөв рүү шилжүүлнэ.

<button class = "btn" data-complete-text = "дууссан!" > ... </button>   
<скрипт>
  $('.btn').button('бүрэн')
</scrip>

Демо

Демо ачаалж байна Демо-г асаах/унтраах

Энэхүү залгаас нь хурдан, динамик таб болон эм функцийг нэмдэг.

Татаж авах

bootstrap-tabs.js ашиглаж байна

$ ( '.tabs' ). таб ()

Тэмдэглэгээ

data-tabsТа таб эсвэл таблетын навигацийг ямар ч JavaScript бичихгүйгээр зүгээр л data-pillsатрибут өгснөөр идэвхжүүлж болно .

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

Арга зүй

$().tabs эсвэл $().pills

Өгөгдсөн саванд зориулсан таб болон шахмалын функцийг идэвхжүүлдэг. Таб холбоосууд нь баримт бичигт байгаа id-г лавлах ёстой.

<ul class = "tabs" > 
  <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 = "pil-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "мессежүүд" > ... </div> 
  <div id = "тохиргоо" > ... </div> 
</div>
 
<скрипт>
  $ ( функц () {  
    $ ( '.tabs' ). таб ()
  })
</script>

Үйл явдал

Үйл явдал	Тодорхойлолт
өөрчлөх	Энэ үйл явдал нь табын өөрчлөлт дээр ажилладаг. Идэвхтэй таб болон өмнөх идэвхтэй табыг тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget

$ ( '#.tabs' ). холбох ( 'өөрчлөх' , функц ( e ) {   
  e . зорилтот // идэвхжүүлсэн таб
  e . холбоотойTarget // өмнөх таб
})

Демо

• Гэр
• Профайл
• Мессежүүд
• Тохиргоо
• Унтраах цэс
  • @ тарган
  • @mdo

Жейсон Фреймийн бичсэн гайхалтай jQuery.tipsy залгаас дээр үндэслэсэн; twipsy нь зураг дээр тулгуурладаггүй, хөдөлгөөнт дүрслэлд css3, гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаг шинэчлэгдсэн хувилбар юм!

Татаж авах

bootstrap-twipsy.js ашиглаж байна

$ ( '#жишээ' ). twipsy ( сонголтууд )

Сонголтууд

Нэр	төрөл	анхдагч	тайлбар
хөдөлгөөнтэй болгох	логик	үнэн	хэрэгсэлд css бүдгэрүүлэх шилжилтийг хэрэглээрэй
саатал	тоо	0	Зөвлөмжийг харуулахын өмнөх саатал (мс)
хойшлуулах	тоо	0	зөвлөмжийг нуухын өмнөх саатал (мс)
эргэж буцах	мөр	''	зөвлөмж гарчиг байхгүй үед ашиглах текст
байрлуулах	мөр	'дээд'	зөвлөмжийг хэрхэн байрлуулах - дээрх | доор | зүүн | зөв
html	логик	худлаа	Хэрэгслийн зөвлөмж доторх html контентыг зөвшөөрдөг
амьдрах	логик	худлаа	Хувь хүний ​​үйл явдлын зохицуулагчийн оронд үйл явдлын төлөөллийг ашиглах
офсет	тоо	0	зорилтот элементийн зөвлөмжийн пикселийн офсет
гарчиг	мөр, функц	"гарчиг"	атрибут эсвэл гарчгийн текстийг татах арга
гох	мөр	'нүүр'	зааварчилгааг хэрхэн идэвхжүүлдэг вэ - хулганаа аваач | төвлөрөл | гарын авлага
загвар	мөр	[өгөгдмөл тэмдэглэгээ]	Twipsy дүрслэхэд ашигладаг html загвар.

Анхаарна уу Бие даасан twipsy жишээний сонголтыг өгөгдлийн шинж чанаруудыг ашиглан зааж өгч болно.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Зарим гарчгийн текст' > текст </a>    

Арга зүй

$().twipsy(сонголт)

Элементийн цуглуулгад twipsy зохицуулагчийг хавсаргана.

.twipsy('шоу')

Твипси элементүүдийг илчилнэ.

$ ( '#элемент' ). twipsy ( 'шоу' )

.twipsy('нуух')

Twipsy элементүүдийг нууна.

$ ( '#элемент' ). twipsy ( 'нуух' )

.twipsy(үнэн)

Элементүүдийн twipsy ангийн жишээг буцаана.

$ ( '#элемент' ). twipsy ( үнэн )

Анхаарна уу. Эсвэл үүнийг ашиглан сэргээх боломжтой $().data('twipsy').

Демо

Popover залгаас нь таны програмд ​​поповер нэмэх энгийн интерфейсээр хангадаг. Энэ нь bootstrap-twipsy.js залгаасыг өргөтгөдөг тул төсөлдөө поповер оруулахдаа тэр файлыг мөн татаж авахаа мартуузай!

Анхааруулга Та bootstrap-twipsy.js файлыг bootstrap-popover.js-ээс өмнө оруулах ёстой .

Татаж авах

bootstrap-popover.js ашиглаж байна

$ ( '#жишээ' ). popover ( сонголт )

Сонголтууд

Нэр	төрөл	анхдагч	тайлбар
хөдөлгөөнтэй болгох	логик	үнэн	хэрэгсэлд css бүдгэрүүлэх шилжилтийг хэрэглээрэй
саатал	тоо	0	Зөвлөмжийг харуулахын өмнөх саатал (мс)
хойшлуулах	тоо	0	зөвлөмжийг нуухын өмнөх саатал (мс)
эргэж буцах	мөр	''	зөвлөмж гарчиг байхгүй үед ашиглах текст
байрлуулах	мөр	'зөв'	зөвлөмжийг хэрхэн байрлуулах - дээрх | доор | зүүн | зөв
html	логик	худлаа	Хэрэгслийн зөвлөмж доторх html контентыг зөвшөөрдөг
амьдрах	логик	худлаа	Хувь хүний ​​үйл явдлын зохицуулагчийн оронд үйл явдлын төлөөллийг ашиглах
офсет	тоо	0	зорилтот элементийн зөвлөмжийн пикселийн офсет
гарчиг	мөр, функц	"гарчиг"	атрибут эсвэл гарчгийн текстийг татах арга
агуулга	мөр, функц	"өгөгдлийн контент"	агуулгын текстийг татаж авах мөр эсвэл арга. хэрэв байхгүй бол контентыг өгөгдөл-контентын атрибутаас авах болно.
гох	мөр	'нүүр'	зааварчилгааг хэрхэн идэвхжүүлдэг вэ - хулганаа аваач | төвлөрөл | гарын авлага
загвар	мөр	[өгөгдмөл тэмдэглэгээ]	Поповыг үзүүлэхэд ашигладаг html загвар.

Анхаарна уу Бие даасан поповын жишээний сонголтыг өгөгдлийн шинж чанаруудыг ашиглан зааж өгч болно.

<a data-placement = "below" href = "#" class = "btn Danger" rel = "popover" > текст </a>    

Арга зүй

$().popover(сонголт)

Элементийн цуглуулгад зориулсан поповеруудыг эхлүүлнэ.

.popover('шоу')

Поповын элементүүдийг харуулна.

$ ( '#элемент' ). popover ( 'шоу' )

.popover('нуух')

Элементүүдийн поповыг нууна.

$ ( '#элемент' ). popover ( 'нуух' )

Демо

поповыг сонго

Сэрэмжлүүлэг залгаас нь сэрэмжлүүлэгт ойрхон функцийг нэмэхэд зориулагдсан маш жижиг анги юм.

Татаж авах

bootstrap-alerts.js ашиглаж байна

$ ( ". alert-message" ). сэрэмжлүүлэг ()

Тэмдэглэгээ

data-alertСэрэмжлүүлгийн мессежүүддээ атрибут нэмээд автоматаар ойрын функцийг өгнө.

Сонголтууд

Нэр	төрөл	анхдагч	тайлбар
сонгогч	мөр	'.хаах'	Анхааруулга хаахын тулд ямар сонгогчийг чиглүүлэх вэ.

Арга зүй

$() дохиолол()

Бүх сэрэмжлүүлгийг ойрын функцээр хаадаг. Таны сэрэмжлүүлэг хаагдсан үед анихын тулд тэдгээрт .fadeболон .inангиллыг аль хэдийн ашигласан эсэхийг шалгаарай.

.alert('хаах')

Сэрэмжлүүлэгийг хаадаг.

$ ( ". alert-message" ). сэрэмжлүүлэг ( 'хаах' )

Демо