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

Жүктөп алуу

Bootstrap-modal колдонуу

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

Параметрлер

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

Белгилөө

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

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

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

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

Демо

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

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

Жүктөп алуу

bootstrap-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 (автоматтык түрдө жаңыртуу) өз ара аракеттенүүсүн кошуу үчүн.

Жүктөп алуу

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

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

Белгилөө

Навигиңизге 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 ( 'жаңылоо' )

Демо

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

Бул плагин баскычтын абалын башкаруу үчүн кошумча функцияларды сунуштайт.

Жүктөп алуу

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

$ ( '.tabs' ). баскычы ()

Методдор

$().button('которуу')

Басуу абалын которуштуруу. Btn ал иштетилгендей көрүнөт.

Эскертүүdata-toggle Сиз атрибутун колдонуу менен баскычты автоматтык түрдө которууну иштете аласыз .

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

$().button('жүктөө')

Жүктөө баскычынын абалын орнотот - баскычты өчүрүп, текстти жүктөө текстине алмаштырат. Жүктөө тексти маалымат атрибутун колдонуу менен баскыч элементинде аныкталышы керек data-loading-text.

<button class = "btn" data-loading-text = "материалдарды жүктөө..." > ... </button>   

$().button('reset')

Баскычтын абалын калыбына келтирет - текстти түпнуска текстке алмаштырат.

$().button(сап)

Баскычтын абалын баштапкы абалга келтирет - текстти каалаган маалымат аныкталган текст абалына алмаштырат.

<баскыч класс = "btn" data-complete-text = "бүттү!" > ... </button>   
<скрипт>
  $('.btn').button('толук')
</scrip>

Демо

Демо жүктөлүүдө Демо өчүрүү/күйгүзүү

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

Жүктөп алуу

bootstrap-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> 
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs' ). өтмөктөр ()
  })
</script>

Окуялар

Окуя	Description
өзгөртүү	Бул окуя өтмөктү өзгөртүүдө ишке ашат. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү максаттоо үчүн event.targetжана колдонуңуз .event.relatedTarget

$ ( '#.tabs' ). bind ( 'өзгөртүү' , функция ( e ) {   
  д . максаттуу // активдештирилген өтмөк
  д . байланыштууTarget // мурунку өтмөк
})

Демо

• Үй
• Профиль
• Кабарлар
• Орнотуулар
• Ашылма
  • @fat
  • @mdo

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

Жүктөп алуу

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

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

Параметрлер

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

Эскертүү Жеке Twipsy инстанциясынын параметрлери альтернатива катары берилиш атрибуттарын колдонуу аркылуу көрсөтүлүшү мүмкүн.

<a href = "#" data-placement = "төмөндө" rel = 'twipsy' title = 'Кээ бир аталыштын тексти' > текст </a>    

Методдор

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

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

.twipsy('шоу')

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

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

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

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

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

.twipsy(чын)

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

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

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

Демо

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

Эскертүү Сиз bootstrap-popover.js файлынан мурун bootstrap-twipsy.js файлын камтышыңыз керек.

Жүктөп алуу

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

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

Параметрлер

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

Эскертүү Жеке popover инстанциясынын параметрлери альтернатива катары берилиш атрибуттарын колдонуу аркылуу көрсөтүлүшү мүмкүн.

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

Методдор

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

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

.popover('шоу')

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

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

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

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

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

Демо

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

Эскертүү плагини - эскертүүлөргө жакын функцияларды кошуу үчүн өтө кичинекей класс.

Жүктөп алуу

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

$ ( ". alert-message" ). эскертүү ()

Белгилөө

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

Параметрлер

аты	түрү	демейки	сүрөттөмө
селектор	сап	'.жабуу'	Эскертүүнү жабуу үчүн кайсы селектор максатталышы керек.

Методдор

$().alert()

Бардык эскертүүлөрдү жакын функциялар менен оройт. Жабык болгондо эскертүүлөрүңүз жанданып турушу үчүн, аларга .fadeжана .inклассы мурунтан эле колдонулганын текшериңиз.

.alert('жабуу')

Эскертүүнү жабат.

$ ( ". alert-message" ). эскертүү ( 'жабуу' )

Демо