बूटस्ट्रैप के घटक के जीवन में ले आईं-अब 12 कस्टम jQuery प्लगइन के साथ।
एगो सुव्यवस्थित, बाकिर लचीला, पारंपरिक जावास्क्रिप्ट मोडल प्लगइन पर लेबे के बा जवना में खाली न्यूनतम जरूरी कामकाज आ स्मार्ट डिफ़ॉल्ट बा.
एह सरल प्लगइन के साथ बूटस्ट्रैप में लगभग कवनो भी चीज में ड्रॉपडाउन मेनू जोड़ीं। बूटस्ट्रैप में नवबार, टैब, अवुरी गोली में फुल ड्रॉपडाउन मेनू सपोर्ट ऑन के सुविधा बा।
स्क्रॉल के स्थिति के आधार पर वर्तमान सक्रिय लिंक देखावे खातिर अपना नवबार में लिंक सभ के स्वचालित रूप से अपडेट करे खातिर scrollspy के इस्तेमाल करीं।
एह प्लगइन के इस्तेमाल टैब आ गोली सभ के स्थानीय सामग्री के टैब करे लायक फलक सभ के माध्यम से टॉगल करे के इजाजत दे के अउरी उपयोगी बनावे खातिर करीं।
jQuery Tipsy प्लगइन पर एगो नया टेक, टूलटिप्स इमेज पर निर्भर ना होला-ई एनीमेशन खातिर CSS3 आ लोकल टाइटल स्टोरेज खातिर डेटा-एट्रिब्यूट के इस्तेमाल करे ला।
द्वितीयक जानकारी के आवास खातिर कवनो तत्व में सामग्री के छोट-छोट ओवरले जोड़ीं, जइसे कि आईपैड पर बा।
* टूलटिप्स के शामिल करे के जरूरत बा
अलर्ट प्लगइन एगो छोट क्लास हवे जेह में अलर्ट सभ में क्लोज फंक्शनलिटी जोड़ल जाला।
बटन के साथे अउरी काम करीं। कंट्रोल बटन स्टेट करे ला या टूलबार नियर अउरी कंपोनेंट सभ खातिर बटन सभ के समूह बनावे ला।
अकॉर्डियन आ नेविगेशन जइसन संकुचित घटक खातिर बेस स्टाइल आ लचीला समर्थन पाईं.
कवनो सामग्री के एगो मैरी-गो-राउंड बनाईं जवना के रउरा सामग्री के इंटरैक्टिव स्लाइड शो देबे के चाहत बानी.
कवनो भी फॉर्म टेक्स्ट इनपुट के साथ जल्दी से सुरुचिपूर्ण टाइपहेड बनावे खातिर एगो बेसिक, आसानी से बढ़ावल प्लगइन।
सरल संक्रमण प्रभाव खातिर, मोडल में स्लाइड करे खातिर या अलर्ट के फीका करे खातिर bootstrap-transition.js के एक बेर शामिल करीं।
* प्लगइन में एनीमेशन खातिर जरूरी बा
एगो सुव्यवस्थित, बाकिर लचीला, पारंपरिक जावास्क्रिप्ट मोडल प्लगइन पर लेबे के बा जवना में खाली न्यूनतम जरूरी कामकाज आ स्मार्ट डिफ़ॉल्ट बा.
फाइल डाउनलोड करींनीचे एगो स्थिर रूप से रेंडर कइल गइल मोडल दिहल गइल बा।
एगो महीन शरीर के...
नीचे दिहल बटन पर क्लिक क के जावास्क्रिप्ट के माध्यम से कवनो मोडल टॉगल करीं। ई नीचे सरक जाई आ पन्ना के ऊपर से फीका पड़ जाई.
डेमो मोडल लॉन्च कइल जावजावास्क्रिप्ट के माध्यम से मोडल के कॉल करीं:
- $ ( '# माईमोडल' ) के बा। मोडल ( विकल्प ) के बा .
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
पृष्ठभूमि के बा | बूलियन के बा | सच | एगो मोडल-बैकग्राउंड तत्व शामिल बा। एकरे अलावा, अइसन बैकग्राउंड खातिर निर्दिष्ट करीं static जे क्लिक पर मोडल बंद ना करे। |
कीबोर्ड के बारे में बतावल गइल बा | बूलियन के बा | सच | एस्केप की दबावे पर मोडल बंद कर देला |
देखायीं | बूलियन के बा | सच | इनिशियलाइज होखे पर मोडल देखावे ला। |
रउआँ अपना पन्ना पर मोडल सभ के आसानी से सक्रिय क सकत बानी बिना जावास्क्रिप्ट के एक लाइन लिखले। बस data-toggle="modal"
एगो कंट्रोलर एलिमेंट पर सेट करीं जवना में एगो data-target="#foo"
या href="#foo"
जवन मोडल एलिमेंट आईडी से मेल खाला, आ जब क्लिक कइल जाई त ऊ राउर मोडल लॉन्च कर दी.
साथ ही, अपना मोडल इंस्टेंस में विकल्प जोड़े खातिर, बस एकरा के या त कंट्रोल एलिमेंट पर या खुद मोडल मार्कअप पर अतिरिक्त डेटा एट्रिब्यूट के रूप में शामिल करीं।
- <a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल लॉन्च करीं </a>
- <div वर्ग = "मोडल छिपावे" आईडी = "माईमोडल" >
- <div वर्ग = "मोडल-हेडर" > बा
- <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" > × </बटन>
- <h3> मोडल हेडर </h3> के बा
- </div> के बा
- <div वर्ग = "मोडल-शरीर" > के बा
- <p> एगो महीन शरीर... </p>
- </div> के बा
- <div वर्ग = "मोडल-पाद लेख" > बा
- <a href = "#" क्लास = "btn" डेटा-खारिज = "मोडल" > बंद करीं </a>
- <a href = "#" class = "btn btn-primary" > बदलाव सहेजीं </a>
- </div> के बा
- </div> के बा
.fade
क्लास
जोड़ीं .modal
(एह के एक्शन में देखे खातिर डेमो के देखल जाय) आ bootstrap-transition.js के शामिल करीं।
मोडल के रूप में राउर सामग्री के सक्रिय करेला। एगो वैकल्पिक विकल्प स्वीकार करेला object
.
- $ ( '# माईमोडल' ) के बा। मोडल ({ के बा।
- कीबोर्ड : गलत बा
- }) के बा।
मैन्युअल रूप से एगो मोडल के टॉगल करेला।
- $ ( '# माईमोडल' ) के बा। मोडल ( 'टॉगल' ) के बा।
मैन्युअल रूप से एगो मोडल खोलेला।
- $ ( '# माईमोडल' ) के बा। मोडल ( 'देखावे' ) के बा।
मैन्युअल रूप से एगो मोडल के छिपा देला।
- $ ( '# माईमोडल' ) के बा। मोडल ( 'छुपावल' ) के बा।
बूटस्ट्रैप के मोडल क्लास मोडल फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।
कार्यक्रम | बिबरन |
---|---|
देखायीं | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल बा | ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। |
लुकाइल | ई इवेंट तुरंत फायर हो जाला जब hide इंस्टेंस मेथड के कॉल हो जाला। |
छिपल | ई इवेंट तब फायर कइल जाला जब मोडल के यूजर से छिपावल खतम हो जाला (css संक्रमण पूरा होखे के इंतजार करी)। |
- $ ( '# माईमोडल' ) के बा। पर ( 'छुपल' , फंक्शन () { 1।
- // कुछ करे के बा...
- }) के बा।
एह सरल प्लगइन के साथ बूटस्ट्रैप में लगभग कवनो भी चीज में ड्रॉपडाउन मेनू जोड़ीं। बूटस्ट्रैप में नवबार, टैब, अवुरी गोली में फुल ड्रॉपडाउन मेनू सपोर्ट ऑन के सुविधा बा।
फाइल डाउनलोड करींड्रॉपडाउन के परीक्षण करे खातिर नीचे दिहल नवबार आ गोली में दिहल ड्रॉपडाउन नव लिंक पर क्लिक करीं।
जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन के कॉल करीं:
- $ ( '.ड्रॉपडाउन-टॉगल' ) के रूप में दिहल गइल बा। ड्रॉपडाउन () के बा।
कवनो तत्व में जल्दी से ड्रॉपडाउन कार्यक्षमता जोड़े खातिर बस जोड़ दीं data-toggle="dropdown"
आ कवनो वैध बूटस्ट्रैप ड्रॉपडाउन स्वचालित रूप से सक्रिय हो जाई.
data-target="#fat"
या
के इस्तेमाल करके कवनो विशिष्ट ड्रॉपडाउन के लक्ष्य बना सकत बानी href="#fat"
।
- <ul class = "नव नव-गोली" > के बा
- <li class = "सक्रिय" ><a href = "#" > नियमित लिंक </a></li> बा
- <li वर्ग = "ड्रॉपडाउन" आईडी = "मेनू1" > बा
- <a class = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "# मेनू1" >
- ड्रॉपडाउन हो गइल बा
- <b class = "कैरेट" </b> के बारे में बतावल गइल बा
- </a> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- <li><a href = "#" > कार्रवाई </a></li> बा
- <li><a href = "#" > एगो अउरी क्रिया </a></li>
- <li><a href = "#" > इहाँ कुछ अउर बा </a></li>
- <li class = "विभाजक" </li> के बारे में बतावल गइल बा
- <li><a href = "#" > अलग कइल गइल लिंक </a></li>
- </ul> के बा
- </li> के बा
- ...
- </ul> के बा
यूआरएल सभ के बरकरार रखे खातिर, के data-target
बजाय एट्रिब्यूट के इस्तेमाल करीं href="#"
।
- <ul class = "नव नव-गोली" > के बा
- <li class = "ड्रॉपडाउन" > के बा
- <a class = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" डेटा-लक्ष्य = "#" href = "पथ/से/पन्ना.html" >
- ड्रॉपडाउन हो गइल बा
- <b class = "कैरेट" </b> के बारे में बतावल गइल बा
- </a> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- ...
- </ul> के बा
- </li> के बा
- </ul> के बा
कौनों दिहल गइल नवबार भा टैब कइल नेविगेशन खातिर मेनू सभ के सक्रिय करे खातिर एगो प्रोग्रामेटिक एपीआई।
स्क्रॉलस्पाई प्लगइन स्क्रॉल के स्थिति के आधार पर नेव टारगेट के स्वचालित रूप से अपडेट करे खातिर बा।
फाइल डाउनलोड करींनीचे दिहल इलाका के स्क्रॉल करीं आ नेविगेशन अपडेट देखीं. ड्रॉपडाउन सब आइटम के भी हाइलाइट कईल जाई। एकरा के आजमा के देखीं!
विज्ञापन लेगिंग कीतार, ब्रंच आईडी कला पार्टी डोलर श्रम। पिचफोर्क yr एनिम लो-फाई से पहिले कि उ लोग क्वि बिक गईल। टम्बलर फार्म-टू-टेबल साइकिल के अधिकार जवन भी होखे। अनिम केफियेह कार्लेस कार्डिगन के बा। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure। Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद इनके बारे में नहीं सुनले होखब एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र। निहिल गोदना एक्यूसमस, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लमको परिणाम।
वेनियम मार्फा मूंछ स्केटबोर्ड, एडिपिसिसिंग फ्यूजियाट वेलिट पिचफोर्क दाढ़ी। फ्रीगन दाढ़ी aliqua cupidat mcsweeney के वेरो के बा। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुला कार्लेस। गोदना गोदवले कॉस्बी स्वेटर फूड ट्रक, मैकस्वीनी के क्विस गैर फ्रीगन विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल के बा। कार्लेस गैर सौंदर्य व्यायाम क्विस जेंट्रिफाई के बा। ब्रुकलिन adipisicing शिल्प बियर वाइस केतार deserunt के बा।
ओकेकैट कमोडो एलिक्वा डेलेक्टस के नाम से जानल जाला। फैप शिल्प बियर deserunt स्केटबोर्ड ईए के बा। लोमो साइकिल अधिकार adipisicing बान्ह मी, वेलिट ईए सुंट अगिला स्तर लोकावोरे एकल-मूल कॉफी में मैग्ना वेनियम। उच्च जीवन आईडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिंग के बा। Consectetur nisi DIY न्यूनतम दूत बैग बा। में क्रेडिट पूर्व, टिकाऊ delectus consectetur फैनी पैक आईफोन बा।
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.
केतार ट्वी ब्लॉग, कुलपा दूत बैग मारफा जवन भी डेलेक्टस फूड ट्रक। सपिएंटे सिंथ आईडी असुमेंडा के बा। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स रउआ शायद ओह लोग के बारे में नइखीं सुनले consequat हुडी लस मुक्त लो-फाई फैप aliquip। Labore कुलीन placeat से पहिले कि उ लोग बिक गईल, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर। कार्डिगन शिल्प बियर सेइटन रेडीमेड वेलिट के बा। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम के बा। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स के बा।
जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पाई के कॉल करीं:
- $ ( '#नवबार' ) के रूप में दिहल गइल बा। स्क्रॉलस्पाई () के बा।
अपना टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ल जा सके ला, बस data-spy="scroll"
ओह तत्व में जोड़ीं जेकरा पर रउआँ जासूसी कइल चाहत बानी (सबसे आम तौर पर ई शरीर होखी)।
- <body data-spy = "स्क्रॉल" > ... </body> के बा
<a href="#home">home</a>
डोम में कुछ चीज से मेल खाए के चाहीं जइसे कि
<div id="home"></div>
.
जब DOM से तत्व जोड़ल भा हटावे के संगे scrollspy के इस्तेमाल कइल जाला, त रउआँ के रिफ्रेश तरीका के अइसे कॉल करे के पड़ी:
- $ ( '[डेटा-जासूस = "स्क्रॉल"]' ). हर ( फंक्शन () { के बा।
- var $ जासूस = $ ( ई ) बा। scrollspy ( 'ताजा' ) के बारे में जानकारी दिहल गइल बा।
- }) के बा;
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
ऑफसेट हो गइल बा | संख्या | 10 के बा | स्क्रॉल के स्थिति के गणना करत घरी ऊपर से ऑफसेट करे खातिर पिक्सेल। |
कार्यक्रम | बिबरन |
---|---|
सक्रिय हो जाला | ई इवेंट तब फायर हो जाला जब भी स्क्रॉलस्पी द्वारा कवनो नया आइटम सक्रिय हो जाला। |
ई प्लगइन स्थानीय सामग्री के माध्यम से संक्रमण खातिर त्वरित, गतिशील टैब आ गोली के कार्यक्षमता जोड़ देला।
फाइल डाउनलोड करींनीचे दिहल टैब सभ पर क्लिक क के छिपल फलक सभ के बीच टॉगल करीं, ऊहो ड्रॉपडाउन मेनू सभ के माध्यम से।
कच्चा डेनिम रउआ शायद इनका बारे में ना सुनले होखब जीन शॉर्ट्स ऑस्टिन। नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स शाकाहारी हेल्वेटिका। Reprehenderit कसाई रेट्रो केफियेह ड्रीमकैचर सिंथ के बा। कॉस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। एलिक्विप प्लेसेट साल्विया सिलम आईफोन के बा। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate निसी क्वी।
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.
ट्रस्ट फंड seitan लेटरप्रेस, keytar कच्चा डेनिम keffiyeh etsy कला पार्टी से पहिले उ लोग बाहर बिक गईल मास्टर साफ लस मुक्त स्क्वीड scenester freegan कॉस्बी स्वेटर। फैनी पैक पोर्टलैंड seitan DIY, कला पार्टी locavore भेड़िया क्लिच उच्च जीवन गूंज पार्क ऑस्टिन। Cred विनाइल keffiyeh DIY साल्विया पीबीआर, बान्ह मी से पहिले कि उ लोग खेत से टेबल वीएचएस वायरल लोकावोर कॉस्बी स्वेटर बेच देले। लोमो भेड़िया वायरल, मूंछ रेडीमेड थंडरकैट्स केफियेह शिल्प बियर मार्फा नैतिक। भेड़िया साल्विया फ्रीगन, सार्टोरियल केफियेह इको पार्क शाकाहारी।
जावास्क्रिप्ट के माध्यम से टैब करे लायक टैब के सक्षम करीं (हर टैब के अलग-अलग सक्रिय करे के जरूरत बा):
- $ ( '# माईटैब ए' ) के बा। क्लिक करीं ( फंक्शन ( ई ) { .
- ई बा . रोके के डिफ़ॉल्ट ();
- $ के बा ( ई ) के बा। टैब ( 'देखावल' );
- }) के बा।
रउआँ कई तरीका से अलग-अलग टैब सभ के सक्रिय क सकत बानी:
- $ ( '#myTab एगो [href="#प्रोफाइल"]' )। टैब के बा ( 'देखावल' ); // नाम से टैब चुनें
- $ ( '# myTab एगो: पहिला' ). टैब के बा ( 'देखावल' ); // पहिला टैब के चयन करीं
- $ ( '# myTab एगो: अंतिम' ). टैब के बा ( 'देखावल' ); // अंतिम टैब के चयन करीं
- $ ( '# माईटैब ली: समीकरण (2) ए' )। टैब ( 'देखावे के बा'। ); // तीसरा टैब (0-अनुक्रमित) चुनें।
रउआँ बिना कौनों जावास्क्रिप्ट लिखले टैब भा गोली नेविगेशन के सक्रिय क सकत बानी खाली निर्दिष्ट क के data-toggle="tab"
भा data-toggle="pill"
कौनों तत्व पर। जोड़ के देखल जावnav
टैब में आ nav-tabs
क्लासul
बूटस्ट्रैप टैब स्टाइलिंग लागू हो जाई।
- <ul class = "नव नव-टैब" बा। > बा
- <li><a href = "#घर" डेटा-टॉगल = "टैब" > घर </a></li>
- <li><a href = "#प्रोफाइल" डेटा-टॉगल = "टैब" > प्रोफाइल </a></li>
- <li><a href = "#संदेश" डेटा-टॉगल = "टैब" > संदेश </a></li>
- <li><a href = "#सेटिंग्स" डेटा-टॉगल = "टैब" > सेटिंग्स </a></li>
- </ul> के बा
एगो टैब तत्व आ सामग्री कंटेनर के सक्रिय करेला। टैब में या त एगो data-target
या href
एगो कंटेनर नोड के लक्ष्य बनावे वाला DOM में होखे के चाहीं।
- <ul वर्ग = "नव नव-टैब" आईडी = "माईटैब" >
- <li class = "सक्रिय" ><a href = "#घर" > घर </a></li>
- <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> बा
- <li><a href = "#messages" > संदेश </a></li> बा
- <li><a href = "#सेटिंग्स" > सेटिंग्स </a></li> बा
- </ul> के बा
- <div वर्ग = "टैब-सामग्री" > बा
- <div class = "टैब-पेन सक्रिय" आईडी = "घर" > ... </div>
- <div class = "टैब-पेन" id = "प्रोफाइल" > ... </div> बा
- <div class = "टैब-पेन" id = "संदेश" > ... </div>
- <div क्लास = "टैब-पेन" आईडी = "सेटिंग्स" > ... </div>
- </div> के बा
- <स्क्रिप्ट> के बा
- $ ( फंक्शन () के बा { .
- $ ( '# myTab एगो: अंतिम' ). टैब ( 'देखावल' );
- }) के बा।
- </script> के बा
कार्यक्रम | बिबरन |
---|---|
देखायीं | ई इवेंट टैब शो पर फायर होला, बाकिर नया टैब देखावे से पहिले. सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.target आ के इस्तेमाल करीं ।event.relatedTarget |
देखावल गइल बा | ई इवेंट टैब देखावे के बाद टैब शो पर फायर हो जाला। सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.target आ के इस्तेमाल करीं ।event.relatedTarget |
- $ ( 'ए [डेटा-टॉगल = "टैब"]' ) के बा। पर ( 'देखावल गइल' , फंक्शन ( ई ) {
- ई बा . लक्ष्य // सक्रिय कइल गइल टैब
- ई बा . relatedTarget // पिछला टैब के बा
- }) के बा।
जेसन फ्रेम द्वारा लिखल गइल बेहतरीन jQuery.tipsy प्लगइन से प्रेरित; टूलटिप एगो अपडेट कइल संस्करण हवे, जवन छवि सभ पर निर्भर ना होला, एनीमेशन खातिर css3 के इस्तेमाल करे ला आ लोकल टाइटिल स्टोरेज खातिर डेटा-एट्रिब्यूट सभ के इस्तेमाल करे ला।
फाइल डाउनलोड करींटूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:
टाइट पैंट नेक्स्ट लेवल केफियेह आप शायद इनका बारे में नईखी सुनले। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के फिक्सी टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चैम्ब्रे बा। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray। एगो वास्तव में विडंबनापूर्ण कारीगर जवन भी keytar , scenester खेत-से-मेज banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चा डेनिम एकल-मूल कॉफी वायरल।
जावास्क्रिप्ट के माध्यम से टूलटिप के ट्रिगर करीं:
- $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। टूलटिप ( विकल्प ) के बा .
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | टूलटिप पर एगो css फेड संक्रमण लागू करीं |
प्लेसमेंट के बा | स्ट्रिंग|फंक्शन के बा | 'ऊपर' | टूलटिप के स्थिति कईसे कईल जाला - ऊपर | नीचे के बा | छोड़ के बा | ठीक |
चयनकर्ता के बा | डोरी | गलत | अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। |
हक | तार के बा | परोजन | '' के बा। | डिफ़ॉल्ट शीर्षक मान अगर `शीर्षक` टैग मौजूद नइखे |
ट्रिगर | डोरी | 'होवर' करे के बा। | टूलटिप कइसे ट्रिगर होला - होवर | फोकस करे के बा | हाथ से कईल |
देरी | नंबर के बा | वस्तु | 0 के बा | टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
प्रदर्शन के कारण से टूलटिप आ पोपोवर डेटा-एपीआई ऑप्ट इन बा अगर रउआ एकर इस्तेमाल कइल चाहत बानी त बस एगो चयनकर्ता विकल्प निर्दिष्ट करीं।
- <a href = "#" rel = "टूलटिप" title = "पहिलका टूलटिप" > हमरा पर मंडराई </a>
एगो तत्व संग्रह से एगो टूलटिप हैंडलर संलग्न करेला।
कवनो तत्व के टूलटिप के खुलासा करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'देखाईं' ) के बा।
कवनो तत्व के टूलटिप के छिपा देला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'छुपा के' ) के बा।
कवनो तत्व के टूलटिप के टॉगल करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'टॉगल' ) के बा।
द्वितीयक जानकारी के आवास खातिर कवनो तत्व में सामग्री के छोट-छोट ओवरले जोड़ीं, जइसे कि आईपैड पर बा।
* टूलटिप के शामिल करे के जरूरत बा
फाइल डाउनलोड करींपॉपओवर के ट्रिगर करे खातिर बटन के ऊपर माउस करीं।
जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:
- $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। पोपोवर ( विकल्प ) के बा .
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | टूलटिप पर एगो css फेड संक्रमण लागू करीं |
प्लेसमेंट के बा | स्ट्रिंग|फंक्शन के बा | 'ठीक' | पोपोवर के पोजीशन कईसे कईल जाला - टॉप | नीचे के बा | छोड़ के बा | ठीक |
चयनकर्ता के बा | डोरी | गलत | अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई |
ट्रिगर | डोरी | 'होवर' करे के बा। | टूलटिप कइसे ट्रिगर होला - होवर | फोकस करे के बा | हाथ से कईल |
हक | तार के बा | परोजन | '' के बा। | डिफ़ॉल्ट शीर्षक मान अगर `शीर्षक` विशेषता मौजूद नइखे |
सामग्री | तार के बा | परोजन | '' के बा। | डिफ़ॉल्ट सामग्री मान अगर `data-content` विशेषता मौजूद नइखे |
देरी | नंबर के बा | वस्तु | 0 के बा | पोपोवर (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
प्रदर्शन के कारण से टूलटिप आ पोपोवर डेटा-एपीआई ऑप्ट इन बा अगर रउआ एकर इस्तेमाल कइल चाहत बानी त बस एगो चयनकर्ता विकल्प निर्दिष्ट करीं।
एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।
एगो तत्वन के पोपोवर के खुलासा करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'देखावे' ) के बा।
एगो तत्वन के पोपोवर के छिपा देला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'छुपा के' ) के बा।
एगो तत्व पॉपओवर के टॉगल करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'टॉगल' ) के बा।
अलर्ट प्लगइन एगो छोट क्लास हवे जेह में अलर्ट सभ में क्लोज फंक्शनलिटी जोड़ल जाला।
डाउनलोड करींअलर्ट प्लगइन नियमित अलर्ट संदेश प काम करेला, अवुरी संदेश के ब्लॉक करेला।
ई आ ऊ बदल के फेर से कोशिश करीं. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। क्रास मैटिस कॉन्सेक्टेटर पुरस बइठल अमेट फर्मेन्टम।
जावास्क्रिप्ट के माध्यम से अलर्ट के खारिज करे के सक्षम करीं:
- $ ( ".अलर्ट" ) के रूप में दिहल गइल बा। अलर्ट () के बा।
बस data-dismiss="alert"
अपना बंद बटन में जोड़ दीं जेहसे कि स्वचालित रूप से अलर्ट बंद कार्यक्षमता मिल सके.
- <a class = "बंद करीं" data-dismiss = "सचेतक" href = "#" > × </a> के बा
सभ अलर्ट के करीबी कार्यक्षमता के संगे लपेटेला। बंद होखला पर आपके अलर्ट के एनिमेट आउट करावे खातिर, सुनिश्चित करीं कि ओह लोग पर .fade
आ .in
क्लास पहिले से लागू बा।
एगो अलर्ट बंद कर देला.
- $ ( ".अलर्ट" ) के रूप में दिहल गइल बा। अलर्ट ( 'बंद करीं' ) के बा।
बूटस्ट्रैप के अलर्ट क्लास अलर्ट कार्यक्षमता में हुक करे खातिर कुछ घटना के उजागर करेला।
कार्यक्रम | बिबरन |
---|---|
बंद करीं | close इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
बंद हो गइल | ई इवेंट तब फायर कइल जाला जब अलर्ट बंद हो जाला (css संक्रमण पूरा होखे के इंतजार करी)। |
- $ ( '#हमार-सचेतक' ). बाइंड ( 'बंद' , फंक्शन () { 1।
- // कुछ करे के बा...
- }) के बा।
अकॉर्डियन आ नेविगेशन जइसन संकुचित घटक खातिर बेस स्टाइल आ लचीला समर्थन पाईं.
फाइल डाउनलोड करीं* संक्रमण प्लगइन के शामिल करे के जरूरत बा।
संकुचन प्लगइन के इस्तेमाल से हमनी के एगो साधारण अकॉर्डियन स्टाइल विजेट बनवनी जा:
जावास्क्रिप्ट के माध्यम से सक्षम करीं:
- $ ( ".संकुचित हो गइल" )। ढह गइल बा () .
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
माता-पिता के बा | चयनकर्ता के बा | गलत | अगर चयनकर्ता तब निर्दिष्ट पैरेंट के तहत सभ संकुचित तत्व बंद हो जाई जब ई संकुचित आइटम देखावल जाई। (पारंपरिक अकॉर्डियन व्यवहार के समान) |
टॉगल कइल जाला | बूलियन के बा | सच | आह्वान पर संकुचित तत्व के टॉगल करेला |
बस एगो संकुचित तत्व के नियंत्रण स्वचालित रूप से असाइन करे खातिर तत्व के जोड़ल data-toggle="collapse"
आ एगो के। data-target
एट्रिब्यूट एगो css चयनकर्ता के स्वीकार करे ला जेकरा data-target
पर कोलैप्स लागू कइल जा सके ला। collapse
संकुचित तत्व में क्लास के जरूर जोड़ल जाला । अगर रउआँ चाहत बानी कि ई डिफ़ॉल्ट रूप से खुलल होखे, त अतिरिक्त क्लास जोड़ीं in
।
- <बटन वर्ग = "बीटीएन बीटीएन-खतरा" डेटा-टॉगल = "ढह" डेटा-लक्ष्य = "# डेमो" >
- सरल ढहने लायक बा
- </बटन> के बा
- <div id = "डेमो" क्लास = "में ढह जाईं" > ... </div>
data-parent="#selector"
। एकरा के एक्शन में देखे खातिर डेमो के देखल जाव.
रउरा सामग्री के एगो संकुचित तत्व के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object
.
- $ ( '# हमारसंकुचित करे लायक' ). ढह गइल बा ({
- टॉगल : गलत बा
- }) के बा।
कवनो संकुचित तत्व के देखावल भा छिपावे खातिर टॉगल करे ला।
एगो संकुचित तत्व देखावेला।
एगो संकुचित तत्व के छिपावेला।
बूटस्ट्रैप के कोलैप्स क्लास कोलैप्स फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।
कार्यक्रम | बिबरन |
---|---|
देखायीं | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल बा | ई इवेंट तब फायर कइल जाला जब कौनों संकुचन तत्व के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। |
लुकाइल | ई इवेंट तुरंत फायर हो जाला जब hide मेथड बोलावल जाला। |
छिपल | ई घटना तब फायर कइल जाला जब प्रयोगकर्ता से कौनों संकुचन तत्व छिपा दिहल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। |
- $ ( '# हमारसंकुचित करे लायक' ). पर ( 'छुपल' , फंक्शन () { 1।
- // कुछ करे के बा...
- }) के बा।
तत्वन के माध्यम से साइकिल चलावे खातिर एगो जेनेरिक प्लगइन। एगो मस्ती-मस्ती करे वाला।
फाइल डाउनलोड करींनीचे दिहल स्लाइड शो देखीं.
जावास्क्रिप्ट के माध्यम से कॉल करीं:
- $ ( '.हिंडोला' ) के बा। हिंडोला () के बा।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
अंतराल के अंतराल के बारे में बतावल गइल बा | संख्या | 5000 के बा | कवनो आइटम के स्वचालित रूप से साइकिल चलावे के बीच देरी करे के समय के मात्रा। अगर झूठ बा त हिंडोला अपने आप साइकिल ना चली। |
ठहराव | डोरी | "होवर" के बा। | माउसएंटर पर हिंडोला के साइकिल चलावे के रोक देला आ माउसलीव पर हिंडोला के साइकिल चलावे के फेर से शुरू करेला। |
पिछला आ अगिला कॉन्रोल खातिर डेटा एट्रिब्यूट के इस्तेमाल कइल जाला। नीचे दिहल उदाहरण मार्कअप देखल जाव.
- <div id = "myCarousel" वर्ग = "हिंडोला स्लाइड" > बा
- <!-- हिंडोला के आइटम -->
- <div वर्ग = "हिंडोला-आंतरिक" > बा
- <div class = "सक्रिय आइटम" > ... </div> बा
- <div class = "आइटम" > ... </div> के बारे में बतावल गइल बा
- <div class = "आइटम" > ... </div> के बारे में बतावल गइल बा
- </div> के बा
- <!-- हिंडोला नव --> के बा
- <a class = "हिंडोला-नियंत्रण छोड़ दिहल गइल" href = "#myCarousel" डेटा-स्लाइड = "पिछला" > ‹ </a> के बा
- <a class = "हिंडोला-नियंत्रण सही" href = "# myCarousel" डेटा-स्लाइड = "अगला" > › </a> के बा
- </div> के बा
एक वैकल्पिक विकल्प के साथ हिंडोला के आरंभ करेला object
आ आइटम के माध्यम से साइकिल चलावे शुरू करेला।
- $ ( '.हिंडोला' ) के बा। हिंडोला ({ के बा।
- अंतराल : 2000 के बा
- }) के बा।
बाईं ओर से दाएं हिंडोला आइटम के माध्यम से चक्र।
हिंडोला के आइटम के माध्यम से साइकिल चलावे से रोक देला।
हिंडोला के एगो खास फ्रेम (0 आधारित, सरणी के समान) में चक्र करे ला।
पिछला आइटम पर चक्कर लगावेला।
अगिला आइटम पर चक्कर लगावेला।
बूटस्ट्रैप के हिंडोला क्लास हिंडोला के कार्यक्षमता में हुक करे खातिर दू गो घटना के उजागर करेला।
कार्यक्रम | बिबरन |
---|---|
फिसल-पट्टी | ई इवेंट तुरंत फायर हो जाला जब slide इंस्टेंस मेथड के आह्वान कइल जाला। |
सरक गइल | ई इवेंट तब फायर कइल जाला जब हिंडोला आपन स्लाइड ट्रांजिशन पूरा कर लेला। |
कवनो भी फॉर्म टेक्स्ट इनपुट के साथ जल्दी से सुरुचिपूर्ण टाइपहेड बनावे खातिर एगो बेसिक, आसानी से बढ़ावल प्लगइन।
फाइल डाउनलोड करींटाइपएहेड के परिणाम देखावे खातिर नीचे दिहल फील्ड में टाइप कइल शुरू करीं।
जावास्क्रिप्ट के माध्यम से टाइपएहेड के कॉल करीं:
- $ ( '.टाइपएहेड' ) के रूप में दिहल गइल बा। टाइपएहेड () के बा।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
स्रोत | सरणी के बा | [ ] के बा। | के खिलाफ पूछताछ करे खातिर डेटा स्रोत। |
वस्तू | संख्या | 8 के बा | ड्रॉपडाउन में प्रदर्शित करे खातिर आइटम के अधिकतम संख्या। |
मिलान करे वाला के बा | परोजन | केस के संवेदनहीन होखे के चाहीं | ई पता लगावे खातिर इस्तेमाल होखे वाला तरीका कि कौनों क्वेरी कौनों आइटम से मेल खात बा कि ना। एकल तर्क स्वीकार करेला, item जवना के खिलाफ क्वेरी के परीक्षण कइल जाव। के साथ वर्तमान क्वेरी तक पहुँचीं this.query । true अगर क्वेरी मिलान होखे त एगो बूलियन वापस करीं । |
सॉर्टर के बा | परोजन | सटीक मिलान, केस संवेदनशील, केस असंवेदनशील |
ऑटोकम्पलीट रिजल्ट के सॉर्ट करे खातिर इस्तेमाल होखे वाला तरीका। एकल तर्क स्वीकार करे ला items आ टाइपएहेड इंस्टेंस के दायरा होला। वर्तमान क्वेरी के संदर्भित करीं this.query . |
हाइलाइटर के बा | परोजन | सभ डिफ़ॉल्ट मिलान के हाइलाइट करेला | ऑटोकम्पलीट रिजल्ट के उजागर करे खातिर इस्तेमाल कइल गइल तरीका। एकल तर्क स्वीकार करे ला item आ टाइपएहेड इंस्टेंस के दायरा होला। एचटीएमएल वापस करे के चाहीं। |
टाइपएहेड कार्यक्षमता वाला तत्व के रजिस्टर करे खातिर डेटा विशेषता जोड़ल जाला।
- <इनपुट प्रकार = "पाठ" डेटा-प्रदान = "टाइपएहेड" >
टाइपएहेड के साथ कवनो इनपुट के इनिशियलाइज करेला।