பூட்ஸ்டார்ப்பிற்கான ஜாவாஸ்கிரிப்ட்

பூட்ஸ்டார்ப்பின் கூறுகளை உயிர்ப்பிக்கவும்—இப்போது 12 தனிப்பயன் jQuery செருகுநிரல்களுடன்.

மாதிரிகள்

ஒரு நெறிப்படுத்தப்பட்ட, ஆனால் நெகிழ்வான, குறைந்தபட்ச தேவையான செயல்பாடுகள் மற்றும் ஸ்மார்ட் இயல்புநிலைகளுடன் மட்டுமே பாரம்பரிய ஜாவாஸ்கிரிப்ட் மாதிரி செருகுநிரலை எடுத்துக் கொள்ளுங்கள்.

கீழிறங்கும்

இந்த எளிய சொருகி மூலம் பூட்ஸ்டார்ப்பில் கிட்டத்தட்ட எதற்கும் கீழ்தோன்றும் மெனுவைச் சேர்க்கவும். பூட்ஸ்டார்ப் முழு கீழ்தோன்றும் மெனு ஆதரவை navbar, தாவல்கள் மற்றும் மாத்திரைகளில் கொண்டுள்ளது.

ஸ்க்ரோல்ஸ்பி

ஸ்க்ரோல் நிலையின் அடிப்படையில் தற்போதைய செயலில் உள்ள இணைப்பைக் காட்ட உங்கள் நேவ்பாரில் உள்ள இணைப்புகளைத் தானாகப் புதுப்பிக்க scrollspy ஐப் பயன்படுத்தவும்.

மாற்றக்கூடிய தாவல்கள்

இந்தச் செருகுநிரலைப் பயன்படுத்தி, தாவல்கள் மற்றும் மாத்திரைகளை உள்ளூர் உள்ளடக்கத்தின் டேபிளேல் பேனல்கள் மூலம் மாற்ற அனுமதிப்பதன் மூலம் அவற்றை மிகவும் பயனுள்ளதாக மாற்றவும்.

உதவிக்குறிப்புகள்

jQuery Tipsy செருகுநிரலைப் புதியதாக எடுத்துக்கொள்வது, உதவிக்குறிப்புகள் படங்களைச் சார்ந்திருக்காது—அவை அனிமேஷன்களுக்கு CSS3 மற்றும் உள்ளூர் தலைப்புச் சேமிப்பகத்திற்கான தரவுப் பண்புக்கூறுகளைப் பயன்படுத்துகின்றன.

Popovers *

ஐபாடில் உள்ளதைப் போன்ற உள்ளடக்கத்தின் சிறிய மேலடுக்குகளை வீட்டு இரண்டாம் நிலைத் தகவலுக்கான எந்த உறுப்புக்கும் சேர்க்கவும்.

* உதவிக்குறிப்புகள் சேர்க்கப்பட வேண்டும்

எச்சரிக்கை செய்திகள்

விழிப்பூட்டல் செருகுநிரல் என்பது விழிப்பூட்டல்களுக்கு நெருக்கமான செயல்பாட்டைச் சேர்ப்பதற்கான ஒரு சிறிய வகுப்பாகும்.

பொத்தான்கள்

பொத்தான்கள் மூலம் மேலும் செய்யவும். டூல்பார்கள் போன்ற கூடுதல் கூறுகளுக்கு கட்டுப்பாட்டு பொத்தான் கூறுகிறது அல்லது பொத்தான்களின் குழுக்களை உருவாக்கவும்.

சுருக்கு

துருத்திகள் மற்றும் வழிசெலுத்தல் போன்ற மடிக்கக்கூடிய கூறுகளுக்கு அடிப்படை பாணிகள் மற்றும் நெகிழ்வான ஆதரவைப் பெறுங்கள்.

கொணர்வி

நீங்கள் உள்ளடக்கத்தின் ஊடாடும் ஸ்லைடுஷோவை வழங்க விரும்பும் எந்த உள்ளடக்கத்தையும் மகிழ்ச்சியுடன் உருவாக்கவும்.

டைப்ஹெட்

எந்தவொரு படிவ உரை உள்ளீட்டிலும் நேர்த்தியான தட்டச்சு முனைகளை விரைவாக உருவாக்குவதற்கான அடிப்படை, எளிதாக நீட்டிக்கப்பட்ட செருகுநிரல்.

மாற்றங்கள் *

எளிய மாற்றம் விளைவுகளுக்கு, மாதிரிகளில் ஸ்லைடு செய்ய அல்லது விழிப்பூட்டல்களை மங்கச் செய்ய bootstrap-transition.js ஐ ஒருமுறை சேர்க்கவும்.

* செருகுநிரல்களில் அனிமேஷனுக்குத் தேவை

எச்சரிக்கை! அனைத்து ஜாவாஸ்கிரிப்ட் செருகுநிரல்களுக்கும் jQuery இன் சமீபத்திய பதிப்பு தேவைப்படுகிறது.

மாதிரிகள் பற்றி

ஒரு நெறிப்படுத்தப்பட்ட, ஆனால் நெகிழ்வான, குறைந்தபட்ச தேவையான செயல்பாடுகள் மற்றும் ஸ்மார்ட் இயல்புநிலைகளுடன் மட்டுமே பாரம்பரிய ஜாவாஸ்கிரிப்ட் மாதிரி செருகுநிரலை எடுத்துக் கொள்ளுங்கள்.

பதிவிறக்க கோப்பு

நிலையான உதாரணம்

கீழே நிலையான முறையில் ரெண்டர் செய்யப்பட்ட மாதிரி உள்ளது.

நேரடி டெமோ

கீழே உள்ள பொத்தானைக் கிளிக் செய்வதன் மூலம் ஜாவாஸ்கிரிப்ட் வழியாக ஒரு மாதிரியை மாற்றவும். அது கீழே சரிந்து பக்கத்தின் மேலிருந்து மங்கிவிடும்.

டெமோ மாதிரியைத் தொடங்கவும்

பூட்ஸ்ட்ராப்-மாடலைப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக மாதிரியை அழைக்கவும்:

  1. $ ( '#myModal' ). மாதிரி ( விருப்பங்கள் )

விருப்பங்கள்

பெயர் வகை இயல்புநிலை விளக்கம்
பின்னணி பூலியன் உண்மை மாதிரி-பின்னணி உறுப்பை உள்ளடக்கியது. மாற்றாக, staticகிளிக்கில் மாதிரியை மூடாத பின்னணியைக் குறிப்பிடவும்.
விசைப்பலகை பூலியன் உண்மை தப்பிக்கும் விசையை அழுத்தும் போது மாதிரியை மூடுகிறது
நிகழ்ச்சி பூலியன் உண்மை துவக்கும்போது மாதிரியைக் காட்டுகிறது.

மார்க்அப்

ஜாவாஸ்கிரிப்ட்டின் ஒரு வரியை எழுதாமல் உங்கள் பக்கத்தில் எளிதாக மாதிரிகளை நீங்கள் செயல்படுத்தலாம். ஒரு data-toggle="modal"கட்டுப்படுத்தி உறுப்பை ஒரு மாதிரி உறுப்பு ஐடியுடன் ஒத்திருக்கும் data-target="#foo"அல்லது அதைக் கிளிக் செய்தால், அது உங்கள் மாதிரியைத் தொடங்கும்.href="#foo"

மேலும், உங்கள் மாதிரி நிகழ்வில் விருப்பங்களைச் சேர்க்க, கட்டுப்பாட்டு உறுப்பு அல்லது மாதிரி மார்க்அப்பில் கூடுதல் தரவு பண்புக்கூறுகளாக அவற்றைச் சேர்க்கவும்.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > துவக்க மாதிரி </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </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" data-dismiss = "modal" > மூடு </a>
  11. <a href = "#" class = "btn btn-primary" > மாற்றங்களைச் சேமி </a>
  12. </div>
  13. </div>
எச்சரிக்கை! உங்கள் மாதிரியை உள்ளேயும் வெளியேயும் அனிமேட் செய்ய விரும்பினால் .fade, உறுப்பில் ஒரு வகுப்பைச் சேர்க்கவும் .modal(இதைச் செயலில் காண டெமோவைப் பார்க்கவும்) மற்றும் bootstrap-transition.js ஐச் சேர்க்கவும்.

முறைகள்

.modal(விருப்பங்கள்)

உங்கள் உள்ளடக்கத்தை மாதிரியாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது object.

  1. $ ( '#myModal' ). மாதிரி ({
  2. விசைப்பலகை : பொய்
  3. })

.modal('மாற்று')

ஒரு மாதிரியை கைமுறையாக மாற்றுகிறது.

  1. $ ( '#myModal' ). மாதிரி ( 'மாற்று' )

.modal('show')

ஒரு மாதிரியை கைமுறையாக திறக்கிறது.

  1. $ ( '#myModal' ). மாதிரி ( 'ஷோ' )

.modal('மறை')

ஒரு மாதிரியை கைமுறையாக மறைக்கிறது.

  1. $ ( '#myModal' ). மாதிரி ( 'மறை' )

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் மாடல் கிளாஸ், மாதிரி செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.

நிகழ்வு விளக்கம்
நிகழ்ச்சி showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டது மாடல் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (css மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
மறைக்க hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்டுள்ளது மாடல் பயனரிடமிருந்து மறைத்து முடித்தவுடன் இந்த நிகழ்வு நீக்கப்படும் (css மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
  1. $ ( '#myModal' ). on ( 'மறைக்கப்பட்ட' , செயல்பாடு () {
  2. // ஏதாவது செய்…
  3. })

ஸ்க்ரோல்ஸ்பை செருகுநிரல் ஸ்க்ரோல் பொசிஷனின் அடிப்படையில் நேவ் இலக்குகளை தானாக புதுப்பிப்பதற்கானது.

பதிவிறக்க கோப்பு

scrollspy உடன் எடுத்துக்காட்டு navbar

கீழே உள்ள பகுதியை ஸ்க்ரோல் செய்து, வழிசெலுத்தல் புதுப்பிப்பைப் பார்க்கவும். கீழ்தோன்றும் துணை உருப்படிகளும் முன்னிலைப்படுத்தப்படும். முயற்சி செய்!

@கொழுப்பு

விளம்பர லெகிங்ஸ் கீதார், புருன்ச் ஐடி ஆர்ட் பார்ட்டி டோலர் லேபர். Pitchfork yr enim lo-fi அவர்கள் qui விற்கப்படுவதற்கு முன்பு. Tumblr பண்ணை-டேபிள் சைக்கிள் உரிமை எதுவாக இருந்தாலும். அனிம் கெஃபியே கார்லஸ் கார்டிகன். வெலிட் சீடன் மெக்ஸ்வீனியின் புகைப்படச் சாவடி 3 ஓநாய் சந்திரன் இருரே. காஸ்பி ஸ்வெட்டர் லோமோ ஜீன் ஷார்ட்ஸ், வில்லியம்ஸ்பர்க் ஹூடி மினிம் க்யூ நீங்கள் அவற்றைப் பற்றி கேள்விப்பட்டிருக்க மாட்டீர்கள் மற்றும் கார்டிகன் டிரஸ்ட் ஃபண்ட் கல்பா பயோடீசல் வெஸ் ஆண்டர்சன் அழகியல். நிஹில் பச்சை குத்தப்பட்ட குற்றச்சாட்டு, க்ரெட் ஐரனி பயோடீசல் கெஃபியே கைவினைஞர் உள்ளம்கோ விளைவு.

@mdo

வேனியம் மார்ஃபா மீசை ஸ்கேட்போர்டு, அடிபிசிசிங் ஃபுஜியாட் வேலிட் பிட்ச்போர்க் தாடி. ஃப்ரீகன் தாடி அலிக்வா குபிடாடட் மெக்ஸ்வீனியின் வெரோ. க்யூபிடாடட் ஃபோர் லோகோ நிசி, ஈ ஹெல்வெடிகா நுல்லா கார்ல்ஸ். பச்சை குத்தப்பட்ட காஸ்பி ஸ்வெட்டர் உணவு டிரக், mcsweeney's quis non freegan vinyl. லோ-ஃபை வெஸ் ஆண்டர்சன் +1 சார்டோரியல். கார்ல்ஸ் அழகியல் அல்லாத உடற்பயிற்சிகளை ஜென்ட்ரிஃபை செய்கிறார். புரூக்ளின் அடிபிசிசிங் கிராஃப்ட் பீர் வைஸ் கீட்டர் டெஸரண்ட்.

ஒன்று

ஒக்கேகேட் கொமோடோ அலிக்வா டெக்டஸ். ஃபேப் கிராஃப்ட் பீர் டெஸரண்ட் ஸ்கேட்போர்டு ஈ.ஏ. லோமோ சைக்கிள் உரிமைகள் அடிபிசிசிங் பான் மை, வெலிட் ஈ சன்ட் நெக்ஸ்ட் லெவல் லோகாவோர் சிங்கிள் ஆரிஜின் காபி இன் மேக்னா வேனியம். ஹை லைஃப் ஐடி வினைல், எக்கோ பார்க் கான்செக்வாட் க்விஸ் அலிகிப் பான் மை பிட்ச்ஃபோர்க். வெரோ விஎச்எஸ் ஆடிபிசிசிங். Consectetur nisi DIY மினிம் மெசஞ்சர் பை. க்ரெட் எக்ஸ் இன், நிலையான டெலக்டஸ் கான்செக்டேர் ஃபேன்னி பேக் ஐபோன்.

இரண்டு

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 வலைப்பதிவு, culpa messenger bag marfa எதுவாக இருந்தாலும் delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche Irony, thundercats அவர்களைப் பற்றி நீங்கள் கேள்விப்பட்டிருக்க வாய்ப்பில்லை, ஹூடி க்ளூட்டன்-ஃப்ரீ லோ-ஃபை ஃபாப் அலிகிப். லேபர் எலிட் ப்ளேஸ்அட் அவர்கள் விற்றுத் தீரும் முன், டெர்ரி ரிச்சர்ட்சன் ப்ரோடென்ட் புருஞ்ச் நெஸ்சியன்ட் க்விஸ் காஸ்பி ஸ்வெட்டர் பாரியடுர் கெஃபியே அட் ஹெல்வெடிகா ஆர்டிசன். கார்டிகன் கிராஃப்ட் பீர் சீடன் ரெடிமேட் வெலிட். VHS சாம்ப்ரே லேபரிஸ் டெம்பர் வெனியம். அனிம் மோலிட் மினிம் கொமோடோ உள்ளம்கோ இடிமுழக்கம்.


bootstrap-scrollspy.js ஐப் பயன்படுத்துதல்

javascript வழியாக scrollspy ஐ அழைக்கவும்:

  1. $ ( '#navbar' ). ஸ்க்ரோல்ஸ்பி ()

மார்க்அப்

உங்கள் டாப்பார் வழிசெலுத்தலில் ஸ்க்ரோல்ஸ்பை நடத்தையை எளிதாகச் சேர்க்க, data-spy="scroll"நீங்கள் உளவு பார்க்க விரும்பும் உறுப்பைச் சேர்க்கவும் (பொதுவாக இது உடலாக இருக்கும்).

  1. <body data-spy = "சுருள்" > ... </body>
எச்சரிக்கை! Navbar இணைப்புகள் தீர்க்கக்கூடிய ஐடி இலக்குகளைக் கொண்டிருக்க வேண்டும். எடுத்துக்காட்டாக, <a href="#home">home</a>டோமில் உள்ள ஒன்றைப் போன்றவற்றுடன் ஒத்திருக்க வேண்டும் <div id="home"></div>.

முறைகள்

.scrollspy('refresh')

DOM இலிருந்து உறுப்புகளைச் சேர்ப்பது அல்லது அகற்றுவதுடன் இணைந்து ஸ்க்ரோல்ஸ்பையைப் பயன்படுத்தும் போது, ​​நீங்கள் புதுப்பிப்பு முறையை இப்படி அழைக்க வேண்டும்:

  1. $ ( '[data-spy="scroll"]' ). ஒவ்வொன்றும் ( செயல்பாடு () {
  2. var $spy = $ ( இது ). scrollspy ( 'refresh' )
  3. });

விருப்பங்கள்

பெயர் வகை இயல்புநிலை விளக்கம்
ஆஃப்செட் எண் 10 ஸ்க்ரோலின் நிலையைக் கணக்கிடும்போது மேலே இருந்து ஆஃப்செட் செய்ய வேண்டிய பிக்சல்கள்.

நிகழ்வுகள்

நிகழ்வு விளக்கம்
செயல்படுத்த ஸ்க்ரோல்ஸ்பையால் ஒரு புதிய உருப்படி செயல்படுத்தப்படும் போதெல்லாம் இந்த நிகழ்வு சுடுகிறது.

இந்த செருகுநிரல் உள்ளூர் உள்ளடக்கம் மூலம் மாற்றுவதற்கு விரைவான, மாறும் தாவல் மற்றும் மாத்திரை செயல்பாட்டைச் சேர்க்கிறது.

பதிவிறக்க கோப்பு

எடுத்துக்காட்டு தாவல்கள்

கீழ்தோன்றும் மெனுக்கள் வழியாகவும் மறைக்கப்பட்ட பலகங்களுக்கு இடையில் மாறுவதற்கு கீழே உள்ள தாவல்களைக் கிளிக் செய்யவும்.

ரா டெனிம் ஜீன் ஷார்ட்ஸ் ஆஸ்டின் பற்றி நீங்கள் கேள்விப்பட்டிருக்க மாட்டீர்கள். Nesciunt டோஃபு ஸ்டம்ப்டவுன் அலிக்கா, ரெட்ரோ சின்த் மாஸ்டர் க்ளென்ஸ். மீசை கிளிச் டெம்பர், வில்லியம்ஸ்பர்க் கார்ல்ஸ் சைவ ஹெல்வெடிகா. கசாப்புக் கடை ரெட்ரோ கெஃபியே ட்ரீம்கேட்சர் சின்தைக் கண்டறிதல். காஸ்பி ஸ்வெட்டர் eu banh mi, qui irure Terry Richardson ex squid. சால்வியா சிலம் ஐபோனை அலிகிப் பிளேஸ். 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.


bootstrap-tab.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக டேப் செய்யக்கூடிய தாவல்களை இயக்கவும் (ஒவ்வொரு தாவலும் தனித்தனியாக செயல்படுத்தப்பட வேண்டும்):

  1. $ ( '#myTab a' ). கிளிக் ( செயல்பாடு ( ) {
  2. . தடுக்கும் இயல்புநிலை ();
  3. $ ( இது ). தாவல் ( 'ஷோ' );
  4. })

தனிப்பட்ட தாவல்களை நீங்கள் பல வழிகளில் செயல்படுத்தலாம்:

  1. $ ( '#myTab a[href="#profile"]' ). தாவல் ( 'ஷோ' ); // பெயரின்படி தாவலைத் தேர்ந்தெடுக்கவும்
  2. $ ( '#myTab a:first' ). தாவல் ( 'ஷோ' ); // முதல் தாவலைத் தேர்ந்தெடுக்கவும்
  3. $ ( '#myTab a:last' ). தாவல் ( 'ஷோ' ); // கடைசி தாவலைத் தேர்ந்தெடுக்கவும்
  4. $ ( '#myTab li:eq(2) a' ). தாவல் ( 'ஷோ' ); // மூன்றாவது தாவலைத் தேர்ந்தெடு (0-குறியீடு)

மார்க்அப்

நீங்கள் எந்த ஜாவாஸ்கிரிப்டையும் எழுதாமல் ஒரு தாவல் அல்லது மாத்திரை வழிசெலுத்தலை வெறுமனே குறிப்பிடுவதன் மூலம் data-toggle="tab"அல்லது data-toggle="pill"ஒரு உறுப்பில் செயல்படுத்தலாம். navதாவலில் மற்றும் nav-tabsவகுப்புகளைச் சேர்ப்பது ulபூட்ஸ்ட்ராப் தாவல் ஸ்டைலிங்கைப் பயன்படுத்தும்.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > சுயவிவரம் </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > செய்திகள் </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > அமைப்புகள் </a></li>
  6. </ul>

முறைகள்

$().tab

தாவல் உறுப்பு மற்றும் உள்ளடக்க கொள்கலனை செயல்படுத்துகிறது. தாவலில் DOM இல் ஒரு கண்டெய்னர் முனை data-targetஅல்லது இலக்கு வைக்கும் முனை இருக்க வேண்டும்.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > சுயவிவரம் </a></li>
  4. <li><a href = "#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 = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( செயல்பாடு () {
  17. $ ( '#myTab a:last' ). தாவல் ( 'ஷோ' );
  18. })
  19. </script>

நிகழ்வுகள்

நிகழ்வு விளக்கம்
நிகழ்ச்சி இந்த நிகழ்வு டேப் ஷோவில் தொடங்குகிறது, ஆனால் புதிய தாவல் காட்டப்படுவதற்கு முன்பு. செயலில் உள்ள தாவலையும் முந்தைய செயலில் உள்ள தாவலையும் (கிடைத்தால்) முறையே பயன்படுத்தவும் event.targetகுறிவைக்கவும் .event.relatedTarget
காட்டப்பட்டது இந்த நிகழ்வு ஒரு தாவல் காட்டப்பட்ட பிறகு டேப் ஷோவில் இயங்குகிறது. செயலில் உள்ள தாவலையும் முந்தைய செயலில் உள்ள தாவலையும் (கிடைத்தால்) முறையே பயன்படுத்தவும் event.targetகுறிவைக்கவும் .event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). மீது ( 'காட்டப்பட்டுள்ளது' , செயல்பாடு ( ) {
  2. . இலக்கு // செயல்படுத்தப்பட்ட தாவல்
  3. . தொடர்புடைய இலக்கு // முந்தைய தாவல்
  4. })

உதவிக்குறிப்புகள் பற்றி

ஜேசன் ஃப்ரேம் எழுதிய சிறந்த jQuery.tipsy சொருகி மூலம் ஈர்க்கப்பட்டது; உதவிக்குறிப்புகள் புதுப்பிக்கப்பட்ட பதிப்பாகும், இது படங்களை நம்பாது, அனிமேஷன்களுக்கு css3 மற்றும் உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான தரவு பண்புக்கூறுகளைப் பயன்படுத்துகிறது.

பதிவிறக்க கோப்பு

உதவிக்குறிப்புகளின் எடுத்துக்காட்டு பயன்பாடு

உதவிக்குறிப்புகளைப் பார்க்க கீழே உள்ள இணைப்புகளின் மீது வட்டமிடுங்கள்:

இறுக்கமான பேன்ட் அடுத்த நிலை கெஃபியே நீங்கள் அவற்றைப் பற்றி கேள்விப்பட்டிருக்க வாய்ப்பில்லை. ஃபோட்டோ பூத் தாடி ரா டெனிம் லெட்டர்பிரஸ் சைவ தூதர் பை ஸ்டம்ப்டவுன். ஃபார்ம்-டு-டேபிள் சீடன், mcsweeney's fixie sustainable quinoa 8-bit அமெரிக்கன் ஆடைகளில் டெர்ரி ரிச்சர்ட்சன் வினைல் சாம்ப்ரே உள்ளது. தாடி ஸ்டம்ப்டவுன், கார்டிகன்ஸ் பான் மை லோமோ இடி கேட்ஸ். டோஃபு பயோடீசல் வில்லியம்ஸ்பர்க் மார்ஃபா, ஃபோர் லோகோ மெக்ஸ்வீனியின் கிளீன்ஸ் சைவ சாம்ப்ரே. ஒரு உண்மையில் முரண்பாடான கைவினைஞர் என்ன கீதார் , சீன்ஸ்டர் ஃபார்ம்-டு-டேபிள் பேங்க்ஸி ஆஸ்டின் ட்விட்டர் ஹேண்டில் ஃப்ரீகன் க்ரெட் ரா டெனிம் ஒற்றை-ஆரிஜின் காபி வைரல்.


bootstrap-tooltip.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக உதவிக்குறிப்பைத் தூண்டவும்:

  1. $ ( '#எடுத்துக்காட்டு' ). உதவிக்குறிப்பு ( விருப்பங்கள் )

விருப்பங்கள்

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை உதவிக்குறிப்பில் css மங்கல் மாற்றத்தைப் பயன்படுத்தவும்
வேலை வாய்ப்பு சரம்|செயல்பாடு 'மேல்' உதவிக்குறிப்பை எவ்வாறு நிலைநிறுத்துவது - மேல் | கீழே | விட்டு | சரி
தேர்வாளர் லேசான கயிறு பொய் ஒரு தேர்வி வழங்கப்பட்டால், டூல்டிப் பொருள்கள் குறிப்பிடப்பட்ட இலக்குகளுக்கு ஒதுக்கப்படும்.
தலைப்பு சரம் | செயல்பாடு '' `title` குறிச்சொல் இல்லை என்றால் இயல்புநிலை தலைப்பு மதிப்பு
தூண்டுதல் லேசான கயிறு 'ஹோவர்' உதவிக்குறிப்பு எவ்வாறு தூண்டப்படுகிறது - மிதவை | கவனம் | கையேடு
தாமதம் எண் | பொருள் 0

உதவிக்குறிப்பைக் காண்பிப்பதற்கும் மறைப்பதற்கும் தாமதம் (எம்எஸ்) - கையேடு தூண்டுதல் வகைக்கு பொருந்தாது

ஒரு எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { show: 500, hide: 100 }

எச்சரிக்கை! தனிப்பட்ட உதவிக்குறிப்புகளுக்கான விருப்பங்களை தரவு பண்புக்கூறுகளின் மூலம் மாற்றாகக் குறிப்பிடலாம்.

மார்க்அப்

செயல்திறன் காரணங்களுக்காக, டூல்டிப் மற்றும் பாப்ஓவர் டேட்டா-ஆபிஸ் தேர்வு செய்யப்பட்டுள்ளன. அவற்றைப் பயன்படுத்த விரும்பினால், ஒரு தேர்வி விருப்பத்தைக் குறிப்பிடவும்.

  1. <a href = "#" rel = "tooltip" title = "முதல் உதவிக்குறிப்பு" > என் மீது வட்டமிடு </a>

முறைகள்

$().உதவிக்குறிப்பு(விருப்பங்கள்)

உறுப்பு சேகரிப்பில் உதவிக்குறிப்பு கையாளுதலை இணைக்கிறது.

.tooltip('show')

ஒரு உறுப்பின் உதவிக்குறிப்பை வெளிப்படுத்துகிறது.

  1. $ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'ஷோ' )

உதவிக்குறிப்பு('மறை')

ஒரு உறுப்பின் உதவிக்குறிப்பை மறைக்கிறது.

  1. $ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'மறை' )

.tooltip('மாற்று')

ஒரு உறுப்பின் உதவிக்குறிப்பை மாற்றுகிறது.

  1. $ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'மாற்று' )

popovers பற்றி

ஐபாடில் உள்ளதைப் போன்ற உள்ளடக்கத்தின் சிறிய மேலடுக்குகளை வீட்டு இரண்டாம் நிலைத் தகவலுக்கான எந்த உறுப்புக்கும் சேர்க்கவும்.

* உதவிக்குறிப்பு சேர்க்கப்பட வேண்டும்

பதிவிறக்க கோப்பு

உதாரணம் ஹோவர் பாப்ஓவர்

பாப்ஓவரைத் தூண்டுவதற்கு பொத்தானின் மேல் வட்டமிடுங்கள்.


bootstrap-popover.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக பாப்ஓவர்களை இயக்கவும்:

  1. $ ( '#எடுத்துக்காட்டு' ). popover ( விருப்பங்கள் )

விருப்பங்கள்

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை உதவிக்குறிப்பில் css மங்கல் மாற்றத்தைப் பயன்படுத்தவும்
வேலை வாய்ப்பு சரம்|செயல்பாடு 'சரி' பாப்ஓவரை நிலைநிறுத்துவது எப்படி - மேல் | கீழே | விட்டு | சரி
தேர்வாளர் லேசான கயிறு பொய் ஒரு தேர்வி வழங்கப்பட்டால், டூல்டிப் பொருள்கள் குறிப்பிட்ட இலக்குகளுக்கு ஒதுக்கப்படும்
தூண்டுதல் லேசான கயிறு 'ஹோவர்' உதவிக்குறிப்பு எவ்வாறு தூண்டப்படுகிறது - மிதவை | கவனம் | கையேடு
தலைப்பு சரம் | செயல்பாடு '' `title` பண்புக்கூறு இல்லை என்றால் இயல்புநிலை தலைப்பு மதிப்பு
உள்ளடக்கம் சரம் | செயல்பாடு '' `data-content` பண்புக்கூறு இல்லையெனில் இயல்புநிலை உள்ளடக்க மதிப்பு
தாமதம் எண் | பொருள் 0

பாப்ஓவரை (மிஎஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கைமுறை தூண்டுதல் வகைக்கு பொருந்தாது

ஒரு எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { show: 500, hide: 100 }

எச்சரிக்கை! தனிப்பட்ட பாப்ஓவர்களுக்கான விருப்பங்களை தரவு பண்புக்கூறுகளின் மூலம் மாற்றாகக் குறிப்பிடலாம்.

மார்க்அப்

செயல்திறன் காரணங்களுக்காக, டூல்டிப் மற்றும் பாப்ஓவர் டேட்டா-ஆபிஸ் தேர்வு செய்யப்பட்டுள்ளன. அவற்றைப் பயன்படுத்த விரும்பினால், ஒரு தேர்வி விருப்பத்தைக் குறிப்பிடவும்.

முறைகள்

$().popover(விருப்பங்கள்)

உறுப்பு சேகரிப்புக்கான பாப்ஓவர்களைத் துவக்குகிறது.

.popover('ஷோ')

பாப்ஓவர் கூறுகளை வெளிப்படுத்துகிறது.

  1. $ ( '#உறுப்பு' ). popover ( 'ஷோ' )

.popover('மறை')

பாப்ஓவர் கூறுகளை மறைக்கிறது.

  1. $ ( '#உறுப்பு' ). popover ( 'மறை' )

.popover('மாற்று')

உறுப்புகளின் பாப்ஓவரை மாற்றுகிறது.

  1. $ ( '#உறுப்பு' ). popover ( 'மாற்று' )

விழிப்பூட்டல்கள் பற்றி

விழிப்பூட்டல் செருகுநிரல் என்பது விழிப்பூட்டல்களுக்கு நெருக்கமான செயல்பாட்டைச் சேர்ப்பதற்கான ஒரு சிறிய வகுப்பாகும்.

பதிவிறக்க Tamil

எடுத்துக்காட்டு எச்சரிக்கைகள்

விழிப்பூட்டல்கள் செருகுநிரல் வழக்கமான எச்சரிக்கை செய்திகளில் வேலை செய்கிறது மற்றும் செய்திகளைத் தடுக்கிறது.

புனித குவாக்காமோல்! நீங்களே சரி பார்க்கவும், நீங்கள் மிகவும் அழகாக இல்லை.

ஓ ஸ்னாப்! உங்களுக்கு ஒரு பிழை ஏற்பட்டது!

இதையும் அதையும் மாற்றி மீண்டும் முயற்சிக்கவும். டுயிஸ் மோலிஸ், கம்மோடோ லுக்டஸ் அல்ல, நிசி எரட் போர்டிட்டர் லிகுலா, எகெட் லாசினியா ஓடியோ செம் நெக் எலிட். க்ராஸ் மேட்டிஸ் கன்செக்டெர் புருஸ் சிட் அமெட் ஃபர்மெண்டம்.

இந்த நடவடிக்கை எடுங்கள் அல்லது இதைச் செய்யுங்கள்


bootstrap-alert.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் மூலம் விழிப்பூட்டலை நிராகரிப்பதை இயக்கு:

  1. $ ( ".எச்சரிக்கை" ). எச்சரிக்கை ()

மார்க்அப்

data-dismiss="alert"விழிப்பூட்டல் நெருக்கமான செயல்பாட்டைத் தானாக வழங்க, உங்கள் மூடு பொத்தானைச் சேர்க்கவும் .

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

முறைகள்

$().எச்சரிக்கை()

அனைத்து விழிப்பூட்டல்களையும் நெருக்கமான செயல்பாட்டுடன் மூடுகிறது. உங்கள் விழிப்பூட்டல்கள் மூடப்படும்போது அனிமேட் செய்ய, அவற்றில் ஏற்கனவே பயன்படுத்தப்பட்ட வகுப்பு .fadeமற்றும் வகுப்பு இருப்பதை உறுதிசெய்யவும்..in

.அலர்ட்('மூடு')

எச்சரிக்கையை மூடுகிறது.

  1. $ ( ".எச்சரிக்கை" ). எச்சரிக்கை ( 'மூடு' )

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் எச்சரிக்கை வகுப்பு, விழிப்பூட்டல் செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.

நிகழ்வு விளக்கம்
நெருக்கமான closeநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
மூடப்பட்டது விழிப்பூட்டல் மூடப்பட்டவுடன் இந்த நிகழ்வு நீக்கப்படும் (css மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
  1. $ ( '#மை-எச்சரிக்கை' ). பிணைப்பு ( 'மூடப்பட்டது' , செயல்பாடு () {
  2. // ஏதாவது செய்…
  3. })

பற்றி

பொத்தான்கள் மூலம் மேலும் செய்யவும். டூல்பார்கள் போன்ற கூடுதல் கூறுகளுக்கு கட்டுப்பாட்டு பொத்தான் கூறுகிறது அல்லது பொத்தான்களின் குழுக்களை உருவாக்கவும்.

பதிவிறக்க கோப்பு

எடுத்துக்காட்டு பயன்கள்

நிலைகள் மற்றும் நிலைமாற்றங்களுக்கு பொத்தான்கள் செருகுநிரலைப் பயன்படுத்தவும்.

மாநிலமான
ஒற்றை மாற்று
தேர்வுப்பெட்டி
வானொலி

bootstrap-button.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக பொத்தான்களை இயக்கு:

  1. $ ( '.nav-tabs' ). பொத்தான் ()

மார்க்அப்

பொத்தான் சொருகிக்கு தரவு பண்புக்கூறுகள் ஒருங்கிணைந்தவை. பல்வேறு மார்க்அப் வகைகளுக்கு கீழே உள்ள உதாரணக் குறியீட்டைப் பார்க்கவும்.

  1. <!-- ஒற்றைப் பொத்தானில் மாற்றுவதைச் செயல்படுத்த தரவு-மாற்று = "பொத்தானை" சேர்க்கவும் -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- btn-group --> தேர்வுப்பெட்டி பாணியை மாற்றுவதற்கு data-toggle="buttons-checkbox" ஐச் சேர்க்கவும் -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > இடது </button>
  7. <button class = "btn" > Middle </button>
  8. <button class = "btn" > வலது </button>
  9. </div>
  10.  
  11. <!-- btn-group --> இல் ரேடியோ பாணியை மாற்றுவதற்கு data-toggle="buttons-radio" ஐச் சேர்க்கவும் -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > இடது </button>
  14. <button class = "btn" > Middle </button>
  15. <button class = "btn" > வலது </button>
  16. </div>

முறைகள்

$().பொத்தான்('மாற்று')

புஷ் நிலையை மாற்றுகிறது. பொத்தான் செயல்படுத்தப்பட்ட தோற்றத்தை அளிக்கிறது.

எச்சரிக்கை! data-toggleபண்புக்கூறைப் பயன்படுத்தி ஒரு பொத்தானை தானாக மாற்றுவதை நீங்கள் இயக்கலாம் .
  1. <button class = "btn" data-toggle = "button" > </button>

$().பொத்தான்('ஏற்றுகிறது')

பொத்தான் நிலையை ஏற்றுவதற்கு அமைக்கிறது - பொத்தானை முடக்குகிறது மற்றும் உரையை ஏற்றுவதற்கு உரையை மாற்றுகிறது. தரவு பண்புக்கூறைப் பயன்படுத்தி பொத்தான் உறுப்பில் உரையை ஏற்றுதல் வரையறுக்கப்பட வேண்டும் data-loading-text.

  1. <button class = "btn" data-loading-text = "பொருள் ஏற்றுகிறது..." > ... </button>
எச்சரிக்கை! பக்க சுமைகள் முழுவதும் ஃபயர்பாக்ஸ் முடக்கப்பட்ட நிலையைத் தொடர்கிறது . இதற்கு ஒரு தீர்வு பயன்படுத்த வேண்டும் autocomplete="off".

$().பொத்தான்('ரீசெட்')

பொத்தான் நிலையை மீட்டமைக்கிறது - உரையை அசல் உரைக்கு மாற்றுகிறது.

$().பொத்தான்(சரம்)

பொத்தான் நிலையை மீட்டமைக்கிறது - எந்த தரவு வரையறுக்கப்பட்ட உரை நிலைக்கு உரையை மாற்றுகிறது.

  1. <button class = "btn" data-complete-text = "முடிந்தது!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). பொத்தான் ( 'முழு' )
  4. </script>

பற்றி

துருத்திகள் மற்றும் வழிசெலுத்தல் போன்ற மடிக்கக்கூடிய கூறுகளுக்கு அடிப்படை பாணிகள் மற்றும் நெகிழ்வான ஆதரவைப் பெறுங்கள்.

பதிவிறக்க கோப்பு

* மாற்றங்கள் சொருகி சேர்க்கப்பட வேண்டும்.

உதாரணம் துருத்தி

சரிவு செருகுநிரலைப் பயன்படுத்தி, நாங்கள் ஒரு எளிய துருத்தி பாணி விட்ஜெட்டை உருவாக்கினோம்:

அனிம் பாரியடுர் கிளீச் ரெப்ரெஹெண்டரிட், எனிம் ஐயுஸ்மோட் ஹை லைஃப் ஆக்ஸமஸ் டெர்ரி ரிச்சர்ட்சன் அட் ஸ்க்விட். 3 ஓநாய் மூன் ஆஃபிசியா ஆட், குபிடாடட் அல்லாத ஸ்கேட்போர்டு டோலர் புருன்ச். உணவு டிரக் quinoa nesciunt தொழிலாளர் eiusmod. புருஞ்ச் 3 ஓநாய் மூன் டெம்பர், சன்ட் அலிக்வா அதன் மீது ஒரு பறவையை வைத்தது ஸ்க்விட் சிங்கிள்-ஆரிஜின் காபி நுல்லா அசுமெண்டா ஷோரெடிச் மற்றும். நிஹில் அனிம் கெஃபியே ஹெல்வெடிகா, கிராஃப்ட் பீர் லேபர் வெஸ் ஆண்டர்சன் க்ரெட் நெஸ்சியுன்ட் சாபியென்டே ஈ. விளம்பர வேகன் விதிவிலக்கு கசாப்பு கடை வைஸ் லோமோ. Leggings occaecat கிராஃப்ட் பீர் ஃபார்ம்-டு-டேபிள், ரா டெனிம் அழகியல் சின்த் nesciunt நீங்கள் ஒருவேளை அவர்கள் குற்றச்சாட்டுக்கு தொழிலாளர் நிலையான VHS பற்றி கேள்விப்பட்டிருக்க முடியாது.
அனிம் பாரியடுர் கிளீச் ரெப்ரெஹெண்டரிட், எனிம் ஐயுஸ்மோட் ஹை லைஃப் ஆக்ஸமஸ் டெர்ரி ரிச்சர்ட்சன் அட் ஸ்க்விட். 3 ஓநாய் மூன் ஆஃபிசியா ஆட், குபிடாடட் அல்லாத ஸ்கேட்போர்டு டோலர் புருன்ச். உணவு டிரக் quinoa nesciunt தொழிலாளர் eiusmod. புருஞ்ச் 3 ஓநாய் மூன் டெம்பர், சன்ட் அலிக்வா அதன் மீது ஒரு பறவையை வைத்தது ஸ்க்விட் சிங்கிள்-ஆரிஜின் காபி நுல்லா அசுமெண்டா ஷோரெடிச் மற்றும். நிஹில் அனிம் கெஃபியே ஹெல்வெடிகா, கிராஃப்ட் பீர் லேபர் வெஸ் ஆண்டர்சன் க்ரெட் நெஸ்சியுன்ட் சாபியென்டே ஈ. விளம்பர வேகன் விதிவிலக்கு கசாப்பு கடை வைஸ் லோமோ. Leggings occaecat கிராஃப்ட் பீர் ஃபார்ம்-டு-டேபிள், ரா டெனிம் அழகியல் சின்த் nesciunt நீங்கள் ஒருவேளை அவர்கள் குற்றச்சாட்டுக்கு தொழிலாளர் நிலையான VHS பற்றி கேள்விப்பட்டிருக்க முடியாது.
அனிம் பாரியடுர் கிளீச் ரெப்ரெஹெண்டரிட், எனிம் ஐயுஸ்மோட் ஹை லைஃப் ஆக்ஸமஸ் டெர்ரி ரிச்சர்ட்சன் அட் ஸ்க்விட். 3 ஓநாய் மூன் ஆஃபிசியா ஆட், குபிடாடட் அல்லாத ஸ்கேட்போர்டு டோலர் புருன்ச். உணவு டிரக் quinoa nesciunt தொழிலாளர் eiusmod. புருஞ்ச் 3 ஓநாய் மூன் டெம்பர், சன்ட் அலிக்வா அதன் மீது ஒரு பறவையை வைத்தது ஸ்க்விட் சிங்கிள்-ஆரிஜின் காபி நுல்லா அசுமெண்டா ஷோரெடிச் மற்றும். நிஹில் அனிம் கெஃபியே ஹெல்வெடிகா, கிராஃப்ட் பீர் லேபர் வெஸ் ஆண்டர்சன் க்ரெட் நெஸ்சியுன்ட் சாபியென்டே ஈ. விளம்பர வேகன் விதிவிலக்கு கசாப்பு கடை வைஸ் லோமோ. Leggings occaecat கிராஃப்ட் பீர் ஃபார்ம்-டு-டேபிள், ரா டெனிம் அழகியல் சின்த் nesciunt நீங்கள் ஒருவேளை அவர்கள் குற்றச்சாட்டுக்கு தொழிலாளர் நிலையான VHS பற்றி கேள்விப்பட்டிருக்க முடியாது.

bootstrap-collapse.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் மூலம் இயக்கு:

  1. $ ( ". சரிவு" ). சரிவு ()

விருப்பங்கள்

பெயர் வகை இயல்புநிலை விளக்கம்
பெற்றோர் தேர்வாளர் பொய் தேர்வாளர் என்றால், இந்த மடிக்கக்கூடிய உருப்படி காட்டப்படும்போது, ​​குறிப்பிட்ட பெற்றோரின் கீழ் உள்ள அனைத்து மடிக்கக்கூடிய உறுப்புகளும் மூடப்படும். (பாரம்பரிய துருத்தி நடத்தை போன்றது)
மாற்று பூலியன் உண்மை அழைப்பின் போது மடிக்கக்கூடிய உறுப்பை மாற்றுகிறது

மார்க்அப்

data-toggle="collapse"மடிக்கக்கூடிய உறுப்பின் கட்டுப்பாட்டை தானாக ஒதுக்க, ஒரு data-targetஉறுப்பைச் சேர்க்கவும் . பண்புக்கூறு சுருக்கத்தைப் data-targetபயன்படுத்துவதற்கு css தேர்வியை ஏற்றுக்கொள்கிறது. collapseமடிக்கக்கூடிய உறுப்புடன் வகுப்பைச் சேர்க்க மறக்காதீர்கள் . இது இயல்புநிலையாகத் திறக்கப்பட வேண்டுமெனில், கூடுதல் வகுப்பைச் சேர்க்கவும் in.

  1. <button class = "btn btn-danger" data-toggle = "சரிவு" data-target = "#demo" >
  2. எளிய மடிக்கக்கூடியது
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
எச்சரிக்கை! மடிக்கக்கூடிய கட்டுப்பாட்டில் துருத்தி போன்ற குழு நிர்வாகத்தைச் சேர்க்க, தரவுப் பண்புக்கூறைச் சேர்க்கவும் data-parent="#selector". இதை செயலில் காண டெமோவைப் பார்க்கவும்.

முறைகள்

.collapse(விருப்பங்கள்)

உங்கள் உள்ளடக்கத்தை மடிக்கக்கூடிய உறுப்பாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது object.

  1. $ ( '#myCollapsible' ). சரிவு ({
  2. மாற்று : பொய்
  3. })

.collapse('மாற்று')

மடிக்கக்கூடிய உறுப்பைக் காட்ட அல்லது மறைக்க மாற்றுகிறது.

.collapse('show')

மடிக்கக்கூடிய உறுப்பைக் காட்டுகிறது.

.collapse('மறை')

மடிக்கக்கூடிய உறுப்பை மறைக்கிறது.

நிகழ்வுகள்

பூட்ஸ்ட்ராப்பின் சரிவு வகுப்பு, சரிவு செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.

நிகழ்வு விளக்கம்
நிகழ்ச்சி showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டது ஒரு சரிவு உறுப்பு பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (css மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
மறைக்க hideமுறை அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக நீக்கப்பட்டது .
மறைக்கப்பட்டுள்ளது ஒரு சரிவு உறுப்பு பயனரிடமிருந்து மறைக்கப்பட்டால் இந்த நிகழ்வு நீக்கப்படும் (css மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
  1. $ ( '#myCollapsible' ). on ( 'மறைக்கப்பட்ட' , செயல்பாடு () {
  2. // ஏதாவது செய்…
  3. })

பற்றி

எந்தவொரு படிவ உரை உள்ளீட்டிலும் நேர்த்தியான தட்டச்சு முனைகளை விரைவாக உருவாக்குவதற்கான அடிப்படை, எளிதாக நீட்டிக்கப்பட்ட செருகுநிரல்.

பதிவிறக்க கோப்பு

உதாரணமாக

தட்டச்சு முடிவுகளைக் காட்ட கீழே உள்ள புலத்தில் தட்டச்சு செய்யத் தொடங்குங்கள்.


bootstrap-typeahead.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக டைப்ஹெட் அழைக்கவும்:

  1. $ ( '.typeahead' ). டைப்ஹெட் ()

விருப்பங்கள்

பெயர் வகை இயல்புநிலை விளக்கம்
ஆதாரம் வரிசை [ ] எதிராக வினவுவதற்கான தரவு ஆதாரம்.
பொருட்களை எண் 8 கீழ்தோன்றலில் காண்பிக்க வேண்டிய அதிகபட்ச உருப்படிகளின் எண்ணிக்கை.
பொருத்துபவர் செயல்பாடு வழக்கு உணர்வற்றது வினவல் ஒரு உருப்படியுடன் பொருந்துகிறதா என்பதைத் தீர்மானிக்கப் பயன்படுத்தப்படும் முறை. ஒரு ஒற்றை வாதத்தை ஏற்கிறது, இதற்கு itemஎதிராக வினவலை சோதிக்க வேண்டும். உடன் தற்போதைய வினவலை அணுகவும் this.query. trueவினவல் பொருத்தமாக இருந்தால், பூலினைத் திருப்பி அனுப்பவும் .
வரிசைப்படுத்துபவர் செயல்பாடு சரியான பொருத்தம்,
கேஸ் சென்சிட்டிவ், கேஸ்
சென்சிட்டிவ்
தன்னியக்க முடிவுகளை வரிசைப்படுத்தப் பயன்படுத்தப்படும் முறை. ஒற்றை வாதத்தை ஏற்றுக்கொள்கிறது itemsமற்றும் டைப்ஹெட் நிகழ்வின் நோக்கத்தைக் கொண்டுள்ளது. தற்போதைய வினவலை உடன் குறிப்பிடவும் this.query.
முன்னிலைப்படுத்தி செயல்பாடு அனைத்து இயல்புநிலை பொருத்தங்களையும் முன்னிலைப்படுத்துகிறது தன்னியக்க முடிவுகளை முன்னிலைப்படுத்தப் பயன்படுத்தப்படும் முறை. ஒற்றை வாதத்தை ஏற்றுக்கொள்கிறது itemமற்றும் டைப்ஹெட் நிகழ்வின் நோக்கத்தைக் கொண்டுள்ளது. html ஐ திருப்பி அனுப்ப வேண்டும்.

மார்க்அப்

டைப்ஹெட் செயல்பாட்டுடன் ஒரு உறுப்பைப் பதிவு செய்ய தரவு பண்புக்கூறுகளைச் சேர்க்கவும்.

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

முறைகள்

.typeahead(விருப்பங்கள்)

டைப்ஹெட் மூலம் உள்ளீட்டைத் துவக்குகிறது.