Bootstrap компонентларын jQuery һәм Ender белән эшләүче яңа, махсус плагиннар белән тормышка китерегез .
Безнең Модаль плагин - традицион модаль js плагинын супер нечкә кабул итү, монда твиттерда без таләп иткән ялан функцияне кертү өчен аеруча игътибарлы.
Йөкләү
- $ ( '# my-modal' ). модаль ( вариантлар )
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
фон | буле | ялган | Модаль-фон элементын үз эченә ала |
клавиатура | буле | ялган | Качу ачкычы басылганда модальне япа |
шоу | буле | ялган | Класс инициализациясендә модаль ача |
Сез биттә модальләрне бер генә javascript язмыйча активлаштыра аласыз. Модаль элемент идентификациясенә туры килгән элементны бирегез data-controls-modal
, һәм басылгач, ул сезнең модалыгызны эшләтеп җибәрәчәк. Модаль вариантларны өстәү өчен, аларны мәгълүмат атрибутлары итеп кенә кертегез.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true"> Модальне эшләтеп җибәрү </a>
Игътибар итегез , сез модалыгызны җанландырырга телисез икән, элементка .fade
класс өстәгез .modal
(моны эштә күрү өчен демога карагыз).
Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object
.
- $ ( '# my-modal' ). модаль ({
- closeOnEscape : дөрес
- })
Модальне кул белән алыштыра.
- $ ( '# my-modal' ). модаль ( 'күчү' )
Кул белән модаль ачыла.
- $ ( '# my-modal' ). модаль ( 'шоу' )
Модальне кул белән яшерә.
- $ ( '# my-modal' ). модаль ( 'яшерү' )
Модаль класс инстанциясен кире кайтара.
- $ ( '# my-modal' ). модаль ( дөрес )
Игътибар Альтернатив рәвештә, моны алып була $().data('modal')
.
Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә.
Вакыйга | Тасвирлау |
---|---|
шоу | show Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . |
күрсәтелгән | Бу вакыйга модаль кулланучыга күренгәндә эшләнә (css күчү тәмамлануын көтәр). |
яшер | hide Бу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла . |
яшерелгән | Бу вакыйга модаль кулланучыдан яшерелгәннән соң җибәрелә (css күчү тәмамлануын көтәр). |
- $ ( '# my-modal' ). бәйләү ( 'яшерелгән' , функция () {
- // нәрсәдер эшлә ...
- })
Бу плагин ботстрапның төп тактасына яисә өстәлгән навигациягә төшү үзара бәйләнешен өстәү өчен.
Йөкләү
- $ ( '#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.
Бу плагин скроллспи (автоматик яңарту диңгез) үзара бәйләнешне башлау өчен.
Йөкләү
- $ ( '#topbar' ). тамчы ()
Scrollspy тәртибен сезнең диңгезгә җиңел өстәү өчен, data-scrollspy
атрибутны өстәгез .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Авто навигация төймәләрен кулланучылар әйләндерү позициясе белән активлаштыра.
- $ ( 'тән> .топбар' ). scrollSpy ()
Игътибар итегез , Topbar анкор тэгларында чишелә торган id максатлары булырга тиеш. Мәсәлән <a href="#home">home</a>
, домдагы берәр нәрсәгә туры килергә тиеш <div id="home"></div>
.
Scrollspy кэш нав төймәләре һәм башкару өчен бүлек координаталары. Әгәр дә сез бу кэшны яңартырга тиеш булсагыз (сезнең динамик эчтәлегегез булса), бу яңарту ысулына шалтыратыгыз. Әгәр дә сез скролспияне билгеләү өчен мәгълүмат атрибутын кулланган булсагыз, организмга яңарту чакырыгыз.
- $ ( 'тән' ). scrollspy ( 'яңарту' )
Бу биттәге өстәмә навигацияне карагыз.
Бу плагин тиз, динамик кыстыргыч һәм таблетка функциясен өсти.
Йөкләү
- $ ( '.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>
- </ul>
- <скрипт>
- $ ( функция () {
- $ ( '.tabs' ). таблицалар ()
- })
- </script>
Чим джинсы, мөгаен, алар турында джин шорты Остин турында ишетмәгәнсездер. Nesciunt tofu stumptown aliqua, ретро синт мастер чистарту. Мыек кысу температурасы, вильямсбург карлес вегетан гелветика. Репрендерит касапчы ретро кефиех хыялый синт. Косби свитер һәм бан ми, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan америка киеме, касапчы волуптат ниси qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
Джейсон Фрэм язган искиткеч jQuery.tipsy плагинына нигезләнеп; twipsy - яңартылган версия, ул рәсемнәргә таянмый, анимация өчен css3 куллана, һәм исем саклау өчен мәгълүмат-атрибутлар!
Йөкләү
- $ ( '# мисал' ). икеләтә ( вариантлар )
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
җанлы | буле | дөрес | css сүнгән коралга күчүне кулланыгыз |
соңга калу | саны | 0 | корал күрсәтмәсен күрсәткәнче тоткарлау (мс) |
соңга калу | саны | 0 | корал киңәшен яшергәнче тоткарлау (мс) |
кире чигенү | кыл | '' | коралның исеме булмаганда куллану өчен текст |
урнаштыру | кыл | 'өстә' | корал киңәшен ничек урнаштырырга - өстә | аста | сул | уң |
html | буле | ялган | кораллар эчендә html эчтәлеген рөхсәт итә |
яшә | буле | ялган | индивидуаль вакыйгалар эшкәртүчеләр урынына вакыйга делегациясен кулланыгыз |
офсет | саны | 0 | максатлы элементтан коралның пиксель офсеты |
исем | кыл | функциясе | 'титул' | атрибут яки исем текстын алу ысулы |
триггер | кыл | 'каеру' | инструменты ничек этәрелә - кая | фокус | кулланма |
Элемент коллекциясенә икеләтә эшкәртүчене бәйли.
Бер элементны ачып бирә.
- $ ( '# элемент' ). бөдрә ( 'шоу' )
Элементларны яшерә.
- $ ( '# элемент' ). бөдрә ( 'яшерү' )
Элементларның икеләтә класс мисалын кайтара.
- $ ( '# элемент' ). бөдрә ( дөрес )
Игътибар Альтернатив рәвештә, моны алып була $().data('twipsy')
.
Киләсе дәрәҗәдәге каты чалбар , сез алар турында ишетмәгәнсездер. Фотогалерея сакал чимал деним хәрефләре вегетариан хәбәрче сумкасы. Ферма-өстәл сейитаны, mcsweeney's fixie тотрыклы квиноа 8 битлы америка киемендә терри ричардсон винил чембрей бар . Сакал боткасы, кардиганнар банх ми ломо күк күкрәү. Тофу биодизель вильямсбург марфа, дүрт локо мксвейни вегетариан камерасын чистарту. Чыннан да, ирония остасы нинди генә ачкыч, сәхнә фермасы - өстәл банкы Остин твиттеры фриган кредит чималы деним бер чыганак кофе вируслы.
Поповер плагины сезнең кушымтагызга поповерлар өстәү өчен гади интерфейс тәкъдим итә. Бу boostrap-twipsy.js плагинын киңәйтә, шуңа күрә сезнең проектка поповерлар керткәндә шул файлны кулга алыгыз!
Йөкләү
- $ ( '# мисал' ). поповер ( вариантлар )
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
җанлы | буле | дөрес | css сүнгән коралга күчүне кулланыгыз |
соңга калу | саны | 0 | корал күрсәтмәсен күрсәткәнче тоткарлау (мс) |
соңга калу | саны | 0 | корал киңәшен яшергәнче тоткарлау (мс) |
кире чигенү | кыл | '' | коралның исеме булмаганда куллану өчен текст |
урнаштыру | кыл | 'дөрес' | корал киңәшен ничек урнаштырырга - өстә | аста | сул | уң |
html | буле | ялган | кораллар эчендә html эчтәлеген рөхсәт итә |
яшә | буле | ялган | индивидуаль вакыйгалар эшкәртүчеләр урынына вакыйга делегациясен кулланыгыз |
офсет | саны | 0 | максатлы элементтан коралның пиксель офсеты |
исем | кыл | функциясе | 'титул' | атрибут яки исем текстын алу ысулы |
эчтәлеге | кыл | функциясе | 'мәгълүмат-эчтәлек' | эчтәлек текстын алу өчен атрибут яки ысул |
триггер | кыл | 'каеру' | инструменты ничек этәрелә - кая | фокус | кулланма |
Элемент җыю өчен поповерларны башлый.
Поповер элементларын ачып бирә.
- $ ( '# элемент' ). поповер ( 'шоу' )
Элементларны яшерә.
- $ ( '# элемент' ). поповер ( 'яшерү' )
Сигнализация плагины - сигнализацияләргә якын функция өстәү өчен супер кечкенә класс.
Йөкләү
- $ ( ".alert-message" ). уяу ()
data-alert
Автоматик рәвештә якын функция бирү өчен, сезнең хәбәрләрегезгә атрибут өстәгез .
Барлык хәбәрләрне дә якын функция белән урап алыгыз. Ябылганда сезнең хәбәрләр җанлансын өчен, аларда класс .fade
һәм .in
класс кулланылганына инаныгыз.
Кисәтүне япа.
- $ ( ".alert-message" ). уяу ( 'ябык' )