JavaScript

Bootstrap හි සංරචක ජීවයට ගෙන එන්න - දැන් අභිරුචි jQuery ප්ලගීන 13ක් සමඟින්.

තනි හෝ සම්පාදනය කරන ලදී

ප්ලගීන තනි තනිව (සමහරට අවශ්‍ය පරායත්තතා ඇතත්) හෝ සියල්ල එකවර ඇතුළත් කළ හැක. bootstrap.js සහ bootstrap.min.js යන දෙකෙහිම සියලුම ප්ලගීන එක් ගොනුවක අඩංගු වේ.

දත්ත ගුණාංග

JavaScript එක පේළියක්වත් ලිවීමෙන් තොරව ඔබට සියලුම Bootstrap ප්ලගීන මාර්ක්අප් API හරහා භාවිතා කළ හැක. මෙය Bootstrap හි පළමු පන්තියේ API වන අතර ප්ලගිනයක් භාවිතා කිරීමේදී ඔබේ පළමු සැලකිල්ල විය යුතුය.

එනම්, සමහර අවස්ථාවලදී මෙම ක්‍රියාකාරිත්වය අක්‍රිය කිරීම යෝග්‍ය විය හැකිය. එම නිසා, අපි ``data-api`` සමඟ ඇති ශරීර නාමවල ඇති සියලුම සිදුවීම් බන්ධනය කිරීමෙන් දත්ත උපලක්ෂණ API අක්‍රිය කිරීමේ හැකියාව ද ලබා දෙන්නෙමු. මෙය පෙනෙන්නේ මෙසේය.

  1. $ ( 'ශරීරය' ). අක්රිය ( '.data-api' )

විකල්පයක් ලෙස, නිශ්චිත ප්ලගිනයක් ඉලක්ක කිරීමට, ප්ලගිනයේ නම නාම අවකාශයක් ලෙස දත්ත-api නාම අවකාශය සමඟ ඇතුළත් කරන්න:

  1. $ ( 'ශරීරය' ). අක්රිය ( '.alert.data-api' )

ක්‍රමලේඛන API

JavaScript API හරහා ඔබට සියලුම Bootstrap ප්ලගීන භාවිතා කිරීමට හැකි වනු ඇතැයි අපි විශ්වාස කරමු. සියලුම පොදු API තනි, දම්වැල් ක්‍රම වන අතර, ක්‍රියා කළ එකතුව ආපසු ලබා දෙන්න.

  1. $ ( ".btn.danger" ). බොත්තම ( "ටොගල්" ). addClass ( "මේදය" )

සියලුම ක්‍රම විකල්ප විකල්ප වස්තුවක්, විශේෂිත ක්‍රමයක් ඉලක්ක කරන තන්තුවක් හෝ කිසිවක් (පෙරනිමි හැසිරීම් සහිත ප්ලගිනයක් ආරම්භ කරන) පිළිගත යුතුය:

  1. $ ( "#myModal" ). මාදිලිය () // පෙරනිමියෙන් ආරම්භ කරන ලදී
  2. $ ( "#myModal" ). මාදිලිය ({ යතුරු පුවරුව : අසත්‍ය }) // යතුරු පුවරුවක් නොමැතිව ආරම්භ කරන ලදී
  3. $ ( "#myModal" ). modal ( 'show' ) // ආරම්භ කිරීම සහ දර්ශනය වහාම කැඳවයි

සෑම ප්ලගිනයක්ම එහි අමු ඉදිකිරීම්කරු 'ඉදිකිරීම්කරු' දේපලක් මත නිරාවරණය කරයි: $.fn.popover.Constructor. ඔබ විශේෂිත ප්ලගින අවස්ථාවක් ලබා ගැනීමට කැමති නම්, එය මූලද්‍රව්‍යයකින් කෙලින්ම ලබා ගන්න: $('[rel=popover]').data('popover').

ගැටුමක් නැත

සමහර විට වෙනත් UI රාමු සමඟ Bootstrap ප්ලගීන භාවිතා කිරීම අවශ්‍ය වේ. මෙම තත්වයන් තුළ, නාම අවකාශයේ ගැටීම් විටින් විට සිදු විය හැක. මෙය සිදුවුවහොත්, ඔබට .noConflictඅගය ප්‍රතිවර්තනය කිරීමට අවශ්‍ය ප්ලගිනය ඇමතීමට හැකිය.

  1. var bootstrapButton = $ . fn _ බොත්තම . noConflict () // $.fn.button කලින් පවරන ලද අගයට ආපසු දෙන්න
  2. $ _ fn _ bootstrapBtn = bootstrapButton // $().bootstrapBtn bootstrap ක්‍රියාකාරීත්වය ලබා දෙන්න

සිදුවීම්

Bootstrap බොහෝ ප්ලගිනයේ අද්විතීය ක්‍රියා සඳහා අභිරුචි සිදුවීම් සපයයි. සාමාන්‍යයෙන්, මේවා අසංඛ්‍යාත සහ අතීත කෘදන්ත ස්වරූපයකින් පැමිණේ - එහිදී showයම් සිදුවීමක් ආරම්භයේදී අසංඛ්‍යාත (උදා.) ක්‍රියාරම්භ කරන අතර, එහි අතීත කෘදන්ත ස්වරූපය (උදා. shown) ක්‍රියාවක් සම්පූර්ණ කිරීමේදී ප්‍රේරක වේ.

සියලුම අසංඛ්‍යාත සිදුවීම් පෙරනිමිය වැළැක්වීමේ ක්‍රියාකාරීත්වය සපයයි. ක්‍රියාවක් ආරම්භ වීමට පෙර එය ක්‍රියාත්මක කිරීම නැවැත්වීමේ හැකියාව මෙය සපයයි.

  1. $ ( '#myModal' ). මත ( 'show' , ශ්රිතය ( e ) {
  2. නම් (! දත්ත ) ආපසු e . PreventDefault () // මාදිලිය පෙන්වීමෙන් නවත්වයි
  3. })

මාරුවීම් ගැන

සරල සංක්‍රාන්ති ප්‍රයෝග සඳහා, අනෙක් JS ගොනු සමඟ එක් වරක් bootstrap-transition.js ඇතුළත් කරන්න. ඔබ සම්පාදනය කරන ලද (හෝ minified) bootstrap.js භාවිතා කරන්නේ නම් , මෙය ඇතුළත් කිරීමට අවශ්‍ය නැත—එය දැනටමත් තිබේ.

නඩු භාවිතා කරන්න

සංක්‍රාන්ති ප්ලගිනය සඳහා උදාහරණ කිහිපයක්:

  • මාදිලිවල ලිස්සා යාම හෝ මැකී යාම
  • මැකී යන ටැබ්
  • අනතුරු ඇඟවීම් මැකී යාම
  • ස්ලයිඩින් කැරොසල් වීදුරු

උදාහරණ

මාදිලි විධිමත්, නමුත් නම්‍යශීලී, අවම අවශ්‍ය ක්‍රියාකාරීත්වය සහ ස්මාර්ට් පෙරනිමියන් සමඟ සංවාද විමසයි.

ස්ථිතික උදාහරණය

පාදකයේ ශීර්ෂකය, ශරීරය සහ ක්‍රියා මාලාවක් සහිත විදැහුම්කරණ මාදිලියකි.

  1. <div class = "modal hide Fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> මාදිලියේ ශීර්ෂකය </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> එක සිහින් සිරුරක්... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > වසන්න </a>
  11. <a href = "#" class = "btn btn-primary" > වෙනස්කම් සුරකින්න </a>
  12. </div>
  13. </div>

සජීවී නිරූපණය

පහත බොත්තම ක්ලික් කිරීමෙන් JavaScript හරහා මාදිලියක් ටොගල් කරන්න. එය පහළට ලිස්සා ගොස් පිටුවේ ඉහළ සිට මැකී යනු ඇත.

  1. <!-- මාදිලිය අවුලුවාලීමට බොත්තම -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo මාදිලිය දියත් කරන්න </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide Fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> එක සිහින් සිරුරක්... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data- dismiss = "modal" aria-hidden = "true" > වසන්න </button>
  15. <button class = "btn btn-primary" > වෙනස්කම් සුරකින්න </button>
  16. </div>
  17. </div>

භාවිතය

දත්ත ගුණාංග හරහා

ජාවාස්ක්‍රිප්ට් ලිවීමෙන් තොරව මොඩලයක් සක්‍රිය කරන්න. data-toggle="modal"බොත්තමක් වැනි පාලක මූලද්‍රව්‍යයක් data-target="#foo"හෝ href="#foo"ටොගල් කිරීමට නිශ්චිත මාදිලියක් සමඟින් සකසන්න .

  1. <button type = "button" data- toggle = "modal" data-target = "#myModal" > දියත් මාදිලිය </button>

JavaScript හරහා

myModalජාවාස්ක්‍රිප්ට් එක පේළියක් සහිත හැඳුනුම්පතක් සහිත මාදිලියක් අමතන්න :

  1. $ ( '#myModal' ). මාදිලිය ( විකල්ප )

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-backdrop="".

නම වර්ගය පෙරනිමිය විස්තර
පසුබිම බූලියන් සැබෑ මාදිලි පසුබිම් මූලද්‍රව්‍යයක් ඇතුළත් වේ. විකල්පයක් ලෙස, staticක්ලික් කිරීමේදී මාදිලිය වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න.
යතුරු පුවරුව බූලියන් සැබෑ ගැලවීමේ යතුර එබූ විට මාදිලිය වසා දමයි
පෙන්වන්න බූලියන් සැබෑ ආරම්භ කළ විට මාදිලිය පෙන්වයි.
දුරස්ථ මාර්ගය බොරු

දුරස්ථ url එකක් සපයා ඇත්නම්, අන්තර්ගතය jQuery ක්‍රමය හරහා පූරණය loadකර ට එන්නත් කරනු ලැබේ .modal-body. ඔබ දත්ත api භාවිතා කරන්නේ නම්, ඔබට විකල්ප hrefලෙස දුරස්ථ මූලාශ්‍රය සඳහන් කිරීමට ටැගය භාවිතා කළ හැක. මේ සඳහා උදාහරණයක් පහත දැක්වේ.

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

ක්රම

.modal(විකල්ප)

ඔබේ අන්තර්ගතය මාදිලියක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

  1. $ ( '#myModal' ). මාදිලිය ({
  2. යතුරු පුවරුව : අසත්ය
  3. })

.modal('ටොගල්')

මාදිලියක් අතින් ටොගල් කරයි.

  1. $ ( '#myModal' ). මාදිලිය ( 'ටොගල්' )

.modal('show')

මාදිලියක් අතින් විවෘත කරයි.

  1. $ ( '#myModal' ). මාදිලිය ( 'පෙන්වන්න' )

.modal('සඟවන්න')

මාදිලියක් අතින් සඟවයි.

  1. $ ( '#myModal' ). මාදිලිය ( 'සඟවන්න' )

සිදුවීම්

Bootstrap's modal class මගින් මාදිලියේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම විස්තර
පෙන්වන්න showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත මාදිලිය පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
සඟවන්න hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවී ඇත මාදිලිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
  1. $ ( '#myModal' ). මත ( 'සැඟවුණු' , ශ්රිතය () {
  2. //මොකක් හරි කරන්න...
  3. })

navbar හි උදාහරණය

ScrollSpy ප්ලගිනය අනුචලන ස්ථානය මත පදනම්ව nav ඉලක්ක ස්වයංක්‍රීයව යාවත්කාලීන කිරීම සඳහා වේ. නව තීරුවට පහළින් ප්‍රදේශය අනුචලනය කර සක්‍රිය පන්ති වෙනස නරඹන්න. පතන උප අයිතම ද උද්දීපනය කෙරේ.

@මේදය

ඇඩ් ලෙගිං කීටාර්, බ්‍රන්ච් අයිඩී ආර්ට් පාටි ඩොල���් ලේබර්. Pitchfork yr enim lo-fi ඔවුන් විකුණා අවසන් වීමට පෙර. Tumblr ගොවිපලෙන් මේසයට බයිසිකල් අයිතිය කුමක් වුවත්. Anim keffiyeh carles Cardigan. Velit seitan mcsweeney ගේ ඡායාරූප කුටිය 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති සහ කාඩිගන් භාර අරමුදල culpa biodiesel wes Anderson සෞන්දර්යය. නිහිල් පච්ච කොටා ගත් චෝදනාව, විශ්වාසවන්ත උත්ප්‍රාසය ජෛව ඩීසල් කෙෆියේ කලාකරු උල්ලම්කෝ ප්‍රතිවිපාකය.

@mdo

Veniam marfa උඩු රැවුල ස්කේට්බෝඩ්, adipisicing fugiat velit pitchfork රැවුල. Freegan beard aliqua Cupidatat mcsweeney's vero. කුපිඩටට් ෆෝ ලොකෝ නිසා, ඊඒ හෙල්වෙටිකා නුල්ලා කාර්ල්ස්. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. ලෝ-ෆයි වෙස් ඇන්ඩර්සන් +1 සාර්ටෝරියල්. කාල්ස් සෞන්දර්යාත්මක නොවන ව්‍යායාම quis gentrify. Brooklyn adipisicing craft beer vice keytar deserant.

එක

Occaecat commodo aliqua delectus. ෆැප් ක්‍රාෆ්ට් බියර් ඩෙසරන්ට් ස්කේට්බෝඩ් ඊඒ. ලොමෝ බයිසිකල් හිමිකම් ඇඩිපිසිං බෑන් මයි, වේලිට් ඊ සන්ට් මීලඟ මට්ටමේ ලොකාවෝර් තනි සම්භවයක් ඇති කෝපි මැග්නා වේනියම් හි ඇත. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY අවම පණිවිඩකරු බෑගය. Cred ex in, තිරසාර delectus consectetur fanny pack iphone.

දෙක

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa ඕනෑම delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche Irony, thundercats ඔබ ඒවා ගැන අසා නැතුව ඇති hoodie gluten-free lo-fi fap aliquip. ඔවුන් විකුණා අවසන් වීමට පෙර කම්කරු ප්‍රභූ ස්ථානය, ටෙරී රිචඩ්සන් ප්‍රොඩන්ට් බ්‍රන්ච් නෙස්කියුන්ට් ක්විස් කොස්බි ස්ෙවටර් පැරියතුර් කෙෆියේ සහ හෙල්වෙටිකා ආර්ටිසන්. කාඩිගන් ක්‍රාෆ්ට් බියර් සීටන් රෙඩිමේඩ් වෙලිට්. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


භාවිතය

දත්ත ගුණාංග හරහා

ඔබගේ topbar navigation වෙත පහසුවෙන් scrollspy හැසිරීම එක් data-spy="scroll"කිරීමට, ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යය වෙත එක් කරන්න (බොහෝ විට මෙය ශරීරය විය හැක) සහ data-target=".navbar"කුමන nav භාවිතා කළ යුතුද යන්න තේරීමට. ඔබට සංරචකයක් සමඟ scrollspy භාවිතා කිරීමට අවශ්‍ය වනු ඇත .nav.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

JavaScript හරහා

JavaScript හරහා scrollspy අමතන්න:

  1. $ ( '#navbar' ). scrollspy ()
දැනුම්දීම! Navbar සබැඳිවලට විසඳිය හැකි id ඉලක්ක තිබිය යුතුය. උදාහරණයක් ලෙස, <a href="#home">home</a>dom හි ඇති දෙයකට අනුරූප විය යුතුය <div id="home"></div>.

ක්රම

.scrollspy('refresh')

DOM වෙතින් මූලද්‍රව්‍ය එකතු කිරීම හෝ ඉවත් කිරීම සමඟ සම්බන්ධව scrollspy භාවිතා කරන විට, ඔබට එවැනි නැවුම් කිරීමේ ක්‍රමය ඇමතීමට අවශ්‍ය වනු ඇත:

  1. $ ( '[data-spy="scroll"]' ). එක් එක් ( කාර්යය () {
  2. var $spy = $ ( මෙය ). scrollspy ( 'refresh' )
  3. });

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset="".

නම වර්ගය පෙරනිමිය විස්තර
ඕෆ්සෙට් අංකය 10 අනුචලනයේ පිහිටීම ගණනය කිරීමේදී ඉහළින් ඕෆ්සෙට් කිරීමට පික්සල.

සිදුවීම්

සිදුවීම විස්තර
සක්රිය කරන්න scrollspy විසින් නව අයිතමයක් සක්‍රිය වන සෑම අවස්ථාවකම මෙම සිදුවීම සිදු වේ.

උදාහරණ ටැබ්

පතන මෙනු හරහා පවා දේශීය අන්තර්ගතයේ කවුළු හරහා සංක්‍රමණය වීමට ඉක්මන්, ගතික ටැබ් ක්‍රියාකාරිත්වය එක් කරන්න.

අමු ඩෙනිම් ඔස්ටින් ජීන් කොට කලිසම ගැන ඔබ අසා නැතුව ඇති. Nesciunt tofu stumptown aliqua, retro synth master cleanse. උඩු රැවුල ක්ලිච් tempor, Williamsburg carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure ටෙරී රිචඩ්සන් හිටපු දැල්ලන්. Aliquip placeat salvia cillum iphone. Seitan aliquip quis කාඩිගන් ඇමරිකානු ඇඟලුම්, මස් වෙළෙන්දා 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.


භාවිතය

ජාවාස්ක්‍රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න (එක් එක් ටැබ් එක තනි තනිව සක්‍රිය කළ යුතුය):

  1. $ ( '#myTab a' ). ක්ලික් කරන්න ( කාර්යය ( ) {
  2. . PreventDefault ();
  3. $ ( මෙය ). ටැබ් ( 'show' );
  4. })

ඔබට ක්‍රම කිහිපයකින් තනි ටැබ් සක්‍රිය කළ හැක:

  1. $ ( '#myTab a[href="#profile"]' ). ටැබ් ( 'show' ); // නමින් ටැබ් එක තෝරන්න
  2. $ ( '#myTab a:first' ). ටැබ් ( 'show' ); // පළමු ටැබය තෝරන්න
  3. $ ( '#myTab a:last' ). ටැබ් ( 'show' ); // අවසාන ටැබය තෝරන්න
  4. $ ( '#myTab li:eq(2) a' ). ටැබ් ( 'show' ); // තෙවන ටැබය තෝරන්න (0-සුචිගත කර ඇත)

සලකුණු කිරීම

data-toggle="tab"ඔබට සරලව සඳහන් කිරීමෙන් හෝ data-toggle="pill"මූලද්‍රව්‍යයක් මත ජාවාස්ක්‍රිප්ට් ලිවීමෙන් තොරව ටැබ් එකක් හෝ පෙති සංචාලනයක් සක්‍රිය කළ හැක . navටැබයට සහ nav-tabsපන්ති එකතු කිරීම ulBootstrap ටැබ් මෝස්තරය යොදනු ඇත.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > මුල් පිටුව </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > පැතිකඩ </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messages </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>
  6. </ul>

ක්රම

$().tab

ටැබ් මූලද්‍රව්‍යයක් සහ අන්තර්ගත බහාලුමක් සක්‍රිය කරයි. පටිත්තෙහි DOM හි බහාලුම් නෝඩයක් data-targetහෝ ඉලක්ක කර තිබිය යුතුය .href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "සක්‍රිය" ><a href = "#home" > නිවස </a></li>
  3. <li><a href = "#profile" > පැතිකඩ </a></li>
  4. <li><a href = "#messages" > Messages </a></li>
  5. <li><a href = "#settings" > Settings </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "සැකසීම්" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( කාර්යය () {
  17. $ ( '#myTab a:last' ). ටැබ් ( 'show' );
  18. })
  19. </script>

සිදුවීම්

සිදුවීම විස්තර
පෙන්වන්න මෙම සිදුවීම ටැබ් දර්ශනය මත වෙඩි තැබේ, නමුත් නව ටැබය පෙන්වීමට පෙර. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න event.targetසහ ඉලක්ක කරන්න.event.relatedTarget
පෙන්වා ඇත මෙම සිදුවීම ටැබ් එකක් පෙන්වීමෙන් පසු ටැබ් දර්ශනය මත වෙඩි තබයි. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න event.targetසහ ඉලක්ක කරන්න.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). මත ( 'පෙන්වයි' , ශ්‍රිතය ( ) {
  2. . ඉලක්කය // සක්රිය ටැබ්
  3. . අදාළ ඉලක්කය // පෙර ටැබය
  4. })

උදාහරණ

Jason Frame විසින් ලියන ලද විශිෂ්ට jQuery.tipsy ප්ලගිනය මගින් ආභාෂය ලබා ඇත; මෙවලම් ඉඟි යනු යාවත්කාලීන කළ අනුවාදයකි, එය රූප මත රඳා නොපවතින, සජීවිකරණ සඳහා CSS3 භාවිතා කරන්න, සහ දේශීය මාතෘකා ආචයනය සඳහා දත්ත-ගුණාංග.

කාර්ය සාධන හේතූන් මත, මෙවලම් ඉඟිය සහ popover දත්ත-apis තෝරාගෙන ඇත, එනම් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .

මෙවලම් ඉඟි බැලීමට පහත සබැඳි මත සැරිසරන්න:

තද කලිසම් ඊළඟ මට්ටමේ keffiyeh ඔබ ඒවා ගැන අසා නැතුව ඇති. ඡායාරූප කුටිය රැවුල අමු ඩෙනිම් ලෙටර්ප්‍රෙස් වීගන් මැසෙන්ජර් බෑග් ස්ටම්ප්ටවුන්. Farm-to-Table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel වල ටෙරී රිචඩ්සන් වයිනයිල් චම්බ්‍රේ ඇත. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel Williamsburg marfa, four loko mcsweeney's cleanse Vegan chambray. ඇත්ත වශයෙන්ම උත්ප්‍රාසාත්මක ශිල්පියෙක් ඕනෑම කීටාර් , සීන්ස්ටර් ෆාම්-ටු-ටේබල් බෑන්ක්සි ඔස්ටින් ට්විටර් හැන්ඩ්ල් ෆ්‍රීගන් ක්‍රෙඩ් අමු ඩෙනිම් තනි සම්භවයක් ඇති කෝපි වෛරස්.

දිශාවන් හතරක්

ආදාන කණ්ඩායම් වල මෙවලම් ඉඟි

Bootstrap ආදාන කණ්ඩායම් සමඟ මෙවලම් ඉඟි සහ popovers භාවිතා කරන විට, ඔබට containerඅනවශ්‍ය අතුරු ආබාධ වළක්වා ගැනීමට (පහත ලේඛනගත කර ඇති) විකල්පය සැකසීමට සිදුවේ.


භාවිතය

JavaScript හරහා මෙවලම් ඉඟිය ක්‍රියාරම්භ කරන්න:

  1. $ ( '#උදාහරණ' ). මෙවලම් ඉඟිය ( විකල්ප )

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම වර්ගය පෙරනිමිය විස්තර
සජීවීකරණය බූලියන් සැබෑ මෙවලම් ඉඟියට css ෆේඩ් සංක්‍රාන්තියක් යොදන්න
html බූලියන් බොරු මෙවලම් ඉඟියට html ඇතුළු කරන්න. textඅසත්‍ය නම්, ඩොම් එකට අන්තර්ගතය ඇතුළු කිරීමට jquery හි ක්‍රමය භාවිතා කරනු ඇත. ඔබ XSS ප්‍රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න.
ස්ථානගත කිරීම තන්තුව | කාර්යය 'ඉහළ' මෙවලම් ඉඟිය ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි
තේරීම්කරු නූල් බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ.
ශීර්ෂය තන්තුව | කාර්යය '' 'මාතෘකාව' ටැගය නොමැති නම් පෙරනිමි මාතෘකා අගය
අවුලුවාලීම නූල් 'හවර් ෆෝකස්' මෙවලම් ඉඟිය අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබ කේස් පාස් ප්‍රේරක බහු, ඉඩ වෙන් කරන ලද, ප්‍රේරක වර්ග සටහන් කරන්න.
ප්රමාදය අංකය | වස්තුව 0

මෙවලම් ඉඟිය (ms) පෙන්වීම සහ සැඟවීම ප්‍රමාද කිරීම - අතින් ප්‍රේරක වර්ගයට අදාළ නොවේ

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { show: 500, hide: 100 }

බහාලුම් තන්තුව | බොරු බොරු

විශේෂිත මූලද්‍රව්‍යයකට මෙවලම් ඉඟිය එක් කරයිcontainer: 'body'

දැනුම්දීම! තනි මෙවලම් සඳහා විකල්ප විකල්ප වශයෙන් දත්ත උපලක්ෂණ භාවිතයෙන් නියම කළ හැක.

සලකුණු කිරීම

  1. <a href = "#" data-toggle = "tooltip" title = "පළමු මෙවලම් ඉඟිය" > මා මත සැරිසරන්න </a>

ක්රම

$().උපකරණ ඉඟි(විකල්ප)

මූලද්‍රව්‍ය එකතුවකට මෙවලම් ඉඟි හසුරුවන්නක් අමුණන්න.

.toltip('show')

මූලද්‍රව්‍යයක මෙවලම් ඉඟියක් හෙළි කරයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'පෙන්වන්න' )

.toltip('සඟවන්න')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'සඟවන්න' )

.tooltip('ටොගල්')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය ටොගල් කරයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'ටොගල්' )

.toltip('විනාශ කරන්න')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවා විනාශ කරයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'විනාශ කරන්න' )

උදාහරණ

නිවාස ද්විතීයික තොරතුරු සඳහා ඕනෑම මූලද්‍රව්‍යයකට iPad මත ඇති ඒවා වැනි කුඩා අන්තර්ගතයන් එක් කරන්න. popover අවුලුවාලීමට බොත්තම මත සැරිසරන්න. මෙවලම් ඉඟි ඇතුළත් කිරීම අවශ්‍ය වේ .

ස්ථිතික popover

විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.

පොපෝවර් ටොප්

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover අයිතිය

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

පොපෝවර් පතුල

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

පොපෝවර් වමේ

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

dataජාවාස්ක්‍රිප්ට් සහ උපලක්ෂණයක් තුළ ඇති අන්තර්ගතයෙන් popovers ලෙස සලකුණු කිරීමක් නොපෙන්වයි .

සජීවී නිරූපණය

දිශාවන් හතරක්


භාවිතය

JavaScript හරහා popovers සබල කරන්න:

  1. $ ( '#උදාහරණ' ). popover ( විකල්ප )

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම වර්ගය පෙරනිමිය විස්තර
සජීවීකරණය බූලියන් සැබෑ මෙවලම් ඉඟියට css ෆේඩ් සංක්‍රාන්තියක් යොදන්න
html බූලියන් බොරු popover වෙත html ඇතුළු කරන්න. textඅසත්‍ය නම්, ඩොම් එකට අන්තර්ගතය ඇතුළු කිරීමට jquery හි ක්‍රමය භාවිතා කරනු ඇත. ඔබ XSS ප්‍රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න.
ස්ථානගත කිරීම තන්තුව | කාර්යය 'හරි' popover ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි
තේරීම්කරු නූල් බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ
අවුලුවාලීම නූල් 'ක්ලික් කරන්න' popover අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත
ශීර්ෂය තන්තුව | කාර්යය '' 'මාතෘකාව' ගුණාංගය නොමැති නම් පෙරනිමි මාතෘකා අගය
අන්තර්ගතය තන්තුව | කාර්යය '' 'data-content' ගුණාංගය නොමැති නම් පෙරනිමි අන්තර්ගත අගය
ප්රමාදය අංකය | වස්තුව 0

popover (ms) පෙන්වීම සහ සැඟවීම ප්‍රමාද කිරීම - අතින් ප්‍රේරක වර්ගයට අදාළ නොවේ

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { show: 500, hide: 100 }

බහාලුම් තන්තුව | බොරු බොරු

විශේෂිත මූලද්‍රව්‍යයකට popover එකතු කරයිcontainer: 'body'

දැනුම්දීම! තනි පුද්ගල popovers සඳහා විකල්ප විකල්ප වශයෙන් දත්ත ගුණාංග භාවිතයෙන් නියම කළ හැක.

සලකුණු කිරීම

කාර්ය සාධන හේතූන් මත, Tooltip සහ Popover දත්ත-apis තෝරා ඇත. ඔබ ඒවා භාවිතා කිරීමට කැමති නම් තේරීම් විකල්පයක් සඳහන් කරන්න.

ක්රම

$().popover(විකල්ප)

මූලද්‍රව්‍ය එකතුවක් සඳහා popover ආරම්භ කරයි.

.popover('show')

මූලද්‍රව්‍ය popover අනාවරණය කරයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). popover ( 'show' )

.popover('සඟවන්න')

මූලද්‍රව්‍ය popover සඟවයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). popover ( 'සඟවන්න' )

.popover('ටොගල්')

මූලද්‍රව්‍ය popover ටොගල් කරයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). popover ( 'ටොගල්' )

.popover('විනාශ කරන්න')

මූලද්‍රව්‍යයක පොපෝවර් සඟවා විනාශ කරයි.

  1. $ ( '#මූලද්‍රව්‍ය' ). popover ( 'විනාශ' )

උදාහරණ ඇඟවීම්

මෙම ප්ලගිනය සමඟින් සියලුම අනතුරු ඇඟවීමේ පණිවිඩ සඳහා ඉවත් කිරීමේ ක්‍රියාකාරිත්වය එක් කරන්න.

ශුද්ධ guacamole! ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත.

අපොයි! ඔබට දෝෂයක් ඇත!

මේකයි ඒකයි වෙනස් කරලා නැවත උත්සහ කරන්න. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

මෙම පියවර ගන්න නැත්නම් මේක කරන්න


භාවිතය

ජාවාස්ක්‍රිප්ට් හරහා අනතුරු ඇඟවීමක් ඉවත දැමීම සබල කරන්න:

  1. $ ( ".ඇලට්" ). අනතුරු ඇඟවීම ()

සලකුණු කිරීම

data-dismiss="alert"අනතුරු ඇඟවීමේ සමීප ක්‍රියාකාරීත්වයක් ස්වයංක්‍රීයව ලබා දීමට ඔබගේ වසන්න බොත්තමට එක් කරන්න.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

ක්රම

$().ඇලඟුම්()

සමීප ක්‍රියාකාරීත්වයකින් සියලුම ඇඟවීම් ආවරණය කරයි. වසා දැමූ විට ඔබේ ඇඟවීම් සජීවීකරණය කර ගැනීමට, ඒවා දැනටමත් ඒවාට අදාළ කර ඇති බව සහතික කර .fadeගන්න .in.

.alert ('close')

අනතුරු ඇඟවීමක් වසා දමයි.

  1. $ ( ".ඇලට්" ). අනතුරු ඇඟවීම ( 'වසන්න' )

සිදුවීම්

Bootstrap හි අනතුරු ඇඟවීමේ පන්තිය අනතුරු ඇඟවීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම විස්තර
සමීපයි closeනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
වසා ඇත අනතුරු ඇඟවීම වසා ඇති විට මෙම සිදුවීම වෙඩි තබා ඇත (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
  1. $ ( '#මගේ අනතුරු ඇඟවීම' ). බැඳ ( 'වසා ඇත' , ශ්රිතය () {
  2. //මොකක් හරි කරන්න...
  3. })

උදාහරණ භාවිතය

බොත්තම් සමඟ තවත් කරන්න. පාලන බොත්තම සඳහන් කරයි හෝ මෙවලම් තීරු වැනි තවත් සංරචක සඳහා බොත්තම් කණ්ඩායම් සාදන්න.

රාජ්යමය

data-loading-text="Loading..."බොත්තමක් මත පැටවීමේ තත්වයක් භාවිතා කිරීමට එක් කරන්න .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "පූරණය වෙමින්..." > පූරණ තත්ත්වය </button>

තනි ටොගල්

data-toggle="button"තනි බොත්තමක් මත ටොගල කිරීම සක්‍රිය කිරීමට එක් කරන්න .

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>

පිරික්සුම් කොටුව

data-toggle="buttons-checkbox"btn-group මත ටොගල් කිරීමේ තේරීම් කොටු විලාසය සඳහා එක් කරන්න .

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > වම් </button>
  3. <button type = "button" class = "btn btn-primary" > මැද </button>
  4. <button type = "button" class = "btn btn-primary" > දකුණ </button>
  5. </div>

ගුවන් විදුලි

data-toggle="buttons-radio"btn-group මත රේඩියෝ විලාස ටොගල් කිරීම සඳහා එක් කරන්න .

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > වම් </button>
  3. <button type = "button" class = "btn btn-primary" > මැද </button>
  4. <button type = "button" class = "btn btn-primary" > දකුණ </button>
  5. </div>

භාවිතය

JavaScript හරහා බොත්තම් සබල කරන්න:

  1. $ ( '.nav-tabs' ). බොත්තම ()

සලකුණු කිරීම

දත්ත ගුණාංග බොත්තම් ප්ලගිනයට අත්‍යවශ්‍ය වේ. විවිධ සලකුණු වර්ග සඳහා පහත උදාහරණ කේතය පරීක්ෂා කරන්න.

විකල්ප

කිසිවක් නැත

ක්රම

$().බොත්තම('ටොගල්')

තල්ලු තත්ත්වය ටොගල් කරයි. බොත්තමට එය සක්රිය කර ඇති පෙනුමක් ලබා දෙයි.

දැනුම්දීම! data-toggleඔබට ගුණාංගය භාවිතයෙන් බොත්තමක් ස්වයංක්‍රීයව ටොගල් කිරීම සක්‍රීය කළ හැක .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().බොත්තම('පූරණය')

බොත්තම් තත්ත්වය පූරණය කිරීමට සකසයි - බොත්තම අක්‍රීය කරයි සහ පෙළ පූරණය කිරීමට පෙළ මාරු කරයි. දත්ත ගුණාංගය භාවිතයෙන් බොත්තම් මූලද්‍රව්‍ය මත පෙළ පූරණය කිරීම අර්ථ දැක්විය යුතුය data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "දේවල් පැටවීම..." > ... </button>
දැනුම්දීම! ෆයර්ෆොක්ස් පිටු පැටවීම් හරහා අක්‍රිය තත්වය දිගටම පවතියි . මේ සඳහා විසඳුමක් භාවිතා කිරීමයි autocomplete="off".

$().බොත්තම('නැවත පිහිටුවන්න')

බොත්තම් තත්ත්වය යළි සකසයි - පෙළ මුල් පෙළට මාරු කරයි.

$().බොත්තම(string)

බොත්තම් තත්ත්‍වය යළි සකසයි - ඕනෑම දත්ත නිර්වචනය කළ පෙළ තත්ත්වයකට පෙළ මාරු කරයි.

  1. <button type = "button" class = "btn" data-complete-text = "නිමි!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). බොත්තම ( 'සම්පූර්ණ' )
  4. </script>

ගැන

ඇකෝනියන් සහ සංචාලනය වැනි කඩා වැටෙන සංරචක සඳහා මූලික මෝස්තර සහ නම්‍යශීලී සහාය ලබා ගන්න.

* සංක්‍රාන්ති ප්ලගිනය ඇතුළත් කිරීම අවශ්‍ය වේ.

උදාහරණ ඇකෝනියන්

බිඳවැටීමේ ප්ලගිනය භාවිතා කරමින්, අපි සරල ඇකෝනියන් විලාසිතාවේ විජට් එකක් ගොඩනඟමු:

Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "කඩා වැටීම" data-parent = "#accordion2" href = "#collapseOne" >
  5. හැකිළිය හැකි කණ්ඩායම් අයිතම #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body compound in" >
  9. <div class = "accordion-inner" >
  10. අනිම් පරියේතුර් ක්ලිචේ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "Colapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. හැකිළිය හැකි කණ්ඩායම් අයිතම #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body කඩා වැටීම" >
  21. <div class = "accordion-inner" >
  22. අනිම් පරියේතුර් ක්ලිචේ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

ඔබට Accordion සලකුණු කිරීමකින් තොරව ප්ලගිනය භාවිතා කළ හැකිය. වෙනත් මූලද්‍රව්‍යයක ප්‍රසාරණය සහ කඩා වැටීම ටොගල් බොත්තමක් සාදන්න.

  1. <button type = "button" class = "btn btn- danger" data -toggle = "Colapse " data-target = "#demo" >
  2. සරල කඩා වැටිය හැකි
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > ... </div>

භාවිතය

දත්ත ගුණාංග හරහා

බිඳ වැටිය හැකි මූලද්‍රව්‍යයක පාලනය ස්වයංක්‍රීයව පැවරීමට මූලද්‍රව්‍යයට එකතු කරන්න data-toggle="collapse". ගුණාංගය බිඳවැටීම යෙදීමට css තේරීමක් පිළිගනී data-target. කඩා වැටිය හැකි මූලද්‍රව්‍යයට data-targetපන්තිය එක් කිරීමට වග බලා ගන්න . collapseඔබ එය පෙරනිමියෙන් විවෘත කිරීමට කැමති නම්, අමතර පන්තිය එක් කරන්න in.

කඩාහැලෙන පාලනයකට Accordion වැනි කණ්ඩායම් කළමනාකරණය එක් කිරීමට, දත්ත ගුණාංගය එක් කරන්න data-parent="#selector". මෙය ක්‍රියාත්මක වන ආකාරය බැලීමට ආදර්ශනය වෙත යොමු වන්න.

JavaScript හරහා

මෙය සමඟ අතින් සබල කරන්න:

  1. $ ( ". කඩා වැටීම" ). කඩා වැටීම ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-parent="".

නම වර්ගය පෙරනිමිය විස්තර
දෙමාපියන් තේරීම්කරු බොරු තේරීම්කාරකය නම්, මෙම කඩාවැටිය හැකි අයිතමය පෙන්වන විට සඳහන් කළ මාපිය යටතේ ඇති සියලුම බිඳවැටිය හැකි මූලද්‍රව්‍ය වසා දමනු ඇත. (සාම්ප්‍රදායික ඇකෝනියන් හැසිරීම් වලට සමාන)
ටොගල් කරන්න බූලියන් සැබෑ ආමන්ත්‍රණයේදී කඩාහැලෙන මූලද්‍රව්‍යය ටොගල් කරයි

ක්රම

.collapse(විකල්ප)

ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්‍රව්‍යයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

  1. $ ( '#myCollapsible' ). කඩා වැටීම ({
  2. toggle : බොරු
  3. })

.collapse('ටොගල්')

හකුළ හැකි මූලද්‍රව්‍යයක් පෙන්වීමට හෝ සැඟවීමට ටොගල් කරයි.

.collapse('show')

කඩා වැටෙන මූලද්‍රව්‍යයක් පෙන්වයි.

.Colapse('සඟවන්න')

කඩා වැටෙන මූලද්‍රව්‍ය සඟවයි.

සිදුවීම්

Bootstrap හි කඩා වැටීමේ පන්තිය බිඳ වැටීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම විස්තර
පෙන්වන්න showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත බිඳවැටීමේ මූලද්‍රව්‍යයක් පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
සඟවන්න hideක්රමවේදය කැඳවා ඇති විට මෙම සිද්ධිය වහාම වෙඩි තබා ඇත.
සැඟවී ඇත බිඳවැටීමේ මූලද්‍රව්‍යයක් පරිශීලකයාගෙන් සඟවා ඇති විට මෙම සිදුවීම පුපුරවා හරිනු ලැබේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
  1. $ ( '#myCollapsible' ). මත ( 'සැඟවුණු' , ශ්රිතය () {
  2. //මොකක් හරි කරන්න...
  3. })

උදාහරණයක්

ඕනෑම ආකාරයක පෙළ ආදානයක් සමඟ ඉක්මනින් අලංකාර යතුරු ලියනය කිරීම සඳහා මූලික, පහසුවෙන් දිගු කළ ප්ලගිනයක්.

  1. <input type = "text" data-provide = "typeahead" >

autocomplete="off"Bootstrap typeahead dropdown මත පෙරනිමි බ්‍රවුසර මෙනු දර්ශනය වීම වැළැක්වීමට ඔබට සැකසීමට අවශ්‍ය වනු ඇත .


භාවිතය

දත්ත ගුණාංග හරහා

ඉහත උදාහරණයේ පෙන්වා ඇති පරිදි typeahead ක්‍රියාකාරීත්වය සහිත මූලද්‍රව්‍යයක් ලියාපදිංචි කිරීමට දත්ත ගුණාංග එක් කරන්න.

JavaScript හරහා

යතුරු ලියනය හස්තීයව අමතන්න:

  1. $ ( '.typeahead' ). යතුරු ලියනය ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-source="".

නම වර්ගය පෙරනිමිය විස්තර
මූලාශ්රය අරාව, ශ්‍රිතය [ ] එරෙහිව විමසීමට දත්ත මූලාශ්‍රය. තන්තු මාලාවක් හෝ ශ්‍රිතයක් විය හැක. queryශ්‍රිතය ආදාන ක්ෂේත්‍රයේ අගය සහ ආපසු කැඳවීම යන තර්ක දෙකක් සම්මත කරයි process. processඇමතුම් තනි තර්කය හරහා දත්ත මූලාශ්‍රය සෘජුව හෝ අසමමුහුර්තව ආපසු ලබා දීමෙන් ශ්‍රිතය සමමුහුර්තව භාවිතා කළ හැක .
අයිතම අංකය 8 පතන තුළ සංදර්ශන කිරීමට ඇති උපරිම අයිතම ගණන.
අවම දිග අංකය 1 ස්වයං සම්පූර්ණ යෝජනා ක්‍රියාරම්භ කිරීමට පෙර අවශ්‍ය අවම අක්ෂර දිග
ගැලපෙන කාර්යය සිද්ධි සංවේදී නොවන විමසුමක් අයිතමයකට ගැලපේද යන්න තීරණය කිරීමට භාවිතා කරන ක්‍රමය. itemවිමසුම පරීක්ෂා කිරීමට එරෙහිව තනි තර්කයක් පිළිගනී. සමඟ වත්මන් විමසුමට පිවිසෙන්න this.query. trueවිමසුම ගැළපෙන්නේ නම් boolean එකක් ආපසු දෙන්න .
වර්ග කරන්නා කාර්යය නිශ්චිත ගැලපීම,
සිද්ධි සංවේදී, සිද්ධි සංවේදී
නොවන
ස්වයං සම්පූර්ණ ප්‍රතිඵල වර්ග කිරීමට භාවිතා කරන ක්‍රමය. තනි තර්කයක් පිළිගන්නා itemsඅතර ටයිප්හෙඩ් අවස්ථාවෙහි විෂය පථය ඇත. සමඟ වත්මන් විමසුම යොමු කරන්න this.query.
යාවත්කාලීන කරන්නා කාර්යය තෝරාගත් අයිතමය ආපසු ලබා දෙයි තෝරාගත් අයිතමය ආපසු ලබා දීමට භාවිතා කරන ක්‍රමය. තනි තර්කයක් පිළිගනී, the itemසහ typeahead instance හි විෂය පථය ඇත.
ඉස්මතු කරන්නා කාර්යය සියලුම පෙරනිමි ගැලපීම් ඉස්මතු කරයි ස්වයං සම්පූර්ණ ප්‍රතිඵල උද්දීපනය කිරීමට භාවිතා කරන ක්‍රමය. තනි තර්කයක් පිළිගන්නා itemඅතර ටයිප්හෙඩ් අවස්ථාවෙහි විෂය පථය ඇත. html ආපසු ලබා දිය යුතුය.

ක්රම

.typeahead(විකල්ප)

යතුරු ලියනයකින් ආදානයක් ආරම්භ කරයි.

උදාහරණයක්

වම් පස ඇති උප සංචලනය ඇෆික්ස් ප්ලගිනයේ සජීවී ආදර්ශනයකි.


භාවිතය

දත්ත ගුණාංග හරහා

ඕනෑම මූලද්‍රව්‍යයකට ඇෆික්ස් හැසිරීම පහසුවෙන් එක් කිරීමට data-spy="affix", ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න. ඉන්පසු මූලද්‍රව්‍යයක් ඇමිණීම සක්‍රිය සහ අක්‍රිය කළ යුත්තේ කවදාද යන්න අර්ථ දැක්වීමට ඕෆ්සෙට් භාවිත කරන්න.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
දැනුම්දීම! ඔබ අමුණන ලද මූලද්‍රව්‍යයක පිහිටීම සහ එහි ආසන්න මාපියන්ගේ හැසිරීම කළමනාකරණය කළ යුතුය. තනතුර පාලනය කරනු ලබන්නේ affix, affix-topසහ affix-bottom. පිටුවේ සාමාන්‍ය ප්‍රවාහයෙන් අන්තර්ගතය ඉවත් කරන බැවින් ඇලවීම ආරම්භ වන විට බිඳ වැටිය හැකි මාපියෙකු සඳහා පරීක්ෂා කිරීමට මතක තබා ගන්න.

JavaScript හරහා

JavaScript හරහා affix ප්ලගිනය අමතන්න:

  1. $ ( '#navbar' ). ඇලවීම ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset-top="200".

නම වර්ගය පෙරනිමිය විස්තර
ඕෆ්සෙට් අංකය | කාර්යය | වස්තුව 10 අනුචලන ස්ථානය ගණනය කිරීමේදී තිරයෙන් ඕෆ්සෙට් කිරීමට පික්සල. තනි අංකයක් සපයා ඇත්නම්, ඕෆ්සෙට් ඉහළ සහ වම් දිශාවන් දෙකටම යොදනු ලැබේ. තනි දිශාවකට හෝ බහුවිධ අද්විතීය ඕෆ්සෙට් සඳහා සවන් දීමට, වස්තුවක් සපයන්න offset: { x: 10 }. ඔබට ඕෆ්සෙට් එකක් ගතිකව සැපයීමට අවශ්‍ය වූ විට ශ්‍රිතයක් භාවිතා කරන්න (සමහර ප්‍රතිචාරාත්මක මෝස්තර සඳහා ප්‍රයෝජනවත්).