Javascript Bootstrap-ისთვის

გააცოცხლეთ Bootstrap-ის კომპონენტები ახალი, მორგებული დანამატებით, რომლებიც მუშაობენ jQuery- თან და Ender- თან .

← დაბრუნება Bootstrap-ის სახლში

ეს მოდული განკუთვნილია scrollspy (ავტომატური განახლების ნავი) ურთიერთქმედების დასამატებლად ჩატვირთვის ზედა ზოლში.

ჩამოტვირთვა

bootstrap-scrollspy.js-ის გამოყენებით

  1. $ ( '#ზედა ზოლი' ). scrollSpy ()

მარკირება

იმისათვის, რომ მარტივად დაამატოთ scrollspy ქცევა თქვენს ნავიგს, უბრალოდ დაამატეთ data-scrollspyატრიბუტი .topbar.

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

მეთოდები

$().scrollSpy()

ავტომატურად ააქტიურებს ნავიგაციის ღილაკებს მომხმარებლების გადახვევის პოზიციის მიხედვით.

  1. $ ( 'body > .topbar' ). scrollSpy ()

ყურადღება მიაქციეთ Topbar-ის წამყვან ტეგებს უნდა ჰქონდეს ამოსახსნელი ID სამიზნეები. მაგალითად, <a href="#home">home</a>უნდა შეესაბამებოდეს რაღაცას დომში, როგორიცაა <div id="home"></div>.

.scrollSpy('განახლება')

Scrollspy ინახავს ნავიგაციის ღილაკებს და განყოფილების კოორდინატებს შესრულებისთვის. თუ გჭირდებათ ამ ქეშის განახლება (სავარაუდოდ, თუ თქვენ გაქვთ დინამიური შინაარსი), უბრალოდ დარეკეთ ამ განახლების მეთოდზე. თუ თქვენ იყენებდით მონაცემთა ატრიბუტს თქვენი scrollspy-ის დასადგენად, უბრალოდ დარეკეთ refresh სხეულზე.

  1. $ ( "სხეული" ). scrollSpy ( 'განახლება' )

დემო

შეამოწმეთ ზედა ზოლის ნავიგაცია ამ გვერდზე.

ეს მოდული გთავაზობთ დამატებით ფუნქციონირებას ღილაკის მდგომარეობის მართვისთვის.

ჩამოტვირთვა

bootstrap-buttons.js გამოყენებით

  1. $ ( '.tabs' ). ღილაკი ()

მეთოდები

$().button('toggle')

გადართავს ბიძგის მდგომარეობას. აძლევს btn სახეს, რომ ის გააქტიურებულია.

შენიშვნა თქვენ შეგიძლიათ ჩართოთ ღილაკის ავტომატური გადართვა data-toggleატრიბუტის გამოყენებით.

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

$().button('იტვირთება')

აყენებს ღილაკის მდგომარეობას ჩატვირთვაზე - გამორთავს ღილაკს და ცვლის ტექსტს ჩატვირთვის ტექსტზე. ტექსტის ჩატვირთვა უნდა განისაზღვროს ღილაკის ელემენტზე მონაცემთა ატრიბუტის გამოყენებით data-loading-text.

  1. <button class = "btn" data-loading-text = "იტვირთება მასალა..." > ... </button>

$().button('გადატვირთვა')

აღადგენს ღილაკის მდგომარეობას - ცვლის ტექსტს ორიგინალ ტექსტზე.

$(). ღილაკი (სტრიქონი)

აღადგენს ღილაკის მდგომარეობას - ცვლის ტექსტს ნებისმიერი მონაცემებით განსაზღვრულ ტექსტურ მდგომარეობაზე.

  1. <button class = "btn" data-complete-text = "დასრულებულია!" > ... </button>
  2. <სკრიპტი>
  3. $('.btn'). ღილაკი ('სრული')
  4. </scrip>

დემო

ეს მოდული ამატებს სწრაფ, დინამიურ ჩანართის და აბების ფუნქციონირებას.

ჩამოტვირთვა

bootstrap-tabs.js-ის გამოყენებით

  1. $ ( '.tabs' ). ჩანართები ()

მარკირება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია ჯავასკრიპტის დაწერის გარეშე, უბრალოდ მინიჭებით data-tabsან data-pillsატრიბუტით.

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

მეთოდები

$().tabs ან $().pills

ააქტიურებს ჩანართის და აბების ფუნქციას მოცემული კონტეინერისთვის. ჩანართის ბმულები უნდა მიუთითებდეს დოკუმენტში მითითებულ ID-ებზე.

  1. <ul class = "tabs" >
  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. $ ( '.tabs' ). ჩანართები ()
  18. })
  19. </script>

Ივენთი

ღონისძიება აღწერა
შეცვლა ეს ღონისძიება ირთვება ჩანართის შეცვლაზე. გამოიყენეთ event.targetდა event.relatedTargetმიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი, შესაბამისად.
  1. $ ( '#.tabs' ). bind ( 'change' , ფუნქცია ( e ) {
  2. . სამიზნე // გააქტიურებული ჩანართი
  3. . relatedTarget // წინა ჩანართი
  4. })

დემო

ნედლი ჯინსი, თქვენ ალბათ არ გსმენიათ მათ შესახებ ჯინსის შორტები Austin. Nesciunt tofu stumptown aliqua, retro synth master წმენდა. ულვაში კლიშე დრო, უილიამსბურგი კარლეს ვეგანური ჰელვეტიკა. Reprehenderit ჯალათიც retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure ტერი რიჩარდსონი ex squid. აიფონის აბსოლუტური ადგილი. Seitan aliquip quis cardigan ამერიკული სამოსი, ჯალათი voluptate nisi 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.

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.

ჯეისონ ფრეიმის მიერ დაწერილი შესანიშნავი jQuery.tipsy მოდულის საფუძველზე; twipsy არის განახლებული ვერსია, რომელიც არ ეყრდნობა სურათებს, იყენებს css3 ანიმაციისთვის და მონაცემთა ატრიბუტებს სათაურის შესანახად!

ჩამოტვირთვა

bootstrap-twipsy.js-ის გამოყენებით

  1. $ ( '#მაგალითი' ). twipsy ( ოფციები )

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
აცოცხლებს ლოგიკური მართალია გამოიყენეთ css fade გადასვლა ინსტრუმენტზე
შეფერხება ნომერი 0 დაყოვნება ხელსაწყოს მინიშნების ჩვენებამდე (მმ)
შეფერხება ნომერი 0 დაყოვნება ხელსაწყოს მინიშნების დამალვამდე (ms)
სარეზერვო სიმებიანი '' ტექსტი გამოსაყენებლად, როცა ხელსაწყოს სათაური არ არის
განთავსება სიმებიანი "ზემოთ" როგორ განვათავსოთ ინსტრუმენტების მინიშნება - ზემოთ | ქვემოთ | მარცხენა | უფლება
html ლოგიკური ყალბი საშუალებას აძლევს html შინაარსს ინსტრუმენტების მინიშნებაში
ცოცხალი ლოგიკური ყალბი გამოიყენეთ ღონისძიების დელეგირება ინდივიდუალური ღონისძიებების დამმუშავებლების ნაცვლად
ოფსეტური ნომერი 0 ინსტრუმენტების მინიშნების პიქსელის ოფსეტი სამიზნე ელემენტიდან
სათაური სიმებიანი, ფუნქცია "ტიტული" ატრიბუტი ან მეთოდი სათაურის ტექსტის მოსაძიებლად
გამომწვევი სიმებიანი "ჰოვერ" როგორ ხდება ინსტრუმენტული მინიშნება - hover | ფოკუსირება | სახელმძღვანელო
შაბლონი სიმებიანი [ნაგულისხმევი მარკირება] html შაბლონი, რომელიც გამოიყენება twipsy-ის გასაფორმებლად.

შენიშვნა ინდივიდუალური twipsy ინსტანციის ვარიანტები ალტერნატიულად შეიძლება დაზუსტდეს მონაცემთა ატრიბუტების გამოყენებით.

  1. <a href = "#" data-placement = "ქვემოთ" rel = 'twipsy' title = 'ზოგიერთი სათაურის ტექსტი' > ტექსტი </a>

მეთოდები

$().twipsy(ოფციები)

ანიჭებს twipsy დამმუშავებელს ელემენტების კოლექციას.

.twipsy ("ჩვენება")

ავლენს ელემენტებს twipsy.

  1. $ ( '#element' ). twipsy ( "ჩვენება" )

.twipsy ('დამალვა')

მალავს ელემენტებს twipsy.

  1. $ ( '#element' ). twipsy ( "დამალვა" )

.twipsy (მართალია)

აბრუნებს ელემენტების twipsy კლასის მაგალითს.

  1. $ ( '#element' ). twipsy ( ჭეშმარიტი )

შენიშვნა ალტერნატიულად, ამის მოძიება შესაძლებელია $().data('twipsy').

დემო

მჭიდრო შარვალი შემდეგი დონის keffiyeh თქვენ ალბათ არ გსმენიათ მათ შესახებ. ფოტო ჯიხურის წვერი ნედლი ჯინსის ვეგანურ��� მესენჯერის ჩანთა stumptown. ფერმიდან მაგიდამდე სეიტანი, Mcsweeney's fixie მდგრადი quinoa 8-ბიტიანი ამერიკული ტანსაცმელი აქვს ტერი რიჩარდსონის ვინილის შამბრი. წვერის სტამპთაუნი, კარდიგანები ბან მი ლომო ჭექა-ქუხილი. ტოფუ ბიოდიზელი ვილიამსბურგის მარფა, ოთხი ლოკო მაკსვინის გამწმენდი ვეგანური შამბრი. მართლაც ირონიული ხელოსანი, რაც არ უნდა ქეითარი, სცენის სცენა ფერმა-მაგიდა ბანკსი ოსტინ ტვიტერის სახელური freegan cred ნედლეული denim ერთი წარმოშობის ყავა ვირუსული.

პოპოვერის მოდული უზრუნველყოფს მარტივ ინტერფეისს თქვენს აპლიკაციაში პოპოვერების დასამატებლად. ის აფართოებს bootstrap-twipsy.js მოდულს, ასე რომ, დარწმუნდით, რომ აითვისეთ ეს ფაილიც, როდესაც თქვენს პროექტში პოპოვერებს ჩართავთ!

შენიშვნა bootstrap-popover.js-მდე უნდა ჩართოთ bootstrap-twipsy.js ფაილი .

ჩამოტვირთვა

bootstrap-popover.js-ის გამოყენებით

  1. $ ( '#მაგალითი' ). პოპოვერი ( ოფციები )

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
აცოცხლებს ლოგიკური მართალია გამოიყენეთ css fade გადასვლა ინსტრუმენტზე
შეფერხება ნომერი 0 დაყოვნება ხელსაწყოს მინიშნების ჩვენებამდე (მმ)
შეფერხება ნომერი 0 დაყოვნება ხელსაწყოს მინიშნების დამალვამდე (ms)
სარეზერვო სიმებიანი '' ტექსტი გამოსაყენებლად, როცა ხელსაწყოს სათაური არ არის
განთავსება სიმებიანი "მართალი" როგორ განვათავსოთ ინსტრუმენტების მინიშნება - ზემოთ | ქვემოთ | მარცხენა | უფლება
html ლოგიკური ყალბი საშუალებას აძლევს html შინაარსს ინსტრუმენტების მინიშნებაში
ცოცხალი ლოგიკური ყალბი გამოიყენეთ ღონისძიების დელეგირება ინდივიდუალური ღონისძიებების დამმუშავებლების ნაცვლად
ოფსეტური ნომერი 0 ინსტრუმენტების მინიშნების პიქსელის ოფსეტი სამიზნე ელემენტიდან
სათაური სიმებიანი, ფუნქცია "ტიტული" ატრიბუტი ან მეთოდი სათაურის ტექსტის მოსაძიებლად
შინაარსი სიმებიანი, ფუნქცია "მონაცემთა შინაარსი" სტრიქონი ან მეთოდი შინაარსის ტექსტის მოსაძიებლად. თუ არცერთი არ არის მოწოდებული, კონტენტი მიიღება მონაცემთა შინაარსის ატრიბუტიდან.
გამომწვევი სიმებიანი "ჰოვერ" როგორ ხდება ინსტრუმენტული მინიშნება - hover | ფოკუსირება | სახელმძღვანელო
შაბლონი სიმებიანი [ნაგულისხმევი მარკირება] html შაბლონი, რომელიც გამოიყენება პოპოვერის გასაფორმებლად.

შენიშვნა ინდივიდუალური პოპოვერის ინსტანციის ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით.

  1. <a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > ტექსტი </a>

მეთოდები

$().popover(ოფციები)

ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.

.popover ("შოუ")

ავლენს ელემენტების პოპოვერს.

  1. $ ( '#element' ). პოპოვერი ( "შოუ" )

.popover ('დამალვა')

მალავს ელემენტების პოპოვერს.

  1. $ ( '#element' ). პოპოვერი ( "დამალვა" )

დემო

გადაიტანეთ პოპოვერისთვის

გაფრთხილების მოდული არის ძალიან მცირე კლასი გაფრთხილებებისთვის ახლო ფუნქციონირების დასამატებლად.

ჩამოტვირთვა

bootstrap-alerts.js-ის გამოყენებით

  1. $ ( ".alert-message" ). გაფრთხილება ()

მარკირება

უბრალოდ დაამატეთ data-alertატრიბუტი თქვენს გაფრთხილების შეტყობინებებს, რათა ავტომატურად მისცეთ მათ დახურვის ფუნქცია.

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
სელექტორი სიმებიანი ".დახურვა" რომელი ამომრჩეველი უნდა იყოს მიზანმიმართული გაფრთხილების დახურვისთვის.

მეთოდები

$().alert()

ახვევს ყველა გაფრთხილებას მჭიდრო ფუნქციონალობით. იმისათვის, რომ თქვენი გაფრთხილებები ანიმაციური იყოს დახურვისას, დარწმუნდით, რომ მათ უკვე აქვთ .fadeგამოყენებული .inკლასი და მათზე.

.alert ('დახურვა')

ხურავს გაფრთხილებას.

  1. $ ( ".alert-message" ). გაფრთხილება ( "დახურვა" )

დემო

×

წმიდა გუაკამოლე! საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით.

×

ოჰ სნეპი! თქვენ მიიღეთ შეცდომა! შეცვალეთ ეს და ეს და ისევ სცადეთ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.