Bootstrap JS

Bootstrap үшін Javascript

Bootstrap компоненттерін jQuery және Ender бағдарламаларымен жұмыс істейтін жаңа, теңшелетін плагиндермен өмірге келтіріңіз .

← Bootstrap үйіне оралу

ScrollSpy bootstrap-scrollspy.js

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

Жүктеп алу

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

  1. $ ( '#жоғарғы жолақ' ). scrollSpy ()

Белгілеу

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

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

Әдістері

$().scrollSpy()

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

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

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

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

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

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

Демо

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

Buttons bootstrap-buttons.js

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

Жүктеп алу

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

  1. $ ( '.қойындылар' ). түймесі ()

Әдістері

$() түймесі('қосқыш')

Басу күйін ауыстырады. Btn іске қосылған сияқты көрінеді.

Ескертуdata-toggle Төлсипатты пайдалану арқылы түймені автоматты ауыстыруды қосуға болады .

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

$() түймесі('жүктеу')

Түйменің күйін жүктеуге орнатады - түймені өшіреді және мәтінді жүктеу мәтініне ауыстырады. Мәтінді жүктеу деректер атрибуты арқылы түйме элементінде анықталуы керек data-loading-text.

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

$() түймесі('қалпына келтіру')

Түйме күйін қалпына келтіреді - мәтінді бастапқы мәтінге ауыстырады.

$().түйме(жол)

Түйме күйін қалпына келтіреді - мәтінді кез келген деректермен анықталған мәтін күйіне ауыстырады.

  1. <button class = "btn" data-complete-text = "аяқталды!" > ... </ түйме>   
  2. <скрипт>
  3.   $('.btn'). түймесі ('аяқталған')
  4. </scrip>

Демо

Қойындылар bootstrap-tabs.js

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

Жүктеп алу

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

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

Белгілеу

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

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

Әдістері

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

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

  1. <ul class = "қойындылар" > 
  2.   <li class = "active" ><a href = "#home" > Негізгі </a></li>  
  3.   <li><a href = "#profile" > Профиль </a></li> 
  4.   <li><a href = "#messages" > Хабарлар </a></li> 
  5.   <li><a href = "#settings" > Параметрлер </a></li> 
  6. </ul>
  7.  
  8. <div class = "таблетка мазмұны" > 
  9.   <div class = "active" id = "home" > ... </div>  
  10.   <div id = "профиль" > ... </div> 
  11.   <div id = "хабарламалар" > ... </div> 
  12.   <div id = "параметрлер" > ... </div> 
  13. </div>
  14.  
  15. <скрипт>
  16.   $ ( функция () {  
  17.     $ ( '.қойындылар' ). қойындылар ()
  18.   })
  19. </script>

Оқиғалар

Оқиға Сипаттама
өзгерту Бұл оқиға қойындыны өзгерту кезінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget 
  1. $ ( '#.қойындылар' ). байланыстыру ( «өзгерту» , функция ( e ) {   
  2.   e . мақсатты // белсендірілген қойынды
  3.   e . қатыстыTarget // алдыңғы қойынды
  4. })

Демо

Шикі джинсы Остин олар туралы естімеген боларсыз. Nesciunt tofu stumptown aliqua, ретро синтетикалық тазалау шебері. Мұртты клише, Вильямсбург Карлес Вегетариандық Хелветика. Reprehenderit қасапшы ретро keffiyeh dreamcatcher synth. Косби жемпірі eu banh mi, qui irure Терри Ричардсон бұрынғы кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, қасапшы nisi qui voluptate.

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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Twipsy bootstrap-twipsy.js

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

Жүктеп алу

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

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

Опциялар

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

Ескерту Жеке twipsy данасы опциялары баламалы түрде деректер атрибуттарын пайдалану арқылы көрсетілуі мүмкін.

  1. <a href = "#" data-placement = "төменде" rel = 'twipsy' title = 'Кейбір тақырып мәтіні' > мәтін </a>

Әдістері

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

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

.twipsy('шоу')

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

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

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

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

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

.twipsy(шын)

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

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

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

Демо

Тар шалбар келесі деңгейдегі keffiyeh сіз олар туралы естімеген шығарсыз. Фотостенд сақал шикі джинсы баспа вегетариандық хабаршы сөмкесі Stumptown. Фермадан үстелге арналған сейтан, Mcsweeney's fixie sustainable quinoa 8-бит американдық киімінде терри Ричардсон винил камерасы бар . Beard Stumptown, кардигандар banh mi lomo thundercats. Тофу биодизель Вильямсбург Марфа, төрт локо Максвинидің вегетариандық камерасын тазартады. Шынында да ирониялық қолөнерші кез келген keytar , scenster farm-to-to-table banksy Остин twitter handle freegan cred raw джинсы бір текті кофе вирустық.

Popovers bootstrap-popover.js

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

Ескерту Сіз bootstrap-twipsy.js файлын bootstrap-popover.js файлынан бұрын қосуыңыз керек .

Жүктеп алу

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

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

Опциялар

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

Ескерту Жеке қалқымалы дана опцияларын деректер төлсипаттарын пайдалану арқылы балама түрде көрсетуге болады.

  1. <a data-placement="below" href="#" class="btn danger" rel="popover">text</a>

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

  1. $('#element').popover('show')

.popover('hide')

Hides an elements popover.

  1. $('#element').popover('hide')

Demo

hover for popover

Alerts bootstrap-alerts.js

The alert plugin is a super tiny class for adding close functionality to alerts.

Download

Using bootstrap-alerts.js

  1. $(".alert-message").alert()

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Options

Name type default description
selector string '.close' What selector to target for closing an alert.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

  1. $(".alert-message").alert('close')

Demo

×

Қасиетті гуакамоле! Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз.

×

О, шап! Сізде қате бар! Осыны және оны өзгертіп, әрекетті қайталаңыз. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.

Бұл әрекетті орындаңыз Немесе мұны істе