Биздин Modal плагинибиз салттуу modal js плагининин өтө сымбаттуу кабыл алынышы жана бул жерде биз Твиттерде талап кылынган жылаңач функцияларды гана камтууга өзгөчө көңүл бурат.

Жүктөп алуу

Bootstrap-modal колдонуу

$ ( '#my-modal' ). модалдык ( параметрлер )

Параметрлер

аты	түрү	демейки	сүрөттөмө
фон	логикалык	жалган	Модалдык көшөгө элементин камтыйт
клавиатура	логикалык	жалган	Escape баскычы басылганда модалды жабат
көрсөтүү	логикалык	жалган	Классты инициализациялоодо модалды ачат

Белгилөө

Сиз JavaScriptтин бир сабын жазбастан эле баракчаңызда модальдарды оңой иштете аласыз. Жөн эле элементке data-controls-modalмодалдык элементтин идентификаторуна туура келген атрибут бериңиз жана басылганда, ал сиздин модалды ишке киргизет. Модалдык параметрлерди кошуу үчүн, аларды жөн гана маалымат атрибуттары катары кошуңуз.

<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'тин модалдык классы модалдык функцияга кирүү үчүн бир нече окуяларды ачып берет.

Окуя	Description
көрсөтүү	Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн	Бул окуя модаль колдонуучуга көрүнгөндөн кийин өчүрүлөт (css өтүүлөрү бүткүчө күтөт).
жашыруу	Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
жашырылган	Бул окуя модаль колдонуучудан жашырылгандан кийин өчүрүлөт (css өтүүлөрү бүткүчө күтөт).

$ ( '#my-modal' ). байлоо ( 'жашыруун' , функция () {   
  // бир нерсе кыл ...
})

Демо

Модалды ишке киргизүү

Бул плагин жүктөөчү панелдин үстүнкү панелине же өтмөктүү навигацияларга ачылуучу өз ара аракеттенүүнү кошуу үчүн.

Жүктөп алуу

boostrap-dropdown.js колдонуу

$ ( '#жогорку тилке' ). ачылуучу ()

Белгилөө

Каалаган навигация элементине ылдый түшүүчү функцияны тез кошуу үчүн data-dropdownатрибутун колдонуңуз. Ар кандай жарактуу жүктөөчү ылдый түшүүчү тизме автоматтык түрдө жандырылат.

<ul class = "өтмөктөр" > 
  <li class = "active" ><a href = "#" > Башкы </a></li>  
  <li класс = "ашылма" маалымат-ашылгыч = "ашылма" >   
    <a href = "#" class = "dropdown-toggle" > Ашылма </a>  
    <ul class = "ылдый түшүүчү меню" > 
      <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.

Демо

Бул плагин bootstrap үстүнкү панелине scrollspy (автоматтык түрдө жаңыртуу) өз ара аракеттенүүсүн кошуу үчүн.

Жүктөп алуу

boostrap-scrollspy.js колдонуу

$ ( '#жогорку тилке' ). ачылуучу ()

Белгилөө

Навигиңизге scrollspy жүрүм-турумун оңой кошуу үчүн, жөн гана data-scrollspyатрибутту .topbar.

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

Методдор

$().scrollspy()

Колдонуучулардын жылдыруу орду боюнча навигация баскычтарын автоматтык түрдө иштетет.

$ ( 'дене > .topbar' ). scrollSpy ()

Эскертүү , Topbar анкер тегдеринде чечилүүчү ID максаттары болушу керек. Мисалы, <a href="#home">home</a>домдогу бир нерсеге дал келиши керек <div id="home"></div>.

.scrollspy('жаңылоо')

Scrollspy иштөө үчүн navigasyon баскычтарын жана бөлүмдүн координаттарын кэштейт. Эгер сиз бул кэшти жаңыртышыңыз керек болсо (сизде динамикалык мазмун бар болсо) жөн гана ушул жаңылоо ыкмасын чакырыңыз. Эгер сиз scrollspyиңизди аныктоо үчүн data атрибутун колдонсоңуз, жөн гана денеде жаңырууну чакырыңыз.

$ ( 'дене' ). scrollspy ( 'жаңылоо' )

Демо

Бул барактын үстүнкү тилкесинде навигацияны текшериңиз.

Бул плагин тез, динамикалык өтмөк жана таблетка функцияларын кошот.

Жүктөп алуу

boostrap-tabs.js колдонуу

$ ( '.tabs' ). өтмөктөр ()

Белгилөө

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

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

Методдор

$().таблеткалар же $().таблеткалар

Берилген контейнер үчүн өтмөк жана таблетка функцияларын иштетет. Өтмөк шилтемелери документтеги идентификаторлорго шилтеме кылышы керек.

<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 = "таблетка-мазмун" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "профиль" > ... </div> 
  <div id = "билдирүүлөр" > ... </div> 
  <div id = "орнотуулар" > ... </div> 
</ul>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs' ). өтмөктөр ()
  })
</script>

Демо

• Үй
• Профиль
• Кабарлар
• Орнотуулар

Джейсон Фрейм жазган сонун jQuery.tipsy плагининин негизинде; twipsy бул жаңыртылган версия, ал сүрөттөргө таянбайт, анимациялар үчүн css3 жана аталыштарды сактоо үчүн маалымат атрибуттарын колдонот!

Жүктөп алуу

bootstrap-twipsy.js колдонуу

$ ( '#мисалы' ). twipsy ( параметрлер )

Параметрлер

аты	түрү	демейки	сүрөттөмө
жандуу	логикалык	чын	курал үчүн CSS өчүп өтүүнү колдонуңуз
delayIn	саны	0	кеңешти көрсөтүүгө чейин кечигүү (мс)
delayOut	саны	0	кеңешти жашыруу алдында кечигүү (мс)
кайра кайтаруу	сап	''	эч кандай куралдын аталышы жок болгондо колдонула турган текст
жайгаштыруу	сап	'үстүндө'	аспапты кантип жайгаштыруу керек - жогоруда | төмөндө | сол | туура
html	логикалык	жалган	инструментарийдин ичиндеги html мазмунуна мүмкүнчүлүк берет
жашоо	логикалык	жалган	жеке окуяны иштетүүчүлөрдүн ордуна окуя делегациясын колдонуңуз
офсет	саны	0	максаттуу элементтен инструменттин пикселдик жылышы
аталышы	string | функция	'аталышы'	атрибут же аталыштын текстин алуу ыкмасы
триггер	сап	'hover'	инструментарий кантип иштетилет - hover | фокус | колдонмо

Методдор

$().twipsy(параметрлер)

Элементтердин коллекциясына twipsy иштеткичти тиркейт.

.twipsy('шоу')

Твипси элементтерди ачып берет.

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

.twipsy('жашыруу')

Твипси элементтерди жашырат.

$ ( '#элемент' ). twipsy ( 'жашыруу' )

.twipsy(чын)

Элементтердин twipsy класс үлгүсүн кайтарат.

$ ( '#элемент' ). twipsy ( чыныгы )

Эскертүү Же болбосо, муну менен кайра алса болот $().data('twipsy').

Демо

Popover плагини колдонмоңузга popover кошуу үчүн жөнөкөй интерфейсти камсыз кылат. Ал boostrap-twipsy.js плагинин кеңейтет, андыктан проектиңизге поповерлерди кошкондо, ошол файлды да кармаңыз!

Жүктөп алуу

boostrap-popover.js колдонуу

$ ( '#мисалы' ). popover ( параметрлер )

Параметрлер

аты	түрү	демейки	сүрөттөмө
жандуу	логикалык	чын	курал үчүн CSS өчүп өтүүнү колдонуңуз
delayIn	саны	0	кеңешти көрсөтүүгө чейин кечигүү (мс)
delayOut	саны	0	кеңешти жашыруу алдында кечигүү (мс)
кайра кайтаруу	сап	''	эч кандай куралдын аталышы жок болгондо колдонула турган текст
жайгаштыруу	сап	"туура"	аспапты кантип жайгаштыруу керек - жогоруда | төмөндө | сол | туура
html	логикалык	жалган	инструментарийдин ичиндеги html мазмунуна мүмкүнчүлүк берет
жашоо	логикалык	жалган	жеке окуяны иштетүүчүлөрдүн ордуна окуя делегациясын колдонуңуз
офсет	саны	0	максаттуу элементтен инструменттин пикселдик жылышы
аталышы	string | функция	'аталышы'	атрибут же аталыштын текстин алуу ыкмасы
мазмун	string | функция	'маалымат-мазмун'	мазмун текстин алуу үчүн атрибут же ыкма
триггер	сап	'hover'	инструментарий кантип иштетилет - hover | фокус | колдонмо

Методдор

$().popover(параметрлер)

Элементтердин жыйнагы үчүн поповерлерди инициализациялайт.

.popover('шоу')

Элементтерди ачат.

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

.popover('жашыруу')

Калкыма элементтерди жашырат.

$ ( '#элемент' ). popover ( 'жашыруу' )

Демо

поповер үчүн барыңыз

The alert plugin is a super tiny class for adding close functionality to alerts.

Download

Using bootstrap-alerts.js

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

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

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

Demo