Безнең Модаль плагин - традицион модаль js плагинын супер нечкә кабул итү, монда твиттерда без таләп иткән ялан функцияне кертү өчен аеруча игътибарлы.

Йөкләү

Ботстрап-модаль куллану

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

Вариантлар

Исем	тибы	Килешү	тасвирлау
фон	буле, кыл	ялган	Модаль-фон элементын үз эченә ала. "static"Фонны баскач, модальнең ябылуын теләмәсәгез, фонны куегыз .
клавиатура	буле	ялган	Качу ачкычы басылганда модальне япа
шоу	буле	ялган	Класс инициализациясендә модаль ача

Билгеләү

Сез биттә модальләрне бер генә javascript язмыйча активлаштыра аласыз. Модаль элемент идентификациясенә туры килгән элементны бирегез data-controls-modal, һәм басылгач, ул сезнең модалыгызны эшләтеп җибәрәчәк. Модаль вариантларны өстәү өчен, аларны мәгълүмат атрибутлары итеп кенә кертегез.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static"> Модальне эшләтеп җибәрү </a>    

Игътибар итегез , сез модалыгызны җанландырырга телисез икән, элементка .fadeкласс өстәгез .modal(моны эштә күрү өчен демога карагыз).

Методлар

.модаль (вариантлар)

Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object.

$ ( '# my-modal' ). модаль ({
  клавиатура : дөрес 
})

.модаль ('күчү')

Модальне кул белән алыштыра.

$ ( '# my-modal' ). модаль ( 'күчү' )

.модаль ('шоу')

Кул белән модаль ачыла.

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

.модаль ('яшерү')

Модальне кул белән яшерә.

$ ( '# my-modal' ). модаль ( 'яшерү' )

.модаль (дөрес)

Модаль класс инстанциясен кире кайтара.

$ ( '# my-modal' ). модаль ( дөрес )

Игътибар Альтернатив рәвештә, моны алып була $().data('modal').

Вакыйгалар

Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә.

Вакыйга	Тасвирлау
шоу	showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән	Бу вакыйга модаль кулланучыга күренгәндә эшләнә (css күчү тәмамлануын көтәр).
яшер	hideБу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
яшерелгән	Бу вакыйга модаль кулланучыдан яшерелгәннән соң җибәрелә (css күчү тәмамлануын көтәр).

$ ( '# my-modal' ). бәйләү ( 'яшерелгән' , функция () {   
  // нәрсәдер эшлә ...
})

Демо

Модальне эшләтеп җибәрү

Бу плагин ботстрапның төп тактасына яисә өстәлгән навигациягә төшү үзара бәйләнешен өстәү өчен.

Йөкләү

Bootstrap-dropdown.js куллану

$ ( '#topbar' ). тамчы ()

Билгеләү

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

<ul class = "tabs" > 
  <li class = "актив" > <a href = "#"> Өй </a> </li>  
  <li class = "тамчы" мәгълүмат-төшү = "төшү" >   
    <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

Методлар

$ (). төшү ()

Бирелгән өстәмә яисә өстәл навигациясе өчен менюларны активлаштыру өчен программалы api.

Демо

Бу плагин скроллспи (автоматик яңарту диңгез) үзара бәйләнешне башлау өчен.

Йөкләү

Bootstrap-scrollspy.js куллану

$ ( '#topbar' ). scrollSpy ()

Билгеләү

Scrollspy тәртибен сезнең диңгезгә җиңел өстәү өчен, data-scrollspyатрибутны өстәгез .topbar.

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

Методлар

$ (). scrollSpy ()

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

$ ( 'тән> .топбар' ). scrollSpy ()

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

.scrollSpy ('яңарту')

Scrollspy кэш нав төймәләре һәм башкару өчен бүлек координаталары. Әгәр дә сез бу кэшны яңартырга тиеш булсагыз (сезнең динамик эчтәлегегез булса), бу яңарту ысулына шалтыратыгыз. Әгәр дә сез скролспияне билгеләү өчен мәгълүмат атрибутын кулланган булсагыз, организмга яңарту чакырыгыз.

$ ( 'тән' ). scrollSpy ( 'яңарту' )

Демо

Бу биттәге өстәмә навигацияне карагыз.

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

Йөкләү

Bootstrap-buttons.js куллану

$ ( '.tabs' ). төймә ()

Методлар

$ (). төймә ('күчү')

Күчереп тору. Активлаштырылган күренеш бирә.

Игътибарdata-toggle Сез атрибутны кулланып төймәгә автоматик рәвештә күчә аласыз .

<төймә классы = "btn" мәгълүмат-күчү = "күчү" > ... </button>   

$ (). төймә ('йөкләү')

Йөкләү өчен төймә халәтен куя - төймәне сүндерә һәм текстны йөкләүгә текстны алыштыра. Текстны йөкләү төймә элементында мәгълүмат атрибутын кулланып билгеләнергә тиеш data-loading-text.

<төймә класс = "btn" мәгълүмат-йөкләү-текст = "әйберләр йөкләү ..." > ... </button>   

$ (). төймә ('яңарту')

Кнопка халәтен үзгәртә - текстны оригиналь текстка алыштыра.

$ (). төймә (тезмә)

Кнопка халәтен яңадан торгызу - текстны теләсә нинди мәгълүмат текстына алыштыра.

<төймә класс = "btn" мәгълүмат-тулы-текст = "бетте!" > ... </button>   
<скрипт>
  $ ('. btn'). төймә ('тулы')
</scrip>

Демо

Демо йөкләү Демоны алыштырыгыз

Бу плагин тиз, динамик кыстыргыч һәм таблетка функциясен өсти.

Йөкләү

Bootstrap-tabs.js куллану

$ ( '.tabs' ). таблицалар ()

Билгеләү

Сез өстәмә яки таблетка навигациясен бернинди javascript язмыйча активлаштыра аласыз, аларга data-tabsатрибут data-pillsбиреп.

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

Методлар

$ (). таблицалар яки $ (). таблеткалар

Бирелгән контейнер өчен таблицаны һәм таблетка функциясен активлаштыра. Таблицалар сылтамалары документтагы идентификацияне күрсәтергә тиеш.

<ul class = "tabs" > 
  <li class = "актив" > <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 = "актив" id = "өй" > ... </div>  
  <div id = "профиль" > ... </div> 
  <div id = "хәбәрләр" > ... </div> 
  <div id = "көйләүләр" > ... </div> 
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs' ). таблицалар ()
  })
</script>

Вакыйгалар

Вакыйга	Тасвирлау
үзгәртү	Бу вакыйга таблицаны үзгәртүдә янып тора. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .

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

Демо

• Өй
• Профиль
• Хәбәрләр
• Көйләүләр
• Төшү
  • @fat
  • @mdo

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

Йөкләү

Bootstrap-twipsy.js куллану

$ ( '# мисал' ). икеләтә ( вариантлар )

Вариантлар

Исем	тибы	Килешү	тасвирлау
җанлы	буле	дөрес	css сүнгән коралга күчүне кулланыгыз
соңга калу	саны	0	корал күрсәтмәсен күрсәткәнче тоткарлау (мс)
соңга калу	саны	0	корал киңәшен яшергәнче тоткарлау (мс)
кире чигенү	кыл	''	коралның исеме булмаганда куллану өчен текст
урнаштыру	кыл	'өстә'	корал киңәшен ничек урнаштырырга - өстә | аста | сул | уң
html	буле	ялган	кораллар эчендә html эчтәлеген рөхсәт итә
яшә	буле	ялган	индивидуаль вакыйгалар эшкәртүчеләр урынына вакыйга делегациясен кулланыгыз
офсет	саны	0	максатлы элементтан коралның пиксель офсеты
исем	тезмә, функция	'титул'	атрибут яки исем текстын алу ысулы
триггер	кыл	'каеру'	инструменты ничек этәрелә - кая | фокус | кулланма
шаблон	кыл	[килешү билгесе]	Html шаблоны әйләнеш күрсәтү өчен кулланыла.

Игътибар Индивидуаль икеләтә инстанция вариантлары альтернатив рәвештә мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.

<a href = "#" data-placement = "below" rel ='twipsy' title = 'Кайбер исем тексты> > текст </a>    

Методлар

$ ().

Элемент коллекциясенә икеләтә эшкәртүчене бәйли.

.twipsy ('шоу')

Бер элементны ачып бирә.

$ ( '# элемент' ). бөдрә ( 'шоу' )

.twipsy ('яшерү')

Элементларны яшерә.

$ ( '# элемент' ). бөдрә ( 'яшерү' )

.twipsy (дөрес)

Элементларның икеләтә класс мисалын кайтара.

$ ( '# элемент' ). бөдрә ( дөрес )

Игътибар Альтернатив рәвештә, моны алып була $().data('twipsy').

Демо

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

Игътибар итегез , bootstrap-popover.js алдыннан bootstrap- twipsy.js файлын кертергә тиеш .

Йөкләү

Bootstrap-popover.js куллану

$ ( '# мисал' ). поповер ( вариантлар )

Вариантлар

Исем	тибы	Килешү	тасвирлау
җанлы	буле	дөрес	css сүнгән коралга күчүне кулланыгыз
соңга калу	саны	0	корал күрсәтмәсен күрсәткәнче тоткарлау (мс)
соңга калу	саны	0	корал киңәшен яшергәнче тоткарлау (мс)
кире чигенү	кыл	''	коралның исеме булмаганда куллану өчен текст
урнаштыру	кыл	'дөрес'	корал киңәшен ничек урнаштырырга - өстә | аста | сул | уң
html	буле	ялган	кораллар эчендә html эчтәлеген рөхсәт итә
яшә	буле	ялган	индивидуаль вакыйгалар эшкәртүчеләр урынына вакыйга делегациясен кулланыгыз
офсет	саны	0	максатлы элементтан коралның пиксель офсеты
исем	тезмә, функция	'титул'	атрибут яки исем текстын алу ысулы
эчтәлеге	тезмә, функция	'мәгълүмат-эчтәлек'	эчтәлек текстын алу өчен тезмә яки ысул. берсе дә тәэмин ителмәсә, эчтәлек мәгълүмат-эчтәлек атрибутыннан ясалачак.
триггер	кыл	'каеру'	инструменты ничек этәрелә - кая | фокус | кулланма
шаблон	кыл	[килешү билгесе]	Поповерны күрсәтү өчен кулланылган html шаблоны.

Игътибар Индивидуаль поповер инстанция вариантлары альтернатив рәвештә мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.

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

Методлар

$ (). поповер (вариантлар)

Элемент җыю өчен поповерларны башлый.

.popover ('шоу')

Поповер элементларын ачып бирә.

$ ( '# элемент' ). поповер ( 'шоу' )

.поповер ('яшерү')

Элементларны яшерә.

$ ( '# элемент' ). поповер ( 'яшерү' )

Демо

поповер өчен йөрегез

Сигнализация плагины - сигнализацияләргә якын функция өстәү өчен супер кечкенә класс.

Йөкләү

Bootstrap-alerts.js куллану

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

Билгеләү

data-alertАвтоматик рәвештә якын функция бирү өчен, сезнең хәбәрләрегезгә атрибут өстәгез .

Вариантлар

Исем	тибы	Килешү	тасвирлау
селектор	кыл	'.close'	Сигнализацияне ябу өчен нинди селектор.

Методлар

$ (). кисәтү ()

Барлык хәбәрләрне дә якын функция белән урап алыгыз. Ябылганда сезнең хәбәрләр җанлансын өчен, аларда класс .fadeһәм .inкласс кулланылганына инаныгыз.

.alert ('якын')

Кисәтүне япа.

$ ( ".alert-message" ). уяу ( 'ябык' )

Демо