Біздің Modal плагиніміз дәстүрлі modal JS плагинінің өте жұқа нұсқасы болып табылады, ол twitter-де бізге қажет қарапайым функционалдылықты ғана қамтиды.

Жүктеп алу

Bootstrap-модальді пайдалану

$ ( '#менің-модалым' ). модальды ( опциялар )

Опциялар

Аты	түрі	әдепкі	сипаттамасы
фон	логикалық	жалған	Модаль-фон элементін қамтиды
пернетақта	логикалық	жалған	Escape пернесі басылғанда модальды жабады
көрсету	логикалық	жалған	Сынып инициализациясында модальды ашады

Белгілеу

Сіз JavaScript бір жолын жазбай-ақ өз бетіңізде модальдарды оңай белсендіре аласыз. data-controls-modalЭлементке модальды элемент идентификаторына сәйкес келетін төлсипатты беріңіз және басқан кезде ол модальды іске қосады. Модальды опцияларды қосу үшін оларды деректер атрибуттары ретінде де қосыңыз.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Модальді іске қосу </a>    

Ескерту Модалдың жандануын және шығуын қаласаңыз, элементіңізге .fadeкласс қосыңыз .modal(оны әрекетте көру үшін демонстрацияны қараңыз).

Әдістері

.modal(опциялар)

Мазмұныңызды модаль ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

$ ( '#менің-модалым' ). модальды ({
  closeOnEscape : шын 
})

.modal('қосу')

Модальді қолмен ауыстырады.

$ ( '#менің-модалым' ). модаль ( «қосу» )

.modal('шоу')

Модальді қолмен ашады.

$ ( '#менің-модалым' ). модаль ( «шоу» )

.modal('жасыру')

Модальді қолмен жасырады.

$ ( '#менің-модалым' ). модаль ( «жасыру» )

.modal(true)

Элементтердің модальды класс данасын қайтарады.

$ ( '#менің-модалым' ). модальды ( шын )

Ескерту Балама ретінде, оны арқылы шығарып алуға болады $().data('modal').

Оқиғалар

Bootstrap модальды класы модальды функционалдылыққа қосылу үшін бірнеше оқиғаларды көрсетеді.

Оқиға	Сипаттама
көрсету	showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
көрсетілген	Бұл оқиға модаль пайдаланушыға көрінетін болған кезде іске қосылады (css ауысуларының аяқталуын күтеді).
жасыру	Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
жасырын	Бұл оқиға модальді пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).

$ ( '#менің-модалым' ). байланыстыру ( 'жасырын' , функция () {   
  // бірдеңе жасаңыз ...
})

Демо

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>

Ескерту Егер пайдаланушы интерфейсінде бірнеше ашылмалы тізім болса, төлсипатты немесе data-dropdownсияқты маңыздырақ контейнер элементіне қосуды қарастырыңыз ..tabs.topbar

Әдістері

$().ашылмалы тізім()

Берілген жоғарғы жолақ немесе қойындылы шарлау үшін мәзірлерді белсендіруге арналған бағдарламалық API.

Демо

Бұл плагин жүктеу тақтасының үстіңгі тақтасына scrollspy (автоматты жаңарту) әрекеттесуін қосуға арналған.

Жүктеп алу

boostrap-scrollspy.js пайдалану

$ ( '#жоғарғы жолақ' ). ашылмалы тізім ()

Белгілеу

Навигацияға scrollspy әрекетін оңай қосу үшін data-scrollspyтөлсипатты .topbar.

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

Әдістері

$().scrollspy()

Пайдаланушылар айналдыру орны бойынша навигация түймелерін автоматты түрде белсендіреді.

$ ( 'дене > .жоғарғы жолақ' ). scrollSpy ()

Ескерту Topbar анкерлік тегтерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <a href="#home">home</a>домдағы сияқты нәрсеге міндетті сәйкес келеді <div id="home"></div>.

.scrollspy('жаңарту')

Scrollspy өнімділік үшін шарлау түймелерін және бөлім координаттарын кэштейді. Бұл кэшті жаңарту қажет болса (мүмкін сізде динамикалық мазмұн болса) осы жаңарту әдісіне қоңырау шалыңыз. Егер сіз scrollspy анықтау үшін деректер төлсипатын пайдалансаңыз, жай ғана негізгі бөлімде жаңартуды шақырыңыз.

$ ( «дене» ). scrollspy ( «жаңарту» )

Демо

Осы беттегі үстіңгі жолақты шарлауды тексеріңіз.

Бұл плагин жылдам, динамикалық қойынды мен таблетка функционалдығын қосады.

Жүктеп алу

boostrap-tabs.js пайдалану

$ ( '.қойындылар' ). қойындылар ()

Белгілеу

Қойындыны немесе таблеткаларды шарлауды ешбір JavaScript жазбай-ақ оларға жай data-tabsнемесе data-pillsтөлсипатты беру арқылы қосуға болады.

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

Әдістері

$().tabs немесе $().pills

Берілген контейнер үшін қойынды және таблетка функцияларын белсендіреді. Қойынды сілтемелері құжаттағы идентификаторларға сілтеме жа��ауы керек.

<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>
 
<скрипт>
  $ ( функция () {  
    $ ( '.қойындылар' ). қойындылар ()
  })
</script>

Демо

• Үй
• Профиль
• Хабарламалар
• Параметрлер

Джейсон Фрейм жазған тамаша jQuery.tipsy плагиніне негізделген; twipsy — кескіндерге сүйенбейтін, анимациялар үшін css3 және тақырыпты сақтау үшін деректер атрибуттарын пайдаланатын жаңартылған нұсқасы!

Жүктеп алу

bootstrap-twipsy.js пайдалану

$ ( '#мысал' ). twipsy ( опциялар )

Опциялар

Аты	түрі	әдепкі	сипаттамасы
жандандыру	логикалық	рас	құралдар кеңесіне css өшіру көшуін қолданыңыз
кешіктіру	саны	0	кеңесті көрсету алдындағы кідіріс (мс)
кешіктіру	саны	0	кеңесті жасыру алдындағы кідіріс (мс)
Кері шегіну	жол	''	құралдар кеңесінің тақырыбы болмаған кезде қолданылатын мәтін
орналастыру	жол	'жоғарыда'	құралдар кеңесін қалай орналастыру керек - жоғарыда | төменде | сол жақ | дұрыс
html	логикалық	жалған	құралдар кеңесінде html мазмұнына мүмкіндік береді
өмір сүр	логикалық	жалған	жеке оқиға өңдегіштерінің орнына оқиға делегациясын пайдаланыңыз
офсет	саны	0	мақсатты элементтен құрал кеңесінің пиксель ығысуы
тақырып	жол | функциясы	'атауы'	атрибут немесе тақырып мәтінін шығарып алу әдісі
триггер	жол	'меңгеру'	құралдар кеңесі қалай іске қосылады - меңзерді | фокус | нұсқаулық

Әдістері

$().twipsy(опциялар)

Элементтер жиынына twipsy өңдегішті тіркейді.

.twipsy('шоу')

Элементтерді бұрмалап көрсетеді.

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

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

Элементтерді бұрмалап жасырады.

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

.twipsy(шын)

Элементтердің twipsy класының данасын қайтарады.

$ ( '#элемент' ). бұралған ( шын )

Ескерту Балама ретінде, оны арқылы шығарып алуға болады $().data('twipsy').

Демо

Popover плагині қолданбаға қалқымалы терезелерді қосу үшін қарапайым интерфейсті қамтамасыз етеді. Ол boostrap-twipsy.js плагинін кеңейтеді, сондықтан жобаңызға popovers қосқанда сол файлды да алыңыз!

Жүктеп алу

boostrap-popover.js пайдалану

$ ( '#мысал' ). popover ( опциялар )

Опциялар

Аты	түрі	әдепкі	сипаттамасы
жандандыру	логикалық	рас	құралдар кеңесіне css өшіру көшуін қолданыңыз
кешіктіру	саны	0	кеңесті көрсету алдындағы кідіріс (мс)
кешіктіру	саны	0	кеңесті жасыру алдындағы кідіріс (мс)
Кері шегіну	жол	''	құралдар кеңесінің тақырыбы болмаған кезде қолданылатын мәтін
орналастыру	жол	'дұрыс'	құралдар кеңесін қалай орналастыру керек - жоғарыда | төменде | сол жақ | дұрыс
html	логикалық	жалған	құралдар кеңесінде html мазмұнына мүмкіндік береді
өмір сүр	логикалық	жалған	жеке оқиға өңдегіштерінің орнына оқиға делегациясын пайдаланыңыз
офсет	саны	0	мақсатты элементтен құрал кеңесінің пиксель ығысуы
тақырып	жол | функциясы	'атауы'	атрибут немесе тақырып мәтінін шығарып алу әдісі
мазмұны	жол | функциясы	«деректер мазмұны»	атрибут немесе мазмұн мәтінін шығарып алу әдісі
триггер	жол	'меңгеру'	құралдар кеңесі қалай іске қосылады - меңзерді | фокус | нұсқаулық

Әдістері

$().popover(опциялар)

Элемент жинағы үшін қалқымалы элементтерді инициализациялайды.

.popover('шоу')

Қалқымалы элементтерді көрсетеді.

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

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

Қалқымалы элементтерді жасырады.

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

Демо

popover үшін меңзерді апарыңыз

Ескерту плагині - ескертулерге жақын функцияларды қосуға арналған өте кішкентай сынып.

Жүктеп алу

bootstrap-alerts.js пайдалану

$ ( «.alert-message» ). ескерту ()

Белгілеу

data-alertЕскерту хабарларына автоматты түрде жақын функцияларды беру үшін атрибут қосыңыз .

Әдістері

$().alert()

Барлық ескертулерді жақын функционалдылықпен қосады. Ескертулер жабылған кезде жандануы үшін оларда бұрыннан қолданылған .fadeжәне сынып бар екеніне көз жеткізіңіз..in

.alert('жабу')

Ескертуді жабады.

$ ( «.alert-message» ). ескерту ( «жабу» )

Демо