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

Татаж авах

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

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

Сонголтууд

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

Тэмдэглэгээ

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

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

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

Арга зүй

.modal(сонголт)

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

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

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

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

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

.modal('шоу')

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

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

.modal('нуух')

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

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

.modal(үнэн)

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

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

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

Үйл явдал

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

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

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

Демо

Modal-г ажиллуул

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

Татаж авах

boostrap-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) харилцан үйлчлэлийг нэмэхэд зориулагдсан.

Татаж авах

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

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

Тэмдэглэгээ

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 ( 'шинэчлэх' )

Демо

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

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

Татаж авах

boostrap-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> 
</ul>
 
<скрипт>
  $ ( функц () {  
    $ ( '.tabs' ). таб ()
  })
</script>

Демо

• Гэр
• Профайл
• Мессежүүд
• Тохиргоо

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

Татаж авах

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

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

Сонголтууд

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

Арга зүй

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

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

.twipsy('шоу')

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

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

.twipsy('нуух')

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

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

.twipsy(үнэн)

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

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

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

Демо

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

Татаж авах

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

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

Сонголтууд

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

Арга зүй

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

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

.popover('шоу')

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

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

.popover('нуух')

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

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

Демо

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

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

Татаж авах

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

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

Тэмдэглэгээ

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

Арга зүй

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

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

.alert('хаах')

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

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

Демо