JavaScript

बूटस्ट्रॅपचे घटक जिवंत करा—आता 13 सानुकूल jQuery प्लगइनसह.

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

प्लगइन वैयक्तिकरित्या समाविष्ट केले जाऊ शकतात (जरी काहींना अवलंबित्व आवश्यक आहे), किंवा सर्व एकाच वेळी. bootstrap.js आणि bootstrap.min.js दोन्हीमध्ये एकाच फाईलमध्ये सर्व प्लगइन असतात.

डेटा विशेषता

तुम्ही JavaScript ची एक ओळ न लिहिता मार्कअप API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरू शकता. हे बूटस्ट्रॅपचे प्रथम श्रेणी API आहे आणि प्लगइन वापरताना तुमचा प्रथम विचार केला पाहिजे.

ते म्हणाले, काही परिस्थितींमध्ये ही कार्यक्षमता बंद करणे इष्ट असू शकते. म्हणून, आम्ही `डेटा-एपीआय'` ने बॉडी नेमस्पेसवरील सर्व इव्हेंट्स अनबाइंड करून डेटा विशेषता API अक्षम करण्याची क्षमता देखील प्रदान करतो. हे असे दिसते:

  1. $ ( 'शरीर' ). बंद ( '.data-api' )

वैकल्पिकरित्या, विशिष्ट प्लगइनला लक्ष्य करण्यासाठी, फक्त प्लगइनचे नाव नेमस्पेस म्हणून डेटा-एपीआय नेमस्पेससह समाविष्ट करा:

  1. $ ( 'शरीर' ). बंद ( '.alert.data-api' )

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

आम्हाला विश्वास आहे की तुम्ही JavaScript API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरण्यास सक्षम असाल. सर्व सार्वजनिक API एकल, साखळी पद्धती आहेत आणि त्यावर कारवाई केलेले संकलन परत करतात.

  1. $ ( ".btn. धोका" ). बटण ( "टॉगल" ). addClass ( "चरबी" )

सर्व पद्धतींनी पर्यायी पर्याय ऑब्जेक्ट, विशिष्ट पद्धतीला लक्ष्य करणारी स्ट्रिंग किंवा काहीही (जे डीफॉल्ट वर्तनासह प्लगइन सुरू करते) स्वीकारले पाहिजे:

  1. $ ( "#myModal" ). modal () // डीफॉल्टसह आरंभ केलेले
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // कीबोर्डशिवाय आरंभ केलेले
  3. $ ( "#myModal" ). modal ( 'शो' ) // आरंभ करतो आणि लगेच शोला आमंत्रित करतो

प्रत्येक प्लगइन त्याच्या रॉ कन्स्ट्रक्टरला `कन्स्ट्रक्टर` गुणधर्मावर देखील उघड करते: $.fn.popover.Constructor. तुम्ही विशिष्ट प्लगइन उदाहरण मिळवू इच्छित असल्यास, ते थेट घटकावरून पुनर्प्राप्त करा: $('[rel=popover]').data('popover').

संघर्ष नाही

कधीकधी इतर UI फ्रेमवर्कसह बूटस्ट्रॅप प्लगइन वापरणे आवश्यक असते. या परिस्थितीत, नेमस्पेसची टक्कर अधूनमधून होऊ शकते. असे झाल्यास, तुम्ही .noConflictज्या प्लगइनचे मूल्य परत करू इच्छिता त्यावर कॉल करू शकता.

  1. var bootstrapButton = $ . fn _ बटण _ noConflict () // $.fn.button पूर्वी नियुक्त केलेल्या मूल्यावर परत करा
  2. $ . fn _ bootstrapBtn = बूटस्ट्रॅप बटण // $().bootstrapBtn बूटस्ट्रॅप कार्यक्षमता द्या

कार्यक्रम

बूटस्ट्रॅप बहुतेक प्लगइनच्या अद्वितीय क्रियांसाठी सानुकूल इव्हेंट प्रदान करते. सामान्यतः, हे अनंत आणि भूतकाळातील कृदंत स्वरूपात येतात - जिथे अनंत (उदा. show) एखाद्या घटनेच्या प्रारंभी ट्रिगर केले जाते आणि त्याचे भूतकाळातील कृदंत स्वरूप (उदा. shown) क्रिया पूर्ण झाल्यावर ट्रिगर होते.

सर्व अनंत घटना पूर्वनिर्धारित कार्यक्षमता प्रतिबंधित करतात. हे कृती सुरू होण्यापूर्वी त्याची अंमलबजावणी थांबविण्याची क्षमता प्रदान करते.

  1. $ ( '#myModal' ). वर ( 'शो' , फंक्शन ( ) {
  2. जर (! डेटा ) परत करा . प्रतिबंधित डीफॉल्ट () // मॉडेल दर्शविण्यापासून थांबवते
  3. })

संक्रमणांबद्दल

साध्या संक्रमण प्रभावांसाठी, इतर JS फायलींसोबत bootstrap-transition.js एकदा समाविष्ट करा. जर तुम्ही संकलित (किंवा मिनिफाइड) bootstrap.js वापरत असाल , तर हे समाविष्ट करण्याची गरज नाही—ते आधीपासून आहे.

केसेस वापरा

संक्रमण प्लगइनची काही उदाहरणे:

  • मोडल्समध्ये स्लाइडिंग किंवा फेडिंग
  • टॅब लुप्त होत आहे
  • अलर्ट बाहेर लुप्त होत आहे
  • सरकता कॅरोसेल पटल

उदाहरणे

मॉडेल्स सुव्यवस्थित, परंतु लवचिक, किमान आवश्यक कार्यक्षमतेसह आणि स्मार्ट डीफॉल्टसह संवाद प्रॉम्प्ट करतात.

स्थिर उदाहरण

शीर्षलेख, मुख्य भाग आणि तळटीपमधील क्रियांच्या संचासह प्रस्तुत केलेले मॉडेल.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> मॉडेल शीर्षलेख </h3>
  5. </div>
  6. <div वर्ग = "मॉडल-बॉडी" >
  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" वर्ग = "modal hide fade" tabindex = "-1" भूमिका = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > मॉडेल शीर्षलेख </h3>
  9. </div>
  10. <div वर्ग = "मॉडल-बॉडी" >
  11. <p> एक सुरेख शरीर… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > बंद करा </button>
  15. <button class = "btn btn-primary" > बदल जतन करा </button>
  16. </div>
  17. </div>

वापर

डेटा विशेषतांद्वारे

JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा data-toggle="modal", जसे की बटणासह, data-target="#foo"किंवा href="#foo"टॉगल करण्यासाठी विशिष्ट मॉडेल लक्ष्य करण्यासाठी.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > मोडल लाँच करा </button>

JavaScript द्वारे

myModalJavaScript च्या एका ओळीसह id सह मॉडेल कॉल करा :

  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>

पद्धती

.modal(पर्याय)

तुमची सामग्री मॉडेल म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

  1. $ ( '#myModal' ). मॉडेल ({
  2. कीबोर्ड : असत्य
  3. })

.modal('टॉगल')

मॅन्युअली एक मॉडेल टॉगल करते.

  1. $ ( '#myModal' ). मॉडेल ( 'टॉगल' )

.modal('शो')

मॅन्युअली एक मॉडेल उघडते.

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

.modal('लपवा')

मॅन्युअली एक मॉडेल लपवते.

  1. $ ( '#myModal' ). मॉडेल ( 'लपवा' )

कार्यक्रम

बूटस्ट्रॅपचा मॉडेल क्लास मोडल फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

कार्यक्रम वर्णन
दाखवा showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले जेव्हा मॉडेल वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
लपवा hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
लपलेले जेव्हा मॉडेल वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
  1. $ ( '#myModal' ). वर ( 'लपलेले' , कार्य () {
  2. // काहीतरी कर…
  3. })

नवबारमधील उदाहरण

ScrollSpy प्लगइन स्क्रोल स्थितीवर आधारित एनएव्ही लक्ष्य स्वयंचलितपणे अद्यतनित करण्यासाठी आहे. navbar खालील क्षेत्र स्क्रोल करा आणि सक्रिय वर्ग बदल पहा. ड्रॉपडाउन उप आयटम देखील हायलाइट केले जातील.

@फॅट

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ते विकले जाण्यापूर्वी. Tumblr फार्म-टू-टेबल सायकल अधिकार काहीही असो. Anim keffiyeh carles cardigan. Velit seitan mcsweeney चे फोटो बूथ 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल आणि कार्डिगन ट्रस्ट फंड कल्पा बायोडिझेल वेस एंडरसन सौंदर्यशास्त्र. निहिल टॅटू अक्यूसमस, क्रेड आयरनी बायोडिझेल केफीयेह कारागीर उल्लामको परिणाम.

@mdo

वेनिअम मारफा मिश्या स्केटबोर्ड, अॅडिपिसिसिंग फ्यूगिएट वेलीट पिचफोर्क दाढी. फ्रीगन दाढी अलिक्वा कपिडॅटॅट मॅकस्वीनीचा वेरो. क्युपिडाट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्ल्स. टॅटू कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl. लो-फाय वेस अँडरसन +1 सारटोरियल. कार्लेस नॉन एस्थेटिक एक्सरसिटेशन quis gentrify. ब्रुकलिन अॅडिपिसिसिंग क्राफ्ट बिअर व्हाइस कीटार डेझरंट.

एक

Occaecat commodo aliqua delectus. फॅप क्राफ्ट बिअर डेझरंट स्केटबोर्ड ईए. लोमो सायकल राइट्स अॅडिपिसिसिंग बॅन मी, वेलीट ईए सन नेक्स्ट लेव्हल लोकाव्होर सिंगल-ओरिजिन कॉफी इन मॅग्ना व्हेनिअम. हाय लाइफ आयडी विनाइल, इको पार्क कॉन्सेक्वॅट क्विस अलिक्विप बॅन मी पिचफोर्क. व्हेरो व्हीएचएस हे ऍडिपिसिसिंग आहे. DIY किमान मेसेंजर बॅग कनेक्ट करा. क्रेडिट एक्स इन, शाश्वत डिलेक्टस कॉन्सेक्टुर फॅनी पॅक आयफोन.

दोन

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

three

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

Keytar twee ब्लॉग, culpa मेसेंजर बॅग marfa जे काही delectus अन्न ट्रक. Sapiente synth id गृहीत धरा. Locavore sed helvetica cliche irony, thundercats तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल हूडी ग्लूटेन-फ्री lo-fi fap aliquip. टेरी रिचर्डसन प्रॉडेंट ब्रंच नेसियंट क्विस कॉस्बी स्वेटर पॅरियातूर केफियेह यूट हेल्वेटिका आर्टिसन म्हणून विकल्या जाण्यापूर्वी कामगार एलिट प्लेसॅट. कार्डिगन क्राफ्ट बिअर सीटन रेडीमेड वेलीट. व्हीएचएस चेंब्रे श्रमिक टेम्पर व्हेनिअम. अनिम मॉलिट मिनिम कमोडो उल्लाम्को गडगडाट.


वापर

डेटा विशेषतांद्वारे

तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"तुम्हाला ज्या घटकाची टेहळणी करायची आहे (बहुतेक ते मुख्य भाग असेल) आणि data-target=".navbar"कोणती नेव्ही वापरायची ते निवडा. तुम्हाला एका .navघटकासह scrollspy वापरायचा आहे.

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

JavaScript द्वारे

JavaScript द्वारे scrollspy ला कॉल करा:

  1. $ ( '#navbar' ). scrollspy ()
सावधान! नवबार लिंक्समध्ये निराकरण करण्यायोग्य आयडी लक्ष्य असणे आवश्यक आहे. उदाहरणार्थ, <a href="#home">home</a>डोममधील एखाद्या गोष्टीशी संबंधित असणे आवश्यक आहे जसे की <div id="home"></div>.

पद्धती

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

DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset="".

नाव प्रकार डीफॉल्ट वर्णन
ऑफसेट संख्या 10 स्क्रोलच्या स्थितीची गणना करताना वरून ऑफसेट करण्यासाठी पिक्सेल.

कार्यक्रम

कार्यक्रम वर्णन
सक्रिय करा जेव्हा जेव्हा स्क्रोलस्पाय द्वारे नवीन आयटम सक्रिय होतो तेव्हा हा कार्यक्रम सुरू होतो.

उदाहरण टॅब

स्थानिक सामग्रीच्या उपखंडातून संक्रमण करण्यासाठी द्रुत, डायनॅमिक टॅब कार्यक्षमता जोडा, अगदी ड्रॉपडाउन मेनूद्वारे.

रॉ डेनिम तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल जीन शॉर्ट्स ऑस्टिन. Nesciunt tofu stumptown aliqua, retro synth master cleanse. मिश्या क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स व्हेगन हेल्वेटिका. Reprehenderit butcher retro keffiyeh dreamcatcher synth. कॉस्बी स्वेटर ईयू बान्ह मी, क्वि इरुरे टेरी रिचर्डसन माजी स्क्विड. एलिक्विप प्लेसॅट सॅल्व्हिया सिलम आयफोन. Seitan aliquip quis cardigan American apparel, 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.


वापर

JavaScript द्वारे टॅब करण्यायोग्य टॅब सक्षम करा (प्रत्येक टॅब स्वतंत्रपणे सक्रिय करणे आवश्यक आहे):

  1. $ ( '#myTab a' ). क्लिक करा ( कार्य ( e ) {
  2. _ प्रतिबंधित डीफॉल्ट ();
  3. $ ( हे ). टॅब ( 'शो' );
  4. })

तुम्ही वैयक्तिक टॅब अनेक प्रकारे सक्रिय करू शकता:

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

मार्कअप

तुम्ही कोणतेही JavaScript न लिहिता टॅब किंवा पिल नेव्हिगेशन सक्रिय करू शकता फक्त एक घटक निर्दिष्ट करून data-toggle="tab"किंवा त्यावर. टॅबमध्ये आणि वर्ग data-toggle="pill"जोडल्याने बूटस्ट्रॅप टॅब शैली लागू होईल.navnav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > प्रोफाइल </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > संदेश </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > सेटिंग्ज </a></li>
  6. </ul>

पद्धती

$().टॅब

टॅब घटक आणि सामग्री कंटेनर सक्रिय करते. टॅबमध्ये DOM मध्ये कंटेनर नोडला लक्ष्य करणारा एक data-targetकिंवा एक असावा.href

  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 = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "सेटिंग्ज" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( कार्य () {
  17. $ ( '#myTab a:last' ). टॅब ( 'शो' );
  18. })
  19. </script>

कार्यक्रम

कार्यक्रम वर्णन
दाखवा हा कार्��क्रम टॅब शोवर सुरू होतो, परंतु नवीन टॅब दाखवण्यापूर्वी. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
दाखवले टॅब दर्शविल्यानंतर हा कार्यक्रम टॅब शोवर सुरू होतो. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). वर ( 'दर्शविले' , कार्य ( ) {
  2. _ लक्ष्य // सक्रिय टॅब
  3. _ संबंधित लक्ष्य // मागील टॅब
  4. })

उदाहरणे

जेसन फ्रेमने लिहिलेल्या उत्कृष्ट jQuery.tipsy प्लगइनद्वारे प्रेरित; टूलटिप्स ही एक अद्ययावत आवृत्ती आहे, जी प्रतिमांवर अवलंबून नाही, अॅनिमेशनसाठी CSS3 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरतात.

कार्यप्रदर्शन कारणांसाठी, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत, म्हणजे तुम्ही ते स्वतःच सुरू केले पाहिजेत .

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

घट्ट पँट पुढील स्तरावर केफियेह तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल. फोटो बूथ दाढी कच्ची डेनिम लेटरप्रेस शाकाहारी मेसेंजर बॅग स्टंपटाउन. फार्म-टू-टेबल सीटन, मॅकस्वीनीच्या फिक्सी सस्टेनेबल क्विनोआ 8-बिट अमेरिकन परिधानमध्ये टेरी रिचर्डसन विनाइल चेंब्रे आहे. दाढी स्टंपटाऊन, कार्डिगन्स बन मी लोमो थंडरकॅट्स. टोफू बायोडिझेल विलियम्सबर्ग मार्फा, चार लोको मॅकस्वेनी क्लीन्स व्हेगन चेंब्रे. एक खरोखर उपरोधिक कारागीर काहीही असो कीटार, सीनस्टर फार्म-टू-टेबल बँक्सी ऑस्टिन ट्विटर हँडल फ्रीगन क्रेड रॉ डेनिम सिंगल-ओरिजिन कॉफी व्हायरल.

चार दिशा

इनपुट गटांमध्ये टूलटिप्स

बूटस्ट्रॅप इनपुट गटांसह टूलटिप आणि पॉपओव्हर्स वापरताना, containerअवांछित दुष्परिणाम टाळण्यासाठी तुम्हाला (खाली दस्तऐवजीकरण केलेले) पर्याय सेट करावा लागेल.


वापर

JavaScript द्वारे टूलटिप ट्रिगर करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे टूलटिपवर सीएसएस फेड संक्रमण लागू करा
html बुलियन खोटे टूलटिपमध्ये html घाला. असत्य असल्यास, डोममध्ये textसामग्री घालण्यासाठी jquery ची पद्धत वापरली जाईल. तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
प्लेसमेंट स्ट्रिंग | कार्य 'शीर्ष' टूलटिप कसे ठेवावे - शीर्ष | तळाशी | डावीकडे | बरोबर
निवडकर्ता स्ट्रिंग खोटे निवडक प्रदान केल्यास, टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील.
शीर्षक स्ट्रिंग | कार्य '' `शीर्षक` टॅग उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य
ट्रिगर स्ट्रिंग 'फोकस फिरवा' टूलटिप कसे ट्रिगर केले जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही केस पास ट्रिगर मल्टिपल, स्पेस सेपरेटेड, ट्रिगर प्रकार लक्षात घ्या.
विलंब संख्या | वस्तू 0

टूलटिप (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट रचना आहे:delay: { show: 500, hide: 100 }

कंटेनर स्ट्रिंग | खोटे खोटे

विशिष्ट घटकास टूलटिप जोडतेcontainer: 'body'

सावधान! वैयक्तिक टूलटिपसाठी पर्याय वैकल्पिकरित्या डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

मार्कअप

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > माझ्यावर फिरवा </a>

पद्धती

$().टूलटिप(पर्याय)

घटक संकलनासाठी टूलटिप हँडलर संलग्न करते.

.टूलटिप('शो')

घटकाची टूलटिप प्रकट करते.

  1. $ ( '#element' ). टूलटिप ( 'शो' )

.टूलटिप('लपवा')

घटकाची टूलटिप लपवते.

  1. $ ( '#element' ). टूलटिप ( 'लपवा' )

.टूलटिप('टॉगल')

घटकाची टूलटिप टॉगल करते.

  1. $ ( '#element' ). टूलटिप ( 'टॉगल' )

.टूलटिप('नष्ट')

घटकाची टूलटिप लपवते आणि नष्ट करते.

  1. $ ( '#element' ). टूलटिप ( 'नाश करा' )

उदाहरणे

गृहनिर्माण दुय्यम माहितीसाठी कोणत्याही घटकामध्ये iPad वरील सामग्रीचे छोटे आच्छादन जोडा. पॉपओव्हर ट्रिगर करण्यासाठी बटणावर फिरवा. टूलटिप समाविष्ट करणे आवश्यक आहे.

स्थिर पॉपओव्हर

चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.

पॉपओव्हर टॉप

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

Popover उजवीकडे

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

पॉपओव्हर तळाशी

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

पॉपओव्हर बाकी

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

जावास्क्रिप्ट आणि विशेषतामधील सामग्रीमधून पॉपओव्हर्स म्हणून कोणतेही मार्कअप दाखवले जात नाही data.

थेट डेमो

चार दिशा


वापर

JavaScript द्वारे popovers सक्षम करा:

  1. $ ( '#उदाहरण' ). पॉपओव्हर ( पर्याय )

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे टूलटिपवर सीएसएस फेड संक्रमण लागू करा
html बुलियन खोटे पॉपओव्हरमध्ये html घाला. असत्य असल्यास, डोममध्ये textसामग्री घालण्यासाठी jquery ची पद्धत वापरली जाईल. तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
प्लेसमेंट स्ट्रिंग | कार्य 'बरोबर' पॉपओव्हर - टॉप | तळाशी | डावीकडे | बरोबर
निवडकर्ता स्ट्रिंग खोटे जर निवडकर्ता प्रदान केला असेल, तर टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांसाठी सुपूर्द केल्या जातील
ट्रिगर स्ट्रिंग 'क्लिक करा' पॉपओव्हर कसे ट्रिगर केले जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल
शीर्षक स्ट्रिंग | कार्य '' `शीर्षक` विशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य
सामग्री स्ट्रिंग | कार्य '' `डेटा-सामग्री` विशेषता उपस्थित नसल्यास डीफॉल्ट सामग्री मूल्य
विलंब संख्या | वस्तू 0

पॉपओव्हर (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट रचना आहे:delay: { show: 500, hide: 100 }

कंटेनर स्ट्रिंग | खोटे खोटे

एका विशिष्ट घटकाला पॉपओव्हर जोडतेcontainer: 'body'

सावधान! वैयक्तिक पॉपओव्हरसाठी पर्याय वैकल्पिकरित्या डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

मार्कअप

कार्यक्षमतेच्या कारणास्तव, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत. जर तुम्हाला त्यांचा वापर करायचा असेल तर फक्त निवडक पर्याय निर्दिष्ट करा.

पद्धती

$().पॉपओव्हर(पर्याय)

घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.

.popover('शो')

घटक पॉपओव्हर प्रकट करते.

  1. $ ( '#element' ). पॉपओव्हर ( 'शो' )

.popover('लपवा')

एक घटक पॉपओव्हर लपवते.

  1. $ ( '#element' ). पॉपओव्हर ( 'लपवा' )

.popover('टॉगल')

घटक पॉपओव्हर टॉगल करते.

  1. $ ( '#element' ). पॉपओव्हर ( 'टॉगल' )

.popover('नष्ट')

घटकाचे पॉपओव्हर लपवते आणि नष्ट करते.

  1. $ ( '#element' ). पॉपओव्हर ( 'नष्ट' )

उदाहरणे सूचना

या प्लगइनसह सर्व अलर्ट संदेशांमध्ये डिसमिस कार्यक्षमता जोडा.

पवित्र 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 class = "close" data-dismiss = "alert" href = "#" > × </a>

पद्धती

$().सूचना()

जवळच्या कार्यक्षमतेसह सर्व अलर्ट गुंडाळते. तुमच्‍या सूचना बंद केल्‍यावर अॅनिमेट करण्‍यासाठी, त्‍यांना आधीपासून लागू केलेला वर्ग .fadeआणि वर्ग आहे याची खात्री करा..in

.alert('बंद')

सूचना बंद करते.

  1. $ ( ". अलर्ट" ). इशारा ( 'बंद' )

कार्यक्रम

बूटस्ट्रॅपचा अॅलर्ट क्लास अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

कार्यक्रम वर्णन
बंद closeजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
बंद जेव्हा इशारा बंद केला जातो तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
  1. $ ( '#my-alert' ). bind ( 'बंद' , कार्य () {
  2. // काहीतरी कर…
  3. })

उदाहरण वापर

बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.

स्टेटफुल

data-loading-text="Loading..."बटणावर लोडिंग स्थिती वापरण्यासाठी जोडा .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > लोड होत आहे स्थिती </button>

सिंगल टॉगल

data-toggle="button"एका बटणावर टॉगलिंग सक्रिय करण्यासाठी जोडा .

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > सिंगल टॉगल </button>

चेकबॉक्स

data-toggle="buttons-checkbox"btn-ग्रुपवर चेकबॉक्स शैली टॉगल करण्यासाठी जोडा .

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > डावे </button>
  3. <button type = "button" class = "btn btn-प्राथमिक" > मध्यम </ बटन>
  4. <button type = "button" class = "btn btn-primary" > उजवे </ बटन>
  5. </div>

रेडिओ

data-toggle="buttons-radio"btn-ग्रुपवर रेडिओ शैली टॉगलसाठी जोडा .

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > डावे </button>
  3. <button type = "button" class = "btn btn-प्राथमिक" > मध्यम </ बटन>
  4. <button type = "button" class = "btn btn-primary" > उजवे </ बटन>
  5. </div>

वापर

JavaScript द्वारे बटणे सक्षम करा:

  1. $ ( '.nav-टॅब' ). बटण ()

मार्कअप

बटण प्लगइनसाठी डेटा विशेषता अविभाज्य आहेत. विविध मार्कअप प्रकारांसाठी खालील उदाहरण कोड पहा.

पर्याय

काहीही नाही

पद्धती

$().बटण('टॉगल')

टॉगल पुश स्थिती. बटण सक्रिय केले आहे असे स्वरूप देते.

सावधान! data-toggleतुम्ही विशेषता वापरून बटणाचे ऑटो टॉगलिंग सक्षम करू शकता .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().बटण('लोड करत आहे')

बटण स्थिती लोड करण्यासाठी सेट करते - बटण अक्षम करते आणि मजकूर लोड करण्यासाठी मजकूर बदलते. डेटा विशेषता वापरून लोडिंग मजकूर बटण घटकावर परिभाषित केला पाहिजे data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "सामग्री लोड करत आहे..." > ... </button>
सावधान! फायरफॉक्स संपूर्ण पृष्ठ लोडमध्ये अक्षम स्थिती कायम ठेवते . यासाठी एक उपाय वापरणे आवश्यक आहे autocomplete="off".

$().बटण('रीसेट')

बटण स्थिती रीसेट करते - मजकूर मूळ मजकुरामध्ये बदलतो.

$().बटण(स्ट्रिंग)

बटण स्थिती रीसेट करते - कोणत्याही डेटा परिभाषित मजकूर स्थितीत मजकूर स्वॅप करते.

  1. <button type = "button" class = "btn" data-complete-text = "पूर्ण!" > ... </ बटन>
  2. <script>
  3. $ ( '.btn' ). बटण ( 'पूर्ण' )
  4. </script>

बद्दल

अ‍ॅकॉर्डियन्स आणि नेव्हिगेशन सारख्या संकुचित घटकांसाठी बेस शैली आणि लवचिक समर्थन मिळवा.

* संक्रमण प्लगइन समाविष्ट करणे आवश्यक आहे.

एकॉर्डियनचे उदाहरण

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, संट एलिक्वा पुट अ बर्ड ऑन इट स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. ऍड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, संट एलिक्वा पुट अ बर्ड ऑन इट स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. ऍड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, संट एलिक्वा पुट अ बर्ड ऑन इट स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. ऍड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a वर्ग = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. संकुचित करण्यायोग्य गट आयटम #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  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 = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. संकुचित करण्यायोग्य गट आयटम #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" वर्ग = "accordion-body collapse" >
  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". हे कृतीत पाहण्यासाठी डेमोचा संदर्भ घ्या.

JavaScript द्वारे

यासह व्यक्तिचलितपणे सक्षम करा:

  1. $ ( ". कोलॅप्स" ). कोसळणे ()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-parent="".

नाव प्रकार डीफॉल्ट वर्णन
पालक निवडकर्ता खोटे निवडक असल्यास, जेव्हा हा संकुचित करता येणारा आयटम दर्शविला जाईल तेव्हा निर्दिष्ट पॅरेंट अंतर्गत सर्व संकुचित करण्यायोग्य घटक बंद केले जातील. (पारंपारिक एकॉर्डियन वर्तनासारखे)
टॉगल बुलियन खरे आमंत्रणावर संकुचित करण्यायोग्य घटक टॉगल करते

पद्धती

.कोलॅप्स(पर्याय)

तुमची सामग्री संकुचित करण्यायोग्य घटक म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

  1. $ ( '#myCollapsible' ). संकुचित ({
  2. टॉगल : खोटे
  3. })

.कोलॅप्स('टॉगल')

दर्शविण्यासाठी किंवा लपविण्यासाठी संकुचित करण्यायोग्य घटक टॉगल करते.

.कोलॅप्स('शो')

एक संकुचित घटक दर्शविते.

.कोलॅप्स ('लपवा')

संकुचित करता येणारा घटक लपवतो.

कार्यक्रम

बूटस्ट्रॅपचा कोलॅप्स क्लास कोलॅप्स फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

कार्यक्रम वर्णन
दाखवा showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले जेव्हा संकुचित घटक वापरकर्त्यासाठी दृश्यमान केला जातो तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
लपवा hideपद्धत कॉल केल्यावर हा कार्यक्रम ताबडतोब उडाला आहे.
लपलेले संकुचित घटक वापरकर्त्यापासून लपविला गेल्यावर हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
  1. $ ( '#myCollapsible' ). वर ( 'लपलेले' , कार्य () {
  2. // काहीतरी कर…
  3. })

उदाहरण

कोणत्याही फॉर्म मजकूर इनपुटसह त्वरीत मोहक टाइपहेड तयार करण्यासाठी मूलभूत, सहज विस्तारित प्लगइन.

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

autocomplete="off"बूटस्ट्रॅप टाइपहेड ड्रॉपडाउनवर डीफॉल्ट ब्राउझर मेनू दिसण्यापासून प्रतिबंधित करण्यासाठी तुम्ही सेट करू इच्छित असाल .


वापर

डेटा विशेषतांद्वारे

वरील उदाहरणात दाखवल्याप्रमाणे टाइपहेड कार्यक्षमतेसह घटकाची नोंदणी करण्यासाठी डेटा विशेषता जोडा.

JavaScript द्वारे

टाइपहेडला मॅन्युअली कॉल करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-source="".

नाव प्रकार डीफॉल्ट वर्णन
स्रोत अॅरे, फंक्शन [ ] विरुद्ध क्वेरी करण्यासाठी डेटा स्रोत. स्ट्रिंगचा अ‍ॅरे किंवा फंक्शन असू शकते. फंक्शनला दोन वितर्क दिले जातात, queryइनपुट फील्डमधील मूल्य आणि processकॉलबॅक. processकॉलबॅकच्या सिंगल आर्ग्युमेंटद्वारे डेटा स्रोत थेट किंवा असिंक्रोनस रिटर्न करून फंक्शन सिंक्रोनसपणे वापरले जाऊ शकते .
आयटम संख्या 8 ड्रॉपडाउनमध्ये प्रदर्शित करण्यासाठी आयटमची कमाल संख्या.
किमान लांबी संख्या स्वयंपूर्ण सूचना ट्रिगर करण्यापूर्वी आवश्यक किमान वर्ण लांबी
जुळणारा कार्य केस असंवेदनशील क्वेरी एखाद्या आयटमशी जुळते किंवा नाही हे निर्धारित करण्यासाठी वापरली जाणारी पद्धत. एकच युक्तिवाद स्वीकारतो, ज्याच्या itemविरुद्ध क्वेरीची चाचणी करायची आहे. सह वर्तमान क्वेरीमध्ये प्रवेश करा this.query. trueजर क्वेरी जुळत असेल तर बुलियन परत करा .
सॉर्टर कार्य अचूक जुळणी,
केस संवेदनशील,
केस असंवेदनशील
स्वयंपूर्ण परिणामांची क्रमवारी लावण्यासाठी वापरली जाणारी पद्धत. एकल युक्तिवाद स्वीकारतो itemsआणि टाइपहेड उदाहरणाची व्याप्ती आहे. सह वर्तमान क्वेरीचा संदर्भ द्या this.query.
अपडेटर कार्य निवडलेला आयटम परत करतो निवडलेला आयटम परत करण्यासाठी वापरलेली पद्धत. एकल युक्तिवाद स्वीकारतो, itemआणि टाइपहेड उदाहरणाची व्याप्ती आहे.
हायलाइटर कार्य सर्व डीफॉल्ट सामने हायलाइट करते स्वयंपूर्ण परिणाम हायलाइट करण्यासाठी वापरलेली पद्धत. एकल युक्तिवाद स्वीकारतो itemआणि टाइपहेड उदाहरणाची व्याप्ती आहे. html परत केले पाहिजे.

पद्धती

.typeahead(पर्याय)

टाइपहेडसह इनपुट सुरू करते.

उदाहरण

डावीकडील सबनेव्हिगेशन हे ऍफिक्स प्लगइनचे थेट डेमो आहे.


वापर

डेटा विशेषतांद्वारे

कोणत्याही घटकावर सहजतेने affix वर्तन जोडण्यासाठी, फक्त data-spy="affix"तुम्हाला ज्या घटकाची हेरगिरी करायची आहे त्यात जोडा. नंतर घटकाचे पिनिंग चालू आणि बंद केव्हा टॉगल करायचे ते परिभाषित करण्यासाठी ऑफसेट वापरा.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
सावधान! आपण पिन केलेल्या घटकाची स्थिती आणि त्याच्या तात्काळ पालकांचे वर्तन व्यवस्थापित करणे आवश्यक आहे. affixस्थिती , affix-top, आणि द्वारे नियंत्रित केली जाते affix-bottom. पृष्‍ठाच्या सामान्य प्रवाहामधून आशय काढून टाकल्‍याने अॅफिक्स ‍किक होतो तेव्हा संभाव्‍यपणे संकुचित पालक तपासण्‍याचे लक्षात ठेवा.

JavaScript द्वारे

JavaScript द्वारे affix प्लगइनवर कॉल करा:

  1. $ ( '#navbar' ). जोडणे ()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset-top="200".

नाव प्रकार डीफॉल्ट वर्णन
ऑफसेट संख्या | कार्य | वस्तू 10 स्क्रोलच्या स्थितीची गणना करताना स्क्रीनवरून ऑफसेट करण्यासाठी पिक्सेल. एकच क्रमांक प्रदान केल्यास, ऑफसेट वरच्या आणि डावीकडे दोन्ही दिशांना लागू केला जाईल. एकल दिशा, किंवा एकाधिक अद्वितीय ऑफसेट ऐकण्यासाठी, फक्त एक ऑब्जेक्ट प्रदान करा offset: { x: 10 }. जेव्हा तुम्हाला डायनॅमिकली ऑफसेट प्रदान करण्याची आवश्यकता असेल तेव्हा फंक्शन वापरा (काही प्रतिसादात्मक डिझाइनसाठी उपयुक्त).