బూట్స్ట్రాప్ కోసం జావాస్క్రిప్ట్

12 అనుకూల j క్వెరీ ప్లగిన్‌లతో -ఇప్పుడు బూట్‌స్ట్రాప్ భాగాలకు జీవం పోయండి .

మోడల్స్

ఒక స్ట్రీమ్‌లైన్డ్, కానీ ఫ్లెక్సిబుల్, సాంప్రదాయ జావాస్క్రిప్ట్ మోడల్ ప్లగ్‌ఇన్‌ని కనీస అవసరమైన కార్యాచరణ మరియు స్మార్ట్ డిఫాల్ట్‌లతో మాత్రమే తీసుకోండి.

డ్రాప్‌డౌన్‌లు

ఈ సాధారణ ప్లగ్‌ఇన్‌తో బూట్‌స్ట్రాప్‌లో దాదాపు దేనికైనా డ్రాప్‌డౌన్ మెనులను జోడించండి. బూట్‌స్ట్రాప్ నావ్‌బార్, ట్యాబ్‌లు మరియు మాత్రలలో పూర్తి డ్రాప్‌డౌన్ మెను మద్దతును కలిగి ఉంది.

Scrollspy

స్క్రోల్ స్థానం ఆధారంగా ప్రస్తుత క్రియాశీల లింక్‌ను చూపడానికి మీ నావ్‌బార్‌లోని లింక్‌లను స్వయంచాలకంగా నవీకరించడానికి scrollspyని ఉపయోగించండి.

టోగుల్ చేయగల ట్యాబ్‌లు

ట్యాబ్‌లు మరియు మాత్రలను స్థానిక కంటెంట్ యొక్క ట్యాబ్ చేయదగిన పేన్‌ల ద్వారా టోగుల్ చేయడానికి అనుమతించడం ద్వారా వాటిని మరింత ఉపయోగకరంగా చేయడానికి ఈ ప్లగ్ఇన్‌ని ఉపయోగించండి.

ఉపకరణ చిట్కాలు

j క్వెరీ టిప్సీ ప్లగ్‌ఇన్‌పై కొత్త టేక్, టూల్‌టిప్‌లు చిత్రాలపై ఆధారపడవు—అవి యానిమేషన్‌ల కోసం CSS3ని మరియు స్థానిక శీర్షిక నిల్వ కోసం డేటా-అట్రిబ్యూట్‌లను ఉపయోగిస్తాయి.

Popovers *

హౌసింగ్ సెకండరీ సమాచారం కోసం ఏదైనా ఎలిమెంట్‌కి iPadలో ఉన్నటువంటి కంటెంట్ యొక్క చిన్న అతివ్యాప్తులను జోడించండి.

* టూల్‌టిప్‌లను చేర్చడం అవసరం

హెచ్చరిక సందేశాలు

హెచ్చరిక ప్లగ్ఇన్ అనేది హెచ్చరికలకు దగ్గరి కార్యాచరణను జోడించడానికి ఒక చిన్న తరగతి.

బటన్లు

బటన్లతో మరిన్ని చేయండి. టూల్‌బార్‌ల వంటి మరిన్ని భాగాల కోసం కంట్రోల్ బటన్ స్టేట్‌మెంట్స్ లేదా బటన్‌ల గ్రూప్‌లను సృష్టించండి.

కుదించు

అకార్డియన్‌లు మరియు నావిగేషన్ వంటి ధ్వంసమయ్యే భాగాల కోసం బేస్ స్టైల్స్ మరియు సౌకర్యవంతమైన మద్దతును పొందండి.

రంగులరాట్నం

మీరు కంటెంట్ యొక్క ఇంటరాక్టివ్ స్లైడ్‌షోను అందించాలనుకునే ఏదైనా కంటెంట్ యొక్క ఉల్లాసవంతమైన-గో-రౌండ్‌ను సృష్టించండి.

టైప్‌హెడ్

ఏదైనా ఫారమ్ టెక్స్ట్ ఇన్‌పుట్‌తో సొగసైన టైప్‌హెడ్‌లను త్వరగా సృష్టించడానికి ప్రాథమిక, సులభంగా పొడిగించబడిన ప్లగ్ఇన్.

పరివర్తనాలు *

సాధారణ పరివర్తన ప్రభావాల కోసం, మోడల్‌లలో స్లయిడ్ చేయడానికి లేదా అలర్ట్‌లను ఫేడ్ అవుట్ చేయడానికి ఒకసారి bootstrap-transition.jsని చేర్చండి.

* ప్లగిన్‌లలో యానిమేషన్ కోసం అవసరం

హెడ్ ​​అప్! అన్ని జావాస్క్రిప్ట్ ప్లగిన్‌లకు j క్వెరీ యొక్క తాజా వెర్షన్ అవసరం.

మోడల్స్ గురించి

ఒక స్ట్రీమ్‌లైన్డ్, కానీ ఫ్లెక్సిబుల్, సాంప్రదాయ జావాస్క్రిప్ట్ మోడల్ ప్లగ్‌ఇన్‌ని కనీస అవసరమైన కార్యాచరణ మరియు స్మార్ట్ డిఫాల్ట్‌లతో మాత్రమే తీసుకోండి.

ఫైల్‌ని డౌన్‌లోడ్ చేయండి

స్టాటిక్ ఉదాహరణ

క్రింద స్థిరంగా రెండర్ చేయబడిన మోడల్ ఉంది.

ప్రత్యక్ష ప్రదర్శన

దిగువ బటన్‌ను క్లిక్ చేయడం ద్వారా javascript ద్వారా మోడల్‌ను టోగుల్ చేయండి. ఇది క్రిందికి జారిపోతుంది మరియు పేజీ ఎగువ నుండి ఫేడ్ అవుతుంది.

డెమో మోడల్‌ని ప్రారంభించండి

బూట్స్ట్రాప్-మోడల్ ఉపయోగించడం

javascript ద్వారా మోడల్‌కి కాల్ చేయండి:

  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('షో')

మాన్యువల్‌గా మోడల్‌ను తెరుస్తుంది.

  1. $ ( '#myModal' ). మోడల్ ( 'షో' )

.modal('దాచు')

మోడల్‌ను మాన్యువల్‌గా దాచిపెడుతుంది.

  1. $ ( '#myModal' ). మోడల్ ( 'దాచు' )

ఈవెంట్స్

బూట్‌స్ట్రాప్ యొక్క మోడల్ క్లాస్ మోడల్ ఫంక్షనాలిటీకి హుకింగ్ చేయడానికి కొన్ని ఈవెంట్‌లను బహిర్గతం చేస్తుంది.

ఈవెంట్ వివరణ
చూపించు ఇన్‌స్టెన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది show.
చూపబడింది మోడల్ వినియోగదారుకు కనిపించినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (css పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
దాచు hideఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది .
దాచబడింది మోడల్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (css పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
  1. $ ( '#myModal' ). ఆన్ ( 'దాచిన' , ఫంక్షన్ () {
  2. // ఏదో ఒకటి చేయి…
  3. })

ScrollSpy ప్లగ్ఇన్ అనేది స్క్రోల్ స్థానం ఆధారంగా nav లక్ష్యాలను స్వయంచాలకంగా నవీకరించడం కోసం.

ఫైల్‌ని డౌన్‌లోడ్ చేయండి

scrollspy తో ఉదాహరణ navbar

దిగువ ప్రాంతాన్ని స్క్రోల్ చేయండి మరియు నావిగేషన్ నవీకరణను చూడండి. డ్రాప్‌డౌన్ ఉప అంశాలు కూడా హైలైట్ చేయబడతాయి. ప్రయత్నించు!

@కొవ్వు

యాడ్ లెగ్గింగ్స్ కీటార్, బ్రంచ్ ఐడి ఆర్ట్ పార్టీ డోలర్ లేబర్. పిచ్‌ఫోర్క్ yr enim lo-fi ముందు వారు క్వి అమ్ముడయ్యారు. Tumblr ఫామ్-టు-టేబుల్ సైకిల్ హక్కులు ఏమైనా. అనిమ్ కెఫియే కార్లెస్ కార్డిగాన్. వెలిట్ సీటన్ మెక్స్వీనీ ఫోటో బూత్ 3 వోల్ఫ్ మూన్ ఇరురే. కాస్బీ స్వెటర్ లోమో జీన్ షార్ట్స్, విలియమ్స్‌బర్గ్ హూడీ మినిమ్ క్వి మీరు బహుశా వాటి గురించి విని ఉండకపోవచ్చు మరియు కార్డిగాన్ ట్రస్ట్ ఫండ్ కల్పా బయోడీజిల్ వెస్ ఆండర్సన్ సౌందర్యం. నిహిల్ టాటూడ్ అక్సామస్, క్రెడ్ ఐరనీ బయోడీజిల్ కెఫియేహ్ ఆర్టిసన్ ఉల్లమ్‌కో కాన్సెప్ట్.

@mdo

వెనియం మార్ఫా మీసం స్కేట్‌బోర్డ్, అడిపిసిసింగ్ ఫ్యూజియాట్ వెలిట్ పిచ్‌ఫోర్క్ గడ్డం. ఫ్రీగాన్ గడ్డం అలిక్వా క్యుపిడాట్ మెక్స్వీనీస్ వెరో. క్యుపిడాటట్ ఫోర్ లోకో నిసి, ఈ హెల్వెటికా నుల్ల కార్లేస్. టాటూడ్ కాస్బీ స్వెటర్ ఫుడ్ ట్రక్, mcsweeney's quis non freegan vinyl. లో-ఫై వెస్ ఆండర్సన్ +1 సార్టోరియల్. కార్లెస్ నాన్ ఈస్తటిక్ ఎక్సర్‌సిటేషన్ క్విస్ జెంట్రిఫై. బ్రూక్లిన్ అడిపిసిసింగ్ క్రాఫ్ట్ బీర్ వైస్ కీటార్ డెసెరెంట్.

ఒకటి

ఓకేకాట్ కమోడో అలిక్వా డెలెక్టస్. ఫ్యాప్ క్రాఫ్ట్ బీర్ డెసెరెంట్ స్కేట్‌బోర్డ్ EA. లోమో సైకిల్ రైట్స్ అడిపిసిసింగ్ బాన్ మై, వెలిట్ ఇఎ సంట్ నెక్స్ట్ లెవల్ లోకావోర్ సింగిల్-ఆరిజిన్ కాఫీ ఇన్ మాగ్నా వెనియమ్. హై లైఫ్ ఐడి వినైల్, ఎకో పార్క్ కన్సీక్వాట్ క్విస్ అలిక్విప్ బాన్ మై పిచ్‌ఫోర్క్. వెరో VHS అడిపిసిసింగ్. 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.

కీటార్ ట్వీ బ్లాగ్, కల్పా మెసెంజర్ బ్యాగ్ మార్ఫా ఏదైనా డెలెక్టస్ ఫుడ్ ట్రక్. సపియంటే సింథ్ ఐడి ఊహ. లోకావోర్ సెడ్ హెల్వెటికా క్లిచ్ ఐరనీ, థండర్‌క్యాట్‌ల గురించి మీరు బహుశా విని ఉండరు హూడీ గ్లూటెన్-ఫ్రీ లో-ఫై ఫ్యాప్ అలిక్విప్. లేబర్ ఎలిట్ ప్లేస్‌అట్ వారు అమ్ముడయ్యే ముందు, టెర్రీ రిచర్డ్‌సన్ ప్రొడెంట్ బ్రంచ్ నెస్సియంట్ క్విస్ కాస్బీ స్వెటర్ ప్యారియటూర్ కెఫియెహ్ యుట్ హెల్వెటికా ఆర్టిసన్. కార్డిగాన్ క్రాఫ్ట్ బీర్ సీటాన్ రెడీమేడ్ వెలిట్. VHS చాంబ్రే లేబర్స్ టెంపర్ వెనియం. అనిమ్ మోలిట్ మినిమ్ కమోడో ఉల్లంకో థండర్‌క్యాట్స్.


bootstrap-scrollspy.jsని ఉపయోగించడం

జావాస్క్రిప్ట్ ద్వారా scrollspyకి కాల్ చేయండి:

  1. $ ( '#navbar' ). scrollspy ()

మార్కప్

మీ టాప్‌బార్ నావిగేషన్‌కు స్క్రోల్‌స్పై ప్రవర్తనను సులభంగా జోడించడానికి, data-spy="scroll"మీరు గూఢచర్యం చేయాలనుకుంటున్న ఎలిమెంట్‌కు జోడించండి (సాధారణంగా ఇది శరీరానికి సంబంధించినది).

  1. <body data-spy = "స్క్రోల్" > ... </body>
హెడ్ ​​అప్! Navbar లింక్‌లు తప్పనిసరిగా పరిష్కరించగల id లక్ష్యాలను కలిగి ఉండాలి. ఉదాహరణకు, <a href="#home">home</a>డోమ్‌లోని ఏదో ఒక దానికి అనుగుణంగా ఉండాలి <div id="home"></div>.

పద్ధతులు

.scrollspy('refresh')

DOM నుండి మూలకాలను జోడించడం లేదా తీసివేయడంతో పాటు scrollspyని ఉపయోగిస్తున్నప్పుడు, మీరు రిఫ్రెష్ పద్ధతిని ఇలా పిలవాలి:

  1. $ ( '[data-spy="scroll"]' ). ప్రతి ( ఫంక్షన్ () {
  2. var $ గూఢచారి = $ ( ఇది ). scrollspy ( 'రిఫ్రెష్' )
  3. });

ఎంపికలు

పేరు రకం డిఫాల్ట్ వివరణ
ఆఫ్సెట్ సంఖ్య 10 స్క్రోల్ యొక్క స్థానాన్ని లెక్కించేటప్పుడు ఎగువ నుండి ఆఫ్‌సెట్ చేయడానికి పిక్సెల్‌లు.

ఈవెంట్స్

ఈవెంట్ వివరణ
సక్రియం చేయండి scrollspy ద్వారా కొత్త ఐటెమ్ యాక్టివేట్ అయినప్పుడల్లా ఈ ఈవెంట్ ఫైర్ అవుతుంది.

ఈ ప్లగ్ఇన్ స్థానిక కంటెంట్ ద్వారా పరివర్తన కోసం శీఘ్ర, డైనమిక్ ట్యాబ్ మరియు పిల్ కార్యాచరణను జోడిస్తుంది.

ఫైల్‌ని డౌన్‌లోడ్ చేయండి

ఉదాహరణ ట్యాబ్‌లు

డ్రాప్‌డౌన్ మెనుల ద్వారా కూడా దాచిన పేన్‌ల మధ్య టోగుల్ చేయడానికి దిగువ ట్యాబ్‌లను క్లిక్ చేయండి.

రా డెనిమ్ జీన్ షార్ట్స్ ఆస్టిన్ గురించి మీరు బహుశా విని ఉండకపోవచ్చు. నెస్సియంట్ టోఫు స్టంప్‌టౌన్ అలిక్వా, రెట్రో సింథ్ మాస్టర్ క్లీన్స్. మీసం క్లిచ్ టెంపర్, విలియమ్స్‌బర్గ్ కార్లెస్ వేగన్ హెల్వెటికా. కసాయి రెట్రో కెఫియే డ్రీమ్‌క్యాచర్ సింథ్‌ను రిప్రెహెండరిట్ చేయండి. కాస్బీ స్వెటర్ eu banh mi, qui irure టెర్రీ రిచర్డ్సన్ ఎక్స్ స్క్విడ్. సాల్వియా సిల్లమ్ ఐఫోన్‌ను అలిక్విప్ చేయండి. సీతాన్ అలిక్విప్ క్విస్ కార్డిగాన్ అమెరికన్ దుస్తులు, బుట్చేర్ వాల్ప్టేట్ నిసి క్వి.

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" > హోమ్ </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>

పద్ధతులు

$().టాబ్

ట్యాబ్ మూలకం మరియు కంటెంట్ కంటైనర్‌ను సక్రియం చేస్తుంది. ట్యాబ్ తప్పనిసరిగా 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" > సందేశాలు </a></li>
  5. <li><a href = "#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. <స్క్రిప్ట్>
  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 యొక్క ఫిక్సీ సస్టైనబుల్ క్వినోవా 8-బిట్ అమెరికన్ దుస్తులు టెర్రీ రిచర్డ్‌సన్ వినైల్ చాంబ్రేని కలిగి ఉన్నాయి . బార్డ్ స్టంప్‌టౌన్, కార్డిగాన్స్ బాన్ మి లోమో థండర్‌క్యాట్స్. టోఫు బయోడీజిల్ విలియమ్స్‌బర్గ్ మార్ఫా, ఫోర్ లోకో మెక్‌స్వీనీస్ క్లీన్స్ వేగన్ చాంబ్రే. నిజంగా వ్యంగ్య కళాకారుడు సంసార కీటార్ , సీన్‌స్టర్ ఫార్మ్-టు-టేబుల్ బ్యాంక్సీ ఆస్టిన్ ట్విట్టర్ హ్యాండిల్ ఫ్రీగాన్ క్రేడ్ రా డెనిమ్ సింగిల్-ఆరిజిన్ కాఫీ వైరల్.


bootstrap-tooltip.jsని ఉపయోగించడం

జావాస్క్రిప్ట్ ద్వారా టూల్‌టిప్‌ను ట్రిగ్గర్ చేయండి:

  1. $ ( '#ఉదాహరణ' ). ఉపకరణ చిట్కా ( ఐచ్ఛికాలు )

ఎంపికలు

పేరు రకం డిఫాల్ట్ వివరణ
యానిమేషన్ బూలియన్ నిజం టూల్‌టిప్‌కు css ఫేడ్ ట్రాన్సిషన్‌ని వర్తింపజేయండి
ప్లేస్మెంట్ స్ట్రింగ్|ఫంక్షన్ 'పైన' టూల్‌టిప్‌ను ఎలా ఉంచాలి - టాప్ | దిగువ | వదిలి | కుడి
సెలెక్టర్ స్ట్రింగ్ తప్పుడు ఎంపిక సాధనం అందించబడితే, టూల్‌టిప్ ఆబ్జెక్ట్‌లు పేర్కొన్న లక్ష్యాలకు కేటాయించబడతాయి.
శీర్షిక స్ట్రింగ్ | ఫంక్షన్ '' `title` ట్యాగ్ లేకపోతే డిఫాల్ట్ టైటిల్ విలువ
ట్రిగ్గర్ స్ట్రింగ్ 'హోవర్' టూల్‌టిప్ ఎలా ట్రిగ్గర్ చేయబడింది - హోవర్ | దృష్టి | మాన్యువల్
ఆలస్యం సంఖ్య | వస్తువు 0

టూల్‌టిప్ (ms) చూపడం మరియు దాచడం ఆలస్యం - మాన్యువల్ ట్రిగ్గర్ రకానికి వర్తించదు

నంబర్ సరఫరా చేయబడితే, దాచు/చూపడం రెండింటికీ ఆలస్యం వర్తించబడుతుంది

వస్తువు నిర్మాణం:delay: { show: 500, hide: 100 }

హెడ్ ​​అప్! వ్యక్తిగత టూల్‌టిప్‌ల కోసం ఎంపికలు ప్రత్యామ్నాయంగా డేటా అట్రిబ్యూట్‌లను ఉపయోగించడం ద్వారా పేర్కొనవచ్చు.

మార్కప్

పనితీరు కారణాల దృష్ట్యా, టూల్‌టిప్ మరియు పాప్‌ఓవర్ డేటా-ఎపిస్‌లు ఎంపిక చేయబడ్డాయి. మీరు వాటిని ఉపయోగించాలనుకుంటే సెలెక్టర్ ఎంపికను పేర్కొనండి.

  1. <a href = "#" rel = "tooltip" title = "మొదటి టూల్‌టిప్" > నాపై హోవర్ చేయి </a>

పద్ధతులు

$().ఉపకరణ చిట్కా(ఎంపికలు)

ఎలిమెంట్ సేకరణకు టూల్‌టిప్ హ్యాండ్లర్‌ను జోడిస్తుంది.

.టూల్‌టిప్('షో')

మూలకం యొక్క టూల్‌టిప్‌ను వెల్లడిస్తుంది.

  1. $ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'షో' )

.ఉపకరణ చిట్కా('దాచు')

మూలకం యొక్క ఉపకరణ చిట్కాను దాచిపెడుతుంది.

  1. $ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'దాచు' )

.టూల్‌టిప్('టోగుల్')

మూలకం యొక్క టూల్‌టిప్‌ను టోగుల్ చేస్తుంది.

  1. $ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'టోగుల్' )

popovers గురించి

హౌసింగ్ సెకండరీ సమాచారం కోసం ఏదైనా ఎలిమెంట్‌కి iPadలో ఉన్నటువంటి కంటెంట్ యొక్క చిన్న అతివ్యాప్తులను జోడించండి.

* టూల్‌టిప్‌ను చేర్చడం అవసరం

ఫైల్‌ని డౌన్‌లోడ్ చేయండి

ఉదాహరణ హోవర్ పాప్‌ఓవర్

పాప్‌ఓవర్‌ని ట్రిగ్గర్ చేయడానికి బటన్‌పై హోవర్ చేయండి.


bootstrap-popover.jsని ఉపయోగించడం

జావాస్క్రిప్ట్ ద్వారా పాపవర్‌లను ప్రారంభించండి:

  1. $ ( '#ఉదాహరణ' ). popover ( ఐచ్ఛికాలు )

ఎంపికలు

పేరు రకం డిఫాల్ట్ వివరణ
యానిమేషన్ బూలియన్ నిజం టూల్‌టిప్‌కు css ఫేడ్ ట్రాన్సిషన్‌ని వర్తింపజేయండి
ప్లేస్మెంట్ స్ట్రింగ్|ఫంక్షన్ 'కుడి' పాప్‌ఓవర్‌ను ఎలా ఉంచాలి - టాప్ | దిగువ | వదిలి | కుడి
సెలెక్టర్ స్ట్రింగ్ తప్పుడు ఎంపిక సాధనం అందించబడితే, టూల్‌టిప్ ఆబ్జెక్ట్‌లు పేర్కొన్న లక్ష్యాలకు కేటాయించబడతాయి
ట్రిగ్గర్ స్ట్రింగ్ 'హోవర్' టూల్‌టిప్ ఎలా ట్రిగ్గర్ చేయబడింది - హోవర్ | దృష్టి | మాన్యువల్
శీర్షిక స్ట్రింగ్ | ఫంక్షన్ '' `title` లక్షణం లేకుంటే డిఫాల్ట్ శీర్షిక విలువ
విషయము స్ట్రింగ్ | ఫంక్షన్ '' `డేటా-కంటెంట్` లక్షణం లేకుంటే డిఫాల్ట్ కంటెంట్ విలువ
ఆలస్యం సంఖ్య | వస్తువు 0

popover (ms) చూపడం మరియు దాచడం ఆలస్యం - మాన్యువల్ ట్రిగ్గర్ రకానికి వర్తించదు

నంబర్ సరఫరా చేయబడితే, దాచు/చూపడం రెండింటికీ ఆలస్యం వర్తించబడుతుంది

వస్తువు నిర్మాణం:delay: { show: 500, hide: 100 }

హెడ్ ​​అప్! వ్యక్తిగత పాప్‌ఓవర్‌ల కోసం ఎంపికలు ప్రత్యామ్నాయంగా డేటా అట్రిబ్యూట్‌లను ఉపయోగించడం ద్వారా పేర్కొనవచ్చు.

మార్కప్

పనితీరు కారణాల దృష్ట్యా, టూల్‌టిప్ మరియు పాప్‌ఓవర్ డేటా-ఎపిస్‌లు ఎంపిక చేయబడ్డాయి. మీరు వాటిని ఉపయోగించాలనుకుంటే సెలెక్టర్ ఎంపికను పేర్కొనండి.

పద్ధతులు

$().popover(ఎంపికలు)

మూలకాల సేకరణ కోసం పాప్‌ఓవర్‌లను ప్రారంభిస్తుంది.

.popover('షో')

పాప్‌ఓవర్ మూలకాలను వెల్లడిస్తుంది.

  1. $ ( '#మూలకం' ). popover ( 'షో' )

.popover('దాచు')

పాప్‌ఓవర్ మూలకాలను దాచిపెడుతుంది.

  1. $ ( '#మూలకం' ). popover ( 'దాచు' )

.popover('టోగుల్')

ఎలిమెంట్స్ పాప్‌ఓవర్‌ని టోగుల్ చేస్తుంది.

  1. $ ( '#మూలకం' ). popover ( 'టోగుల్' )

హెచ్చరికల గురించి

హెచ్చరిక ప్లగ్ఇన్ అనేది హెచ్చరికలకు దగ్గరి కార్యాచరణను జోడించడానికి ఒక చిన్న తరగతి.

డౌన్‌లోడ్ చేయండి

ఉదాహరణ హెచ్చరికలు

హెచ్చరికల ప్లగ్ఇన్ సాధారణ హెచ్చరిక సందేశాలపై పని చేస్తుంది మరియు సందేశాలను బ్లాక్ చేస్తుంది.

పవిత్ర గ్వాకామోల్! ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు.

ఓహ్ స్నాప్! మీకు లోపం వచ్చింది!

ఇది మరియు దానిని మార్చండి మరియు మళ్లీ ప్రయత్నించండి. డ్యూయిస్ మోల్లిస్, ఈస్ట్ నాన్ కమోడో లక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా, ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్. క్రాస్ మాటిస్ కాన్సెక్టెచర్ పురస్ సిట్ అమెట్ ఫెర్మెంటమ్.

ఈ చర్య తీసుకోండి లేదా ఇలా చేయండి


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లో చెక్‌బాక్స్ స్టైల్ టోగులింగ్ కోసం డేటా-టోగుల్="buttons-checkbox"ని జోడించండి -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > ఎడమ </button>
  7. <button class = "btn" > మిడిల్ </button>
  8. <button class = "btn" > కుడివైపు </button>
  9. </div>
  10.  
  11. <!-- btn-group -->లో రేడియో స్టైల్ టోగులింగ్ కోసం డేటా-టోగుల్="buttons-radio"ని జోడించండి
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > ఎడమ </button>
  14. <button class = "btn" > మిడిల్ </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 = "stuff లోడ్ అవుతోంది..." > ... </button>
హెడ్ ​​అప్! Firefox పేజీ లోడ్‌ల అంతటా నిలిపివేయబడిన స్థితిని కొనసాగిస్తుంది . దీని కోసం ఒక ప్రత్యామ్నాయం ఉపయోగించడం autocomplete="off".

$().బటన్('రీసెట్')

బటన్ స్థితిని రీసెట్ చేస్తుంది - వచనాన్ని అసలు వచనానికి మారుస్తుంది.

$().బటన్(స్ట్రింగ్)

బటన్ స్థితిని రీసెట్ చేస్తుంది - ఏదైనా డేటా నిర్వచించిన టెక్స్ట్ స్థితికి వచనాన్ని మార్చుకుంటుంది.

  1. <button class = "btn" data-complete-text = "పూర్తయింది!" > ... </button>
  2. <స్క్రిప్ట్>
  3. $ ( '.btn' ). బటన్ ( 'పూర్తి' )
  4. </script>

గురించి

అకార్డియన్‌లు మరియు నావిగేషన్ వంటి ధ్వంసమయ్యే భాగాల కోసం బేస్ స్టైల్స్ మరియు సౌకర్యవంతమైన మద్దతును పొందండి.

ఫైల్‌ని డౌన్‌లోడ్ చేయండి

* పరివర్తనాల ప్లగ్ఇన్‌ని చేర్చడం అవసరం.

ఉదాహరణ అకార్డియన్

కూలిపోయే ప్లగ్ఇన్‌ని ఉపయోగించి, మేము ఒక సాధారణ అకార్డియన్ స్టైల్ విడ్జెట్‌ను రూపొందించాము:

అనిమ్ పరియతుర్ క్లిచ్ రిప్రెహెండెరిట్, ఎనిమ్ ఐయుస్మోడ్ హై లైఫ్ అక్యుసామస్ టెర్రీ రిచర్డ్సన్ యాడ్ స్క్విడ్. 3 వోల్ఫ్ మూన్ అఫిసియా ఆట్, నాన్ క్యుపిడాట్ స్కేట్‌బోర్డ్ డోలర్ బ్రంచ్. ఫుడ్ ట్రక్ quinoa nesciunt లేబర్ eiusmod. బ్రంచ్ 3 వోల్ఫ్ మూన్ టెంపర్, సన్ట్ అలిక్వా దానిపై ఒక పక్షిని ఉంచింది స్క్విడ్ సింగిల్-ఆరిజిన్ కాఫీ నుల్లా అసుమెండా షోరెడిచ్ ఎట్. నిహిల్ అనిమ్ కెఫియేహ్ హెల్వెటికా, క్రాఫ్ట్ బీర్ లేబర్ వెస్ ఆండర్సన్ క్రెడిట్ నెస్సియంట్ సేపియంటే ఇయా ప్రొడెడెంట్. ప్రకటన శాకాహారి మినహాయింపు కసాయి వైస్ లోమో. లెగ్గింగ్స్ ఓకేకాట్ క్రాఫ్ట్ బీర్ ఫార్మ్-టు-టేబుల్, ముడి డెనిమ్ ఈస్తటిక్ సింథ్ నెస్సియంట్ మీరు వాటిని ఆక్యుముస్ లేబర్ సస్టైనబుల్ VHS గురించి విని ఉండకపోవచ్చు.
అనిమ్ పరియతుర్ క్లిచ్ రిప్రెహెండెరిట్, ఎనిమ్ ఐయుస్మోడ్ హై లైఫ్ అక్యుసామస్ టెర్రీ రిచర్డ్సన్ యాడ్ స్క్విడ్. 3 వోల్ఫ్ మూన్ అఫిసియా ఆట్, నాన్ క్యుపిడాట్ స్కేట్‌బోర్డ్ డోలర్ బ్రంచ్. ఫుడ్ ట్రక్ quinoa nesciunt లేబర్ eiusmod. బ్రంచ్ 3 వోల్ఫ్ మూన్ టెంపర్, సన్ట్ అలిక్వా దానిపై ఒక పక్షిని ఉంచింది స్క్విడ్ సింగిల్-ఆరిజిన్ కాఫీ నుల్లా అసుమెండా షోరెడిచ్ ఎట్. నిహిల్ అనిమ్ కెఫియేహ్ హెల్వెటికా, క్రాఫ్ట్ బీర్ లేబర్ వెస్ ఆండర్సన్ క్రెడిట్ నెస్సియంట్ సేపియంటే ఇయా ప్రొడెడెంట్. ప్రకటన శాకాహారి మినహాయింపు కసాయి వైస్ లోమో. లెగ్గింగ్స్ ఓకేకాట్ క్రాఫ్ట్ బీర్ ఫార్మ్-టు-టేబుల్, ముడి డెనిమ్ ఈస్తటిక్ సింథ్ నెస్సియంట్ మీరు వాటిని ఆక్యుముస్ లేబర్ సస్టైనబుల్ VHS గురించి విని ఉండకపోవచ్చు.
అనిమ్ పరియతుర్ క్లిచ్ రిప్రెహెండెరిట్, ఎనిమ్ ఐయుస్మోడ్ హై లైఫ్ అక్యుసామస్ టెర్రీ రిచర్డ్సన్ యాడ్ స్క్విడ్. 3 వోల్ఫ్ మూన్ అఫిసియా ఆట్, నాన్ క్యుపిడాట్ స్కేట్‌బోర్డ్ డోలర్ బ్రంచ్. ఫుడ్ ట్రక్ quinoa nesciunt లేబర్ eiusmod. బ్రంచ్ 3 వోల్ఫ్ మూన్ టెంపర్, సన్ట్ అలిక్వా దానిపై ఒక పక్షిని ఉంచింది స్క్విడ్ సింగిల్-ఆరిజిన్ కాఫీ నుల్లా అసుమెండా షోరెడిచ్ ఎట్. నిహిల్ అనిమ్ కెఫియేహ్ హెల్వెటికా, క్రాఫ్ట్ బీర్ లేబర్ వెస్ ఆండర్సన్ క్రెడిట్ నెస్సియంట్ సేపియంటే ఇయా ప్రొడెడెంట్. ప్రకటన శాకాహారి మినహాయింపు కసాయి వైస్ లోమో. లెగ్గింగ్స్ ఓకేకాట్ క్రాఫ్ట్ బీర్ ఫార్మ్-టు-టేబుల్, ముడి డెనిమ్ ఈస్తటిక్ సింథ్ నెస్సియంట్ మీరు వాటిని ఆక్యుముస్ లేబర్ సస్టైనబుల్ VHS గురించి విని ఉండకపోవచ్చు.

bootstrap-collapse.jsని ఉపయోగించడం

జావాస్క్రిప్ట్ ద్వారా ప్రారంభించండి:

  1. $ ( ".కూలిపోవు" ). పతనం ()

ఎంపికలు

పేరు రకం డిఫాల్ట్ వివరణ
తల్లిదండ్రులు సెలెక్టర్ తప్పుడు సెలెక్టర్ అయితే, ఈ ధ్వంసమయ్యే అంశం చూపబడినప్పుడు పేర్కొన్న పేరెంట్ కింద అన్ని ధ్వంసమయ్యే అంశాలు మూసివేయబడతాయి. (సాంప్రదాయ అకార్డియన్ ప్రవర్తన వలె)
టోగుల్ బూలియన్ నిజం ఆహ్వానంపై ధ్వంసమయ్యే మూలకాన్ని టోగుల్ చేస్తుంది

మార్కప్

ధ్వంసమయ్యే మూలకం యొక్క నియంత్రణను స్వయంచాలకంగా కేటాయించడానికి మూలకాన్ని జోడించి data-toggle="collapse"a data-targetto ఎలిమెంట్ చేయండి. data-targetపతనాన్ని వర్తింపజేయడానికి లక్షణం css ఎంపికను అంగీకరిస్తుంది . collapseధ్వంసమయ్యే మూలకానికి తరగతిని జోడించాలని నిర్ధారించుకోండి . మీరు దీన్ని డిఫాల్ట్‌గా తెరవాలనుకుంటే, అదనపు తరగతిని జోడించండి in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" 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('షో')

ధ్వంసమయ్యే మూలకాన్ని చూపుతుంది.

.collapse('దాచు')

ధ్వంసమయ్యే మూలకాన్ని దాచిపెడుతుంది.

ఈవెంట్స్

బూట్‌స్ట్రాప్ యొక్క పతనం క్లాస్ పతనం కార్యాచరణలోకి హుక్ చేయడం కోసం కొన్ని ఈవెంట్‌లను బహిర్గతం చేస్తుంది.

ఈవెంట్ వివరణ
చూపించు ఇన్‌స్టెన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది show.
చూపబడింది పతనం మూలకం వినియోగదారుకు కనిపించినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (css పరివర్తనాలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
దాచు hideపద్ధతిని పిలిచినప్పుడు ఈ సంఘటన వెంటనే తొలగించబడుతుంది .
దాచబడింది వినియోగదారు నుండి పతనం మూలకం దాచబడినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (css పరివర్తనాలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
  1. $ ( '#myCollapsible' ). ఆన్ ( 'దాచిన' , ఫంక్షన్ () {
  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(ఎంపికలు)

టైప్‌హెడ్‌తో ఇన్‌పుట్‌ను ప్రారంభిస్తుంది.