जाभास्क्रिप्ट

बुटस्ट्र्यापका कम्पोनेन्टहरूलाई जीवन्त बनाउनुहोस्—अहिले १३ अनुकूलन jQuery प्लगइनहरूसँग।

हेड अप! यी कागजातहरू v2.3.2 का लागि हुन्, जुन अब आधिकारिक रूपमा समर्थित छैन। Bootstrap को नवीनतम संस्करण जाँच गर्नुहोस्!

व्यक्तिगत वा संकलित

प्लगइनहरू व्यक्तिगत रूपमा समावेश गर्न सकिन्छ (यद्यपि केहीमा निर्भरता आवश्यक छ), वा सबै एकैचोटि। bootstrap.jsbootstrap.min.js दुबै एकल फाइलमा सबै प्लगइनहरू समावेश गर्दछ।

डाटा विशेषताहरू

तपाईले सबै बुटस्ट्र्याप प्लगइनहरू मार्कअप API मार्फत जाभास्क्रिप्टको एकल लाइन नलिइकन प्रयोग गर्न सक्नुहुन्छ। यो बुटस्ट्र्यापको पहिलो कक्षा API हो र प्लगइन प्रयोग गर्दा तपाईंको पहिलो विचार हुनुपर्छ।

उनले भने, केही परिस्थितिहरूमा यो कार्यक्षमता बन्द गर्न वांछनीय हुन सक्छ। तसर्थ, हामी `डेटा-एपीआई'` सँग बडी नेमस्पेसमा भएका सबै घटनाहरूलाई अनबाइन्ड गरेर डाटा विशेषता API असक्षम गर्ने क्षमता पनि प्रदान गर्छौं। यो यस्तो देखिन्छ:

  1. $ ( 'शरीर' )। बन्द ( '.data-api' )

वैकल्पिक रूपमा, एक विशेष प्लगइनलाई लक्षित गर्न, केवल प्लगइनको नाम नाम स्थानको रूपमा समावेश गर्नुहोस् डेटा-एपीआई नेमस्पेस जस्तै:

  1. $ ( 'शरीर' )। बन्द ( '.alert.data-api' )

प्रोग्रामेटिक API

हामी यो पनि विश्वास गर्छौं कि तपाइँ जाभास्क्रिप्ट API मार्फत सबै बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न सक्षम हुनुपर्दछ। सबै सार्वजनिक API हरू एकल, चेनयोग्य विधिहरू हुन्, र कार्य गरिएको सङ्कलन फिर्ता गर्नुहोस्।

  1. $ ( ".btn. खतरा" )। बटन ( "टगल" )। addClass ( "फ्याट" )

सबै विधिहरूले एक वैकल्पिक विकल्प वस्तु, एक विशेष विधिलाई लक्षित गर्ने स्ट्रिङ, वा केही पनि (जसले पूर्वनिर्धारित व्यवहारसँग प्लगइन प्रारम्भ गर्छ) स्वीकार गर्नुपर्छ।

  1. $ ( "#myModal" )। मोडल () // पूर्वनिर्धारितसँग प्रारम्भ गरिएको
  2. $ ( "#myModal" )। मोडल ({ किबोर्ड : गलत }) // किबोर्ड बिना प्रारम्भ गरिएको
  3. $ ( "#myModal" )। मोडल ( 'शो' ) // प्रारम्भिक र तुरुन्तै देखाउन आह्वान गर्दछ

प्रत्येक प्लगइनले यसको कच्चा कन्स्ट्रक्टरलाई 'कन्स्ट्रक्टर' गुणमा पनि उजागर गर्दछ $.fn.popover.Constructor:। यदि तपाइँ एक विशेष प्लगइन उदाहरण प्राप्त गर्न चाहनुहुन्छ भने, यसलाई सिधै तत्वबाट पुन: प्राप्त गर्नुहोस् $('[rel=popover]').data('popover'):।

कुनै द्वन्द्व छैन

कहिलेकाहीँ यो अन्य UI फ्रेमवर्कको साथ बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न आवश्यक छ। यी परिस्थितिहरूमा, नेमस्पेस टक्करहरू कहिलेकाहीं हुन सक्छ। यदि यो हुन्छ भने, तपाईले .noConflictप्लगइनलाई कल गर्न सक्नुहुन्छ जुन तपाईले मान उल्टाउन चाहानुहुन्छ।

  1. var बुटस्ट्र्याप बटन = $ fn बटन noConflict () // पहिले तोकिएको मानमा $.fn.button फर्काउनुहोस्
  2. $ fn bootstrapBtn = bootstrapButton // $().bootstrapBtn बुटस्ट्र्याप कार्यक्षमता दिनुहोस्

घटनाहरू

बुटस्ट्र्यापले धेरै जसो प्लगइनको अद्वितीय कार्यहरूको लागि अनुकूल घटनाहरू प्रदान गर्दछ। सामान्यतया, यी एक अनन्त र विगत पार्टिसिपल फारममा आउँछन् - जहाँ इन्फिनिटिभ (उदा। show) घटनाको सुरुमा ट्रिगर हुन्छ, र यसको विगतको पार्टिसिपल फारम (उदा। shown) कार्य पूरा भएपछि ट्रिगर हुन्छ।

सबै अनन्त घटनाहरूले पूर्वनिर्धारित कार्यक्षमता रोकथाम प्रदान गर्दछ। यसले यो सुरु हुनु अघि कार्यको कार्यान्वयन रोक्न सक्ने क्षमता प्रदान गर्दछ।

  1. $ ( '#myModal' )। अन ( 'देखाउनुहोस्' , प्रकार्य ( ) {
  2. यदि (! डाटा ) फिर्ता . रोकथाम पूर्वनिर्धारित () // मोडल देखाउन रोक्छ
  3. })

संक्रमण बारे

साधारण संक्रमण प्रभावहरूको लागि, अन्य JS फाइलहरूसँगै bootstrap-transition.js समावेश गर्नुहोस्। यदि तपाइँ कम्पाइल गरिएको (वा मिनिफाइड) bootstrap.js प्रयोग गर्दै हुनुहुन्छ भने , यो समावेश गर्न आवश्यक छैन - यो पहिले नै त्यहाँ छ।

केसहरू प्रयोग गर्नुहोस्

ट्रान्जिसन प्लगइनका केही उदाहरणहरू:

  • मोडलहरूमा स्लाइडिङ वा फेडिङ
  • ट्याबहरू फेड गर्दै
  • अलर्ट आउट गर्दै
  • क्यारोसेल प्यानहरू स्लाइड गर्दै

उदाहरणहरू

मोडलहरू सुव्यवस्थित, तर लचिलो, न्यूनतम आवश्यक कार्यक्षमता र स्मार्ट पूर्वनिर्धारितहरूसँग संवाद प्रम्प्टहरू छन्।

स्थिर उदाहरण

हेडर, शरीर, र फुटरमा कार्यहरूको सेटको साथ रेन्डर गरिएको मोडल।

  1. <div वर्ग = "मोडल लुकाउने फेड" >
  2. <div वर्ग = "मोडल-हेडर" >
  3. <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-लुकेको = "सत्य" > &समय; </ बटन>
  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" > डेमो मोडल सुरु गर्नुहोस् </a>
  3.  
  4. <!-- मोडल -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = " dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div वर्ग = "मोडल-हेडर" >
  7. <बटन प्रकार = "बटन" वर्ग = "क्लोज" डेटा-डिसमिस = "मोडल" एरिया-लुकेको = "सत्य" > × </ बटन>
  8. <h3 id = "myModalLabel" > मोडल हेडर </ 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" > बन्द गर्नुहोस् </ बटन>
  15. <बटन वर्ग = "btn btn-प्राथमिक" > परिवर्तनहरू बचत गर्नुहोस् </ बटन>
  16. </div>
  17. </div>

प्रयोग

डाटा विशेषताहरू मार्फत

जाभास्क्रिप्ट नलेखन मोडल सक्रिय गर्नुहोस्। data-toggle="modal"एक बटन जस्तै एक नियन्त्रक तत्व मा सेट गर्नुहोस् , एक संग data-target="#foo"वा href="#foo"टगल गर्न एक विशेष मोडल लक्षित गर्न।

  1. <बटन प्रकार = "बटन" डेटा-टगल = "मोडल" डाटा-लक्ष्य = "#myModal" > मोडल सुरु गर्नुहोस् </ बटन>

जाभास्क्रिप्ट मार्फत

myModalजाभास्क्रिप्टको एकल लाइनको साथ आईडीको साथ मोडल कल गर्नुहोस् :

  1. $ ( '#myModal' )। मोडल ( विकल्प )

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-backdrop=""

नाम प्रकार पूर्वनिर्धारित विवरण
पृष्ठभूमि बुलियन सत्य मोडल ब्याकड्रप तत्व समावेश गर्दछ। वैकल्पिक रूपमा, staticब्याकड्रपको लागि निर्दिष्ट गर्नुहोस् जसले क्लिकमा मोडल बन्द गर्दैन।
किबोर्ड बुलियन सत्य एस्केप कुञ्जी थिच्दा मोडल बन्द गर्छ
देखाउनु बुलियन सत्य प्रारम्भ गर्दा मोडल देखाउँछ।
रिमोट बाटो गलत

यदि रिमोट url प्रदान गरिएको छ भने, सामग्री jQuery को विधि मार्फत लोड गरिनेछ loadर मा इन्जेक्ट गरिनेछ .modal-body। यदि तपाइँ डेटा एपीआई प्रयोग गर्दै हुनुहुन्छ भने, तपाइँ वैकल्पिक hrefरूपमा टाढाको स्रोत निर्दिष्ट गर्न ट्याग प्रयोग गर्न सक्नुहुन्छ। यसको उदाहरण तल देखाइएको छ:

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

विधिहरू

मोडल (विकल्पहरू)

तपाईंको सामग्रीलाई मोडलको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object

  1. $ ( '#myModal' )। मोडल ({
  2. किबोर्ड : गलत
  3. })

मोडल ('टगल')

म्यानुअल रूपमा मोडल टगल गर्दछ।

  1. $ ( '#myModal' )। मोडल ( 'टगल' )

मोडल ('शो')

म्यानुअल रूपमा मोडल खोल्छ।

  1. $ ( '#myModal' )। मोडल ( 'शो' )

मोडल ('लुकाउनुहोस्')

म्यानुअल रूपमा मोडल लुकाउँछ।

  1. $ ( '#myModal' )। मोडल ( 'लुकाउनुहोस्' )

घटनाहरू

बुटस्ट्र्यापको मोडल क्लासले मोडल प्रकार्यतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।

घटना विवरण
देखाउनु showउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
देखाइयो यो घटना तब निकालिन्छ जब मोडल प्रयोगकर्तालाई देख्न सकिन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
लुकाउनुहोस् यो घटना तुरुन्तै निकालिएको छ जब hideउदाहरण विधि कल गरिएको छ।
लुकेको मोडल प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
  1. $ ( '#myModal' )। मा ( 'लुकेको' , प्रकार्य () {
  2. // केही गर…
  3. })

navbar मा उदाहरण

ScrollSpy प्लगइन स���क्रोल स्थितिमा आधारित एनएभि लक्ष्यहरू स्वचालित रूपमा अद्यावधिक गर्नको लागि हो। नेभबार तलको क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्। ड्रपडाउन उप वस्तुहरू पनि हाइलाइट गरिनेछ।

@मोटो

Ad leggings keytar, brunch id art Party dolor labore। Pitchfork yr enim lo-fi तिनीहरूले qui बेच्नु अघि। Tumblr फार्म-टू-टेबल साइकल अधिकारहरू जे भए पनि। एनिम केफियेह कार्ल्स कार्डिगन। Velit seitan mcsweeney को फोटो बूथ 3 wolf moon irure। Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तपाईंले सायद तिनीहरूको बारेमा सुन्नु भएको छैन र कार्डिगन ट्रस्ट फन्ड culpa बायोडिजल वेस एन्डरसन एस्थेटिक। निहिल ट्याटू आरोप, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लाम्को परिणाम।

@mdo

भेनिअम मार्फा जुँगाको स्केटबोर्ड, फ्यूगियाट भेलिट पिचफोर्क दाढी। फ्रिगन बियर्ड एलिक्वा कपिडाट म्याक्सस्वीनीको वेरो। Cupidatat चार loko nisi, ea helvetica nulla carles। ट्याटू कोस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl। लो-फाई वेस एन्डरसन +1 सारटोरियल। Carles गैर सौन्दर्य व्यायाम quis gentrify। ब्रुकलिन एडिपिसिसिंग क्राफ्ट बियर वाइस कीटार डेजरन्ट।

एउटा

Occaecat commodo aliqua delectus। फ्याप क्राफ्ट बियर डेजरन्ट स्केटबोर्ड ईए। लोमो साइकल राइट्स एडिपिसिसिङ बान मी, वेलिट ईए सुन्ट नेक्स्ट लेवल लोकाभोर सिंगल-ओरिजिन कफी इन म्याग्ना भेनिअम। उच्च जीवन आईडी विनाइल, इको पार्क परिणाम quis aliquip banh mi pitchfork। Vero VHS राम्रो छ। 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 blog, culpa messenger bag marfa जे भए पनि डेलेक्टस फूड ट्रक। Sapiente synth id assumenda। Locavore sed helvetica cliche irony, thundercats तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन जसको फलस्वरूप हुडी ग्लुटेन-मुक्त lo-fi fap aliquip। लेबोर एलिट प्लेसिएट बेच्नु भन्दा पहिले, टेरी रिचर्डसन प्रोडेन्ट ब्रंच नेसियन्ट क्विस कोस्बी स्वेटर परियातुर केफियेह यूट हेल्भेटिका आर्टिसन। कार्डिगन क्राफ्ट बियर सेटन रेडिमेड वेलिट। VHS च्याम्ब्रे श्रम टेम्पोर वेनिअम। एनिम मोलिट मिनिम कमोडो उल्लाम्को थन्डरक्याट्स।


प्रयोग

डाटा विशेषताहरू मार्फत

तपाईको टपबार नेभिगेसनमा सजिलैसँग scrollspy व्यवहार थप्नको data-spy="scroll"लागि, तपाईले जासुसी गर्न चाहनु भएको तत्वमा थप्नुहोस् (सामान्यतया यो शरीर हुनेछ) र data-target=".navbar"कुन nav प्रयोग गर्ने छनौट गर्न। तपाइँ एक .navघटक संग scrollspy प्रयोग गर्न चाहानुहुन्छ।

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

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत scrollspy कल गर्नुहोस्:

  1. $ ( '#navbar' )। scrollspy ()
हेड अप! Navbar लिङ्कहरूमा समाधान गर्न मिल्ने आईडी लक्ष्यहरू हुनुपर्छ। उदाहरण को लागी, <a href="#home">home</a>डोम मा केहि संग मेल खानु पर्छ जस्तै <div id="home"></div>

विधिहरू

.scrollspy('रिफ्रेस')

DOM बाट तत्वहरू थप्ने वा हटाउने संयोजनमा scrollspy प्रयोग गर्दा, तपाईंले रिफ्रेस विधिलाई यसरी कल गर्न आवश्यक छ:

  1. $ ( '[डेटा-स्पाई="स्क्रोल"]' )। प्रत्येक ( प्रकार्य () {
  2. var $spy = $ ( यो )। scrollspy ( 'रिफ्रेस' )
  3. });

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset=""

नाम प्रकार पूर्वनिर्धारित विवरण
अफसेट संख्या १० स्क्रोलको स्थिति गणना गर्दा माथिबाट अफसेट गर्न पिक्सेलहरू।

घटनाहरू

घटना विवरण
सक्रिय गर्नुहोस् स्क्रोलस्पाइ द्वारा कुनै नयाँ वस्तु सक्रिय हुँदा यो घटना सक्रिय हुन्छ।

उदाहरण ट्याबहरू

द्रुत, गतिशील ट्याब कार्यक्षमता थप्नुहोस् स्थानीय सामग्रीको प्यानहरू मार्फत, ड्रपडाउन मेनुहरू मार्फत पनि।

कच्चा डेनिम तपाईंले सायद तिनीहरूको जीन शर्ट्स अस्टिन सुन्नु भएको छैन। Nesciunt tofu stumptown aliqua, retro synth master cleanse। Mustache cliche tempor, Williamsburg Carles Vegan helvetica। Reprehenderit butcher retro keffiyeh dreamcatcher synth। कोस्बी स्वेटर eu banh mi, qui irure टेरी रिचर्डसन पूर्व स्क्विड। एलिक्विप प्लेसट साल्विया सिलम आईफोन। Seitan aliquip quis cardigan अमेरिकी परिधान, butcher 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. e _ रोकथाम पूर्वनिर्धारित ();
  3. $ ( यो )। ट्याब ( 'देखाउनुहोस्' );
  4. })

तपाईले व्यक्तिगत ट्याबहरूलाई धेरै तरिकामा सक्रिय गर्न सक्नुहुन्छ:

  1. $ ( '#myTab a[href="#profile"]' )। ट्याब ( 'देखाउनुहोस्' ); // नाम द्वारा ट्याब चयन गर्नुहोस्
  2. $ ( '#myTab a:first' )। ट्याब ( 'देखाउनुहोस्' ); // पहिलो ट्याब चयन गर्नुहोस्
  3. $ ( '#myTab a:last' )। ट्याब ( 'देखाउनुहोस्' ); // अन्तिम ट्याब चयन गर्नुहोस्
  4. $ ( '#myTab li:eq(2) a' )। ट्याब ( 'देखाउनुहोस्' ); // तेस्रो ट्याब चयन गर्नुहोस् (०-अनुक्रमित)

मार्कअप

तपाईले कुनै पनि जाभास्क्रिप्ट नलिइकन मात्र निर्दिष्ट गरेर 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" > Messages </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > सेटिङहरू </a></li>
  6. </ul>

विधिहरू

$() ट्याब

ट्याब तत्व र सामग्री कन्टेनर सक्रिय गर्दछ। ट्याबमा या त एक data-targetवा hrefDOM मा कन्टेनर नोड लक्षित हुनुपर्छ।

  1. <ul class = "nav nav - tabs" id = "myTab" >
  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 वर्ग = "ट्याब-सामग्री" >
  9. <div class = "ट्याब-फलक सक्रिय" id = "घर" > ... </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.targetevent.relatedTargetक्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न।
देखाइयो ट्याब देखाइएपछि यो घटना ट्याब शोमा सक्रिय हुन्छ। प्रयोग गर्नुहोस् event.targetevent.relatedTargetक्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न।
  1. $ ( 'a[data-toggle="tab"]' )। अन ( 'देखाइएको' , प्रकार्य ( ) {
  2. e _ लक्ष्य // सक्रिय ट्याब
  3. e _ सम्बन्धित लक्ष्य // अघिल्लो ट्याब
  4. })

उदाहरणहरू

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइनबाट प्रेरित; टूलटिपहरू एक अद्यावधिक संस्करण हो, जुन छविहरूमा भर पर्दैन, एनिमेसनको लागि CSS3 प्रयोग गर्नुहोस्, र स्थानीय शीर्षक भण्डारणको लागि डेटा-विशेषताहरू।

कार्यसम्पादन कारणहरूका लागि, टूलटिप र पपओभर डाटा-एपिसहरू अप्ट इन छन्, यसको मतलब तपाईंले तिनीहरूलाई आफैं सुरु गर्नुपर्छ

टूलटिपहरू हेर्न तलका लिङ्कहरूमा होभर गर्नुहोस्:

टाइट प्यान्ट अर्को स्तर केफियेह तपाईंले सायद तिनीहरूको बारेमा सुन्नु भएको छैन। फोटो बूथ दाढी कच्चा डेनिम लेटरप्रेस शाकाहारी मेसेन्जर ब्याग स्टम्पटाउन। फार्म-टू-टेबल सेटन, mcsweeney's fixie सस्टेनेबल क्विनोआ 8-बिट अमेरिकी परिधानमा टेरी रिचर्डसन विनाइल च्याम्ब्रे । बियर्ड स्टम्पटाउन, कार्डिगन्स बन मी लोमो थन्डरक्याट्स। टोफु बायोडिजेल विलियम्सबर्ग मार्फा, चार लोको म्याकस्वीनीको क्लिन्ज शाकाहारी च्याम्ब्रे। एक साँच्चै विडम्बनापूर्ण कारीगर जुनसुकै कीटार, सीनस्टर फार्म-टू-टेबल बैंक्सी अस्टिन ट्विटर ह्यान्डल फ्रीगन क्रेड कच्चा डेनिम सिंगल-ओरिजिन कफी भाइरल।

चार दिशा

इनपुट समूहहरूमा उपकरणटिपहरू

बुटस्ट्र्याप इनपुट समूहहरूसँग टूलटिपहरू र पोपोभरहरू प्रयोग गर्दा, तपाईंले containerअवांछित साइड इफेक्टहरूबाट बच्न (तलको दस्तावेज) विकल्प सेट गर्नुपर्नेछ।


प्रयोग

जाभास्क्रिप्ट मार्फत टूलटिप ट्रिगर गर्नुहोस्:

  1. $ ( '#उदाहरण' )। टूलटिप ( विकल्प )

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""

नाम प्रकार पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस्
html बुलियन गलत टूलटिपमा html घुसाउनुहोस्। यदि गलत छ भने, jquery को textविधि डोममा सामग्री सम्मिलित गर्न प्रयोग गरिनेछ। यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्।
नियुक्ति स्ट्रिङ | समारोह 'माथि' टुलटिप कसरी राख्ने - शीर्ष | तल | बायाँ | सही
चयनकर्ता तार गलत यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ।
शीर्षक स्ट्रिङ | समारोह '' यदि `शीर्षक` ट्याग अवस्थित छैन भने पूर्वनिर्धारित शीर्षक मान
ट्रिगर तार 'होभर फोकस' टूलटिप कसरी ट्रिगर हुन्छ - क्लिक गर्नुहोस् | होभर | फोकस | म्यानुअल। नोट गर्नुहोस् तपाई केस पास ट्रिगर मटिलिपल, स्पेस सेपरेटेड, ट्रिगर प्रकारहरू।
ढिला नम्बर | वस्तु

टुलटिप (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन

यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ

वस्तु संरचना हो:delay: { show: 500, hide: 100 }

कन्टेनर स्ट्रिङ | गलत गलत

विशेष तत्वमा टुलटिप जोड्छcontainer: 'body'

हेड अप! व्यक्तिगत टूलटिपका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोगद्वारा निर्दिष्ट गर्न सकिन्छ।

मार्कअप

  1. <a href = "#" data-toggle = "tooltip" title = "पहिलो टूलटिप" > ममाथि होभर गर्नुहोस् </a>

विधिहरू

$().उपकरण टिप(विकल्प)

तत्व सङ्कलनमा टुलटिप ह्यान्डलर संलग्न गर्छ।

टुलटिप ('देखाउनुहोस्')

तत्वको टुलटिप प्रकट गर्दछ।

  1. $ ( '# तत्व' )। टुलटिप ( 'देखाउनुहोस्' )

टुलटिप ('लुकाउनुहोस्')

तत्वको टुलटिप लुकाउँछ।

  1. $ ( '# तत्व' )। टुलटिप ( 'लुकाउनुहोस्' )

टुलटिप ('टगल')

तत्वको टुलटिप टगल गर्छ।

  1. $ ( '# तत्व' )। टूलटिप ( 'टगल' )

टुलटिप ('नष्ट')

तत्वको टुलटिप लुकाउँछ र नष्ट गर्दछ।

  1. $ ( '# तत्व' )। टुलटिप ( 'नष्ट' )

उदाहरणहरू

सामग्रीको सानो ओभरलेहरू थप्नुहोस्, जस्तै आईप्याडमा, आवास माध्यमिक जानकारीको लागि कुनै पनि तत्वमा। पपओभर ट्रिगर गर्न बटनमा होभर गर्नुहोस्। टूलटिप समावेश गर्न आवश्यक छ।

स्थिर पपओभर

चार विकल्पहरू उपलब्ध छन्: शीर्ष, दायाँ, तल, र बायाँ पङ्क्तिबद्ध।

पपओभर शीर्ष

Sed posuere consectetur est at lobortis। Aenean eu leo ​​quam। Pellentesque ornare sem lacinia quam venenatis vestibulum।

Popover सही

Sed posuere consectetur est at lobortis। Aenean eu leo ​​quam। Pellentesque ornare sem lacinia quam venenatis vestibulum।

Popover तल

Sed posuere consectetur est at lobortis। Aenean eu leo ​​quam। Pellentesque ornare sem lacinia quam venenatis vestibulum।

पोपोभर छोडियो

Sed posuere consectetur est at lobortis। Aenean eu leo ​​quam। Pellentesque ornare sem lacinia quam venenatis vestibulum।

dataजाभास्क्रिप्ट र एट्रिब्यूट भित्रको सामग्रीबाट पोपोभरको रूपमा देखाइएको कुनै मार्कअप छैन ।

प्रत्यक्ष डेमो

चार दिशा


प्रयोग

जाभास्क्रिप्ट मार्फत popovers सक्षम गर्नुहोस्:

  1. $ ( '#उदाहरण' )। popover ( विकल्प )

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""

नाम प्रकार पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस्
html बुलियन गलत पपओभरमा html घुसाउनुहोस्। यदि गलत छ भने, jquery को textविधि डोममा सामग्री सम्मिलित गर्न प्रयोग गरिनेछ। यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्।
नियुक्ति स्ट्रिङ | समारोह 'सही' कसरी popover स्थिति राख्ने - शीर्ष | तल | बायाँ | सही
चयनकर्ता तार गलत यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ
ट्रिगर तार 'क्लिक' कसरी पपओभर ट्रिगर हुन्छ - क्लिक गर्नुहोस् | होभर | फोकस | म्यानुअल
शीर्षक स्ट्रिङ | समारोह '' यदि `शीर्षक` विशेषता उपस्थित छैन भने पूर्वनिर्धारित शीर्षक मान
सामग्री स्ट्रिङ | समारोह '' यदि `डेटा-सामग्री` विशेषता उपस्थित छैन भने पूर्वनिर्धारित सामग्री मान
ढिला नम्बर | वस्तु

पपओभर (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन

यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ

वस्तु संरचना हो:delay: { show: 500, hide: 100 }

कन्टेनर स्ट्रिङ | गलत गलत

पपओभरलाई विशेष तत्वमा जोड्छcontainer: 'body'

हेड अप! व्यक्तिगत पोपोभरका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोग मार्फत निर्दिष्ट गर्न सकिन्छ।

मार्कअप

कार्यसम्पादन कारणहरूका लागि, Tooltip र Popover data-apis अप्ट इन छन्। यदि तपाइँ तिनीहरूलाई प्रयोग गर्न चाहनुहुन्छ भने केवल चयनकर्ता विकल्प निर्दिष्ट गर्नुहोस्।

विधिहरू

$().popover(विकल्प)

तत्व सङ्कलनका लागि popovers प्रारम्भ गर्दछ।

.popover ('शो')

एक तत्व पपओभर प्रकट गर्दछ।

  1. $ ( '# तत्व' )। popover ( 'शो' )

.popover ('लुकाउनुहोस्')

एक तत्व पपओभर लुकाउँछ।

  1. $ ( '# तत्व' )। 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।

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्


प्रयोग

JavaScript मार्फत अलर्टको खारेज सक्षम गर्नुहोस्:

  1. $ ( ". चेतावनी" )। चेतावनी ()

मार्कअप

data-dismiss="alert"स्वचालित रूपमा अलर्ट क्लोज कार्यक्षमता दिनको लागि आफ्नो बन्द बटनमा थप्नुहोस् ।

  1. <a वर्ग = "बंद" डाटा-खारिज = "सतर्क" href = "#" > &समय; </a>

विधिहरू

$() अलर्ट()

नजिकको कार्यक्षमता संग सबै अलर्टहरू लपेट्छ। तपाईंका अलर्टहरू बन्द हुँदा एनिमेटेड हुनको लागि, तिनीहरूमा पहिले नै लागू गरिएको .fadeर वर्ग सुनिश्चित गर्नुहोस्।.in

चेतावनी ('नजिक')

अलर्ट बन्द गर्छ।

  1. $ ( ". चेतावनी" )। चेतावनी ( 'नजिक' )

घटनाहरू

बुटस्ट्र्यापको अलर्ट क्लासले अलर्ट कार्यक्षमतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।

घटना विवरण
बन्द closeउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
बन्द अलर्ट बन्द भएको बेला यो घटना निकालिएको छ (css ट्रान्जिसन पूरा हुनको लागि पर्खनेछ)।
  1. $ ( '#my-alert' )। बाँध ( 'बंद' , प्रकार्य () {
  2. // केही गर…
  3. })

उदाहरण प्रयोग

बटनहरूसँग थप गर्नुहोस्। कन्ट्रोल बटन अवस्थाहरू वा उपकरणपट्टीहरू जस्तै थप घटकहरूको लागि बटनहरूको समूह सिर्जना गर्नुहोस्।

स्टेटफुल

data-loading-text="Loading..."बटनमा लोडिङ अवस्था प्रयोग गर्न थप्नुहोस् ।

  1. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" डेटा-लोडिङ-टेक्स्ट = "लोड हुँदैछ..." > लोड हुँदैछ अवस्था </ बटन>

एकल टगल

data-toggle="button"एकल बटनमा टगलिङ सक्रिय गर्न थप्नुहोस् ।

  1. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" डेटा-टगल = "बटन" > एकल टगल </ बटन>

चेकबक्स

data-toggle="buttons-checkbox"btn-समूहमा चेकबक्स शैली टगल गर्न थप्नुहोस् ।

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > बायाँ </ बटन>
  3. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </ बटन>
  4. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दायाँ </ बटन>
  5. </div>

रेडियो

data-toggle="buttons-radio"btn-समूहमा रेडियो शैली टगल गर्न थप्नुहोस् ।

  1. <div class = "btn-group" data-toggle = "बटन-रेडियो" >
  2. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > बायाँ </ बटन>
  3. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </ बटन>
  4. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दायाँ </ बटन>
  5. </div>

प्रयोग

जाभास्क्रिप्ट मार्फत बटनहरू सक्षम गर्नुहोस्:

  1. $ ( '.nav-tabs' )। बटन ()

मार्कअप

डाटा विशेषताहरू बटन प्लगइनको अभिन्न अंग हुन्। विभिन्न मार्कअप प्रकारहरूको लागि तलको उदाहरण कोड जाँच गर्नुहोस्।

विकल्पहरू

कुनै पनि छैन

विधिहरू

$().बटन('टगल')

टगल पुश स्थिति। बटनलाई सक्रिय गरिएको जस्तो देखिन्छ।

हेड अप! तपाईंले विशेषता प्रयोग गरेर बटनको स्वत: टगलिङ सक्षम गर्न सक्नुहुन्छ data-toggle
  1. <बटन प्रकार = "बटन" वर्ग = "btn" डाटा-टगल = "बटन" > </ बटन>

$() बटन('लोड हुँदै')

बटन स्थिति लोड गर्न सेट गर्दछ - बटन असक्षम पार्छ र पाठ लोड गर्ने पाठमा स्वैप गर्दछ। डेटा विशेषता प्रयोग गरेर बटन तत्वमा लोड गर्ने पाठ परिभाषित गरिनुपर्छ data-loading-text

  1. <बटन प्रकार = "बटन" वर्ग = "btn" data-loading-text = "सामान लोड गर्दै..." > ... </ बटन>
हेड अप! फायरफक्सले पृष्ठ लोडहरूमा असक्षम स्थिति कायम राख्छ । यसको लागि एक समाधान प्रयोग गर्न को लागी छ autocomplete="off"

$().बटन('रिसेट')

रिसेट बटन स्थिति - मूल पाठमा पाठ स्वैप।

$().बटन(स्ट्रिङ)

बटन स्थिति रिसेट गर्दछ - कुनै पनि डेटा परिभाषित पाठ स्थितिमा पाठ स्वैप गर्दछ।

  1. <बटन प्रकार = "बटन" वर्ग = "btn" data-complete-text = "समाप्त!" > ... </ बटन>
  2. <script>
  3. $ ( '.btn' )। बटन ( 'पूर्ण' )
  4. </script>

बारे

आधार शैलीहरू र एकर्डियन र नेभिगेसन जस्ता संकुचित घटकहरूको लागि लचिलो समर्थन प्राप्त गर्नुहोस्।

* ट्रान्जिसन प्लगइन समावेश गर्न आवश्यक छ।

उदाहरण accordion

पतन प्लगइन प्रयोग गरेर, हामीले एक साधारण एकॉर्डियन शैली विजेट निर्माण गर्यौं:

Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus टेरी रिचर्डसन विज्ञापन स्क्विड। 3 वुल्फ मून अफिसिया अउट, गैर कपिडाट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। Brunch 3 वुल्फ मून टेम्पर, सन्ट एलिक्वाले यसमा चरा राख्यो स्क्विड सिंगल-ओरिजिन कफी नुल्ला एसुमेन्डा शोरेडिच एट। निहिल एनिम केफियेह हेल्भेटिका, क्राफ्ट बियर लेबर वेस एन्डरसन क्रेडिट नेसियन्ट सेपिएन्ट ईए प्रोडेन्ट। Ad vegan excepteur butcher vice lomo। Leggings occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चा डेनिम एस्थेटिक सिन्थ नेसियन्ट तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन।
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus टेरी रिचर्डसन विज्ञापन स्क्विड। 3 वुल्फ मून अफिसिया अउट, गैर कपिडाट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। Brunch 3 वुल्फ मून टेम्पर, सन्ट एलिक्वाले यसमा चरा राख्यो स्क्विड सिंगल-ओरिजिन कफी नुल्ला एसुमेन्डा शोरेडिच एट। निहिल एनिम केफियेह हेल्भेटिका, क्राफ्ट बियर लेबर वेस एन्डरसन क्रेडिट नेसियन्ट सेपिएन्ट ईए प्रोडेन्ट। Ad vegan excepteur butcher vice lomo। Leggings occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चा डेनिम एस्थेटिक सिन्थ नेसियन्ट तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन।
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus टेरी रिचर्डसन विज्ञापन स्क्विड। 3 वुल्फ मून अफिसिया अउट, गैर कपिडाट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। Brunch 3 वुल्फ मून टेम्पर, सन्ट एलिक्वाले यसमा चरा राख्यो स्क्विड सिंगल-ओरिजिन कफी नुल्ला एसुमेन्डा शोरेडिच एट। निहिल एनिम केफियेह हेल्भेटिका, क्राफ्ट बियर लेबर वेस एन्डरसन क्रेडिट नेसियन्ट सेपिएन्ट ईए प्रोडेन्ट। Ad vegan excepteur butcher vice lomo। Leggings occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चा डेनिम एस्थेटिक सिन्थ नेसियन्ट तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन।
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a वर्ग = "accordion-toggle" data-toggle = "collaps" data-parent = "#accordion2" href = "#collapseOne" >
  5. संक्षिप्त गर्न मिल्ने समूह वस्तु #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body कोलप्स इन" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a वर्ग = "accordion-toggle" data-toggle = "collaps" data-parent = "#accordion2" href = "#collapseTwo" >
  17. मिलाउन मिल्ने समूह वस्तु #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" वर्ग = "accordion-body पतन" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

तपाइँ एकॉर्डियन मार्कअप बिना प्लगइन पनि प्रयोग गर्न सक्नुहुन्छ। अर्को तत्वको विस्तार र पतन टगल बटन बनाउनुहोस्।

  1. <बटन प्रकार = "बटन" वर्ग = "btn btn-खतरा" डेटा-टगल = "संकुचित " डाटा-लक्ष्य = "# डेमो" >
  2. साधारण संकुचन योग्य
  3. </ बटन>
  4.  
  5. <div id = "डेमो" वर्ग = "संकुचित गर्नुहोस्" > </div>

प्रयोग

डाटा विशेषताहरू मार्फत

ढल्न मिल्ने तत्वको नियन्त्रण स्वतः असाइन गर्नको लागि केवल तत्व थप्नुहोस् data-toggle="collapse"र a । विशेषताले पतन लागू गर्नको लागि एक css चयनकर्ता स्वीकार गर्दछ data-target। संकुचित तत्वमा data-targetवर्ग थप्न निश्चित हुनुहोस् । collapseयदि तपाइँ यसलाई पूर्वनिर्धारित रूपमा खोल्न चाहनुहुन्छ भने, अतिरिक्त कक्षा थप्नुहोस् in

एकोर्डियन-जस्तै समूह व्यवस्थापनलाई मिलाउन मिल्ने नियन्त्रणमा थप्न, डेटा विशेषता थप्नुहोस् data-parent="#selector"। यसलाई कार्यमा हेर्नको लागि डेमोलाई सन्दर्भ गर्नुहोस्।

जाभास्क्रिप्ट मार्फत

म्यानुअल रूपमा सक्षम गर्नुहोस्:

  1. $ ( ". पतन" )। पतन ()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-parent=""

नाम प्रकार पूर्वनिर्धारित विवरण
अभिभावक चयनकर्ता गलत यदि चयनकर्ता हो भने यो मिलाउन मिल्ने वस्तु देखाउँदा तोकिएको अभिभावक अन्तर्गतका सबै मिलाउन मिल्ने तत्वहरू बन्द हुनेछन्। (परम्परागत एकॉर्डियन व्यवहार जस्तै)
टगल गर्नुहोस् बुलियन सत्य आह्वानमा मिल्ने तत्वलाई टगल गर्छ

विधिहरू

पतन (विकल्पहरू)

तपाइँको सामग्री एक संकुचन तत्व को रूप मा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object

  1. $ ( '#myCollapsible' )। पतन ({
  2. टगल : गलत
  3. })

पतन ('टगल')

देखाइएका वा लुकाउन मिल्ने तत्वलाई टगल गर्छ।

पतन ('देखाउनुहोस्')

मिलाउन मिल्ने तत्व देखाउँछ।

पतन ('लुकाउनुहोस्')

मिलाउन मिल्ने तत्व लुकाउँछ।

घटनाहरू

बुटस्ट्र्यापको पतन वर्गले पतन कार्यक्षमतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।

घटना विवरण
देखाउनु showउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
देखाइयो यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (css संक्रमण पूरा हुनको लागि पर्खनेछ)।
लुकाउनुहोस् यो घटना तुरुन्तै निकालिएको छ जब hideविधि कल गरिएको छ।
लुकेको यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्ताबाट लुकाइएको छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
  1. $ ( '#myCollapsible' )। मा ( 'लुकेको' , प्रकार्य () {
  2. // केही गर…
  3. })

उदाहरण

कुनै पनि फारम पाठ इनपुटको साथ चाँडै सुरुचिपूर्ण टाइपहेडहरू सिर्जना गर्न आधारभूत, सजिलै विस्तारित प्लगइन।

  1. <इनपुट प्रकार = "टेक्स्ट" डाटा-प्रदान = "टाइपहेड" >

तपाईं autocomplete="off"पूर्वनिर्धारित ब्राउजर मेनुहरूलाई बूटस्ट्र्याप टाइपहेड ड्रपडाउनमा देखा पर्नबाट रोक्न सेट गर्न चाहानुहुन्छ।


प्रयोग

डाटा विशेषताहरू मार्फत

माथिको उदाहरणमा देखाइए अनुसार टाइपहेड कार्यक्षमताको साथ एक तत्व दर्ता गर्न डेटा विशेषताहरू थप्नुहोस्।

जाभास्क्रिप्ट मार्फत

टाइपहेडलाई म्यानुअल रूपमा कल गर्नुहोस्:

  1. $ ( '.typeahead' )। टाइपहेड ()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-source=""

नाम प्रकार पूर्वनिर्धारित विवरण
मुहान array, function [ ] विरुद्ध क्वेरी गर्न डेटा स्रोत। स्ट्रिङ वा प्रकार्यको एरे हुन सक्छ। प्रकार्यलाई दुई तर्कहरू पारित queryगरिएको छ, इनपुट क्षेत्रमा मान र processकलब्याक। प्रकार्य processकलब्याकको एकल तर्क मार्फत प्रत्यक्ष वा एसिन्क्रोनस रूपमा डाटा स्रोत फिर्ता गरेर सिंक्रोनस रूपमा प्रयोग गर्न सकिन्छ।
वस्तुहरू संख्या ड्रपडाउनमा प्रदर्शन गर्न वस्तुहरूको अधिकतम संख्या।
न्यूनतम लम्बाइ संख्या स्वत: पूर्ण सुझावहरू ट्रिगर गर्नु अघि आवश्यक न्यूनतम क्यारेक्टर लम्बाइ
मिलाउने समारोह केस असंवेदनशील क्वेरीले वस्तुसँग मेल खान्छ कि भनेर निर्धारण गर्न प्रयोग गरिने विधि। एकल तर्क स्वीकार गर्दछ, जसको itemविरुद्धमा क्वेरी परीक्षण गर्न सकिन्छ। हालको प्रश्नमा पहुँच गर्नुहोस् this.querytrueयदि क्वेरी मिल्दो हो भने बुलियन फर्काउनुहोस् ।
क्रमबद्ध समारोह सटीक मिलान,
केस संवेदनशील,
केस असंवेदनशील
स्वत: पूर्ण परिणामहरू क्रमबद्ध गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ itemsर टाइपहेड उदाहरणको दायरा छ। हालको प्रश्नलाई सन्दर्भ गर्नुहोस् this.query
अपडेटकर्ता समारोह चयन गरिएको वस्तु फिर्ता गर्छ चयन गरिएको वस्तु फिर्ता गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ, itemर टाइपहेड उदाहरणको दायरा छ।
हाइलाइटर समारोह सबै पूर्वनिर्धारित मिलानहरू हाइलाइट गर्दछ स्वत: पूर्ण परिणामहरू हाइलाइट गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ itemर टाइपहेड उदाहरणको दायरा छ। html फर्काउनु पर्छ।

विधिहरू

टाइपहेड (विकल्पहरू)

टाइपहेडको साथ इनपुट प्रारम्भ गर्दछ।

उदाहरण

बाँयामा सबनेभिगेसन affix प्लगइनको प्रत्यक्ष डेमो हो।


प्रयोग

डाटा विशेषताहरू मार्फत

सजिलैसँग कुनै पनि तत्वमा affix व्यवहार थप्नको data-spy="affix"लागि, तपाईले जासुसी गर्न चाहनु भएको तत्वमा थप्नुहोस्। त्यसपछि कुनै तत्वको पिनिङ अन र अफ कहिले टगल गर्ने भनेर परिभाषित गर्न अफसेटहरू प्रयोग गर्नुहोस्।

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
हेड अप! तपाईंले पिन गरिएको तत्वको स्थिति र यसको तत्काल अभिभावकको व्यवहार व्यवस्थापन गर्नुपर्छ। affixस्थिति , affix-top, र द्वारा नियन्त्रित छ affix-bottom। पृष्ठको सामान्य प्रवाहबाट सामग्री हटाउँदै गर्दा affix ले किक गर्दा सम्भावित रूपमा संकुचित अभिभावकको लागि जाँच गर्न सम्झनुहोस्।

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत affix प्लगइन कल गर्नुहोस्:

  1. $ ( '#navbar' )। जोड्नु ()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset-top="200"

नाम प्रकार पूर्वनिर्धारित विवरण
अफसेट नम्बर | प्रकार्य | वस्तु १० स्क्रोलको स्थिति गणना गर्दा स्क्रिनबाट अफसेट गर्न पिक्सेलहरू। यदि एकल नम्बर प्रदान गरिएको छ भने, अफसेट माथि र बायाँ दुवै दिशामा लागू हुनेछ। एकल दिशा, वा धेरै अद्वितीय अफसेटहरू सुन्नको लागि, केवल एउटा वस्तु प्रदान गर्नुहोस् offset: { x: 10 }। तपाईंले गतिशील रूपमा अफसेट (केही उत्तरदायी डिजाइनहरूको लागि उपयोगी) प्रदान गर्न आवश्यक हुँदा एक प्रकार्य प्रयोग गर्नुहोस्।