बुटस्ट्र्यापका कम्पोनेन्टहरूलाई जीवन्त बनाउनुहोस्—अहिले १३ अनुकूलन jQuery प्लगइनहरूसँग।
प्लगइनहरू व्यक्तिगत रूपमा समावेश गर्न सकिन्छ (यद्यपि केहीमा निर्भरता आवश्यक छ), वा सबै एकैचोटि। bootstrap.js र bootstrap.min.js दुबै एकल फाइलमा सबै प्लगइनहरू समावेश गर्दछ।
तपाईले सबै बुटस्ट्र्याप प्लगइनहरू मार्कअप API मार्फत जाभास्क्रिप्टको एकल लाइन नलिइकन प्रयोग गर्न सक्नुहुन्छ। यो बुटस्ट्र्यापको पहिलो कक्षा API हो र प्लगइन प्रयोग गर्दा तपाईंको पहिलो विचार हुनुपर्छ।
उनले भने, केही परिस्थितिहरूमा यो कार्यक्षमता बन्द गर्न वांछनीय हुन सक्छ। तसर्थ, हामी `डेटा-एपीआई'` सँग बडी नेमस्पेसमा भएका सबै घटनाहरूलाई अनबाइन्ड गरेर डाटा विशेषता API असक्षम गर्ने क्षमता पनि प्रदान गर्छौं। यो यस्तो देखिन्छ:
- $ ( 'शरीर' )। बन्द ( '.data-api' )
वैकल्पिक रूपमा, एक विशेष प्लगइनलाई लक्षित गर्न, केवल प्लगइनको नाम नाम स्थानको रूपमा समावेश गर्नुहोस् डेटा-एपीआई नेमस्पेस जस्तै:
- $ ( 'शरीर' )। बन्द ( '.alert.data-api' )
हामी यो पनि विश्वास गर्छौं कि तपाइँ जाभास्क्रिप्ट API मार्फत सबै बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न सक्षम हुनुपर्दछ। सबै सार्वजनिक API हरू एकल, चेनयोग्य विधिहरू हुन्, र कार्य गरिएको सङ्कलन फिर्ता गर्नुहोस्।
- $ ( ".btn. खतरा" )। बटन ( "टगल" )। addClass ( "फ्याट" )
सबै विधिहरूले एक वैकल्पिक विकल्प वस्तु, एक विशेष विधिलाई लक्षित गर्ने स्ट्रिङ, वा केही पनि (जसले पूर्वनिर्धारित व्यवहारसँग प्लगइन प्रारम्भ गर्छ) स्वीकार गर्नुपर्छ।
- $ ( "#myModal" )। मोडल () // पूर्वनिर्धारितसँग प्रारम्भ गरिएको
- $ ( "#myModal" )। मोडल ({ किबोर्ड : गलत }) // किबोर्ड बिना प्रारम्भ गरिएको
- $ ( "#myModal" )। मोडल ( 'शो' ) // प्रारम्भिक र तुरुन्तै देखाउन आह्वान गर्दछ
प्रत्येक प्लगइनले यसको कच्चा कन्स्ट्रक्टरलाई 'कन्स्ट्रक्टर' गुणमा पनि उजागर गर्दछ $.fn.popover.Constructor
:। यदि तपाइँ एक विशेष प्लगइन उदाहरण प्राप्त गर्न चाहनुहुन्छ भने, यसलाई सिधै तत्वबाट पुन: प्राप्त गर्नुहोस् $('[rel=popover]').data('popover')
:।
कहिलेकाहीँ यो अन्य UI फ्रेमवर्कको साथ बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न आवश्यक छ। यी परिस्थितिहरूमा, नेमस्पेस टक्करहरू कहिलेकाहीं हुन सक्छ। यदि यो हुन्छ भने, तपाईले .noConflict
प्लगइनलाई कल गर्न सक्नुहुन्छ जुन तपाईले मान उल्टाउन चाहानुहुन्छ।
- var बुटस्ट्र्याप बटन = $ । fn । बटन । noConflict () // पहिले तोकिएको मानमा $.fn.button फर्काउनुहोस्
- $ । fn । bootstrapBtn = bootstrapButton // $().bootstrapBtn बुटस्ट्र्याप कार्यक्षमता दिनुहोस्
बुटस्ट्र्यापले धेरै जसो प्लगइनको अद्वितीय कार्यहरूको लागि अनुकूल घटनाहरू प्रदान गर्दछ। सामान्यतया, यी एक अनन्त र विगत पार्टिसिपल फारममा आउँछन् - जहाँ इन्फिनिटिभ (उदा। show
) घटनाको सुरुमा ट्रिगर हुन्छ, र यसको विगतको पार्टिसिपल फारम (उदा। shown
) कार्य पूरा भएपछि ट्रिगर हुन्छ।
सबै अनन्त घटनाहरूले पूर्वनिर्धारित कार्यक्षमता रोकथाम प्रदान गर्दछ। यसले यो सुरु हुनु अघि कार्यको कार्यान्वयन रोक्न सक्ने क्षमता प्रदान गर्दछ।
- $ ( '#myModal' )। अन ( 'देखाउनुहोस्' , प्रकार्य ( ई ) {
- यदि (! डाटा ) फिर्ता ई . रोकथाम पूर्वनिर्धारित () // मोडल देखाउन रोक्छ
- })
साधारण संक्रमण प्रभावहरूको लागि, अन्य JS फाइलहरूसँगै bootstrap-transition.js समावेश गर्नुहोस्। यदि तपाइँ कम्पाइल गरिएको (वा मिनिफाइड) bootstrap.js प्रयोग गर्दै हुनुहुन्छ भने , यो समावेश गर्न आवश्यक छैन - यो पहिले नै त्यहाँ छ।
ट्रान्जिसन प्लगइनका केही उदाहरणहरू:
मोडलहरू सुव्यवस्थित, तर लचिलो, न्यूनतम आवश्यक कार्यक्षमता र स्मार्ट पूर्वनिर्धारितहरूसँग संवाद प्रम्प्टहरू छन्।
हेडर, शरीर, र फुटरमा कार्यहरूको सेटको साथ रेन्डर गरिएको मोडल।
एउटा राम्रो शरीर…
- <div वर्ग = "मोडल लुकाउने फेड" >
- <div वर्ग = "मोडल-हेडर" >
- <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-लुकेको = "सत्य" > &समय; </ बटन>
- <h3> मोडल हेडर </ h3>
- </div>
- <div class = "modal-body" >
- <p> एउटा राम्रो शरीर... </p>
- </div>
- <div class = "modal-footer" >
- <a href = "#" class = "btn" > बन्द गर्नुहोस् </a>
- <a href="#" class="btn btn-primary" > परिवर्तनहरू बचत गर्नुहोस् </a> _
- </div>
- </div>
तलको बटनमा क्लिक गरेर JavaScript मार्फत मोडल टगल गर्नुहोस्। यो तल स्लाइड हुनेछ र पृष्ठको माथिबाट फीड हुनेछ।
- <!-- मोडल ट्रिगर गर्न बटन -->
- <a href="#myModal" role = "button" class = "btn" data-toggle = "modal" > डेमो मोडल सुरु गर्नुहोस् </a>
- <!-- मोडल -->
- <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = " dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
- <div वर्ग = "मोडल-हेडर" >
- <बटन प्रकार = "बटन" वर्ग = "क्लोज" डेटा-डिसमिस = "मोडल" एरिया-लुकेको = "सत्य" > × </ बटन>
- <h3 id = "myModalLabel" > मोडल हेडर </ h3>
- </div>
- <div class = "modal-body" >
- <p> एउटा राम्रो शरीर... </p>
- </div>
- <div class = "modal-footer" >
- <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > बन्द गर्नुहोस् </ बटन>
- <बटन वर्ग = "btn btn-प्राथमिक" > परिवर्तनहरू बचत गर्नुहोस् </ बटन>
- </div>
- </div>
जाभास्क्रिप्ट नलेखन मोडल सक्रिय गर्नुहोस्। data-toggle="modal"
एक बटन जस्तै एक नियन्त्रक तत्व मा सेट गर्नुहोस् , एक संग data-target="#foo"
वा href="#foo"
टगल गर्न एक विशेष मोडल लक्षित गर्न।
- <बटन प्रकार = "बटन" डेटा-टगल = "मोडल" डाटा-लक्ष्य = "#myModal" > मोडल सुरु गर्नुहोस् </ बटन>
myModal
जाभास्क्रिप्टको एकल लाइनको साथ आईडीको साथ मोडल कल गर्नुहोस् :
- $ ( '#myModal' )। मोडल ( विकल्प )
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-backdrop=""
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
पृष्ठभूमि | बुलियन | सत्य | मोडल ब्याकड्रप तत्व समावेश गर्दछ। वैकल्पिक रूपमा, static ब्याकड्रपको लागि निर्दिष्ट गर्नुहोस् जसले क्लिकमा मोडल बन्द गर्दैन। |
किबोर्ड | बुलियन | सत्य | एस्केप कुञ्जी थिच्दा मोडल बन्द गर्छ |
देखाउनु | बुलियन | सत्य | प्रारम्भ गर्दा मोडल देखाउँछ। |
रिमोट | बाटो | गलत | यदि रिमोट url प्रदान गरिएको छ भने, सामग्री jQuery को विधि मार्फत लोड गरिनेछ
|
तपाईंको सामग्रीलाई मोडलको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object
।
- $ ( '#myModal' )। मोडल ({
- किबोर्ड : गलत
- })
म्यानुअल रूपमा मोडल टगल गर्दछ।
- $ ( '#myModal' )। मोडल ( 'टगल' )
म्यानुअल रूपमा मोडल खोल्छ।
- $ ( '#myModal' )। मोडल ( 'शो' )
म्यानुअल रूपमा मोडल लुकाउँछ।
- $ ( '#myModal' )। मोडल ( 'लुकाउनुहोस्' )
बुटस्ट्र्यापको मोडल क्लासले मोडल प्रकार्यतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।
घटना | विवरण |
---|---|
देखाउनु | show उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ । |
देखाइयो | यो घटना तब निकालिन्छ जब मोडल प्रयोगकर्तालाई देख्न सकिन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। |
लुकाउनुहोस् | यो घटना तुरुन्तै निकालिएको छ जब hide उदाहरण विधि कल गरिएको छ। |
लुकेको | मोडल प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। |
- $ ( '#myModal' )। मा ( 'लुकेको' , प्रकार्य () {
- // केही गर…
- })
यो साधारण प्लगइनको साथ लगभग कुनै पनि कुरामा ड्रपडाउन मेनुहरू थप्नुहोस्, नेभबार, ट्याबहरू र चक्कीहरू सहित।
data-toggle="dropdown"
ड्रपडाउन टगल गर्न लिङ्क वा बटनमा थप्नुहोस् ।
- <div वर्ग = "ड्रपडाउन" >
- <a class = "dropdown-toggle" data-toggle = "ड्रपडाउन" href = "#" > ड्रपडाउन ट्रिगर </a>
- <ul class = "ड्रपडाउन-मेनु" भूमिका = "मेनु" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
URL लाई अक्षुण्ण राख्न, को data-target
सट्टा विशेषता प्रयोग गर्नुहोस् href="#"
।
- <div वर्ग = "ड्रपडाउन" >
- <a वर्ग = "ड्रपडाउन-टगल" आईडी = "dLabel" भूमिका = "बटन" डाटा-टगल = "ड्रपडाउन" डाटा-लक्ष्य = "#" href = "/page.html" >
- ड्रपडाउन
- <b class = "caret" ></b>
- </a>
- <ul class = "ड्रपडाउन-मेनु" भूमिका = "मेनु" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
जाभास्क्रिप्ट मार्फत ड्रपडाउनहरू कल गर्नुहोस्:
- $ ( '.dropdown-toggle' )। ड्रपडाउन ()
कुनै पनि छैन
दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनका लागि मेनुहरू टगल गर्नको लागि प्रोग्रामेटिक एपीआई।
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 बायोडिजल वेस एन्डरसन एस्थेटिक। निहिल ट्याटू आरोप, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लाम्को परिणाम।
भेनिअम मार्फा जुँगाको स्केटबोर्ड, फ्यूगियाट भेलिट पिचफोर्क दाढी। फ्रिगन बियर्ड एलिक्वा कपिडाट म्याक्सस्वीनीको वेरो। 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.
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 प्रयोग गर्न चाहानुहुन्छ।
- <body data-spy = "scroll " data-target = ".navbar" > ... </body>
जाभास्क्रिप्ट मार्फत scrollspy कल गर्नुहोस्:
- $ ( '#navbar' )। scrollspy ()
<a href="#home">home</a>
डोम मा केहि संग मेल खानु पर्छ जस्तै
<div id="home"></div>
।
DOM बाट तत्वहरू थप्ने वा हटाउने संयोजनमा scrollspy प्रयोग गर्दा, तपाईंले रिफ्रेस विधिलाई यसरी कल गर्न आवश्यक छ:
- $ ( '[डेटा-स्पाई="स्क्रोल"]' )। प्रत्येक ( प्रकार्य () {
- var $spy = $ ( यो )। scrollspy ( 'रिफ्रेस' )
- });
विकल्पहरू डेटा विशेषताहरू वा 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
ट्रस्ट फन्ड सेटन लेटरप्रेस, किटार कच्चा डेनिम केफियेह ईटीसी आर्ट पार्टी मास्टर क्लिन्ज ग्लुटेन-फ्री स्क्विड सीनस्टर फ्रीगन कोस्बी स्वेटर बेच्नु अघि। फ्यानी प्याक पोर्टल्यान्ड सीटन DIY, आर्ट पार्टी लोकाभोर वुल्फ क्लिच हाई लाइफ इको पार्क अस्टिन। Cred vinyl keffiyeh DIY salvia PBR, banh mi तिनीहरूले फार्म-टू-टेबल VHS भाइरल लोकाभोर कोस्बी स्वेटर बेच्नु अघि। लोमो वुल्फ भाइरल, मूंछ रेडिमेड थन्डरक्याट्स केफिएह क्राफ्ट बियर मार्फा नैतिक। वुल्फ साल्भिया फ्रीगन, सार्टोरियल केफियेह इको पार्क शाकाहारी।
जाभास्क्रिप्ट मार्फत ट्याबयोग्य ट्याबहरू सक्षम गर्नुहोस् (प्रत्येक ट्याबलाई व्यक्तिगत रूपमा सक्रिय गर्न आवश्यक छ):
- $ ( '#myTab a' )। क्लिक ( प्रकार्य ( ई ) {
- e _ रोकथाम पूर्वनिर्धारित ();
- $ ( यो )। ट्याब ( 'देखाउनुहोस्' );
- })
तपाईले व्यक्तिगत ट्याबहरूलाई धेरै तरिकामा सक्रिय गर्न सक्नुहुन्छ:
- $ ( '#myTab a[href="#profile"]' )। ट्याब ( 'देखाउनुहोस्' ); // नाम द्वारा ट्याब चयन गर्नुहोस्
- $ ( '#myTab a:first' )। ट्याब ( 'देखाउनुहोस्' ); // पहिलो ट्याब चयन गर्नुहोस्
- $ ( '#myTab a:last' )। ट्याब ( 'देखाउनुहोस्' ); // अन्तिम ट्याब चयन गर्नुहोस्
- $ ( '#myTab li:eq(2) a' )। ट्याब ( 'देखाउनुहोस्' ); // तेस्रो ट्याब चयन गर्नुहोस् (०-अनुक्रमित)
तपाईले कुनै पनि जाभास्क्रिप्ट नलिइकन मात्र निर्दिष्ट गरेर data-toggle="tab"
वा कुनै data-toggle="pill"
तत्वमा ट्याब वा पिल नेभिगेसन सक्रिय गर्न सक्नुहुन्छ। nav
ट्याबमा र nav-tabs
कक्षाहरू थप्दा ul
बुटस्ट्र्याप ट्याब स्टाइल लागू हुनेछ।
- <ul class = "nav nav-tabs" >
- <li><a href = "#home" data-toggle = "tab" > Home </a></li>
- <li><a href="#profile" data-toggle = "tab" > प्रोफाइल </a> </li >
- <li><a href = "#messages" data-toggle = "tab" > Messages </a></li>
- <li><a href = "#settings" data-toggle = "tab" > सेटिङहरू </a></li>
- </ul>
ट्याब तत्व र सामग्री कन्टेनर सक्रिय गर्दछ। ट्याबमा या त एक data-target
वा href
DOM मा कन्टेनर नोड लक्षित हुनुपर्छ।
- <ul class = "nav nav - tabs" id = "myTab" >
- <li class = "active" ><a href = "#home" > घर </a></li>
- <li > <a href="#profile" > प्रोफाइल </a></li >
- <li><a href = "#messages" > सन्देशहरू </a></li>
- <li><a href = "#settings" > सेटिङहरू </a></li>
- </ul>
- <div वर्ग = "ट्याब-सामग्री" >
- <div class = "ट्याब-फलक सक्रिय" id = "घर" > ... </div>
- <div class = "tab-pane" id = "profile" > ... </div>
- <div class = "tab-pane" id = "messages" > ... </div>
- <div class = "tab-pane" id = "settings" > ... </div>
- </div>
- <script>
- $ ( प्रकार्य () {
- $ ( '#myTab a:last' )। ट्याब ( 'देखाउनुहोस्' );
- })
- </script>
घटना | विवरण |
---|---|
देखाउनु | यो घटना ट्याब शो मा फायर हुन्छ, तर नयाँ ट्याब देखाउनु अघि। प्रयोग गर्नुहोस् event.target र event.relatedTarget क्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न। |
देखाइयो | ट्याब देखाइएपछि यो घटना ट्याब शोमा सक्रिय हुन्छ। प्रयोग गर्नुहोस् event.target र event.relatedTarget क्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न। |
- $ ( 'a[data-toggle="tab"]' )। अन ( 'देखाइएको' , प्रकार्य ( ई ) {
- e _ लक्ष्य // सक्रिय ट्याब
- e _ सम्बन्धित लक्ष्य // अघिल्लो ट्याब
- })
जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइनबाट प्रेरित; टूलटिपहरू एक अद्यावधिक संस्करण हो, जुन छविहरूमा भर पर्दैन, एनिमेसनको लागि CSS3 प्रयोग गर्नुहोस्, र स्थानीय शीर्षक भण्डारणको लागि डेटा-विशेषताहरू।
कार्यसम्पादन कारणहरूका लागि, टूलटिप र पपओभर डाटा-एपिसहरू अप्ट इन छन्, यसको मतलब तपाईंले तिनीहरूलाई आफैं सुरु गर्नुपर्छ ।
टूलटिपहरू हेर्न तलका लिङ्कहरूमा होभर गर्नुहोस्:
टाइट प्यान्ट अर्को स्तर केफियेह तपाईंले सायद तिनीहरूको बारेमा सुन्नु भएको छैन। फोटो बूथ दाढी कच्चा डेनिम लेटरप्रेस शाकाहारी मेसेन्जर ब्याग स्टम्पटाउन। फार्म-टू-टेबल सेटन, mcsweeney's fixie सस्टेनेबल क्विनोआ 8-बिट अमेरिकी परिधानमा टेरी रिचर्डसन विनाइल च्याम्ब्रे छ । बियर्ड स्टम्पटाउन, कार्डिगन्स बन मी लोमो थन्डरक्याट्स। टोफु बायोडिजेल विलियम्सबर्ग मार्फा, चार लोको म्याकस्वीनीको क्लिन्ज शाकाहारी च्याम्ब्रे। एक साँच्चै विडम्बनापूर्ण कारीगर जुनसुकै कीटार, सीनस्टर फार्म-टू-टेबल बैंक्सी अस्टिन ट्विटर ह्यान्डल फ्रीगन क्रेड कच्चा डेनिम सिंगल-ओरिजिन कफी भाइरल।
बुटस्ट्र्याप इनपुट समूहहरूसँग टूलटिपहरू र पोपोभरहरू प्रयोग गर्दा, तपाईंले container
अवांछित साइड इफेक्टहरूबाट बच्न (तलको दस्तावेज) विकल्प सेट गर्नुपर्नेछ।
जाभास्क्रिप्ट मार्फत टूलटिप ट्रिगर गर्नुहोस्:
- $ ( '#उदाहरण' )। टूलटिप ( विकल्प )
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-animation=""
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
एनिमेसन | बुलियन | सत्य | टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस् |
html | बुलियन | गलत | टूलटिपमा html घुसाउनुहोस्। यदि गलत छ भने, jquery को text विधि डोममा सामग्री सम्मिलित गर्न प्रयोग गरिनेछ। यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्। |
नियुक्ति | स्ट्रिङ | समारोह | 'माथि' | टुलटिप कसरी राख्ने - शीर्ष | तल | बायाँ | सही |
चयनकर्ता | तार | गलत | यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ। |
शीर्षक | स्ट्रिङ | समारोह | '' | यदि `शीर्षक` ट्याग अवस्थित छैन भने पूर्वनिर्धारित शीर्षक मान |
ट्रिगर | तार | 'होभर फोकस' | टूलटिप कसरी ट्रिगर हुन्छ - क्लिक गर्नुहोस् | होभर | फोकस | म्यानुअल। नोट गर्नुहोस् तपाई केस पास ट्रिगर मटिलिपल, स्पेस सेपरेटेड, ट्रिगर प्रकारहरू। |
ढिला | नम्बर | वस्तु | ० | टुलटिप (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ वस्तु संरचना हो: |
कन्टेनर | स्ट्रिङ | गलत | गलत | विशेष तत्वमा टुलटिप जोड्छ |
- <a href = "#" data-toggle = "tooltip" title = "पहिलो टूलटिप" > ममाथि होभर गर्नुहोस् </a>
तत्व सङ्कलनमा टुलटिप ह्यान्डलर संलग्न गर्छ।
तत्वको टुलटिप प्रकट गर्दछ।
- $ ( '# तत्व' )। टुलटिप ( 'देखाउनुहोस्' )
तत्वको टुलटिप लुकाउँछ।
- $ ( '# तत्व' )। टुलटिप ( 'लुकाउनुहोस्' )
तत्वको टुलटिप टगल गर्छ।
- $ ( '# तत्व' )। टूलटिप ( 'टगल' )
तत्वको टुलटिप लुकाउँछ र नष्ट गर्दछ।
- $ ( '# तत्व' )। टुलटिप ( 'नष्ट' )
सामग्रीको सानो ओभरलेहरू थप्नुहोस्, जस्तै आईप्याडमा, आवास माध्यमिक जानकारीको लागि कुनै पनि तत्वमा। पपओभर ट्रिगर गर्न बटनमा होभर गर्नुहोस्। टूलटिप समावेश गर्न आवश्यक छ।
चार विकल्पहरू उपलब्ध छन्: शीर्ष, दायाँ, तल, र बायाँ पङ्क्तिबद्ध।
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।
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 सक्षम गर्नुहोस्:
- $ ( '#उदाहरण' )। popover ( विकल्प )
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-animation=""
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
एनिमेसन | बुलियन | सत्य | टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस् |
html | बुलियन | गलत | पपओभरमा html घुसाउनुहोस्। यदि गलत छ भने, jquery को text विधि डोममा सामग्री सम्मिलित गर्न प्रयोग गरिनेछ। यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्। |
नियुक्ति | स्ट्रिङ | समारोह | 'सही' | कसरी popover स्थिति राख्ने - शीर्ष | तल | बायाँ | सही |
चयनकर्ता | तार | गलत | यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ |
ट्रिगर | तार | 'क्लिक' | कसरी पपओभर ट्रिगर हुन्छ - क्लिक गर्नुहोस् | होभर | फोकस | म्यानुअल |
शीर्षक | स्ट्रिङ | समारोह | '' | यदि `शीर्षक` विशेषता उपस्थित छैन भने पूर्वनिर्धारित शीर्षक मान |
सामग्री | स्ट्रिङ | समारोह | '' | यदि `डेटा-सामग्री` विशेषता उपस्थित छैन भने पूर्वनिर्धारित सामग्री मान |
ढिला | नम्बर | वस्तु | ० | पपओभर (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ वस्तु संरचना हो: |
कन्टेनर | स्ट्रिङ | गलत | गलत | पपओभरलाई विशेष तत्वमा जोड्छ |
कार्यसम्पादन कारणहरूका लागि, Tooltip र Popover data-apis अप्ट इन छन्। यदि तपाइँ तिनीहरूलाई प्रयोग गर्न चाहनुहुन्छ भने केवल चयनकर्ता विकल्प निर्दिष्ट गर्नुहोस्।
तत्व सङ्कलनका लागि popovers प्रारम्भ गर्दछ।
एक तत्व पपओभर प्रकट गर्दछ।
- $ ( '# तत्व' )। popover ( 'शो' )
एक तत्व पपओभर लुकाउँछ।
- $ ( '# तत्व' )। popover ( 'लुकाउन' )
तत्व पपओभर टगल गर्दछ।
- $ ( '# तत्व' )। popover ( 'टगल' )
तत्वको पपओभर लुकाउँछ र नष्ट गर्दछ।
- $ ( '# तत्व' )। popover ( 'नष्ट' )
यस प्लगइनको साथ सबै अलर्ट सन्देशहरूमा खारेज कार्यक्षमता थप्नुहोस्।
यो र त्यो परिवर्तन गर्नुहोस् र फेरि प्रयास गर्नुहोस्। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit। Cras Mattis consectetur purus sit amet fermentum।
JavaScript मार्फत अलर्टको खारेज सक्षम गर्नुहोस्:
- $ ( ". चेतावनी" )। चेतावनी ()
data-dismiss="alert"
स्वचालित रूपमा अलर्ट क्लोज कार्यक्षमता दिनको लागि आफ्नो बन्द बटनमा थप्नुहोस् ।
- <a वर्ग = "बंद" डाटा-खारिज = "सतर्क" href = "#" > &समय; </a>
नजिकको कार्यक्षमता संग सबै अलर्टहरू लपेट्छ। तपाईंका अलर्टहरू बन्द हुँदा एनिमेटेड हुनको लागि, तिनीहरूमा पहिले नै लागू गरिएको .fade
र वर्ग सुनिश्चित गर्नुहोस्।.in
अलर्ट बन्द गर्छ।
- $ ( ". चेतावनी" )। चेतावनी ( 'नजिक' )
बुटस्ट्र्यापको अलर्ट क्लासले अलर्ट कार्यक्षमतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।
घटना | विवरण |
---|---|
बन्द | close उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ । |
बन्द | अलर्ट बन्द भएको बेला यो घटना निकालिएको छ (css ट्रान्जिसन पूरा हुनको लागि पर्खनेछ)। |
- $ ( '#my-alert' )। बाँध ( 'बंद' , प्रकार्य () {
- // केही गर…
- })
आधार शैलीहरू र एकर्डियन र नेभिगेसन जस्ता संकुचित घटकहरूको लागि लचिलो समर्थन प्राप्त गर्नुहोस्।
* ट्रान्जिसन प्लगइन समावेश गर्न आवश्यक छ।
पतन प्लगइन प्रयोग गरेर, हामीले एक साधारण एकॉर्डियन शैली विजेट निर्माण गर्यौं:
- <div class = "accordion" id = "accordion2" >
- <div class = "accordion-group" >
- <div class = "accordion-heading" >
- <a वर्ग = "accordion-toggle" data-toggle = "collaps" data-parent = "#accordion2" href = "#collapseOne" >
- संक्षिप्त गर्न मिल्ने समूह वस्तु #1
- </a>
- </div>
- <div id = "collapseOne" class = "accordion-body कोलप्स इन" >
- <div class = "accordion-inner" >
- Anim pariatur cliche...
- </div>
- </div>
- </div>
- <div class = "accordion-group" >
- <div class = "accordion-heading" >
- <a वर्ग = "accordion-toggle" data-toggle = "collaps" data-parent = "#accordion2" href = "#collapseTwo" >
- मिलाउन मिल्ने समूह वस्तु #2
- </a>
- </div>
- <div id = "collapseTwo" वर्ग = "accordion-body पतन" >
- <div class = "accordion-inner" >
- Anim pariatur cliche...
- </div>
- </div>
- </div>
- </div>
- ...
तपाइँ एकॉर्डियन मार्कअप बिना प्लगइन पनि प्रयोग गर्न सक्नुहुन्छ। अर्को तत्वको विस्तार र पतन टगल बटन बनाउनुहोस्।
- <बटन प्रकार = "बटन" वर्ग = "btn btn-खतरा" डेटा-टगल = "संकुचित " डाटा-लक्ष्य = "# डेमो" >
- साधारण संकुचन योग्य
- </ बटन>
- <div id = "डेमो" वर्ग = "संकुचित गर्नुहोस्" > … </div>
ढल्न मिल्ने तत्वको नियन्त्रण स्वतः असाइन गर्नको लागि केवल तत्व थप्नुहोस् data-toggle="collapse"
र a । विशेषताले पतन लागू गर्नको लागि एक css चयनकर्ता स्वीकार गर्दछ data-target
। संकुचित तत्वमा data-target
वर्ग थप्न निश्चित हुनुहोस् । collapse
यदि तपाइँ यसलाई पूर्वनिर्धारित रूपमा खोल्न चाहनुहुन्छ भने, अतिरिक्त कक्षा थप्नुहोस् in
।
एकोर्डियन-जस्तै समूह व्यवस्थापनलाई मिलाउन मिल्ने नियन्त्रणमा थप्न, डेटा विशेषता थप्नुहोस् data-parent="#selector"
। यसलाई कार्यमा हेर्नको लागि डेमोलाई सन्दर्भ गर्नुहोस्।
म्यानुअल रूपमा सक्षम गर्नुहोस्:
- $ ( ". पतन" )। पतन ()
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-parent=""
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
अभिभावक | चयनकर्ता | गलत | यदि चयनकर्ता हो भने यो मिलाउन मिल्ने वस्तु देखाउँदा तोकिएको अभिभावक अन्तर्गतका सबै मिलाउन मिल्ने तत्वहरू बन्द हुनेछन्। (परम्परागत एकॉर्डियन व्यवहार जस्तै) |
टगल गर्नुहोस् | बुलियन | सत्य | आह्वानमा मिल्ने तत्वलाई टगल गर्छ |
तपाइँको सामग्री एक संकुचन तत्व को रूप मा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object
।
- $ ( '#myCollapsible' )। पतन ({
- टगल : गलत
- })
देखाइएका वा लुकाउन मिल्ने तत्वलाई टगल गर्छ।
मिलाउन मिल्ने तत्व देखाउँछ।
मिलाउन मिल्ने तत्व लुकाउँछ।
बुटस्ट्र्यापको पतन वर्गले पतन कार्यक्षमतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।
घटना | विवरण |
---|---|
देखाउनु | show उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ । |
देखाइयो | यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (css संक्रमण पूरा हुनको लागि पर्खनेछ)। |
लुकाउनुहोस् | यो घटना तुरुन्तै निकालिएको छ जब hide विधि कल गरिएको छ। |
लुकेको | यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्ताबाट लुकाइएको छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। |
- $ ( '#myCollapsible' )। मा ( 'लुकेको' , प्रकार्य () {
- // केही गर…
- })
तलको स्लाइड शोले क्यारोसेल जस्ता तत्वहरू मार्फत साइकल चलाउनको लागि सामान्य प्लगइन र कम्पोनेन्ट देखाउँछ।
- <div id = "myCarousel" वर्ग = "क्यारोसेल स्लाइड" >
- <ol class = "carousel-indicators" >
- <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>
- <li data-target = "#myCarousel" data-slide-to = "1" ></li>
- <li data-target = "#myCarousel" data-slide-to = "2" ></li>
- </ol>
- <!-- क्यारोसेल वस्तुहरू -->
- <div class = "carousel-inner" >
- <div वर्ग = "सक्रिय वस्तु" > … </div>
- <div वर्ग = "वस्तु" > … </div>
- <div वर्ग = "वस्तु" > … </div>
- </div>
- <!-- Carousel nav -->
- <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>
- <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>
- </div>
क्यारोसेलको स्थिति सजिलै नियन्त्रण गर्न डेटा विशेषताहरू प्रयोग गर्नुहोस्। data-slide
कुञ्जी शब्दहरू स्वीकार गर्दछ prev
वा next
, जसले स्लाइड स्थितिलाई यसको हालको स्थितिसँग सापेक्ष परिवर्तन गर्दछ। वैकल्पिक रूपमा, data-slide-to
क्यारोसेलमा कच्चा स्लाइड अनुक्रमणिका पास गर्न प्रयोग गर्नुहोस् data-slide-to="2"
, जुन स्लाइड स्थितिबाट सुरु हुने विशेष अनुक्रमणिकामा जान्छ 0
।
क्यारोसेललाई म्यानुअल रूपमा कल गर्नुहोस्:
- $ ( '.carousel' )। क्यारोसेल ()
विकल्पहरू डेटा विशेषताहरू वा JavaScriptz मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-interval=""
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
अन्तराल | संख्या | ५००० | वस्तुलाई स्वचालित रूपमा साइकल चलाउने बीचको ढिलाइको मात्रा। यदि गलत छ भने, क्यारोसेल स्वचालित रूपमा चक्र हुनेछैन। |
पज | तार | "होभर" | माउसिन्टरमा क्यारोसेलको साइकल चलाउन रोक्छ र माउसलिभमा क्यारोसेलको साइकल चलाउन पुन: सुरु गर्छ। |
वैकल्पिक विकल्पहरूको साथ क्यारोसेल प्रारम्भ गर्दछ object
र वस्तुहरू मार्फत साइकल चलाउन थाल्छ।
- $ ( '.carousel' )। क्यारोसेल ({
- अन्तराल : 2000
- })
बायाँ देखि दायाँ क्यारोसेल वस्तुहरू मार्फत चक्र।
क्यारोसेललाई वस्तुहरू मार्फत साइकल चलाउनबाट रोक्छ।
क्यारोसेललाई विशेष फ्रेममा (० आधारित, एर्रे जस्तै) मा साइकल गर्नुहोस्।
अघिल्लो वस्तुमा चक्र।
अर्को वस्तुमा साइकल।
बुटस्ट्र्यापको क्यारोसेल क्लासले क्यारोसेल कार्यक्षमतामा हुक गर्नका लागि दुई घटनाहरू उजागर गर्दछ।
घटना | विवरण |
---|---|
स्लाइड | slide उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ। |
स्लाइड | क्यारोसेलले आफ्नो स्लाइड ट्रान्जिसन पूरा गरिसकेपछि यो घटना सक्रिय हुन्छ। |
कुनै पनि फारम पाठ इनपुटको साथ चाँडै सुरुचिपूर्ण टाइपहेडहरू सिर्जना गर्न आधारभूत, सजिलै विस्तारित प्लगइन।
- <इनपुट प्रकार = "टेक्स्ट" डाटा-प्रदान = "टाइपहेड" >
तपाईं autocomplete="off"
पूर्वनिर्धारित ब्राउजर मेनुहरूलाई बूटस्ट्र्याप टाइपहेड ड्रपडाउनमा देखा पर्नबाट रोक्न सेट गर्न चाहानुहुन्छ।
माथिको उदाहरणमा देखाइए अनुसार टाइपहेड कार्यक्षमताको साथ एक तत्व दर्ता गर्न डेटा विशेषताहरू थप्नुहोस्।
टाइपहेडलाई म्यानुअल रूपमा कल गर्नुहोस्:
- $ ( '.typeahead' )। टाइपहेड ()
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-source=""
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
मुहान | array, function | [ ] | विरुद्ध क्वेरी गर्न डेटा स्रोत। स्ट्रिङ वा प्रकार्यको एरे हुन सक्छ। प्रकार्यलाई दुई तर्कहरू पारित query गरिएको छ, इनपुट क्षेत्रमा मान र process कलब्याक। प्रकार्य process कलब्याकको एकल तर्क मार्फत प्रत्यक्ष वा एसिन्क्रोनस रूपमा डाटा स्रोत फिर्ता गरेर सिंक्रोनस रूपमा प्रयोग गर्न सकिन्छ। |
वस्तुहरू | संख्या | ८ | ड्रपडाउनमा प्रदर्शन गर्न वस्तुहरूको अधिकतम संख्या। |
न्यूनतम लम्बाइ | संख्या | १ | स्वत: पूर्ण सुझावहरू ट्रिगर गर्नु अघि आवश्यक न्यूनतम क्यारेक्टर लम्बाइ |
मिलाउने | समारोह | केस असंवेदनशील | क्वेरीले वस्तुसँग मेल खान्छ कि भनेर निर्धारण गर्न प्रयोग गरिने विधि। एकल तर्क स्वीकार गर्दछ, जसको item विरुद्धमा क्वेरी परीक्षण गर्न सकिन्छ। हालको प्रश्नमा पहुँच गर्नुहोस् this.query । true यदि क्वेरी मिल्दो हो भने बुलियन फर्काउनुहोस् । |
क्रमबद्ध | समारोह | सटीक मिलान, केस संवेदनशील, केस असंवेदनशील |
स्वत: पूर्ण परिणामहरू क्रमबद्ध गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ items र टाइपहेड उदाहरणको दायरा छ। हालको प्रश्नलाई सन्दर्भ गर्नुहोस् this.query । |
अपडेटकर्ता | समारोह | चयन गरिएको वस्तु फिर्ता गर्छ | चयन गरिएको वस्तु फिर्ता गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ, item र टाइपहेड उदाहरणको दायरा छ। |
हाइलाइटर | समारोह | सबै पूर्वनिर्धारित मिलानहरू हाइलाइट गर्दछ | स्वत: पूर्ण परिणामहरू हाइलाइट गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ item र टाइपहेड उदाहरणको दायरा छ। html फर्काउनु पर्छ। |
टाइपहेडको साथ इनपुट प्रारम्भ गर्दछ।
बाँयामा सबनेभिगेसन affix प्लगइनको प्रत्यक्ष डेमो हो।
सजिलैसँग कुनै पनि तत्वमा affix व्यवहार थप्नको data-spy="affix"
लागि, तपाईले जासुसी गर्न चाहनु भएको तत्वमा थप्नुहोस्। त्यसपछि कुनै तत्वको पिनिङ अन र अफ कहिले टगल गर्ने भनेर परिभाषित गर्न अफसेटहरू प्रयोग गर्नुहोस्।
- <div data-spy = "affix" data-offset-top = "200" > ... </div>
affix
स्थिति ,
affix-top
, र
द्वारा नियन्त्रित छ
affix-bottom
। पृष्ठको सामान्य प्रवाहबाट सामग्री हटाउँदै गर्दा affix ले किक गर्दा सम्भावित रूपमा संकुचित अभिभावकको लागि जाँच गर्न सम्झनुहोस्।
जाभास्क्रिप्ट मार्फत affix प्लगइन कल गर्नुहोस्:
- $ ( '#navbar' )। जोड्नु ()
विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-
, जस्तै मा data-offset-top="200"
।
नाम | प्रकार | पूर्वनिर्धारित | विवरण |
---|---|---|---|
अफसेट | नम्बर | प्रकार्य | वस्तु | १० | स्क्रोलको स्थिति गणना गर्दा स्क्रिनबाट अफसेट गर्न पिक्सेलहरू। यदि एकल नम्बर प्रदान गरिएको छ भने, अफसेट माथि र बायाँ दुवै दिशामा लागू हुनेछ। एकल दिशा, वा धेरै अद्वितीय अफसेटहरू सुन्नको लागि, केवल एउटा वस्तु प्रदान गर्नुहोस् offset: { x: 10 } । तपाईंले गतिशील रूपमा अफसेट (केही उत्तरदायी डिजाइनहरूको लागि उपयोगी) प्रदान गर्न आवश्यक हुँदा एक प्रकार्य प्रयोग गर्नुहोस्। |