हमारा मोडल प्लगइन पारंपरिक मोडल जेएस प्लगइन पर एक सुपर स्लिम टेक है, विशेष ध्यान रखते हुए केवल उस नंगे कार्यक्षमता को शामिल करने के लिए जिसकी हमें यहां ट्विटर पर आवश्यकता है।

डाउनलोड

बूटस्ट्रैप-मोडल का उपयोग करना

$ ( '# माय-मोडल' )। मोडल ( विकल्प )

विकल्प

नाम	प्रकार	चूक	विवरण
पृष्ठभूमि	बूलियन, स्ट्रिंग	असत्य	एक मोडल-बैकड्रॉप तत्व शामिल है। "static"यदि आप नहीं चाहते कि बैकड्रॉप क्लिक होने पर मोडल बंद हो जाए तो बैकड्रॉप सेट करें ।
कीबोर्ड	बूलियन	असत्य	एस्केप कुंजी दबाए जाने पर मोडल बंद कर देता है
प्रदर्शन	बूलियन	असत्य	क्लास इनिशियलाइज़ेशन पर मोडल खोलता है

मार्कअप

आप जावास्क्रिप्ट की एक भी पंक्ति लिखे बिना आसानी से अपने पृष्ठ पर मोडल सक्रिय कर सकते हैं। बस एक तत्व को एक data-controls-modalविशेषता दें जो एक मोडल तत्व आईडी से मेल खाती है, और जब क्लिक किया जाता है, तो यह आपका मोडल लॉन्च करेगा। मोडल विकल्प जोड़ने के लिए, बस उन्हें डेटा विशेषताओं के रूप में भी शामिल करें।

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > लॉन्च मोडल </a>    

सूचना यदि आप चाहते हैं कि आपका मोडल अंदर और बाहर चेतन हो, तो बस .fadeअपने तत्व में एक वर्ग जोड़ें .modal(इसे क्रिया में देखने के लिए डेमो देखें)।

तरीकों

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

आपकी सामग्री को एक मोडल के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object।

$ ( '# माय-मोडल' )। मोडल ({
  कीबोर्ड : सच 
})

.मोडल ('टॉगल')

मैन्युअल रूप से एक मोडल टॉगल करता है।

$ ( '# माय-मोडल' )। मोडल ( 'टॉगल' )

.मोडल ('शो')

मैन्युअल रूप से एक मोडल खोलता है।

$ ( '# माय-मोडल' )। मोडल ( 'शो' )

.मोडल ('छिपाएं')

मैन्युअल रूप से एक मोडल छुपाता है।

$ ( '# माय-मोडल' )। मोडल ( 'छिपाएं' )

.मोडल (सच)

एक तत्व मोडल क्लास इंस्टेंस देता है।

$ ( '# माय-मोडल' )। मोडल ( सच )

सूचना वैकल्पिक रूप से, इसे के साथ पुनः प्राप्त किया जा सकता है $().data('modal')।

आयोजन

बूटस्ट्रैप का मोडल क्लास मोडल कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है।

आयोजन	विवरण
प्रदर्शन	showइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
पता चला	इस घटना को निकाल दिया जाता है जब उपयोगकर्ता को मोडल दिखाई देता है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।
छिपाना	hideइंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
छुपे हुए	इस घटना को निकाल दिया जाता है जब मोडल उपयोगकर्ता से छुपाया जा रहा है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।

$ ( '# माय-मोडल' )। बाइंड ( 'हिडन' , फंक्शन () {   
  // कुछ करो ...
})

डेमो

लॉन्च मोडल

यह प्लगइन बूटस्ट्रैप टॉपबार या टैब्ड नेविगेशन में ड्रॉपडाउन इंटरैक्शन जोड़ने के लिए है।

डाउनलोड

बूटस्ट्रैप-ड्रॉपडाउन.जेएस का उपयोग करना

$ ( '# टॉपबार' )। ड्रॉपडाउन ()

मार्कअप

किसी भी एनएवी तत्व में ड्रॉपडाउन कार्यक्षमता को शीघ्रता से जोड़ने के लिए, data-dropdownविशेषता का उपयोग करें। कोई भी मान्य बूटस्ट्रैप ड्रॉपडाउन स्वचालित रूप से सक्रिय हो जाएगा।

<उल वर्ग = "टैब" > 
  <li class = "active" ><a href = "#" > होम </a></li>  
  <ली क्लास = "ड्रॉपडाउन" डेटा-ड्रॉपडाउन = "ड्रॉपडाउन" >   
    <a href = "#" वर्ग = "ड्रॉपडाउन-टॉगल" > ड्रॉपडाउन </a>  
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <li><a href = "#" > सेकेंडरी लिंक </a></li> 
      <li><a href = "#" > यहाँ कुछ और </a></li> 
      <ली क्लास = "डिवाइडर" ></li> 
      <li><a href = "#" > अन्य लिंक </a></li> 
    </ul>
  </li>
</ul>

सूचना यदि आपके यूआई में कई ड्रॉपडाउन हैं, तो data-dropdownविशेषता को अधिक महत्वपूर्ण कंटेनर तत्व जैसे .tabsया में जोड़ने पर विचार करें .topbar।

तरीकों

$ ()। ड्रॉपडाउन ()

किसी दिए गए टॉपबार या टैब्ड नेविगेशन के लिए मेनू को सक्रिय करने के लिए प्रोग्रामेटिक एपीआई।

डेमो

यह प्लगइन बूटस्ट्रैप टॉपबार में स्क्रॉलस्पी (ऑटो अपडेटिंग एनएवी) इंटरैक्शन जोड़ने के लिए है।

डाउनलोड

बूटस्ट्रैप-scrollspy.js . का उपयोग करना

$ ( '# टॉपबार' )। स्क्रॉलस्पाई ()

मार्कअप

अपने नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ने के लिए, बस data-scrollspyविशेषता को .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

तरीकों

$().scrollSpy()

उपयोगकर्ता स्क्रॉल स्थिति द्वारा नेविगेशन बटन को स्वतः सक्रिय करता है।

$ ( 'बॉडी> .टॉपबार' )। स्क्रॉलस्पाई ()

सूचना टॉपबार एंकर टैग में समाधान योग्य आईडी लक्ष्य होने चाहिए। उदाहरण के लिए, <a href="#home">home</a>डोम में किसी चीज़ के अनुरूप होना चाहिए जैसे <div id="home"></div>.

.scrollSpy ('ताज़ा करें')

स्क्रॉलस्पी नेवी बटन को कैश करता है और अनुभाग प्रदर्शन के लिए समन्वय करता है। यदि आपको इस कैश को अपडेट करने की आवश्यकता है (संभवतः यदि आपके पास गतिशील सामग्री है) तो बस इस रीफ्रेश विधि को कॉल करें। यदि आपने अपने स्क्रॉलस्पी को परिभाषित करने के लिए डेटा विशेषता का उपयोग किया है, तो बस शरीर पर रीफ्रेश करें।

$ ( 'बॉडी' )। स्क्रॉलस्पाई ( 'रीफ्रेश' )

डेमो

इस पेज पर टॉपबार नेविगेशन चेकआउट करें।

यह प्लगइन बटन स्थिति के प्रबंधन के लिए अतिरिक्त कार्यक्षमता प्रदान करता है।

डाउनलोड

बूटस्ट्रैप-buttons.js . का उपयोग करना

$ ( '.टैब' )। बटन ()

तरीकों

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

पुश स्थिति को टॉगल करता है। बीटीएन को यह रूप देता है कि यह सक्रिय हो गया है।

नोटिस आप विशेषता का उपयोग करके एक बटन के ऑटो टॉगलिंग को सक्षम कर सकते हैं data-toggle।

<बटन वर्ग = "बीटीएन" डेटा-टॉगल = "टॉगल" > ... </बटन>   

$()। बटन ('लोड हो रहा है')

बटन स्थिति को लोड करने के लिए सेट करता है - बटन को अक्षम करता है और टेक्स्ट को लोड करने के लिए टेक्स्ट को स्वैप करता है। डेटा विशेषता का उपयोग करके लोड हो रहे टेक्स्ट को बटन तत्व पर परिभाषित किया जाना चाहिए data-loading-text।

<बटन क्लास = "बीटीएन" डेटा-लोडिंग-टेक्स्ट = "लोडिंग स्टफ..." > ... </बटन>   

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

रीसेट बटन की स्थिति - टेक्स्ट को मूल टेक्स्ट में बदल देती है।

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

रीसेट बटन स्थिति - टेक्स्ट को किसी भी डेटा परिभाषित टेक्स्ट स्थिति में स्वैप करता है।

<बटन वर्ग = "बीटीएन" डेटा-पूर्ण-पाठ = "समाप्त!" > ... </बटन>   
<स्क्रिप्ट>
  $('.btn')। बटन ('पूर्ण')
</स्क्रिप>

डेमो

डेमो लोड हो रहा है डेमो टॉगल करें

यह प्लगइन त्वरित, गतिशील टैब और गोली कार्यक्षमता जोड़ता है।

डाउनलोड

बूटस्ट्रैप-टैब.जेएस का उपयोग करना

$ ( '.टैब' )। टैब ()

मार्कअप

data-tabsआप किसी टैब या गोली नेविगेशन को बिना कोई जावास्क्रिप्ट लिखे उन्हें केवल एक या data-pillsविशेषता देकर सक्रिय कर सकते हैं ।

 <ul वर्ग = "टैब" डेटा-टैब = "टैब" > ... </ul>   

तरीकों

$()। टैब या $()। गोलियां

किसी दिए गए कंटेनर के लिए टैब और गोली की कार्यक्षमता को सक्रिय करता है। टैब लिंक को दस्तावेज़ में आईडी का संदर्भ देना चाहिए।

<उल वर्ग = "टैब" > 
  <li class = "active" ><a href = "#home" > होम </a></li>  
  <li><a href = "#profile" > प्रोफ़ाइल </a></li> 
  <li><a href = "#messages" > संदेश </a></li> 
  <li><a href = "#settings" > सेटिंग्स </a></li> 
</ul>
 
<div class = "गोली-सामग्री" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "प्रोफ़ाइल" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "सेटिंग" > ... </div> 
</div>
 
<स्क्रिप्ट>
  $ ( फ़ंक्शन () {  
    $ ( '.टैब' )। टैब ()
  })
</स्क्रिप्ट>

आयोजन

आयोजन	विवरण
परिवर्तन	यह घटना टैब परिवर्तन पर सक्रिय होती है। क्रमशः सक्रिय टैब और पिछले सक्रिय टैब का उपयोग करें event.targetऔर लक्षित करें।event.relatedTarget

$ ( '#.टैब' )। बाइंड ( 'चेंज' , फंक्शन ( ई ) {   
  ई . लक्ष्य // सक्रिय टैब
  ई . संबंधित लक्ष्य // पिछला टैब
})

डेमो

• घर
• प्रोफ़ाइल
• संदेशों
• समायोजन
• ड्रॉप डाउन
  • @मोटा
  • @mdo

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tips प्लगइन के आधार पर; twipsy एक अद्यतन संस्करण है, जो छवियों पर निर्भर नहीं करता है, एनिमेशन के लिए css3 का उपयोग करता है, और शीर्षक भंडारण के लिए डेटा-विशेषताएं!

डाउनलोड

बूटस्ट्रैप-twipsy.js का उपयोग करना

$ ( '# उदाहरण' )। ट्विप्सी ( विकल्प )

विकल्प

नाम	प्रकार	चूक	विवरण
चेतन	बूलियन	सच	टूलटिप में एक सीएसएस फीका संक्रमण लागू करें
में देरी	संख्या	0	टूलटिप दिखाने से पहले देरी (एमएस)
देरीआउट	संख्या	0	टूलटिप छिपाने से पहले विलंब (ms)
मैदान छोड़ना	डोरी	''	जब कोई टूलटिप शीर्षक मौजूद न हो तो उपयोग करने के लिए टेक्स्ट
प्लेसमेंट	डोरी	'के ऊपर'	टूलटिप को कैसे स्थापित करें - ऊपर | नीचे | बाएं | सही
एचटीएमएल	बूलियन	असत्य	टूलटिप के भीतर html सामग्री की अनुमति देता है
लाइव	बूलियन	असत्य	व्यक्तिगत ईवेंट हैंडलर के बजाय ईवेंट प्रतिनिधिमंडल का उपयोग करें
ओफ़्सेट	संख्या	0	लक्ष्य तत्व से टूलटिप का पिक्सेल ऑफ़सेट
शीर्षक	स्ट्रिंग, फ़ंक्शन	'शीर्षक'	शीर्षक पाठ प्राप्त करने के लिए विशेषता या विधि
चालू कर देना	डोरी	'होवर'	टूलटिप कैसे ट्रिगर होता है - होवर | फोकस | नियमावली
टेम्पलेट	डोरी	[डिफ़ॉल्ट मार्कअप]	twipsy को रेंडर करने के लिए इस्तेमाल किया जाने वाला html टेम्प्लेट।

सूचना व्यक्तिगत twipsy उदाहरण विकल्पों को वैकल्पिक रूप से डेटा विशेषताओं के उपयोग के माध्यम से निर्दिष्ट किया जा सकता है।

<a href = "#" डेटा-प्लेसमेंट = "नीचे" rel = 'twipsy' शीर्षक = 'कुछ शीर्षक टेक्स्ट' > टेक्स्ट </a>    

तरीकों

$()। twipsy (विकल्प)

एक तत्व संग्रह के लिए एक twipsy हैंडलर संलग्न करता है।

.twipsy ('शो')

एक तत्व twipsy प्रकट करता है।

$ ( '# तत्व' )। ट्विप्सी ( 'शो' )

.twipsy ('छिपाएं')

एक तत्व को twipsy छुपाता है।

$ ( '# तत्व' )। ट्विप्सी ( 'छिपाएं' )

.twipsy (सच)

एलिमेंट ट्विप्सी क्लास इंस्टेंस देता है।

$ ( '# तत्व' )। ट्विप्सी ( सच )

सूचना वैकल्पिक रूप से, इसे के साथ पुनः प्राप्त किया जा सकता है $().data('twipsy')।

डेमो

पॉपओवर प्लगइन आपके एप्लिकेशन में पॉपओवर जोड़ने के लिए एक सरल इंटरफ़ेस प्रदान करता है। यह बूटस्ट्रैप-ट्विप्सी.जेएस प्लगइन का विस्तार करता है, इसलिए अपने प्रोजेक्ट में पॉपओवर शामिल करते समय उस फ़ाइल को भी पकड़ना सुनिश्चित करें!

सूचना आपको bootstrap-popover.js से पहले bootstrap- twipsy.js फ़ाइल को शामिल करना होगा ।

डाउनलोड

बूटस्ट्रैप-पॉपओवर.जेएस का उपयोग करना

$ ( '# उदाहरण' )। पॉपओवर ( विकल्प )

विकल्प

नाम	प्रकार	चूक	विवरण
चेतन	बूलियन	सच	टूलटिप में एक सीएसएस फीका संक्रमण लागू करें
में देरी	संख्या	0	टूलटिप दिखाने से पहले देरी (एमएस)
देरीआउट	संख्या	0	टूलटिप छिपाने से पहले विलंब (ms)
मैदान छोड़ना	डोरी	''	जब कोई टूलटिप शीर्षक मौजूद न हो तो उपयोग करने के लिए टेक्स्ट
प्लेसमेंट	डोरी	'सही'	how to position the tooltip - above | below | left | right
html	boolean	false	allows html content within tooltip
live	boolean	false	use event delegation instead of individual event handlers
offset	number	0	pixel offset of tooltip from target element
title	string, function	'title'	attribute or method for retrieving title text
content	string, function	'data-content'	a string or method for retrieving content text. if none are provided, content will be sourced from a data-content attribute.
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual
template	string	[default markup]	The html template used for rendering a popover.

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

<a data-placement="below" href="#" class="btn danger" rel="popover">text</a>

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

Demo

hover for popover

The alert plugin is a super tiny class for adding close functionality to alerts.

Download

Using bootstrap-alerts.js

$(".alert-message").alert()

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Options

Name	type	default	description
selector	string	'.close'	What selector to target for closing an alert.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Demo