ਵਿਅਕਤੀਗਤ ਜਾਂ ਸੰਕਲਿਤ

ਪਲੱਗਇਨਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਹਾਲਾਂਕਿ ਕੁਝ ਨੂੰ ਨਿਰਭਰਤਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ), ਜਾਂ ਸਾਰੇ ਇੱਕੋ ਵਾਰ ਵਿੱਚ। bootstrap.js ਅਤੇ bootstrap.min.js ਦੋਵਾਂ ਵਿੱਚ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਸਾਰੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਹਨ।

ਡਾਟਾ ਗੁਣ

ਤੁਸੀਂ JavaScript ਦੀ ਇੱਕ ਵੀ ਲਾਈਨ ਲਿਖੇ ਬਿਨਾਂ ਮਾਰਕਅੱਪ API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬੂਟਸਟਰੈਪ ਦੀ ਪਹਿਲੀ ਸ਼੍ਰੇਣੀ API ਹੈ ਅਤੇ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡਾ ਪਹਿਲਾ ਵਿਚਾਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

ਉਸ ਨੇ ਕਿਹਾ, ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਬੰਦ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੋ ਸਕਦਾ ਹੈ। ਇਸ ਲਈ, ਅਸੀਂ `'data-api'` ਨਾਲ ਬੌਡੀ ਨੇਮਸਪੇਸ 'ਤੇ ਸਾਰੀਆਂ ਇਵੈਂਟਾਂ ਨੂੰ ਅਨਬਾਈਂਡ ਕਰਕੇ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾ API ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

$ ( 'ਸਰੀਰ' )। ਬੰਦ ( '.data-api' )

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਕਿਸੇ ਖਾਸ ਪਲੱਗਇਨ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ, ਸਿਰਫ਼ ਪਲੱਗਇਨ ਦਾ ਨਾਮ ਇੱਕ ਨੇਮ-ਸਪੇਸ ਦੇ ਨਾਲ-ਨਾਲ ਡੇਟਾ-ਏਪੀਆਈ ਨੇਮਸਪੇਸ ਦੇ ਨਾਲ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਮਲ ਕਰੋ:

$ ( 'ਸਰੀਰ' )। ਬੰਦ ( '.alert.data-api' )

ਪ੍ਰੋਗਰਾਮੇਟਿਕ API

ਅਸੀਂ ਇਹ ਵੀ ਮੰਨਦੇ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ JavaScript API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਰੇ ਜਨਤਕ API ਸਿੰਗਲ, ਚੇਨ ਕਰਨ ਯੋਗ ਢੰਗ ਹਨ, ਅਤੇ ਕਾਰਵਾਈ ਕੀਤੇ ਗਏ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ।

$ ( ".btn. ਖ਼ਤਰਾ" )। ਬਟਨ ( "ਟੌਗਲ" )। addClass ( "ਚਰਬੀ" )

ਸਾਰੀਆਂ ਵਿਧੀਆਂ ਨੂੰ ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਆਬਜੈਕਟ, ਇੱਕ ਸਤਰ ਜੋ ਕਿਸੇ ਖਾਸ ਵਿਧੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਜਾਂ ਕੁਝ ਨਹੀਂ (ਜੋ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨਾਲ ਇੱਕ ਪਲੱਗਇਨ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:

$ ( "#myModal" )। modal () // ਡਿਫਾਲਟ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ ਗਿਆ                       
$ ( "#myModal" )। modal ({ keyboard : false }) // ਬਿਨਾਂ ਕੀਬੋਰਡ ਦੇ ਸ਼ੁਰੂ ਕੀਤਾ ਗਿਆ     
$ ( "#myModal" )। modal ( 'show' ) // ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਸ਼ੋ ਨੂੰ ਤੁਰੰਤ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ                

ਹਰੇਕ ਪਲੱਗਇਨ ਆਪਣੇ ਕੱਚੇ ਕੰਸਟਰਕਟਰ ਨੂੰ ਇੱਕ 'ਕੰਸਟ੍ਰਕਟਰ' ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਵੀ ਪ੍ਰਗਟ ਕਰਦੀ ਹੈ: $.fn.popover.Constructor. ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਪਲੱਗਇਨ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਇੱਕ ਤੱਤ ਤੋਂ ਸਿੱਧਾ ਪ੍ਰਾਪਤ ਕਰੋ: $('[rel=popover]').data('popover').

ਕੋਈ ਟਕਰਾਅ ਨਹੀਂ

ਕਈ ਵਾਰ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨ ਨੂੰ ਹੋਰ UI ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ। ਇਹਨਾਂ ਹਾਲਤਾਂ ਵਿੱਚ, ਨੇਮਸਪੇਸ ਦੀ ਟੱਕਰ ਕਦੇ-ਕਦਾਈਂ ਹੋ ਸਕਦੀ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ .noConflictਉਸ ਪਲੱਗਇਨ 'ਤੇ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਦਾ ਮੁੱਲ ਤੁਸੀਂ ਵਾਪਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।

var bootstrapButton = $ . fn _ ਬਟਨ _ noConflict () // $.fn.button ਨੂੰ ਪਹਿਲਾਂ ਨਿਰਧਾਰਤ ਮੁੱਲ 'ਤੇ ਵਾਪਸ ਕਰੋ 
$ . fn _ bootstrapBtn = ਬੂਟਸਟਰੈਪ ਬਟਨ             // $().bootstrapBtn ਬੂਟਸਟਰੈਪ ਕਾਰਜਕੁਸ਼ਲਤਾ ਦਿਓ

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਪਲੱਗਇਨ ਦੀਆਂ ਵਿਲੱਖਣ ਕਾਰਵਾਈਆਂ ਲਈ ਕਸਟਮ ਇਵੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਇੱਕ ਅਨੰਤ ਅਤੇ ਪਿਛਲੇ ਭਾਗੀ ਰੂਪ ਵਿੱਚ ਆਉਂਦੇ ਹਨ - ਜਿੱਥੇ showਇੱਕ ਘਟਨਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਨੰਤ (ਉਦਾਹਰਣ) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦਾ ਪਿਛਲਾ ਭਾਗੀ ਰੂਪ (ਉਦਾਹਰਨ shown) ਇੱਕ ਕਿਰਿਆ ਦੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਟਰਿੱਗਰ ਹੁੰਦਾ ਹੈ।

ਸਾਰੇ ਬੇਅੰਤ ਇਵੈਂਟਾਂ ਨੂੰ ਰੋਕਥਾਮ ਡਿਫੌਲਟ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਇਹ ਕਿਸੇ ਕਾਰਵਾਈ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਦੇ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਨੂੰ ਰੋਕਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

$ ( '#myModal' )। on ( 'ਸ਼ੋ' , ਫੰਕਸ਼ਨ ( e ) {   
    ਜੇਕਰ (! ਡੇਟਾ ) ਵਾਪਸ ਈ . preventDefault () // ਮਾਡਲ ਨੂੰ ਦਿਖਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ   
})

ਪਰਿਵਰਤਨ ਬਾਰੇ

ਸਧਾਰਨ ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵਾਂ ਲਈ, ਇੱਕ ਵਾਰ ਹੋਰ JS ਫਾਈਲਾਂ ਦੇ ਨਾਲ bootstrap-transition.js ਸ਼ਾਮਲ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ (ਜਾਂ ਮਿੰਨੀਫਾਈਡ) bootstrap.js ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ , ਤਾਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ—ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।

ਕੇਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ

ਪਰਿਵਰਤਨ ਪਲੱਗਇਨ ਦੀਆਂ ਕੁਝ ਉਦਾਹਰਣਾਂ:

• ਮਾਡਲਾਂ ਵਿੱਚ ਸਲਾਈਡਿੰਗ ਜਾਂ ਫੇਡਿੰਗ
• ਟੈਬਾਂ ਨੂੰ ਫੇਡ ਕਰਨਾ
• ਅਲਰਟ ਆਊਟ ਹੋ ਰਿਹਾ ਹੈ
• ਸਲਾਈਡਿੰਗ ਕੈਰੋਜ਼ਲ ਪੈਨ

ਉਦਾਹਰਨਾਂ

ਮਾਡਲ ਸੁਚਾਰੂ, ਪਰ ਲਚਕਦਾਰ, ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸਮਾਰਟ ਡਿਫੌਲਟ ਦੇ ਨਾਲ ਡਾਇਲਾਗ ਪ੍ਰੋਂਪਟ ਹਨ।

ਸਥਿਰ ਉਦਾਹਰਨ

ਫੁੱਟਰ ਵਿੱਚ ਸਿਰਲੇਖ, ਬਾਡੀ, ਅਤੇ ਕਾਰਵਾਈਆਂ ਦੇ ਸੈੱਟ ਦੇ ਨਾਲ ਇੱਕ ਰੈਂਡਰ ਕੀਤਾ ਮਾਡਲ।

<div ਕਲਾਸ = "ਮੋਡਲ ਹਾਈਡ ਫੇਡ" > 
  <div ਕਲਾਸ = "ਮੋਡਲ-ਹੈਡਰ" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ ਬਟਨ>    
    <h3> ਮਾਡਲ ਹੈਡਰ </h3>
  </div>
  <div ਕਲਾਸ = "ਮੋਡਲ-ਬਾਡੀ" > 
    <p> ਇੱਕ ਵਧੀਆ ਸਰੀਰ… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > ਬੰਦ ਕਰੋ </a>  
    <a href="#" class="btn btn-primary" > ਬਦਲਾਅ ਸੁਰੱਖਿਅਤ ਕਰੋ </a> _  
  </div>
</div>

ਲਾਈਵ ਡੈਮੋ

ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ JavaScript ਰਾਹੀਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਟੌਗਲ ਕਰੋ। ਇਹ ਪੰਨੇ ਦੇ ਸਿਖਰ ਤੋਂ ਹੇਠਾਂ ਸਲਾਈਡ ਅਤੇ ਫਿੱਕਾ ਹੋ ਜਾਵੇਗਾ।

<!-- ਮੋਡਲ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਬਟਨ -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > ਡੈਮੋ ਮੋਡਲ ਲਾਂਚ ਕਰੋ </a>    
 
<!-- ਮਾਡਲ -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div ਕਲਾਸ = "ਮੋਡਲ-ਹੈਡਰ" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > ਮਾਡਲ ਹੈਡਰ </h3> 
  </div>
  <div ਕਲਾਸ = "ਮੋਡਲ-ਬਾਡੀ" > 
    <p> ਇੱਕ ਵਧੀਆ ਸਰੀਰ… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ਬੰਦ ਕਰੋ </button>   
    <button class = "btn btn-primary" > ਬਦਲਾਅ ਸੁਰੱਖਿਅਤ ਕਰੋ </button> 
  </div>
</div>

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਸਰਗਰਮ ਕਰੋ। data-toggle="modal"ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ, ਇੱਕ ਦੇ ਨਾਲ data-target="#foo"ਜਾਂ href="#foo"ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਖਾਸ ਮਾਡਲ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।

<button type = "button" data-toggle = "modal" data-target = "#myModal" > ਮਾਡਲ ਲਾਂਚ ਕਰੋ </button>   

JavaScript ਰਾਹੀਂ

myModalJavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :

$ ( '#myModal' )। ਮਾਡਲ ( ਵਿਕਲਪ )

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""।

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

ਢੰਗ

.modal(ਚੋਣਾਂ)

ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਜੋਂ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

$ ( '#myModal' )। ਮਾਡਲ ({
  ਕੀਬੋਰਡ : ਗਲਤ 
})

.modal('ਟੌਗਲ')

ਇੱਕ ਮਾਡਲ ਨੂੰ ਹੱਥੀਂ ਟੌਗਲ ਕਰਦਾ ਹੈ।

$ ( '#myModal' )। ਮਾਡਲ ( 'ਟੌਗਲ' )

.modal('ਸ਼ੋਅ')

ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਖੋਲ੍ਹਦਾ ਹੈ।

$ ( '#myModal' )। ਮਾਡਲ ( 'ਸ਼ੋਅ' )

.modal('ਛੁਪਾਓ')

ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਲੁਕਾਉਂਦਾ ਹੈ।

$ ( '#myModal' )। ਮਾਡਲ ( 'ਛੁਪਾਓ' )

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਮਾਡਲ ਕਲਾਸ ਮਾਡਲ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

$ ( '#myModal' )। 'ਤੇ ( 'ਲੁਕਿਆ ਹੋਇਆ' , ਫੰਕਸ਼ਨ () {   
  // ਕੁਝ ਕਰੋ…
})

ਉਦਾਹਰਨਾਂ

ਇਸ ਸਧਾਰਨ ਪਲੱਗਇਨ ਨਾਲ ਲਗਭਗ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਸ ਵਿੱਚ ਨਵਬਾਰ, ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਸ਼ਾਮਲ ਹਨ।

ਇੱਕ ਨਵਬਾਰ ਦੇ ਅੰਦਰ

ਟੈਬਾਂ ਦੇ ਅੰਦਰ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

data-toggle="dropdown"ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਲਿੰਕ ਜਾਂ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

<div ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > ਡ੍ਰੌਪਡਾਉਨ ਟ੍ਰਿਗਰ </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ, ਦੀ data-targetਬਜਾਏ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ href="#"।

<div ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    ਡਰਾਪ ਡਾਉਨ
    <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ ਡਰਾਪਡਾਊਨ ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '.dropdown-toggle' )। ਡ੍ਰੌਪਡਾਉਨ ()

ਵਿਕਲਪ

ਕੋਈ ਨਹੀਂ

ਢੰਗ

$().ਡ੍ਰੌਪਡਾਉਨ('ਟੌਗਲ')

ਦਿੱਤੇ ਗਏ ਨੇਵੀਬਾਰ ਜਾਂ ਟੈਬ ਕੀਤੇ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਮੀਨੂ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API।

ਨਵਬਾਰ ਵਿੱਚ ਉਦਾਹਰਨ

ScrollSpy ਪਲੱਗਇਨ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ ਨੈਵੀ ਟੀਚਿਆਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਹੈ। ਨਵਬਾਰ ਦੇ ਹੇਠਾਂ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ। ਡ੍ਰੌਪਡਾਉਨ ਸਬ ਆਈਟਮਾਂ ਨੂੰ ਵੀ ਉਜਾਗਰ ਕੀਤਾ ਜਾਵੇਗਾ।

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਆਪਣੀ ਟੌਪਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, ਸਿਰਫ਼ data-spy="scroll"ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸ ਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ (ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਬਾਡੀ ਹੋਵੇਗੀ) ਅਤੇ data-target=".navbar"ਇਹ ਚੁਣੋ ਕਿ ਕਿਹੜਾ ਨੈਵੀ ਵਰਤਣਾ ਹੈ। ਤੁਹਾਨੂੰ ਇੱਕ ਹਿੱਸੇ ਦੇ ਨਾਲ scrollspy ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋਵੋਗੇ .nav.

<body data-spy = "ਸਕ੍ਰੌਲ" ਡੇਟਾ-ਟਾਰਗੇਟ = ".navbar" > ... </body>  

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ scrollspy ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '#navbar' )। scrollspy ()

ਢੰਗ

.scrollspy('ਰਿਫਰੇਸ਼')

DOM ਤੋਂ ਤੱਤਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਰਿਫਰੈਸ਼ ਵਿਧੀ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ:

$ ( '[data-spy="scroll"]' )। ਹਰੇਕ ( ਫੰਕਸ਼ਨ () {  
  var $spy = $ ( ਇਹ ). scrollspy ( 'ਤਾਜ਼ਾ' )
});

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset=""।

ਸਮਾਗਮ

ਉਦਾਹਰਨ ਟੈਬਾਂ

ਸਥਾਨਕ ਸਮਗਰੀ ਦੇ ਪੈਨਾਂ ਰਾਹੀਂ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਤੇਜ਼, ਗਤੀਸ਼ੀਲ ਟੈਬ ਕਾਰਜਕੁਸ਼ਲਤਾ ਸ਼ਾਮਲ ਕਰੋ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਰਾਹੀਂ ਵੀ।

ਵਰਤੋਂ

JavaScript ਰਾਹੀਂ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ (ਹਰੇਕ ਟੈਬ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ):

$ ( '#myTab a' )। ਕਲਿੱਕ ( ਫੰਕਸ਼ਨ ( e ) {  
  ਈ . preventDefault ();
  $ ( ਇਹ ) ਟੈਬ ( 'ਦਿਖਾਓ' );
})

ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਟੈਬਾਂ ਨੂੰ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ:

$ ( '#myTab a[href="#profile"]' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਨਾਮ ਦੁਆਰਾ ਟੈਬ ਚੁਣੋ 
$ ( '#myTab a:first' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਪਹਿਲੀ ਟੈਬ ਚੁਣੋ 
$ ( '#myTab a:last' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਆਖਰੀ ਟੈਬ ਚੁਣੋ 
$ ( '#myTab li:eq(2) a' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਤੀਜੀ ਟੈਬ ਚੁਣੋ (0-ਇੰਡੈਕਸਡ) 

ਮਾਰਕਅੱਪ

data-toggle="tab"ਤੁਸੀਂ ਸਿਰਫ਼ ਨਿਰਧਾਰਿਤ ਕਰਕੇ ਜਾਂ data-toggle="pill"ਕਿਸੇ ਤੱਤ 'ਤੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਟੈਬ ਜਾਂ ਪਿਲ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ । navਟੈਬ ਵਿੱਚ ਅਤੇ nav-tabsਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਨਾਲ ulਬੂਟਸਟਰੈਪ ਟੈਬ ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਹੋਵੇਗੀ।

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > ਪ੍ਰੋਫਾਈਲ </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > ਸੁਨੇਹੇ </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > ਸੈਟਿੰਗਾਂ </a></li>  
</ul>

ਢੰਗ

$().ਟੈਬ

ਇੱਕ ਟੈਬ ਤੱਤ ਅਤੇ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਟੈਬ ਵਿੱਚ DOM ਵਿੱਚ ਇੱਕ data-targetਜਾਂ hrefਇੱਕ ਕੰਟੇਨਰ ਨੋਡ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

<ul class = "nav nav-tabs" id = "myTab" >  
  <li ਕਲਾਸ = "ਐਕਟਿਵ" ><a href = "#home" > ਘਰ </a></li>  
  <li><a href = "#profile" > ਪ੍ਰੋਫਾਈਲ </a></li> 
  <li><a href = "#messages" > ਸੁਨੇਹੇ </a></li> 
  <li><a href = "#settings" > ਸੈਟਿੰਗਾਂ </a></li> 
</ul>
 
<div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( ਫੰਕਸ਼ਨ () {  
    $ ( '#myTab a:last' )। ਟੈਬ ( 'ਦਿਖਾਓ' );
  })
</script>

ਸਮਾਗਮ

$ ( 'a[data-toggle="tab"]' )। on ( 'ਦਿਖਾਇਆ ਗਿਆ' , ਫੰਕਸ਼ਨ ( e ) {   
  ਈ . ਟੀਚਾ // ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ
  ਈ . ਸੰਬੰਧਿਤ ਟਾਰਗੇਟ // ਪਿਛਲੀ ਟੈਬ
})

ਉਦਾਹਰਨਾਂ

ਜੇਸਨ ਫਰੇਮ ਦੁਆਰਾ ਲਿਖੇ ਸ਼ਾਨਦਾਰ jQuery.tipsy ਪਲੱਗਇਨ ਤੋਂ ਪ੍ਰੇਰਿਤ; ਟੂਲਟਿਪਸ ਇੱਕ ਅੱਪਡੇਟ ਕੀਤਾ ਸੰਸਕਰਣ ਹੈ, ਜੋ ਚਿੱਤਰਾਂ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰਦਾ, ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਡਾਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਟੂਲਟਿਪ ਅਤੇ ਪੌਪਓਵਰ ਡੇਟਾ-ਏਪੀਆਈਸ ਦੀ ਚੋਣ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।

ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

ਇਨਪੁਟ ਸਮੂਹਾਂ ਵਿੱਚ ਟੂਲਟਿੱਪ

ਬੂਟਸਟਰੈਪ ਇਨਪੁਟ ਸਮੂਹਾਂ ਨਾਲ ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ containerਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ ਤੋਂ ਬਚਣ ਲਈ (ਹੇਠਾਂ ਦਸਤਾਵੇਜ਼ੀ) ਵਿਕਲਪ ਸੈੱਟ ਕਰਨਾ ਪਵੇਗਾ।

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:

$ ( '#ਉਦਾਹਰਨ' )। ਟੂਲਟਿਪ ( ਵਿਕਲਪ )

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਮਾਰਕਅੱਪ

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > ਮੇਰੇ ਉੱਤੇ ਹੋਵਰ ਕਰੋ </a>   

ਢੰਗ

$().ਟੂਲਟਿਪ(ਚੋਣਾਂ)

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਇੱਕ ਟੂਲਟਿਪ ਹੈਂਡਲਰ ਨੱਥੀ ਕਰਦਾ ਹੈ।

.ਟੂਲਟਿਪ('ਸ਼ੋਅ')

ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਦਿਖਾਓ' )

.ਟੂਲਟਿਪ('ਛੁਪਾਓ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਲੁਕਾਓ' )

.ਟੂਲਟਿਪ('ਟੌਗਲ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਟੌਗਲ' )

.ਟੂਲਟਿਪ('ਨਸ਼ਟ ਕਰੋ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਨਸ਼ਟ ਕਰੋ' )

ਉਦਾਹਰਨਾਂ

ਹਾਊਸਿੰਗ ਸੈਕੰਡਰੀ ਜਾਣਕਾਰੀ ਲਈ ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ ਸਮੱਗਰੀ ਦੇ ਛੋਟੇ ਓਵਰਲੇ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਆਈਪੈਡ 'ਤੇ। ਪੌਪਓਵਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਬਟਨ ਉੱਤੇ ਹੋਵਰ ਕਰੋ। ਟੂਲਟਿਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਸਥਿਰ ਪੌਪਓਵਰ

ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।

dataਕਿਸੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਅੰਦਰ JavaScript ਅਤੇ ਸਮਗਰੀ ਤੋਂ ਪੌਪਓਵਰ ਦੇ ਰੂਪ ਵਿੱਚ ਕੋਈ ਮਾਰਕਅੱਪ ਨਹੀਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ।

ਲਾਈਵ ਡੈਮੋ

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

$ ( '#ਉਦਾਹਰਨ' )। ਪੌਪਓਵਰ ( ਵਿਕਲਪ )

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਮਾਰਕਅੱਪ

ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਟੂਲਟਿਪ ਅਤੇ ਪੌਪਓਵਰ ਡੇਟਾ-ਏਪੀਆਈਸ ਨੂੰ ਚੁਣਿਆ ਗਿਆ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਸਿਰਫ਼ ਇੱਕ ਚੋਣਕਾਰ ਵਿਕਲਪ ਦਿਓ।

ਢੰਗ

$().popover(ਵਿਕਲਪ)

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

.popover('ਸ਼ੋਅ')

ਇੱਕ ਤੱਤ ਪੌਪਓਵਰ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ.

$ ( '# ਤੱਤ' )। ਪੌਪਓਵਰ ( 'ਸ਼ੋ' )

.popover('ਛੁਪਾਓ')

ਇੱਕ ਤੱਤ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਪੋਪਓਵਰ ( 'ਛੁਪਾਓ' )

.popover('ਟੌਗਲ')

ਇੱਕ ਤੱਤ ਪੌਪਓਵਰ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਪੌਪਓਵਰ ( 'ਟੌਗਲ' )

.popover('ਨਸ਼ਟ')

ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਪੌਪਓਵਰ ( 'ਨਸ਼ਟ' )

ਉਦਾਹਰਨ ਚੇਤਾਵਨੀਆਂ

ਇਸ ਪਲੱਗਇਨ ਨਾਲ ਸਾਰੇ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ਾਂ ਵਿੱਚ ਖਾਰਜ ਕਾਰਜਸ਼ੀਲਤਾ ਸ਼ਾਮਲ ਕਰੋ।

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਬਰਖਾਸਤ ਕਰਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

$ ( ". ਚੇਤਾਵਨੀ" )। ਚੇਤਾਵਨੀ ()

ਮਾਰਕਅੱਪ

data-dismiss="alert"ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਲਰਟ ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਦੇਣ ਲਈ ਬਸ ਆਪਣੇ ਬੰਦ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

<a ਕਲਾਸ = "close" data- dismiss = "alert" href = "#" > × </a>   

ਢੰਗ

$().ਸੂਚਨਾ()

ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨਾਲ ਸਾਰੀਆਂ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਸਮੇਟਦਾ ਹੈ। ਬੰਦ ਹੋਣ 'ਤੇ ਤੁਹਾਡੀਆਂ ਸੁਚੇਤਨਾਵਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਹਨਾਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਹੀ .fadeਅਤੇ .inਕਲਾਸ ਲਾਗੂ ਹੈ।

.alert('close')

ਇੱਕ ਚੇਤਾਵਨੀ ਬੰਦ ਕਰਦਾ ਹੈ।

$ ( ". ਚੇਤਾਵਨੀ" )। ਚੇਤਾਵਨੀ ( 'ਬੰਦ' )

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਚੇਤਾਵਨੀ ਕਲਾਸ ਚੇਤਾਵਨੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ।

$ ( '#my-alert' )। ਬੰਨ੍ਹ ( 'ਬੰਦ' , ਫੰਕਸ਼ਨ () {   
  // ਕੁਝ ਕਰੋ…
})

ਉਦਾਹਰਨ ਵਰਤਦਾ ਹੈ

ਬਟਨਾਂ ਨਾਲ ਹੋਰ ਕਰੋ। ਕੰਟਰੋਲ ਬਟਨ ਸਟੇਟਸ ਜਾਂ ਟੂਲਬਾਰ ਵਰਗੇ ਹੋਰ ਹਿੱਸਿਆਂ ਲਈ ਬਟਨਾਂ ਦੇ ਸਮੂਹ ਬਣਾਓ।

ਸਟੇਟਫੁੱਲ

data-loading-text="Loading..."ਇੱਕ ਬਟਨ 'ਤੇ ਲੋਡਿੰਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਜੋੜੋ ।

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > ਲੋਡਿੰਗ ਸਥਿਤੀ </button>   

ਸਿੰਗਲ ਟੌਗਲ

data-toggle="button"ਇੱਕ ਸਿੰਗਲ ਬਟਨ 'ਤੇ ਟੌਗਲਿੰਗ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ।

<button type = "button" class = "btn btn-primary" data-toggle = "button" > ਸਿੰਗਲ ਟੌਗਲ </button>   

ਚੈੱਕਬਾਕਸ

data-toggle="buttons-checkbox"btn-ਗਰੁੱਪ 'ਤੇ ਚੈਕਬਾਕਸ ਸ਼ੈਲੀ ਟੌਗਲ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ।

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ਖੱਬਾ </button>  
  <button type = "button" class = "btn btn-primary" > ਮੱਧ </button>  
  <button type = "button" class = "btn btn-primary" > ਸੱਜਾ </button>  
</div>

ਰੇਡੀਓ

data-toggle="buttons-radio"btn-ਗਰੁੱਪ 'ਤੇ ਰੇਡੀਓ ਸ਼ੈਲੀ ਟੌਗਲ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ ।

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ਖੱਬਾ </button>  
  <button type = "button" class = "btn btn-primary" > ਮੱਧ </button>  
  <button type = "button" class = "btn btn-primary" > ਸੱਜਾ </button>  
</div>

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਬਟਨਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

$ ( '.nav-tabs' )। ਬਟਨ ()

ਮਾਰਕਅੱਪ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਟਨ ਪਲੱਗਇਨ ਲਈ ਅਟੁੱਟ ਹਨ। ਵੱਖ-ਵੱਖ ਮਾਰਕਅੱਪ ਕਿਸਮਾਂ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਉਦਾਹਰਨ ਕੋਡ ਦੀ ਜਾਂਚ ਕਰੋ।

ਵਿਕਲਪ

ਕੋਈ ਨਹੀਂ

ਢੰਗ

$().ਬਟਨ('ਟੌਗਲ')

ਪੁਸ਼ ਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਬਟਨ ਨੂੰ ਇਹ ਦਿੱਖ ਦਿੰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਗਿਆ ਹੈ।

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().ਬਟਨ('ਲੋਡਿੰਗ')

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਸੈੱਟ ਕਰਦਾ ਹੈ - ਬਟਨ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਟੈਕਸਟ ਬਦਲਦਾ ਹੈ। ਲੋਡਿੰਗ ਟੈਕਸਟ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬਟਨ ਤੱਤ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ data-loading-text।

<button type = "button" class = "btn" data-loading-text = "ਲੋਡਿੰਗ ਸਮੱਗਰੀ..." > ... </button>    

$().ਬਟਨ('ਰੀਸੈੱਟ')

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈੱਟ ਕਰਦਾ ਹੈ - ਟੈਕਸਟ ਨੂੰ ਮੂਲ ਟੈਕਸਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

$().ਬਟਨ(ਸਟਰਿੰਗ)

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈੱਟ ਕਰਦਾ ਹੈ - ਟੈਕਸਟ ਨੂੰ ਕਿਸੇ ਵੀ ਡੇਟਾ ਪਰਿਭਾਸ਼ਿਤ ਟੈਕਸਟ ਸਥਿਤੀ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

<button type = "button" class = "btn" data-complete-text = "ਮੁਕੰਮਲ!" > ... </ ਬਟਨ>    
<script>
  $ ( '.btn' )। ਬਟਨ ( 'ਪੂਰਾ' )
</script>

ਬਾਰੇ

ਅਕਾਰਡੀਅਨ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਵਰਗੇ ਸਮੇਟਣਯੋਗ ਭਾਗਾਂ ਲਈ ਬੇਸ ਸਟਾਈਲ ਅਤੇ ਲਚਕਦਾਰ ਸਹਾਇਤਾ ਪ੍ਰਾਪਤ ਕਰੋ।

* ਪਰਿਵਰਤਨ ਪਲੱਗਇਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਉਦਾਹਰਨ accordion

ਸਮੇਟਣ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਇੱਕ ਸਧਾਰਨ ਐਕੌਰਡਿਅਨ ਸ਼ੈਲੀ ਵਿਜੇਟ ਬਣਾਇਆ ਹੈ:

<div class = "accordion" id = "accordion2" >  
  <div ਕਲਾਸ = "ਐਕੌਰਡੀਅਨ-ਗਰੁੱਪ" > 
    <div ਕਲਾਸ = "ਐਕੌਰਡੀਅਨ-ਸਿਰਲੇਖ" > 
      <a ਕਲਾਸ = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ਸਮੇਟਣਯੋਗ ਸਮੂਹ ਆਈਟਮ #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div ਕਲਾਸ = "ਅਕਾਰਡੀਅਨ-ਇਨਰ" > 
        ਅਨੀਮ ਪਰਿਆਤੁਰ ਕਲੀਚ...
      </div>
    </div>
  </div>
  <div ਕਲਾਸ = "ਐਕੌਰਡੀਅਨ-ਗਰੁੱਪ" > 
    <div ਕਲਾਸ = "ਐਕੌਰਡੀਅਨ-ਸਿਰਲੇਖ" > 
      <a ਕਲਾਸ = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        ਸਮੇਟਣਯੋਗ ਸਮੂਹ ਆਈਟਮ #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div ਕਲਾਸ = "ਅਕਾਰਡੀਅਨ-ਇਨਰ" > 
        ਅਨੀਮ ਪਰਿਆਤੁਰ ਕਲੀਚ...
      </div>
    </div>
  </div>
</div>
...

ਤੁਸੀਂ ਐਕੋਰਡਿਅਨ ਮਾਰਕਅੱਪ ਤੋਂ ਬਿਨਾਂ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ। ਕਿਸੇ ਹੋਰ ਤੱਤ ਦੇ ਵਿਸਤਾਰ ਅਤੇ ਸਮੇਟਣ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਬਟਨ ਬਣਾਓ।

<button type = "button" class = "btn btn-ਖ਼ਤਰਾ" data-toggle = "colapse " data-target = "#demo" >    
  ਸਧਾਰਨ ਸਮੇਟਣਯੋਗ
</ ਬਟਨ>
 
<div id = "demo" class = "colapse in" > … </div>  

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਨਿਯੰਤਰਣ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਸਿਰਫ਼ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ data-toggle="collapse"ਅਤੇ a . ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੇਟਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ css ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ data-target। ਕਲਾਸ ਨੂੰ ਸਮੇਟਣਯੋਗ ਤੱਤ ਵਿੱਚ data-targetਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । collapseਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ in।

ਇੱਕ ਸਮੇਟਣਯੋਗ ਨਿਯੰਤਰਣ ਵਿੱਚ ਅਕਾਰਡੀਅਨ-ਵਰਗੇ ਸਮੂਹ ਪ੍ਰਬੰਧਨ ਨੂੰ ਜੋੜਨ ਲਈ, ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ data-parent="#selector"। ਇਸ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਡੈਮੋ ਵੇਖੋ।

JavaScript ਰਾਹੀਂ

ਇਸ ਨਾਲ ਹੱਥੀਂ ਯੋਗ ਕਰੋ:

$ ( ". ਸਮੇਟਣਾ" )। ਢਹਿ ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-parent=""।

ਢੰਗ

.colapse(ਵਿਕਲਪ)

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

$ ( '#myCollapsible' )। ਸਮੇਟਣਾ ({
  ਟੌਗਲ : ਗਲਤ 
})

.colapse('ਟੌਗਲ')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਟੌਗਲ ਕਰਦਾ ਹੈ।

.colapse('ਦਿਖਾਓ')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦਿਖਾਉਂਦਾ ਹੈ।

.colapse('ਲੁਕਾਓ')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਸਮੇਟਣ ਦੀ ਕਲਾਸ ਸਮੇਟਣ ਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

$ ( '#myCollapsible' )। 'ਤੇ ( 'ਲੁਕਿਆ ਹੋਇਆ' , ਫੰਕਸ਼ਨ () {   
  // ਕੁਝ ਕਰੋ…
})

ਉਦਾਹਰਨ ਕੈਰੋਜ਼ਲ

ਹੇਠਾਂ ਦਿੱਤਾ ਸਲਾਈਡਸ਼ੋ ਕੈਰੋਜ਼ਲ ਵਰਗੇ ਤੱਤਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਆਮ ਪਲੱਗਇਨ ਅਤੇ ਕੰਪੋਨੈਂਟ ਦਿਖਾਉਂਦਾ ਹੈ।

ਪਹਿਲਾ ਥੰਬਨੇਲ ਲੇਬਲ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ਦੂਜਾ ਥੰਬਨੇਲ ਲੇਬਲ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ਤੀਜਾ ਥੰਬਨੇਲ ਲੇਬਲ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" ਕਲਾਸ = "ਕੈਰੋਜ਼ਲ ਸਲਾਈਡ" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ -->
  <div class = "carousel-inner" > 
    <div ਕਲਾਸ = "ਐਕਟਿਵ ਆਈਟਮ" > … </div> 
    <div ਕਲਾਸ = "ਆਈਟਮ" > … </div> 
    <div ਕਲਾਸ = "ਆਈਟਮ" > … </div> 
  </div>
  <!-- ਕੈਰੋਸੇਲ ਨੇਵੀ -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਕੈਰੋਜ਼ਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। data-slideਕੀਵਰਡਸ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ prevਜਾਂ next, ਜੋ ਇਸਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦਾ ਹੈ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, data-slide-toਇੱਕ ਕੱਚੀ ਸਲਾਈਡ ਸੂਚਕਾਂਕ ਨੂੰ ਕੈਰੋਜ਼ਲ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ਵਰਤੋ data-slide-to="2", ਜੋ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਇੱਕ ਖਾਸ ਸੂਚਕਾਂਕ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ 0।

JavaScript ਰਾਹੀਂ

ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:

$ ( '. ਕੈਰੋਜ਼ਲ' )। ਕੈਰੋਸੇਲ ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScriptz ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""।

ਢੰਗ

.carousel(ਚੋਣਾਂ)

ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪਾਂ ਨਾਲ ਕੈਰੋਜ਼ਲ ਨੂੰ objectਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

$ ( '. ਕੈਰੋਜ਼ਲ' )। ਕੈਰੋਸਲ ({
  ਅੰਤਰਾਲ : 2000 
})

.carousel('ਚੱਕਰ')

ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਰਾਹੀਂ ਚੱਕਰ।

.carousel('ਵਿਰਾਮ')

ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

.carousel(ਨੰਬਰ)

ਕੈਰੋਸਲ ਨੂੰ ਕਿਸੇ ਖਾਸ ਫ੍ਰੇਮ (0 ਅਧਾਰਤ, ਇੱਕ ਐਰੇ ਦੇ ਸਮਾਨ) ਵਿੱਚ ਚੱਕਰ ਲਗਾਉਂਦਾ ਹੈ।

.carousel('ਪਿਛਲਾ')

ਪਿਛਲੀ ਆਈਟਮ ਲਈ ਚੱਕਰ।

.carousel('ਅਗਲਾ')

ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਚੱਕਰ ਲਗਾਓ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਕੈਰੋਜ਼ਲ ਕਲਾਸ ਕੈਰੋਜ਼ਲ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਦੋ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ।

ਉਦਾਹਰਨ

ਕਿਸੇ ਵੀ ਫਾਰਮ ਟੈਕਸਟ ਇੰਪੁੱਟ ਦੇ ਨਾਲ ਸ਼ਾਨਦਾਰ ਟਾਈਪਹੇਡਸ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ, ਆਸਾਨੀ ਨਾਲ ਵਿਸਤ੍ਰਿਤ ਪਲੱਗਇਨ।

<ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਡੇਟਾ-ਪ੍ਰਦਾਨ = "ਟਾਈਪਹੈੱਡ" >  

ਤੁਸੀਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ autocomplete="off"ਬ੍ਰਾਊਜ਼ਰ ਮੀਨੂ ਨੂੰ ਬੂਟਸਟਰੈਪ ਟਾਈਪਹੈੱਡ ਡ੍ਰੌਪਡਾਉਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਤੋਂ ਰੋਕਣ ਲਈ ਸੈੱਟ ਕਰਨਾ ਚਾਹੋਗੇ।

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ ਦਿਖਾਏ ਗਏ ਟਾਈਪਹੈੱਡ ਕਾਰਜਸ਼ੀਲਤਾ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਨੂੰ ਰਜਿਸਟਰ ਕਰਨ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰੋ।

JavaScript ਰਾਹੀਂ

ਟਾਈਪਹੈੱਡ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:

$ ( '.typeahead' )। ਟਾਈਪਹੈੱਡ ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-source=""।

ਢੰਗ

.typeahead(ਚੋਣਾਂ)

ਟਾਈਪਹੈੱਡ ਨਾਲ ਇੱਕ ਇਨਪੁਟ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

ਉਦਾਹਰਨ

ਖੱਬੇ ਪਾਸੇ ਸਬਨੇਵੀਗੇਸ਼ਨ affix ਪਲੱਗਇਨ ਦਾ ਲਾਈਵ ਡੈਮੋ ਹੈ।

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਜੋੜਨ ਲਈ ਵਿਵਹਾਰ ਨੂੰ ਜੋੜਨ data-spy="affix"ਲਈ, ਸਿਰਫ਼ ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਫਿਰ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਆਫਸੈੱਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਿ ਕਿਸੇ ਤੱਤ ਦੀ ਪਿਨਿੰਗ ਨੂੰ ਚਾਲੂ ਅਤੇ ਬੰਦ ਕਦੋਂ ਕਰਨਾ ਹੈ।

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ affix ਪਲੱਗਇਨ ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '#navbar' )। affix ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset-top="200"।