Васлкунаки Modal мо як намуди хеле нозуки плагини анъанавии modal js мебошад, ки ба он диққати махсус медиҳад, ки танҳо функсияҳои бараҳнаеро, ки мо дар Twitter талаб мекунем, дар бар гирад.

Зеркашӣ кунед

Истифодаи bootstrap-modal

$ ( '#my-modal' ). модаль ( имконот )

Имконот

Ном	навъи	пешфарз	тавсиф
замина	булӣ	дурӯғ	Унсури модаль-заминаро дар бар мегирад
клавиатура	булӣ	дурӯғ	Вақте ки тугмаи 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' ). пайваст ( 'пинҳон' , функсия () {   
  // коре кунед ...
})

Намоиш

Модалро оғоз кунед

Ин плагин барои илова кардани ҳамкории афтанда ба панели болоии боркунӣ ё навигатсияҳои ҷадвалбандишуда мебошад.

Зеркашӣ кунед

Истифодаи boostrap-dropdown.js

$ ( '#topbar' ). афтанда ()

Нишондиҳӣ

Барои зуд илова кардани функсияи афтанда ба ягон унсури нав, атрибутро истифода баред data-dropdown. Ҳама гуна афтандаҳои дурусти bootstrap ба таври худкор фаъол карда мешаванд.

<ul class = "таббачаҳо" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li class = "афтанда" маълумот-афтанда = "афтанда" >   
    <a href = "#" class = "dropdown-toggle" > афтанда </a>  
    <ul class = "менюи афтанда" > 
      <li><a href = "#" > Истиноди дуввум </a></li> 
      <li><a href = "#" > Чизи дигаре дар ин ҷо </a></li> 
      <li class = "тақсимкунанда" ></li> 
      <li><a href = "#" > Пайванди дигар </a></li> 
    </ul>
  </li>
</ul>

Огоҳӣ Агар ui-и шумо якчанд афтанда дошта бошад, дар бораи илова кардани data-dropdownатрибут ба як унсури муҳимтари контейнер ба монанди .tabsё .topbar.

Усулҳо

$().афтанда()

Api барномавӣ барои фаъол кардани менюҳо барои панели боло ё паймоиши ҷадвалбандишуда.

Намоиш

Ин плагин барои илова кардани мутақобилаи scrollspy (навсозии худкори нав) ба болои панели пурборкунанда аст.

Зеркашӣ кунед

Истифодаи boostrap-scrollspy.js

$ ( '#topbar' ). афтанда ()

Нишондиҳӣ

Барои ба осонӣ ба navi худ рафтори 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 кэшҳои нав тугмаҳои ва координатҳои бахш барои иҷрои. Агар ба шумо лозим ояд, ки ин кэшро навсозӣ кунед (эҳтимол агар шумо мундариҷаи динамикӣ дошта бошед) танҳо ба ин усули навсозӣ занг занед. Агар шумо атрибути маълумотро барои муайян кардани scrollspy-и худ истифода баред, танҳо занги refresh-ро дар бадан даъват кунед.

$ ( 'бадан' ). scrollspy ( 'навсозӣ' )

Намоиш

Дар ин саҳифа паймоиши панели болоро санҷед.

Ин плагин функсияи зуд, динамикӣ ва таблиғро илова мекунад.

Зеркашӣ кунед

Истифодаи boostrap-tabs.js

$ ( '.tabs' ). ҷадвалҳо ()

Нишондиҳӣ

Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо додани танҳо атрибут ё атрибут фаъол data-tabsсозед data-pills.

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

Усулҳо

$().табс ё $().пил

Функсияи ҷадвал ва ҳабҳоро барои як контейнери додашуда фаъол мекунад. Истинодҳои ҷадвал бояд ба ID-и ҳуҷҷат муроҷиат кунанд.

<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 = "profile" > ... </div> 
  <div id = "паёмҳо" > ... </div> 
  <div id = "танзимот" > ... </div> 
</ul>
 
<скрипт>
  $ ( функсия () {  
    $ ( '.tabs' ). ҷадвалҳо ()
  })
</script>

Намоиш

• Хона
• Профил
• Паёмҳо
• Танзимотҳо

Дар асоси плагини аълои jQuery.tipsy, ки аз ҷониби Ҷейсон Frame навишта шудааст; twipsy як версияи навшуда аст, ки ба тасвирҳо такя намекунад, css3-ро барои аниматсияҳо ва атрибутҳои маълумотро барои нигаҳдории унвон истифода мебарад!

Зеркашӣ кунед

Истифодаи bootstrap-twipsy.js

$ ( '#мисол' ). twipsy ( имконот )

Имконот

Ном	навъи	пешфарз	тавсиф
зинда кардан	булӣ	дуруст	ба маслиҳати абзор гузариш пажмурда шудани css-ро татбиқ кунед
таъхир дар	рақам	0	таъхир пеш аз нишон додани маслиҳати асбобҳо (ms)
таъхир	рақам	0	таъхир пеш аз пинҳон кардани маслиҳати асбобҳо (ms)
ба пушт афтодан	сатр	''	матн барои истифода ҳангоми мавҷуд набудани унвони маслиҳат
ҷойгиркунӣ	сатр	'боло'	Чӣ тавр ҷойгир кардани банди асбоб - дар боло | дар зер | чап | рост
html	булӣ	дурӯғ	имкон медиҳад, ки мундариҷаи html дар доираи асбобҳо
зинда	булӣ	дурӯғ	ба ҷои коркардкунандагони инфиродӣ аз ҳайати ҳодиса истифода баред
офсет	рақам	0	ҷуброни пикселии маслиҳати абзор аз унсури мавриди ҳадаф
унвон	сатр | функсия	'унвон'	атрибут ё усули дарёфти матни унвон
триггер	сатр	'гурез'	Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - нишонаеро | таваҷҷӯҳ | дастур

Усулҳо

$().twipsy(имконот)

Ба коллексияи элементҳо коркардкунандаи twipsy замима мекунад.

.twipsy('намоиш')

Унсурҳои twipsy-ро ошкор мекунад.

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

.twipsy('пинҳон')

Элементҳоро twipsy пинҳон мекунад.

$ ( '#элемент' ). twipsy ( 'пинҳон кардан' )

.twipsy(ҳақиқӣ)

Намунаи синфи twipsy унсурҳоро бармегардонад.

$ ( '#элемент' ). twipsy ( ҳақиқӣ )

Огоҳӣ Ба таври дигар, ин метавонад бо истифода аз $().data('twipsy').

Намоиш

Васлкунаки popover интерфейси оддиро барои илова кардани поповҳо ба замимаи шумо таъмин мекунад. Он плагини boostrap-twipsy.js-ро васеъ мекунад, аз ин рӯ ҳатман ҳангоми дохил кардани поповҳо ба лоиҳаи худ он файлро низ гиред!

Зеркашӣ кунед

Истифодаи boostrap-popover.js

$ ( '#мисол' ). popover ( имконот )

Имконот

Ном	навъи	пешфарз	тавсиф
зинда кардан	булӣ	дуруст	ба маслиҳати абзор гузариш пажмурда шудани css-ро татбиқ кунед
таъхир дар	рақам	0	таъхир пеш аз нишон додани маслиҳати асбобҳо (ms)
таъхир	рақам	0	таъхир пеш аз пинҳон кардани маслиҳати асбобҳо (ms)
ба пушт афтодан	сатр	''	матн барои истифода ҳангоми мавҷуд набудани унвони маслиҳат
ҷойгиркунӣ	сатр	'дуруст'	Чӣ тавр ҷойгир кардани банди асбоб - дар боло | дар зер | чап | рост
html	булӣ	дурӯғ	имкон медиҳад, ки мундариҷаи html дар доираи асбобҳо
зинда	булӣ	дурӯғ	ба ҷои коркардкунандагони инфиродӣ аз ҳайати ҳодиса истифода баред
офсет	рақам	0	ҷуброни пикселии маслиҳати абзор аз унсури мавриди ҳадаф
унвон	сатр | функсия	'унвон'	атрибут ё усули дарёфти матни унвон
мазмун	сатр | функсия	'мӯҳтавои маълумот'	атрибут ё усули дарёфти матни мундариҷа
триггер	сатр	'гурез'	Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - нишонаеро | таваҷҷӯҳ | дастур

Усулҳо

$().popover(имконот)

Поповҳоро барои коллексияи элементҳо оғоз мекунад.

.popover('намоиш')

Элементҳои поповро ошкор мекунад.

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

.popover('пинҳон')

Попвери элементҳоро пинҳон мекунад.

$ ( '#элемент' ). popover ( 'пинҳон кардан' )

Намоиш

Барои поповор пахш кунед

Васлкунаки ҳушдор як синфи хеле хурд барои илова кардани функсияҳои наздик ба огоҳиҳо мебошад.

Зеркашӣ кунед

Истифодаи bootstrap-alerts.js

$ ( ".alert-message" ). огоҳӣ ()

Нишондиҳӣ

data-alertБа паёмҳои огоҳии худ танҳо атрибут илова кунед, то ба онҳо функсияҳои наздик диҳад.

Усулҳо

$(). alert()

Ҳама огоҳиҳоро бо функсияҳои наздик фаро мегирад. Барои он ки ҳушдорҳои шумо ҳангоми басташавӣ фаъол шаванд, боварӣ ҳосил кунед, ки онҳо аллакай .fadeва .inсинфро ба онҳо татбиқ кардаанд.

.alert('пушидани')

Огоҳӣ мепӯшад.

$ ( ".alert-message" ). огоҳӣ ( 'наздик' )

Намоиш