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

Bootstrap इत्यस्य घटकान् जीवने आनयन्तु—अधुना 13 कस्टम् jQuery प्लगिन्स् इत्यनेन सह।

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

प्लगिन् व्यक्तिगतरूपेण (यद्यपि केषाञ्चन आश्रयाणां आवश्यकता अस्ति), अथवा सर्वे एकदा एव समाविष्टाः भवितुम् अर्हन्ति । bootstrap.js तथा bootstrap.min.js इत्येतयोः द्वयोः अपि एकस्मिन् सञ्चिकायां सर्वाणि प्लगिन्स् सन्ति ।

दत्तांशगुणाः

जावास्क्रिप्ट् इत्यस्य एकां पङ्क्तिं न लिखित्वा भवान् सर्वान् Bootstrap प्लगिन् विशुद्धतया मार्कअप एपिआइ मार्गेण उपयोक्तुं शक्नोति । इदं Bootstrap इत्यस्य प्रथमवर्गस्य API अस्ति तथा च प्लगिन् इत्यस्य उपयोगं कुर्वन् भवतः प्रथमः विचारः भवितुम् अर्हति ।

तत् उक्तं, केषुचित् परिस्थितिषु एतत् कार्यं निष्क्रियं कर्तुं इष्टं भवेत् । अतः, वयं `'data-api'` इत्यनेन सह नामस्थानं कृत्वा शरीरे सर्वाणि घटनानि अनबाइण्ड् कृत्वा data attribute API इत्येतत् अक्षमीकरणस्य क्षमताम् अपि प्रदामः । एतत् एवं दृश्यते-

  1. $ ( 'शरीर' ) । off ( '.डाटा-अपि' ) .

वैकल्पिकरूपेण, विशिष्टं प्लगिन् लक्ष्यं कर्तुं, केवलं प्लगिन् नाम नामस्थानरूपेण data-api नामस्थानेन सह एतादृशं समावेशयन्तु:

  1. $ ( 'शरीर' ) । off ( '.सचेतक.दत्तांश-अपि' ) .

प्रोग्रामेटिक एपीआई

वयम् अपि मन्यामहे यत् भवान् सर्वान् Bootstrap प्लगिन्स् केवलं जावास्क्रिप्ट् एपिआइ मार्गेण उपयोक्तुं समर्थः भवेत् । सर्वे सार्वजनिक एपिआइ एकाः, श्रृङ्खलायोग्याः पद्धतयः सन्ति, तथा च कार्यं कृतं संग्रहं प्रत्यागच्छन्ति ।

  1. $ ( ".btn.खतरा" ). बटन ( "टॉगल" ). addClass ( "वसा" ) .

सर्वैः विधिभिः वैकल्पिकविकल्पवस्तुं, एकं स्ट्रिंग् यत् विधिविशेषं लक्ष्यते, अथवा किमपि न (यत् पूर्वनिर्धारितव्यवहारेन सह प्लगिन् आरभते) स्वीकुर्वीत:

  1. $ ( "# मेरामोडल" ). modal () // पूर्वनिर्धारितों के साथ आरंभ किया गया
  2. $ ( "# मेरामोडल" ). modal ({ keyboard : false }) // कीबोर्ड के साथ आरंभ किया गया
  3. $ ( "# मेरामोडल" ). modal ( 'show' ) // तुरंत दिखाएँ आरंभ करता है एवं आह्वान करता है

प्रत्येकं प्लगिन् अपि `Constructor` गुणस्य उपरि स्वस्य कच्चा कन्स्ट्रक्टर् उजागरयति: $.fn.popover.Constructor. यदि भवान् कञ्चन विशेषं प्लगिन् उदाहरणं प्राप्तुम् इच्छति तर्हि तत् प्रत्यक्षतया कस्मात् तत्त्वात् पुनः प्राप्तुम् इच्छति: $('[rel=popover]').data('popover').

न द्वन्द्वः

कदाचित् अन्यैः UI frameworks इत्यनेन सह Bootstrap plugins इत्यस्य उपयोगः आवश्यकः भवति । एतेषु परिस्थितिषु नामस्थानस्य टकरावः यदा कदा भवितुं शक्नुवन्ति । यदि एतत् भवति तर्हि भवान् .noConflictयस्य प्लगिन् इत्यस्य मूल्यं पुनः प्रत्यागन्तुं इच्छति तत् आह्वयितुं शक्नोति ।

  1. var बूटस्ट्रैपबटन = $ . fn . बटन . noConflict () // पूर्वनिर्धारित मान को $.fn.button वापस करें
  2. $ . fn . bootstrapBtn = bootstrapButton // $ ().bootstrapBtn को बूटस्ट्रैप कार्यक्षमता दे

घटनाः

बूटस्ट्रैप् अधिकांशस्य प्लगिन् इत्यस्य अद्वितीयक्रियाणां कृते कस्टम् इवेण्ट् प्रदाति । सामान्यतः ये अव्यय एवं भूतकालरूप में आते हैं - जहाँ अव्यय (ex. show) किसी घटना के आरम्भ में प्रेरित होता है, तथा उसका भूतकालरूप (ex. shown) किसी क्रिया के समाप्त होने पर उत्प्रेरक होता है।

सर्वाणि अव्ययघटनानि preventDefault कार्यक्षमतां प्रदास्यन्ति । एतेन क्रियायाः आरम्भात् पूर्वं निष्पादनं निवारयितुं क्षमता प्राप्यते ।

  1. $ ( '# मेरामोडल' ). on ( 'दर्शन' , फंक्शन ( ) { .
  2. if (! data ) return . preventDefault () // मोडल को दिखाने से रोकता है
  3. }) इति ।

संक्रमणानां विषये

सरलसंक्रमणप्रभावानाम् कृते, अन्येषां JS सञ्चिकानां पार्श्वे एकवारं bootstrap-transition.js इत्येतत् समावेशयन्तु । यदि भवान् संकलितं (अथवा लघुकृतं) bootstrap.js इत्यस्य उपयोगं करोति तर्हि एतत् समावेशयितुं आवश्यकता नास्ति—इदं पूर्वमेव अस्ति ।

प्रयोग केस

संक्रमणप्लगिन् इत्यस्य कतिचन उदाहरणानि :

  • मोडल में स्खलन या फीकापन
  • ट्याब्स् बहिः फीका भवति
  • फीका आउट अलर्ट
  • स्लाइडिंग हिंडोला फलक

उदाहरणानि

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

स्थिर उदाहरण

पादलेखे शीर्षकं, शरीरं, क्रियासमूहः च सह रेण्डर्ड् मोडल् ।

  1. <div class = "मोडल छिपाएँ फीका" >
  2. <div वर्ग = "मोडल-शीर्षक" >
  3. <बटन प्रकार = "बटन" वर्ग = "बंद करें" डेटा-निराकरण = "मोडल" aria-hidden = "सत्य" > × </बटन> इति
  4. <h3> मोडल शीर्षक </h3>
  5. </div> इति
  6. <div class = "मोडल-शरीर" >
  7. <p> एकं सूक्ष्मशरीरं... </p>
  8. </div> इति
  9. <div class = "मोडल-पाद लेख" >
  10. <a href = "#" वर्ग = "btn" > बन्द करें </a>
  11. <a href = "#" class = "btn btn-primary" > परिवर्तनं रक्षतु </a>
  12. </div> इति
  13. </div> इति

लाइव डेमो

अधोलिखितं बटन् नुत्वा जावास्क्रिप्ट् मार्गेण एकं मोडल् टॉग् कुर्वन्तु । पृष्ठस्य उपरितः अधः स्लाइड् कृत्वा क्षीणं भविष्यति ।

  1. <!-- मोडल को ट्रिगर करने के लिए बटन -->
  2. <a href = "#myModal" भूमिका = "बटन" वर्ग = "btn" data-toggle = "मोडल" > डेमो मोडल प्रारम्भ करें </a>
  3.  
  4. <!-- मोडल -->
  5. <div id = "myModal" वर्ग = "मोडल छिपाना फीका" tabindex = "-1" भूमिका = "संवाद" aria-labelledby = "myModalLabel" aria-hidden = "सत्य" >
  6. <div वर्ग = "मोडल-शीर्षक" >
  7. <बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "मोडल" aria-hidden = "सत्य" > × </button>
  8. <h3 id = "myModalLabel" > मोडल शीर्षक </h3>
  9. </div> इति
  10. <div class = "मोडल-शरीर" >
  11. <p> एकं सूक्ष्मशरीरं... </p>
  12. </div> इति
  13. <div class = "मोडल-पाद लेख" >
  14. <button class = "btn" data-dismiss = "मोडल" aria-hidden = "सत्य" > बंद करें </button>
  15. <button class = "btn btn-primary" > परिवर्तनं रक्षतु </button>
  16. </div> इति
  17. </div> इति

प्रयोगः

डेटा विशेषताओं के माध्यम से

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

  1. <button type = "बटन" data-toggle = "मोडल" data-target = "#myModal" > मोडल प्रारम्भ करें </button>

जावास्क्रिप्ट् मार्गेण

myModalजावास्क्रिप्ट् इत्यस्य एकपङ्क्तौ id इत्यनेन सह मोडल् आह्वयन्तु :

  1. $ ( '# मेरामोडल' ). मोडल ( विकल्प ) .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-backdrop=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
पृष्ठभूमिः बूलियन इति सत्यम्‌ एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, staticएकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति ।
कीबोर्ड बूलियन इति सत्यम्‌ escape कील दबाने पर मोडल बन्द करता है
दर्शयतु बूलियन इति सत्यम्‌ आरम्भे मोडल दर्शयति ।
दूरस्थ पथं असत्य

यदि दूरस्थं url प्रदत्तं भवति तर्हि jQuery इत्यस्य पद्धतिद्वारा सामग्री लोड् भवति loadतथा च .modal-body. यदि भवान् data api इत्यस्य उपयोगं करोति hrefतर्हि दूरस्थस्रोतं निर्दिष्टुं वैकल्पिकरूपेण टैग् इत्यस्य उपयोगं कर्तुं शक्नोति । अस्य उदाहरणं अधः दर्शितम् अस्ति ।

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

विधियाँ

.मोडल(विकल्पाः) .

भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

  1. $ ( '# मेरामोडल' ). मोडल ({
  2. कीलफलकम् : false
  3. }) इति ।

.modal('टॉगल') .

एकं मोडलं मैन्युअल् रूपेण टॉगल करोति।

  1. $ ( '# मेरामोडल' ). मोडल ( 'टॉगल' ) .

.modal('दर्शितुम्') .

मैन्युअल् रूपेण एकं मोडल् उद्घाटयति।

  1. $ ( '# मेरामोडल' ). मोडल ( 'दर्शन' ) .

.मोडल('गोपन') .

एकं मोडलं मैन्युअल् रूपेण गोपयति।

  1. $ ( '# मेरामोडल' ). मोडल ( 'गोपनीय' ) .

घटनाः

बूटस्ट्रैप् इत्यस्य मोडलवर्गः मोडलकार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना वर्णनम्‌
दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम् इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
गोपयतु इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
अदृष्ट इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रेण गोपनीयं समाप्तं भवति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
  1. $ ( '# मेरामोडल' ). on ( 'गुप्त' , फंक्शन () { .
  2. // किमपि कुरुत...
  3. }) इति ।

नवबार में उदाहरण

ScrollSpy प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से nav लक्ष्य अद्यतन करने के लिए है। navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप् डाउन उप आइटम्स् अपि हाइलाइट् भविष्यन्ति।

@स्थूलः

विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor labore. Pitchfork yr enim lo-fi पहले वे बिक चुके qui. Tumblr फार्म-टू-टेबल साइकिल अधिकार जो भी। अनिं केफियेह कार्लेस् कार्डिगन। Velit seitan mcsweeney का फोटो बूथ 3 भेड़िया चन्द्रमा irure. Cosby स्वेटर lomo जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद उन्हें एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल wes anderson सौंदर्यशास्त्र के बारे में नहीं सुनया है। निहिल गोदना accusamus, cred विडंबना बायोडीजल keffiyeh कारीगर ullamco consequat.

@मडो

Veniam marfa मूंछ स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी. Freegan दाढ़ी aliqua cupidat mcsweeney के vero. कामदेवताट चत्वारि लोको निसि, ईए हेल्वेटिका नुल्ला कार्लेस्। टैटू cosby स्वेटर खाद्य ट्रक, mcsweeney के quis गैर freegan vinyl. लो-फि वेस् एण्डरसन +१ सरटोरियल। कार्लेस गैर सौंदर्य व्यायाम quis gentrify. ब्रुकलिन adipisicing शिल्प बियर वाइस keytar deserunt.

एकम्‌

Occaecat commodo एलिक्वा डेलेक्टस। Fap शिल्प बियर deserunt स्केटबोर्ड ईए. लोमो साईकिल अधिकार adipisicing banh mi, velit ea sunt अगले स्तर locavore एकल-मूल कॉफी में magna veniam. उच्च जीवन आईडी vinyl, प्रतिध्वनि पार्क consequat quis aliquip banh mi pitchfork. वेरो VHS est adipisicing. Consectetur nisi DIY न्यूनतम दूत बैग। Cred पूर्व में, टिकाऊ delectus consectetur फैनी पैक iphone.

द्वि

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 दूत बैग marfa जो भी delectus खाद्य ट्रक। Sapiente सिन्थ इड असुमेण्डा। Locavore sed helvetica cliche विडंबना, thundercats आप शायद उनके बारे में नहीं सुना है consequat hoodie लस-मुक्त लो-फाई fap aliquip. Labore अभिजात वर्ग placeat पहले वे बेच दिया, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर. कार्डिगन शिल्प बियर seitan तैयार velit. VHS chambray laboris अस्थायी veniam. Anim mollit न्यूनतम commodo उल्लमको गरज बिल्लियों।


प्रयोगः

डेटा विशेषताओं के माध्यम से

स्वस्य topbar नेविगेशन मध्ये scrollspy व्यवहारं सहजतया योजयितुं, केवलं तस्मिन् data-spy="scroll"तत्त्वे योजयन्तु यस्मिन् भवन्तः जासूसी कर्तुम् इच्छन्ति (अधिकांशतः एतत् शरीरं स्यात्) तथा च data-target=".navbar"कस्य nav इत्यस्य उपयोगं कर्तव्यमिति चयनं कुर्वन्तु भवान् घटकेन सह scrollspy इत्यस्य उपयोगं कर्तुम् इच्छति .nav

  1. <body data-spy = "स्क्रॉल" data-target = ".नवबार" > ... </body>

जावास्क्रिप्ट् मार्गेण

जावास्क्रिप्ट् मार्गेण स्क्रॉलस्पायं आह्वयन्तु:

  1. $ ( '# नवबार' ). स्क्रॉलस्पी () .
शिरः उपरि ! नवबार लिङ्केषु समाधानयोग्याः id लक्ष्याणि भवितुमर्हन्ति । यथा - a <a href="#home">home</a>इत्यस्य डोम् इव किमपि अनुरूपं भवितुमर्हति <div id="home"></div>

विधियाँ

.scrollspy('ताजा') .

DOM तः एलिमेण्ट्स् योजयितुं वा निष्कासयितुं वा सह scrollspy इत्यस्य उपयोगं कुर्वन् भवद्भिः refresh मेथड् इत्येतत् एवं आह्वयितुं आवश्यकं भविष्यति:

  1. $ ( '[डेटा-जासूस = "स्क्रॉल"]' ). प्रत्येकं ( कार्यम् () { .
  2. var $ गुप्तचर = $ ( यह ). scrollspy ( 'ताजगी' ) .
  3. });

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
offset इति संख्या १० स्क्रॉलस्य स्थितिं गणयन्ते सति उपरितः ऑफसेट् कर्तुं पिक्सेलः।

घटनाः

घटना वर्णनम्‌
सक्रिय करें यदा कदापि नूतनं वस्तु scrollspy द्वारा सक्रियं भवति तदा एषा घटना अग्निम् अङ्गीकुर्वति ।

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

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

कच्चा डेनिम भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः jean shorts Austin. Nesciunt टोफू stumptown aliqua, रेट्रो सिंथ मास्टर सफाई. मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी helvetica. Reprehenderit कसाई रेट्रो keffiyeh सपना पकड़ने वाला synth. Cosby स्वेटर eu banh mi, qui irure टेरी रिचर्डसन पूर्व स्क्वीड. Aliquip placeat साल्विया सिलम iphone. Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


प्रयोगः

जावास्क्रिप्ट् मार्गेण टैब-योग्य-ट्याब्स् सक्षमीकरणं कुर्वन्तु (प्रत्येकं ट्याब् व्यक्तिगतरूपेण सक्रियीकरणस्य आवश्यकता अस्ति):

  1. $ ( '# माईटैब क' ). क्लिक करें ( फंक्शन ( ) { .
  2. . preventपूर्वनिर्धारित ();
  3. $ ( इदम् ). tab ( 'दर्शितुम्' );
  4. }) इति ।

भवान् व्यक्तिगत ट्याब्स् अनेकधा सक्रियीकरणं कर्तुं शक्नोति:

  1. $ ( '#myTab a[href="#प्रोफाइल"]' ). tab ( 'दर्शितुम्' ); // नाम से टैब चुनें
  2. $ ( '# myTab एक: प्रथम' ). tab ( 'दर्शितुम्' ); // प्रथम टैब का चयन करें
  3. $ ( '# myTab एक: अन्तिम' ). tab ( 'दर्शितुम्' ); // अन्तिम टैब का चयन करें
  4. $ ( '# myTab li: eq (2) क' ). tab ( 'दर्शितुम्' ); // तृतीय टैब का चयन करें (0-indexed)

मार्कअप

data-toggle="tab"केवलं निर्दिष्टं कृत्वा अथवा data-toggle="pill"कस्यचित् तत्त्वस्य उपरि किमपि जावास्क्रिप्ट् लिखित्वा विना ट्याब् अथवा पिल् नेविगेशनं सक्रियं कर्तुं शक्नुवन्ति । navट्याब् मध्ये and nav-tabsक्लास् योजयित्वा ulBootstrap ट्याब् स्टाइलिंग् प्रयुक्तं भविष्यति ।

  1. <ul class = "नव नव-टैब्स" >
  2. <li><a href = "#home" data-toggle = "टैब" > गृहम् </a></li>
  3. <li><a href = "#प्रोफाइल" data-toggle = "टैब" > प्रोफाइल </a></li>
  4. <li><a href = "#messages" data-toggle = "टैब" > सन्देशाः </a></li>
  5. <li><a href = "#सेटिंग्स्" data-toggle = "टैब" > सेटिंग्स् </a></li>
  6. </ul> इति

विधियाँ

$ ().टैब

एकं ट्याब् एलिमेण्ट् तथा सामग्रीपात्रं सक्रिययति । ट्याब् मध्ये DOM मध्ये एकं पात्रं नोड् लक्ष्यं कृत्वा एकं data-targetवा एकं वा भवितव्यम् ।href

  1. <ul वर्ग = "नव नव-टैब" id = "myTab" >
  2. <li class = "सक्रिय" ><a href = "#home" > गृहम् </a></li>
  3. <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li>
  4. <li><a href = "#messages" > सन्देशाः </a></li>
  5. <li><a href = "#सेटिंग्स्" > सेटिंग्स् </a></li>
  6. </ul> इति
  7.  
  8. <div class = "टैब-सामग्री" >
  9. <div class = "टैब-पैन सक्रिय" id = "गृह" > ... </div>
  10. <div class = "टैब-पैन" id = "प्रोफाइल" > ... </div>
  11. <div class = "टैब-पैन" id = "सन्देशाः" > ... </div>
  12. <div class = "टैब-पैन" id = "सेटिंग्स्" > ... </div>
  13. </div> इति
  14.  
  15. <लिपि> इति
  16. $ ( फंक्शन () { .
  17. $ ( '# myTab एक: अन्तिम' ). tab ( 'दर्शितुम्' );
  18. }) इति ।
  19. </script> इति

घटनाः

घटना वर्णनम्‌
दर्शयतु इदं इवेण्ट् ट्याब् शो इत्यत्र अग्निम् अङ्गीकुर्वति, परन्तु नूतनं ट्याब् दर्शितस्य पूर्वं । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए event.targetऔर का प्रयोग करें ।event.relatedTarget
दर्शितम् एतत् इवेण्ट् ट्याब् दर्शितस्य अनन्तरं tab show इत्यत्र प्रज्वलितं भवति । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए event.targetऔर का प्रयोग करें ।event.relatedTarget
  1. $ ( 'एक [डेटा-टॉगल = "टैब"]' ). on ( 'दर्शित' , फंक्शन ( ) { .
  2. . लक्ष्य // सक्रिय टैब
  3. . relatedTarget // पूर्व टैब
  4. }) इति ।

उदाहरणानि

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

कार्यप्रदर्शनकारणात्, tooltip तथा popover data-apis opt in भवन्ति, अर्थात् भवान् स्वयमेव तान् आरभणीयम् .

उपकरणसूचनानि द्रष्टुं अधोलिङ्कानि उपरि माउसं कुर्वन्तु:

टाइट पैंट अग्रिम स्तर keffiyeh भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग stumptown. खेत-से-मेज seitan, mcsweeney के fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान एक टेरी richardson vinyl chambray है। दाढ़ी स्टम्पटाउन, कार्डिगन बान्ह मि लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray. एक वास्तव में विडंबना कारीगर जो भी keytar , scenester खेत-से-मेज banksy ऑस्टिन twitter संभाल freegan cred कच्चे डेनिम एकल-मूल कॉफी वायरल.

चत्वारि दिशः

इनपुट् समूहेषु टूलटिप्स

Bootstrap इनपुट् समूहैः सह टूल्टिप्स तथा पोपोवर्स् इत्यस्य उपयोगं कुर्वन्, अवांछितदुष्प्रभावान् containerपरिहरितुं भवद्भिः (अधः दस्तावेजितं) विकल्पं सेट् कर्तव्यं भविष्यति ।


प्रयोगः

जावास्क्रिप्ट् मार्गेण टूलटिप् ट्रिगरं कुर्वन्तु:

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ टूलटिप् मध्ये css fade संक्रमणं प्रयोजयन्तु
html बूलियन इति असत्य टूल्टिप् मध्ये html सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि jquery इत्यस्य textविधिः dom मध्ये सामग्रीं सम्मिलितुं उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम् तार | नियोग 'उपरितन' how to position the tooltip - शीर्ष | तले | वाम | दक्षिणः
चयनकर्ता सूत्र असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्याणां कृते टूल्टिप् ऑब्जेक्ट्स् प्रत्यायिताः भविष्यन्ति ।
शीर्षक तार | नियोग '' इति । पूर्वनिर्धारित शीर्षक मान यदि `title` टैग मौजूद नहीं है
प्रवर्त्यम् सूत्र 'होवर फोकस' इति । how tooltip is triggered - नुदन्तु | भ्रमति | फोकस | शास्त्र। ध्यानं कुर्वन्तु भवन्तः case pass trigger mutliple, space seperated, trigger प्रकाराः ।
विलम्बः संख्या | वस्तु

tooltip (ms) दर्शयन् गोपयन् च विलम्बः - मैनुअल् ट्रिगर प्रकारे न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { show: 500, hide: 100 }

पात्रम् तार | असत्य असत्य

विशिष्टे तत्त्वे टूल्टिप् योजयतिcontainer: 'body'

शिरः उपरि ! व्यक्तिगतसाधनसूचनानां विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते ।

मार्कअप

  1. <a href = "#" data-toggle = "उपकरणटिप्पणी" title = "प्रथमं साधनटिप्पणी" > मम उपरि मण्डुमं कुरुत </a>

विधियाँ

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

एलिमेण्ट्-सङ्ग्रहे टूल्टिप्-हन्डलर् संलग्नं करोति ।

.tooltip('दर्शितुम्') .

एकस्य तत्त्वस्य टूल्टिप् प्रकाशयति ।

  1. $ ( '# तत्व' ). tooltip ( 'दर्शितुम्' ) .

.tooltip('गोपन') .

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति ।

  1. $ ( '# तत्व' ). tooltip ( 'गोपनीयम्' ) .

.tooltip('टॉगल') .

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् टॉग्ल् करोति ।

  1. $ ( '# तत्व' ). tooltip ( 'टॉगल' ) .

.tooltip('नाश करना')

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति, नष्टं च करोति ।

  1. $ ( '# तत्व' ). tooltip ( 'नाश करना' ) .

उदाहरणानि

गौणसूचनायाः आवासार्थं कस्मिन् अपि तत्त्वे iPad इत्यत्र इव सामग्रीयाः लघु-आच्छादनानि योजयन्तु । पोपोवरं प्रेरयितुं बटनस्य उपरि माउसं कुर्वन्तु। Tooltip इत्येतत् समाविष्टं कर्तुं आवश्यकम्

स्थिर पोपोवर

चत्वारः विकल्पाः उपलभ्यन्ते : उपरि, दक्षिणं, अधः, वामं च संरेखितम् ।

पोपोवर शीर्ष

सेड posuere consectetur एस्ट एट लोबोर्टिस। एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम.

पोपोवर सही

सेड posuere consectetur एस्ट एट लोबोर्टिस। एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम.

पोपोवर तल

सेड posuere consectetur एस्ट एट लोबोर्टिस। एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम.

पोपोवरः गतः

सेड posuere consectetur एस्ट एट लोबोर्टिस। एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम.

Popovers इति दर्शितं कोऽपि मार्कअपः जावास्क्रिप्ट् तः dataविशेषणस्य अन्तः सामग्री च उत्पद्यते ।

लाइव डेमो

चत्वारि दिशः


प्रयोगः

जावास्क्रिप्ट् मार्गेण popovers सक्षमं कुर्वन्तु:

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ टूलटिप् मध्ये css fade संक्रमणं प्रयोजयन्तु
html बूलियन इति असत्य popover मध्ये html सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि jquery इत्यस्य textविधिः dom मध्ये सामग्रीं सम्मिलितुं उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम् तार | नियोग 'दक्षिणः' how to position the popover - शीर्ष | तले | वाम | दक्षिणः
चयनकर्ता सूत्र असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि tooltip objects निर्दिष्टलक्ष्यं प्रति प्रत्यायिताः भविष्यन्ति
प्रवर्त्यम् सूत्र 'क्लिक्' इति । popover कथं प्रवर्तते - क्लिक् कुर्वन्तु | भ्रमति | फोकस | शास्त्र
शीर्षक तार | नियोग '' इति । पूर्वनिर्धारित शीर्षक मान यदि `title` विशेषता मौजूद नहीं है
विषयः तार | नियोग '' इति । पूर्वनिर्धारित सामग्री मूल्य यदि `data-content` विशेषता उपस्थित नहीं है
विलम्बः संख्या | वस्तु

popover (ms) दर्शयन् गोपयन् च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { show: 500, hide: 100 }

पात्रम् तार | असत्य असत्य

विशिष्टतत्त्वे पोपोवरं योजयतिcontainer: 'body'

शिरः उपरि ! व्यक्तिगत पोपोवर्स् कृते विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते ।

मार्कअप

कार्यप्रदर्शनकारणात्, Tooltip तथा Popover data-apis इत्येतयोः विकल्पः अस्ति यदि भवान् तान् उपयोक्तुं इच्छति तर्हि केवलं चयनकर्ता विकल्पं निर्दिशतु ।

विधियाँ

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

एकस्य तत्वसङ्ग्रहस्य कृते popovers आरभते ।

.popover('दर्शन') .

एक तत्वों popover प्रकट करता है।

  1. $ ( '# तत्व' ). popover ( 'दर्शन' ) .

.पोपोवर('गोपन') .

एकं तत्वं पोपोवरं गोपयति।

  1. $ ( '# तत्व' ). पोपोवर ( 'गोपनीय' ) .

.popover('टॉगल') .

एकं एलिमेण्ट्स् पोपोवरं टॉगल करोति।

  1. $ ( '# तत्व' ). popover ( 'टॉगल' ) .

.popover('नाश') .

एकस्य तत्त्वस्य पोपोवरं गोपयति, नाशयति च।

  1. $ ( '# तत्व' ). पोपोवर ( 'नाश' ) .

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

एतेन प्लगिन् इत्यनेन सर्वेषु अलर्टसन्देशेषु dismiss कार्यक्षमतां योजयन्तु ।

पवित्र गुआकामोल ! Best check yo self, त्वं बहु उत्तमं न दृश्यते।

अहो स्नैप ! भवतः त्रुटिः प्राप्ता!

एतत् तत् च परिवर्त्य पुनः प्रयासं कुर्वन्तु। Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. Cras mattis consectetur पुरुस बैठा amet fermentum.

एतत् कर्म गृहाण एतत् वा कुरुत


प्रयोगः

जावास्क्रिप्ट् मार्गेण अलर्टस्य निराकरणं सक्षमं कुर्वन्तु:

  1. $ ( ".सचेतना" ). अलर्ट () .

मार्कअप

केवलं स्वस्य close बटन् मध्ये योजयन्तु data-dismiss="alert"यत् स्वयमेव alert close कार्यक्षमतां दातुं शक्नुवन्ति।

  1. <a class = "बंद करें" data-dismiss = "सचेतना" href = "#" > × </a> इति

विधियाँ

$ ().अलर्ट () .

सर्वाणि अलर्ट्स् निकटकार्यक्षमतायाः सह लपेटति। भवतः अलर्ट्स् बन्दं कृत्वा बहिः एनिमेट् कर्तुं, सुनिश्चितं कुर्वन्तु यत् तेषां कृते पूर्वमेव .fadeand .inवर्गः प्रयुक्तः अस्ति ।

.alert('बन्द करें') .

एकं अलर्ट् बन्दं करोति।

  1. $ ( ".सचेतना" ). alert ( 'बन्द' ) .

घटनाः

Bootstrap इत्यस्य alert वर्गः alert कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि प्रकाशयति ।

घटना वर्णनम्‌
पिधानं करोतु एषा घटना तत्क्षणमेव प्रज्वलति यदा closeदृष्टान्तविधिः आह्वयते ।
निमीलितम् यदा अलर्ट् बन्दं जातं तदा एषा घटना प्रज्वलिता भवति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
  1. $ ( '#मम-सचेतना' ). bind ( 'बन्द' , फंक्शन () {
  2. // किमपि कुरुत...
  3. }) इति ।

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

बटन्स् इत्यनेन अधिकं कुर्वन्तु। नियन्त्रणबटनं वदति अथवा उपकरणपट्टिका इत्यादीनां अधिकघटकानाम् कृते बटनसमूहान् रचयति ।

राज्यपूर्णः

data-loading-text="Loading..."बटन् उपरि लोडिंग् स्टेट् इत्यस्य उपयोगाय योजयन्तु ।

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "लोडिंग्..." > लोडिंग स्थिति </button>

एकल टॉगल

data-toggle="button"एकस्मिन् बटन् मध्ये टॉग्लिंग् सक्रियीकरणाय योजयन्तु ।

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

चेकबॉक्स

data-toggle="buttons-checkbox"btn-group इत्यत्र चेकबॉक्स शैली टॉगलिंग् कृते योजयन्तु ।

  1. <div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >
  2. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > वाम </बटन>
  3. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </बटन>
  4. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दाहिने </बटन>
  5. </div> इति

रेडियो

data-toggle="buttons-radio"btn-group इत्यत्र रेडियोशैली टॉगलिंग् कृते योजयन्तु ।

  1. <div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-रेडियो" >
  2. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > वाम </बटन>
  3. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </बटन>
  4. <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दाहिने </बटन>
  5. </div> इति

प्रयोगः

जावास्क्रिप्ट् मार्गेण बटन् सक्षमं कुर्वन्तु:

  1. $ ( '.नव-टैब्स्' ). बटन () .

मार्कअप

दत्तांशविशेषताः बटनप्लगिन् इत्यस्य अभिन्नं भवन्ति । विभिन्नानां मार्कअपप्रकारानाम् कृते अधोलिखितं उदाहरणसङ्केतं पश्यन्तु ।

विकल्पाः

न कश्चित्

विधियाँ

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

पुश अवस्था को टॉगल करता है। बटनं सक्रियम् इति रूपं ददाति ।

शिरः उपरि ! data-toggleएट्रिब्यूट् इत्यस्य उपयोगेन भवान् बटन् इत्यस्य auto toggling इत्येतत् सक्षमं कर्तुं शक्नोति ।
  1. <बटन प्रकार = "बटन" वर्ग = "btn" डेटा-टॉगल = "बटन" > ... </बटन>

$ (). बटन ('लोडिंग')

बटन स्थितिं लोडिंग् इत्यत्र सेट् करोति - बटनं निष्क्रियं करोति तथा च पाठं लोड् करणाय स्वैप् करोति । data attribute इत्यस्य उपयोगेन बटन एलिमेण्ट् इत्यत्र लोड् करणं पाठं परिभाषितव्यम् data-loading-text|

  1. <button type = "बटन" class = "btn" data-loading-text = "सामग्री लोड कर रहा है..." > ... </button>
शिरः उपरि ! Firefox पृष्ठभारेषु अक्षमस्थितिं निरन्तरं करोति . अस्य कृते एकः कार्यपरिहारः अस्ति यत् autocomplete="off".

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

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

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

बटन स्थितिं पुनः सेट् करोति - पाठं कस्यापि आँकडा परिभाषितपाठस्थितौ स्वैप् करोति ।

  1. <बटन प्रकार = "बटन" वर्ग = "btn" डेटा-पूर्ण-पाठ = "समाप्त!" > ... </बटन> इति
  2. <लिपि> इति
  3. $ ( '.btn' ). बटन ( 'पूर्ण' ) .
  4. </script> इति

विषये

अकॉर्डियन तथा नेविगेशन इत्यादीनां संकुचनीयघटकानाम् आधारशैल्याः लचीलसमर्थनं च प्राप्नुवन्तु ।

* Transitions प्लगइन को शामिल करने की आवश्यकता है।

उदाहरणम् अकॉर्डियन

collapse plugin इत्यस्य उपयोगेन वयं सरलं accordion शैली विजेट् निर्मितवन्तः:

Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड. ३ भेड़िया चन्द्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी पर यह स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट. निहिल एनिम keffiyeh helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई उप lomo. लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चे डेनिम सौन्दर्य synth nesciunt आप शायद उन्हें accusamus श्रम टिकाऊ VHS के बारे में नहीं सुना है।
Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड. ३ भेड़िया चन्द्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी पर यह स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट. निहिल एनिम keffiyeh helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई उप lomo. लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चे डेनिम सौन्दर्य synth nesciunt आप शायद उन्हें accusamus श्रम टिकाऊ VHS के बारे में नहीं सुना है।
Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड. ३ भेड़िया चन्द्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी पर यह स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट. निहिल एनिम keffiyeh helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई उप lomo. लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चे डेनिम सौन्दर्य synth nesciunt आप शायद उन्हें accusamus श्रम टिकाऊ VHS के बारे में नहीं सुना है।
  1. <div वर्ग = "अकॉर्डियन" id = "अकॉर्डियन2" >
  2. <div class = "अकॉर्डियन-समूह" >
  3. <div class = "अकॉर्डियन-शीर्षक" >
  4. <a class = "अकॉर्डियन-टॉगल" data-toggle = "collapse" data-parent = "# accordion2" href = "#collapseOne" >
  5. संकुचित समूह मद # 1
  6. </a> इति
  7. </div> इति
  8. <div id = "collapseOne" class = "अकॉर्डियन-शरीर में पतन" >
  9. <div class = "अकॉर्डियन-अन्तर्गत" >
  10. Anim pariatur क्लिच...
  11. </div> इति
  12. </div> इति
  13. </div> इति
  14. <div class = "अकॉर्डियन-समूह" >
  15. <div class = "अकॉर्डियन-शीर्षक" >
  16. <a class = "अकॉर्डियन-टॉगल" data-toggle = "collapse" data-parent = "# accordion2" href = "#collapseTwo" >
  17. संकुचित समूह मद # 2
  18. </a> इति
  19. </div> इति
  20. <div id = "collapseTwo" class = "अकॉर्डियन-शरीर का पतन" >
  21. <div class = "अकॉर्डियन-अन्तर्गत" >
  22. Anim pariatur क्लिच...
  23. </div> इति
  24. </div> इति
  25. </div> इति
  26. </div> इति
  27. ...

अकॉर्डियन मार्कअपं विना अपि भवान् प्लगिन् इत्यस्य उपयोगं कर्तुं शक्नोति । अन्यस्य तत्त्वस्य विस्तारं संकुचनं च एकं बटनं टॉगलं कुर्वन्तु ।

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

प्रयोगः

डेटा विशेषताओं के माध्यम से

केवलं संकुचनीयस्य तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं केवलं एलिमेण्ट् अपि data-toggle="collapse"च एकं योजयन्तु । data-targetएट्रिब्यूट् एकं css चयनकर्तारं स्वीकुर्वति यस्मिन् data-targetसंकुचनं प्रयोक्तुं शक्नोति । collapseसंकुचनीयतत्त्वे वर्गं अवश्यं योजयन्तु । यदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु in.

संकुचनीयनियन्त्रणे accordion-सदृशं समूहप्रबन्धनं योजयितुं, data attribute योजयन्तु data-parent="#selector"। एतत् कार्ये द्रष्टुं डेमो पश्यन्तु।

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

  1. $ ( ".संकुचनम्" ). संकुचनम् () ९.

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-parent=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
माता पिता चयनकर्ता असत्य यदि चयनकर्ता तर्हि निर्दिष्टस्य मातापितृणां अधः सर्वे संकुचनीयाः तत्त्वानि बन्दं भविष्यन्ति यदा एतत् संकुचनीयं द्रव्यं दर्शितं भवति । (पारम्परिक अकॉर्डियन व्यवहार के समान)
toggle इति बूलियन इति सत्यम्‌ आह्वान पर संकुचित तत्व को टॉगल करता है

विधियाँ

.collapse(विकल्पाः) .

भवतः सामग्रीं संकुचनीयतत्त्वरूपेण सक्रियं करोति । एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

  1. $ ( '# मेरासंकुचित' ). संकुचति ({ ) .
  2. toggle : असत्यम्
  3. }) इति ।

.collapse('टॉगल') .

एकं संकुचनीयं तत्त्वं दर्शितं वा गुप्तं वा प्रति टॉगलं करोति ।

.collapse('दर्शयतु') .

संकुचनीयं तत्त्वं दर्शयति ।

.collapse('गोपन') .

संकुचनीयं तत्त्वं गोपयति ।

घटनाः

Bootstrap इत्यस्य collapse वर्गः collapse कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना वर्णनम्‌
दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम् इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रे कृते एकः collapse एलिमेण्ट् दृश्यमानः कृतः अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
गोपयतु hideविधि आहूते सद्यः एषा घटना प्रज्वलिता भवति ।
अदृष्ट इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रेण एकः collapse एलिमेण्ट् निगूढः अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
  1. $ ( '# मेरासंकुचित' ). on ( 'गुप्त' , फंक्शन () { .
  2. // किमपि कुरुत...
  3. }) इति ।

उदाहरण

कस्यापि रूपस्य पाठनिवेशेन सह शीघ्रं सुरुचिपूर्णं typeaheads निर्मातुं मूलभूतं, सुलभतया विस्तारितं प्लगिन् ।

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

autocomplete="off"Bootstrap typeahead ड्रॉप्डाउन् उपरि पूर्वनिर्धारितब्राउजरमेनूः न दृश्यन्ते इति निवारयितुं भवान् सेट् कर्तुम् इच्छति ।


प्रयोगः

डेटा विशेषताओं के माध्यम से

उपरि उदाहरणे दर्शितवत् typeahead कार्यक्षमतायाः सह एलिमेण्ट् पञ्जीकरणार्थं data attributes योजयन्तु ।

जावास्क्रिप्ट् मार्गेण

typeahead इत्येतत् मैन्युअल् रूपेण आह्वयन्तु :

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-source=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
स्रोतः सरणी, कार्य [ ] . विरुद्धं प्रश्नं कर्तुं दत्तांशस्रोतः। स्ट्रिंग्स् इत्यस्य सरणी वा फंक्शन् वा भवेत् । फंक्शन् द्वौ आर्गुमेण्ट् पास् भवति, queryइनपुट् फील्ड् इत्यस्मिन् मूल्यं processकॉलबैक् च । processकॉलबैकस्य एकस्य तर्कस्य माध्यमेन प्रत्यक्षतया अथवा अतुल्यकालिकरूपेण दत्तांशस्रोतं प्रत्यागत्य कार्यं समकालिकरूपेण उपयोक्तुं शक्यते ।
मदा : संख्या ड्रॉप् डाउन मध्ये प्रदर्शयितुं अधिकतमं द्रव्यसङ्ख्या ।
minLength संख्या स्वतःपूर्णसूचनाः प्रेरयितुं पूर्वं आवश्यकी न्यूनतमवर्णदीर्घता
मेलकर्ता नियोग केस असंवेदनशील कश्चन प्रश्नः कस्यचित् द्रव्यस्य सङ्गतिं करोति वा इति निर्धारयितुं प्रयुक्ता पद्धतिः । एकं तर्कं स्वीकुर्वति, यस्य itemविरुद्धं प्रश्नस्य परीक्षणं कर्तव्यम्। इत्यनेन सह वर्तमानप्रश्नं अभिगच्छन्तु this.querytrueयदि प्रश्नः मेलः अस्ति तर्हि एकं बूलियनं प्रत्यागच्छतु ।
sorter इति नियोग सटीक मिलान,
केस संवेदनशील,
केस असंवेदनशील
स्वतःपूर्णपरिणामानां क्रमणं कर्तुं प्रयुक्ता पद्धतिः । एकं तर्कं itemsस्वीकुर्वति तथा च typeahead उदाहरणस्य व्याप्तिः अस्ति । वर्तमान प्रश्न को this.query.
अद्यतनकर्ता नियोग चयनितं द्रव्यं प्रेषयति चयनितं द्रव्यं प्रत्यागन्तुं प्रयुक्ता विधिः । एकं तर्कं स्वीकुर्वति, the itemand इत्यस्य typeahead instance इत्यस्य व्याप्तिः अस्ति ।
हाइलाइटर नियोग सर्वाणि पूर्वनिर्धारितमेलनानि प्रकाशयति स्वतःपूर्णपरिणामानां प्रकाशनार्थं प्रयुक्ता पद्धतिः। एकं तर्कं itemस्वीकुर्वति तथा च typeahead उदाहरणस्य व्याप्तिः अस्ति । html प्रेषितव्यम् ।

विधियाँ

.typeahead(विकल्पाः) .

typeahead इत्यनेन सह इनपुट् आरभते ।

उदाहरण

वामभागे उपमार्गदर्शनं affix plugin इत्यस्य live demo अस्ति ।


प्रयोगः

डेटा विशेषताओं के माध्यम से

कस्मिन् अपि तत्त्वे सहजतया affix व्यवहारं योजयितुं, केवलं data-spy="affix"यस्मिन् तत्त्वे भवन्तः गुप्तचरं कर्तुम् इच्छन्ति तस्मिन् तत्त्वे योजयन्तु । ततः कदा कस्यचित् तत्त्वस्य पिनिंग् चालू-निष्क्रान्तं कर्तव्यम् इति परिभाषितुं offsets इत्यस्य उपयोगं कुर्वन्तु ।

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
शिरः उपरि ! भवद्भिः पिन-कृतस्य तत्त्वस्य स्थितिः तस्य तत्कालीन-मातृपितृणां व्यवहारः च प्रबन्धितव्यः । स्थितिः affix, affix-top, इत्यनेन नियन्त्रिता भवति affix-bottom| स्मर्यतां यत् यदा प्रत्ययः किकं करोति तदा सम्भाव्यतया संकुचितस्य मातापितृस्य जाँचं कुर्वन्तु यतः एतत् पृष्ठस्य सामान्यप्रवाहात् सामग्रीं निष्कासयति।

जावास्क्रिप्ट् मार्गेण

जावास्क्रिप्ट् मार्गेण प्रत्ययप्लगिन् आह्वयन्तु:

  1. $ ( '# नवबार' ). affix () .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset-top="200"

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
offset इति संख्या | कार्य | वस्तु १० स्क्रॉलस्य स्थितिं गणयन्ते सति स्क्रीनतः ऑफसेट् कर्तुं पिक्सेलः। यदि एकः सङ्ख्या प्रदत्ता अस्ति तर्हि उपरि वामदिशि च आफ्सेट् प्रयुक्तं भविष्यति । एकां दिशां श्रोतुं, अथवा बहुविधं अद्वितीयं ऑफसेट्, केवलं एकं वस्तु प्रदातव्यम् offset: { x: 10 }. यदा भवन्तः गतिशीलरूपेण आफ्सेट् (केषाञ्चन प्रतिक्रियाशीलानाम् डिजाइनानाम् कृते उपयोगी) प्रदातुं प्रवृत्ताः सन्ति तदा कार्यस्य उपयोगं कुर्वन्तु ।