දළ විශ්ලේෂණය

තනි හෝ සම්පාදනය කරන ලදී

ප්ලගීන තනි තනිව ඇතුළත් කළ හැක (Bootstrap හි තනි *.jsගොනු භාවිතා කරමින්), හෝ එකවර (භාවිතා bootstrap.jsහෝ minified bootstrap.min.js).

සම්පාදනය කරන ලද JavaScript භාවිතා කිරීම

දෙකම bootstrap.jsසහ bootstrap.min.jsඑක් ගොනුවක සියලුම ප්ලගීන අඩංගු වේ. එකක් පමණක් ඇතුළත් කරන්න.

ප්ලගින පරායත්තතා

සමහර ප්ලගින සහ CSS සංරචක වෙනත් ප්ලගීන මත රඳා පවතී. ඔබ තනි තනිව ප්ලගීන ඇතුළත් කරන්නේ නම්, ලේඛනවල මෙම පරායත්තතා පරීක්ෂා කිරීමට වග බලා ගන්න. සියලුම ප්ලගීන jQuery මත රඳා පවතින බව සලකන්න (මෙයින් අදහස් වන්නේ ප්ලගින ගොනු වලට පෙර jQuery ඇතුළත් කළ යුතු බවයි). jQuery හි කුමන අනුවාද සඳහා සහය දක්වන්නේද යන්න බැලීමට අපගේ උපදෙස් ලබා ගන්න.bower.json

දත්ත ගුණාංග

JavaScript එක පේළියක්වත් ලිවීමෙන් තොරව ඔබට සියලුම Bootstrap ප්ලගීන මාර්ක්අප් API හරහා භාවිතා කළ හැක. මෙය Bootstrap හි පළමු පන්තියේ API වන අතර ප්ලගිනයක් භාවිතා කරන විට ඔබේ පළමු සැලකිල්ල විය යුතුය.

එනම්, සමහර අවස්ථාවලදී මෙම ක්‍රියාකාරිත්වය අක්‍රිය කිරීම යෝග්‍ය විය හැකිය. එම නිසා, සමඟින් ඇති ලේඛනයේ සියලුම සිදුවීම් බන්ධනය කිරීමෙන් දත්ත උපලක්ෂණ API අක්‍රිය කිරීමේ හැකියාව ද අපි ලබා දෙන්නෙමු data-api. මෙය පෙනෙන්නේ මෙසේය.

$(document).off('.data-api')

විකල්පයක් ලෙස, නිශ්චිත ප්ලගිනයක් ඉලක්ක කිරීම සඳහා, ප්ලගිනයේ නම නාම අවකාශයක් ලෙස දත්ත-api නාම අවකාශය සමඟ ඇතුළත් කරන්න:

$(document).off('.alert.data-api')

දත්ත ගුණාංග හරහා මූලද්‍රව්‍යයකට එක් ප්ලගිනයක් පමණි

එකම මූලද්‍රව්‍යයේ බහු ප්ලගීන වලින් දත්ත උපලක්ෂණ භාවිතා නොකරන්න. උදාහරණයක් ලෙස, බොත්තමකට මෙවලම් ඉඟියක් තිබිය නොහැක සහ මාදිලියක් ටොගල් කළ නොහැක. මෙය සිදු කිරීම සඳහා, එතීමේ මූලද්රව්යයක් භාවිතා කරන්න.

ක්‍රමලේඛන API

JavaScript API හරහා ඔබට සියලුම Bootstrap ප්ලගීන භාවිතා කිරීමට හැකි වනු ඇතැයි අපි විශ්වාස කරමු. සියලුම පොදු API තනි, දම්වැල් ක්‍රම වන අතර, ක්‍රියා කළ එකතුව ආපසු ලබා දෙන්න.

$('.btn.danger').button('toggle').addClass('fat')

සියලුම ක්‍රම විකල්ප විකල්ප වස්තුවක්, විශේෂිත ක්‍රමයක් ඉලක්ක කරන තන්තුවක් හෝ කිසිවක් (පෙරනිමි හැසිරීම් සහිත ප්ලගිනයක් ආරම්භ කරන) පිළිගත යුතුය:

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

සෑම ප්ලගිනයක්ම එහි අමු ඉදිකිරීම්කරු Constructorදේපලක් මත නිරාවරණය කරයි: $.fn.popover.Constructor. ඔබ විශේෂිත ප්ලගින අවස්ථාවක් ලබා ගැනීමට කැමති නම්, එය මූලද්‍රව්‍යයකින් කෙලින්ම ලබා ගන්න: $('[rel="popover"]').data('popover').

පෙරනිමි සැකසුම්

Constructor.DEFAULTSප්ලගිනයේ වස්තුව වෙනස් කිරීමෙන් ඔබට ප්ලගිනයක් සඳහා පෙරනිමි සැකසුම් වෙනස් කළ හැක :

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

ගැටුමක් නැත

සමහර විට වෙනත් UI රාමු සමඟ Bootstrap ප්ලගීන භාවිතා කිරීම අවශ්‍ය වේ. මෙම තත්වයන් තුළ, නාම අවකාශයේ ගැටීම් විටින් විට සිදු විය හැක. මෙය සිදුවුවහොත්, ඔබට .noConflictඅගය ප්‍රතිවර්තනය කිරීමට අවශ්‍ය ප්ලගිනය ඇමතීමට හැකිය.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

සිදුවීම්

Bootstrap බොහෝ ප්ලගීනවල අද්විතීය ක්‍රියා සඳහා අභිරුචි සිදුවීම් සපයයි. සාමාන්‍යයෙන්, මේවා අසංඛ්‍යාත සහ අතීත කෘදන්ත ස්වරූපයකින් පැමිණේ - එහිදී showයම් සිදුවීමක් ආරම්භයේදී අසංඛ්‍යාත (උදා.) ක්‍රියාරම්භ කරන අතර, එහි අතීත කෘදන්ත ස්වරූපය (උදා. shown) ක්‍රියාවක් සම්පූර්ණ වූ විට ක්‍රියාරම්භ කරයි.

3.0.0 වන විට, සියලුම බූට්ස්ට්‍රැප් සිද්ධීන් නම් පරතරයක් ඇත.

සියලුම අනන්ත සිදුවීම් preventDefaultක්‍රියාකාරීත්වය සපයයි. මෙය ක්‍රියාවක් ආරම්භ වීමට පෙර ක්‍රියාත්මක කිරීම නැවැත්වීමේ හැකියාව සපයයි.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

අනුවාද අංක

එක් එක් Bootstrap හි jQuery ප්ලගීන වල අනුවාදය VERSIONප්ලගිනයේ කන්ස්ට්‍රක්ටරයේ දේපල හරහා ප්‍රවේශ විය හැක. උදාහරණයක් ලෙස, මෙවලම් ඉඟි ප්ලගිනය සඳහා:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇති විට විශේෂ පසුබෑමක් නොමැත

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇති විට බූට්ස්ට්‍රැප් ප්ලගීන විශේෂයෙන් අලංකාර ලෙස ආපසු නොවැටේ. ඔබ මෙම අවස්ථාවෙහි පරිශීලක අත්දැකීම ගැන සැලකිලිමත් වන්නේ නම්, <noscript>ඔබගේ පරිශීලකයින්ට තත්වය (සහ JavaScript නැවත සක්‍රිය කරන්නේ කෙසේද) පැහැදිලි කිරීමට භාවිතා කරන්න, සහ/හෝ ඔබේම අභිරුචි පසුබැසීමක් එක් කරන්න.

තෙවන පාර්ශවීය පුස්තකාල

Bootstrap නිල වශයෙන් Prototype හෝ jQuery UI වැනි තෙවන පාර්ශවීය JavaScript පුස්තකාල සඳහා සහය නොදක්වයි . සිදුවීම් තිබියදීත් .noConflict, නම් පරතරය, ඔබ විසින්ම විසඳා ගැනීමට අවශ්‍ය අනුකූලතා ගැටලු තිබිය හැක.

සංක්‍රාන්ති transition.js

මාරුවීම් ගැන

සරල සංක්‍රාන්ති ප්‍රයෝග සඳහා, transition.jsඅනෙකුත් JS ගොනු සමඟ එක් වරක් ඇතුළත් කරන්න. ඔබ සම්පාදනය කරන ලද (හෝ කුඩා කළ) භාවිතා කරන්නේ නම් bootstrap.js, මෙය ඇතුළත් කිරීමට අවශ්‍ය නැත - එය දැනටමත් තිබේ.

ඇතුලේ මොනවද තියෙන්නේ

Transition.js යනු සිදුවීම් සඳහා මූලික සහායකයක් transitionEndමෙන්ම CSS සංක්‍රාන්ති ඉමුලේටරයකි. එය CSS සංක්‍රාන්ති සහාය සඳහා පරීක්ෂා කිරීමට සහ එල්ලෙන සංක්‍රාන්ති අල්ලා ගැනීමට අනෙකුත් ප්ලගීන විසින් භාවිතා කරයි.

සංක්‍රාන්ති අක්‍රිය කිරීම

පහත ජාවාස්ක්‍රිප්ට් ස්නිපටය භාවිතයෙන් සංක්‍රාන්ති ගෝලීය වශයෙන් අබල කළ හැක, එය පූරණය වූ පසු transition.js(හෝ bootstrap.js, එසේ විය හැකි පරිදි) පැමිණිය යුතුය:bootstrap.min.js

$.support.transition = false

Modals modal.js

මාදිලි විධිමත්, නමුත් නම්‍යශීලී, අවම අවශ්‍ය ක්‍රියාකාරීත්වය සහ ස්මාර්ට් පෙරනිමි සමඟ සංවාද විමසයි.

බහුවිධ විවෘත මාදිලි සඳහා සහය නොදක්වයි

තවත් මොඩල් එකක් පෙනෙන අතරතුර විවෘත නොකිරීමට වග බලා ගන්න. වරකට මාදිලි එකකට වඩා පෙන්වීමට අභිරුචි කේතය අවශ්‍ය වේ.

මාදිලියේ සලකුණු තැබීම

මොඩලයේ පෙනුමට සහ/හෝ ක්‍රියාකාරීත්වයට බලපාන අනෙකුත් සංරචක වලක්වා ගැනීම සඳහා ඔබේ ලේඛනයේ ඉහළ මට්ටමේ ස්ථානයක මාදිලියේ HTML කේතයක් තැබීමට සැමවිටම උත්සාහ කරන්න.

ජංගම උපාංග අනතුරු ඇඟවීම්

ජංගම උපාංගවල මාදිලි භාවිතා කිරීම සම්බන්ධයෙන් යම් අනතුරු ඇඟවීම් තිබේ. විස්තර සඳහා අපගේ බ්‍රවුසර ආධාරක ලේඛනය බලන්න.

HTML5 එහි අර්ථ ශාස්ත්‍රය නිර්වචනය කරන ආකාරය හේතුවෙන්, autofocusHTML ගුණාංගය Bootstrap modals වල බලපෑමක් නැත. එකම බලපෑම ලබා ගැනීම සඳහා, සමහර අභිරුචි JavaScript භාවිතා කරන්න:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

උදාහරණ

ස්ථිතික උදාහරණය

පාදකයේ ශීර්ෂකය, ශරීරය සහ ක්‍රියා මාලාවක් සහිත විදැහුම්කරණ මාදිලියකි.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

සජීවී demo

පහත බොත්තම ක්ලික් කිරීමෙන් JavaScript හරහා මාදිලියක් ටොගල් කරන්න. එය පහළට ලිස්සා ගොස් පිටුවේ ඉහළ සිට මැකී යනු ඇත.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ආකෘති වෙත ප්‍රවේශ විය හැකි බවට පත් කරන්න

මොඩල් මාතෘකාව යොමු කරමින්, වෙත , සහ role="dialog"එයටම එකතු කිරීමට වග බලා ගන්න .aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyඅතිරේකව, මත සමඟින් ඔබේ මාදිලි සංවාදයේ විස්තරයක් ලබා දිය හැක .modal.

YouTube වීඩියෝ කාවැද්දීම

යූ ටියුබ් වීඩියෝ මාදිලිවල කාවැද්දීමට ස්වයංක්‍රීයව නැවත ධාවනය සහ තවත් දේ නැවැත්වීමට අමතර ජාවාස්ක්‍රිප්ට් බූට්ස්ට්‍රැප් තුළ අවශ්‍ය වේ. වැඩි විස්තර සඳහා මෙම ප්‍රයෝජනවත් Stack Overflow පෝස්ට් බලන්න .

විකල්ප ප්රමාණ

මාදිලිවලට විකල්ප ප්‍රමාණ දෙකක් ඇත, ඒවා මත තැබීමට විකරණකාරක පන්ති හරහා ලබා ගත හැකිය .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

සජීවිකරණය ඉවත් කරන්න

බැලීම සඳහා මැකී යාමට වඩා සරලව පෙනෙන මාදිලි සඳහා, .fadeඔබේ මාදිලියේ සලකුණු වලින් පන්තිය ඉවත් කරන්න.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

ජාල පද්ධතිය භාවිතා කිරීම

.rowමාදිලියක් තුළ බූට්ස්ට්‍රැප් ජාල පද්ධතියෙන් ප්‍රයෝජන ගැනීමට .modal-body, සාමාන්‍ය ජාල පද්ධති පන්ති භාවිතා කරන්න.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

තරමක් වෙනස් අන්තර්ගතයන් සහිත එකම මාදිලිය ක්‍රියාරම්භ කරන බොත්තම් පොකුරක් තිබේද? ක්ලික් කළ බොත්තම මත පදනම්ව මොඩලයේ අන්තර්ගතය වෙනස් කිරීමට HTML ගුණාංග (සමහර විට jQuery හරහා ) භාවිතා කරන්න event.relatedTarget. විස්තර සඳහා Modal Events docs බලන්න ,data-*relatedTarget

...තවත් බොත්තම්...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

භාවිතය

මොඩල් ප්ලගිනය දත්ත ගුණාංග හෝ ජාවාස්ක්‍රිප්ට් හරහා ඔබගේ සැඟවුණු අන්තර්ගතය ඉල්ලුම මත ටොගල් කරයි. එය පෙරනිමි අනුචලන හැසිරීම ප්‍රතික්‍ෂේප කිරීම සඳහා එකතු .modal-openකරන අතර මාදිලියෙන් පිටත ක්ලික් කිරීමේදී පෙන්වා ඇති මාදිලි ඉවත් කිරීම සඳහා ක්ලික් ප්‍රදේශයක් ලබා දෙයි.<body>.modal-backdrop

දත්ත ගුණාංග හරහා

ජාවාස්ක්‍රිප්ට් ලිවීමෙන් තොරව මොඩලයක් සක්‍රිය කරන්න. data-toggle="modal"බොත්තමක් වැනි පාලක මූලද්‍රව්‍යයක් data-target="#foo"හෝ href="#foo"ටොගල් කිරීමට නිශ්චිත මාදිලියක් සමඟින් සකසන්න .

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript හරහා

myModalජාවාස්ක්‍රිප්ට් එක පේළියක් සහිත හැඳුනුම්පතක් සහිත මාදිලියක් අමතන්න :

$('#myModal').modal(options)

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-backdrop="".

නම වර්ගය පෙරනිමිය විස්තර
පසුබිම boolean හෝ string'static' සැබෑ මාදිලි පසුබිම් මූලද්‍රව්‍යයක් ඇතුළත් වේ. විකල්පයක් ලෙස, staticක්ලික් කිරීමේදී මාදිලිය වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න.
යතුරු පුවරුව බූලියන් සැබෑ ගැලවීමේ යතුර එබූ විට මාදිලිය වසා දමයි
පෙන්වන්න බූලියන් සැබෑ ආරම්භ කළ විට මාදිලිය පෙන්වයි.
දුරස්ථ මාර්ගය බොරු

මෙම විකල්පය v3.3.0 සිට අත්හරින ලද අතර v4 හි ඉවත් කර ඇත. අපි ඒ වෙනුවට සේවාදායකයා-පාර්ශවීය සැකිලි හෝ දත්ත බන්ධන රාමුවක් භාවිතා කිරීම හෝ jQuery.load ඔබම ඇමතීම නිර්දේශ කරමු.

දුරස්ථ URL එකක් සපයා ඇත්නම්, අන්තර්ගතය jQuery ක්‍රමය හරහා එක් වරක් පූරණය කර div loadවෙත එන්නත් කරනු ලැබේ . .modal-contentඔබ data-api භාවිතා කරන්නේ නම්, ඔබට විකල්ප වශයෙන් hrefදුරස්ථ මූලාශ්‍රය නියම කිරීමට උපලක්ෂණ භාවිතා කළ හැක. මේ සඳහා උදාහරණයක් පහත දැක්වේ.

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

ක්රම

ඔබේ අන්තර්ගතය මාදිලියක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

$('#myModal').modal({
  keyboard: false
})

මාදිලියක් අතින් ටොගල් කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modalhidden.bs.modal

$('#myModal').modal('toggle')

මාදිලියක් අතින් විවෘත කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modal

$('#myModal').modal('show')

මාදිලියක් අතින් සඟවයි. මාදිලිය සඟවා තැබීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.hidden.bs.modal

$('#myModal').modal('hide')

මොඩලය වමට පැනීමට සලස්වන, එකක් දිස්විය යුතු අවස්ථාවක, අනුචලන තීරුවකට ප්‍රතිරෝධය දැක්වීමට මාදිලියේ ස්ථානගත කිරීම නැවත සකස් කරයි.

එය විවෘතව තිබියදී මාදිලියේ උස වෙනස් වන විට පමණක් අවශ්ය වේ.

$('#myModal').modal('handleUpdate')

සිදුවීම්

Bootstrap's modal class මගින් මාදිලියේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සියලුම මාදිලියේ සිදුවීම් මාදිලියේම (එනම් හිදී <div class="modal">) වෙඩි තබා ඇත.

සිදුවීම් වර්ගය විස්තර
show.bs.modal showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ. ක්ලික් කිරීමකින් ඇති වූවක් නම්, ක්ලික් කළ මූලද්‍රව්‍යය relatedTargetසිදුවීමේ දේපල ලෙස පවතී.
පෙන්වා ඇත.bs.modal මාදිලිය පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). ක්ලික් කිරීමකින් ඇති වූවක් නම්, ක්ලික් කළ මූලද්‍රව්‍යය relatedTargetසිදුවීමේ දේපල ලෙස පවතී.
hide.bs.modal hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.modal මොඩලය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
loaded.bs.modal remoteමොඩලය විකල්පය භාවිතා කර අන්තර්ගතය පූරණය කර ඇති විට මෙම සිදුවීම සිදු වේ .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

පතන dropdown.js

navbar, tabs, සහ pills ඇතුළුව, මෙම සරල ප්ලගිනය සමඟ ඕනෑම දෙයකට පතන මෙනු එක් කරන්න.

නව තීරුවක් තුළ

පෙති ඇතුළත

දත්ත ගුණාංග හෝ ජාවාස්ක්‍රිප්ට් හරහා, පතන ප්ලගිනය .openමාපිය ලැයිස්තු අයිතමයේ පන්තිය ටොගල් කිරීමෙන් සැඟවුණු අන්තර්ගතය (ඩ්‍රොප් ඩවුන් මෙනු) ටොගල් කරයි.

ජංගම උපාංගවල, පතන විවෘත කිරීම .dropdown-backdropමෙනුවෙන් පිටත තට්ටු කරන විට පතන මෙනු වැසීම සඳහා ටැප් ප්‍රදේශයක් එක් කරයි, නිසි iOS සහාය සඳහා අවශ්‍යතාවයකි. මෙයින් අදහස් කරන්නේ විවෘත පතන මෙනුවක සිට වෙනත් පතන මෙනුවකට මාරුවීම සඳහා ජංගම දුරකථනය මත අමතර තට්ටු කිරීමක් අවශ්‍ය බවයි.

සටහන: data-toggle="dropdown"යෙදුම් මට්ටමකින් පතන මෙනු වැසීම සඳහා ගුණාංගය රඳා පවතී, එබැවින් එය සැමවිටම භාවිතා කිරීම හොඳ අදහසකි.

දත්ත ගුණාංග හරහා

data-toggle="dropdown"පතන ටොගල් කිරීමට සබැඳියකට හෝ බොත්තමකට එක් කරන්න .

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

සබැඳි බොත්තම් සමඟ URL නොවෙනස්ව තබා ගැනීමට, data-targetවෙනුවට ගුණාංගය භාවිතා කරන්න href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript හරහා

JavaScript හරහා පතනයන් අමතන්න:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"තවමත් අවශ්යයි

ඔබ ජාවාස්ක්‍රිප්ට් හරහා ඔබගේ පතන අමතා හෝ ඒ වෙනුවට ඩේටා-ඒපී භාවිතා කරන්නේද යන්න නොසලකා, data-toggle="dropdown"පතන ප්‍රේරක මූලද්‍රව්‍යයේ සැමවිටම සිටීම අවශ්‍ය වේ.

කිසිවක් නැත

දී ඇති navbar හෝ ටැබ් කළ සංචාලනයක පතන මෙනුව ටොගල් කරයි.

.dropdown-menuසියලුම පතන සිදුවීම් ගේ මව් මූලද්‍රව්‍ය වෙත වෙඩි තබා ඇත .

සියලුම පතන සිදුවීම් වලට relatedTargetදේපලක් ඇත, එහි වටිනාකම ටොගල් ඇන්කර් මූලද්‍රව්‍යය වේ.

සිදුවීම් වර්ගය විස්තර
show.bs.dropdown ප්‍රදර්ශන අවස්ථා ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත.bs.dropdown පහත වැටීම පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති, සම්පූර්ණ කිරීමට බලා සිටිනු ඇත).
hide.bs.dropdown සඟවන අවස්ථා ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.පතන පහත වැටීම පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම වෙඩි තබා ඇත (CSS සංක්‍රාන්ති, සම්පූර්ණ කිරීමට බලා සිටිනු ඇත).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

navbar හි උදාහරණය

ScrollSpy ප්ලගිනය අනුචලන ස්ථානය මත පදනම්ව nav ඉලක්ක ස්වයංක්‍රීයව යාවත්කාලීන කිරීම සඳහා වේ. නව තීරුවට පහළින් ප්‍රදේශය අනුචලනය කර සක්‍රිය පන්තියේ වෙනස නරඹන්න. පතන උප අයිතම ද උද්දීපනය කෙරේ.

@මේදය

ඇඩ් ලෙගිං කීටාර්, බ්‍රන්ච් අයිඩී ආර්ට් පාටි ඩොලර් ලේබර්. Pitchfork yr enim lo-fi ඔවුන් විකුණා අවසන් වීමට පෙර. Tumblr ගොවිපල සිට මේසය දක්වා බයිසිකල් හිමිකම් කුමක් වුවත්. Anim keffiyeh carles Cardigan. Velit seitan mcsweeney ගේ ඡායාරූප කුටිය 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති සහ කාඩිගන් භාර අරමුදල culpa biodiesel wes Anderson සෞන්දර්යය. නිහිල් පච්ච කොටා ගත් චෝදනාව, විශ්වාසවන්ත උත්ප්‍රාසය ජෛව ඩීසල් කෙෆියේ කලාකරු උල්ලම්කෝ ප්‍රතිවිපාක.

@mdo

Veniam marfa උඩු රැවුල ස්කේට්බෝඩ්, adipisicing fugiat velit pitchfork රැවුල. Freegan beard aliqua Cupidatat mcsweeney's vero. කුපිඩටට් ෆෝ ලොකෝ නිසා, ඊඒ හෙල්වෙටිකා නුල්ලා කාර්ල්ස්. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. ලෝ-ෆයි වෙස් ඇන්ඩර්සන් +1 සාර්ටෝරියල්. Carles සෞන්දර්යාත්මක නොවන ව්‍යායාම quis gentrify. Brooklyn adipisicing craft beer vice keytar deserant.

එක

Occaecat commodo aliqua delectus. ෆැප් ක්‍රාෆ්ට් බියර් ඩෙසර්න්ට් ස්කේට්බෝඩ් ඊඒ. ලොමෝ බයිසිකල් හිමිකම් ඇඩිපිසිං බෑන් මයි, වේලිට් ඊ සන්ට් මීලඟ මට්ටමේ ලොකාවෝර් තනි සම්භවයක් ඇති කෝපි මැග්නා වේනියම් හි ඇත. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY අවම පණිවිඩකරු බෑගය. Cred ex in, තිරසාර delectus consectetur fanny pack 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 messenger bag marfa ඕනෑම delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche Irony, thundercats ඔබ ඒවා ගැන අසා නැතුව ඇති hoodie gluten-free lo-fi fap aliquip. ඔවුන් විකිණී අවසන් වීමට පෙර කම්කරු ප්‍රභූ ස්ථානය, ටෙරී රිචඩ්සන් ප්‍රොඩන්ට් බ්‍රන්ච් නෙස්කියුන්ට් ක්විස් කොස්බි ස්වීටර් පැරියතුර් කෙෆියේ සහ හෙල්වෙටිකා ආර්ටිසන්. කාඩිගන් ක්‍රාෆ්ට් බියර් සීටන් රෙඩිමේඩ් වෙලිට්. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

භාවිතය

Bootstrap nav අවශ්‍යයි

Scrollspy හට දැනට සක්‍රීය සබැඳි නිසි ලෙස උද්දීපනය කිරීම සඳහා Bootstrap nav සංරචකයක් භාවිතා කිරීම අවශ්‍ය වේ.

විසඳිය හැකි ID ඉලක්ක අවශ්‍යයි

Navbar සබැඳිවලට විසඳිය හැකි id ඉලක්ක තිබිය යුතුය. උදාහරණයක් ලෙස, <a href="#home">home</a>DOM වැනි දෙයකට අනුරූප විය යුතුය <div id="home"></div>.

ඉලක්ක නොවන :visibleමූලද්‍රව්‍ය නොසලකා හරින ලදී

:visiblejQuery අනුව නොවන ඉලක්ක මූලද්‍රව්‍ය නොසලකා හරිනු ඇති අතර ඒවායේ අනුරූප nav අයිතම කිසි විටෙකත් උද්දීපනය නොකෙරේ.

සාපේක්ෂ ස්ථානගත කිරීම අවශ්ය වේ

ක්‍රියාත්මක කිරීමේ ක්‍රමය කුමක් වුවත්, scrollspy සඳහා position: relative;ඔබ ඔත්තු බලන මූලද්‍රව්‍යය භාවිතා කිරීම අවශ්‍ය වේ. බොහෝ අවස්ථාවලදී මෙය වේ <body>. හැර අනෙකුත් මූලද්‍රව්‍ය මත අනුචලන ඔත්තු බැලීමේදී , කට්ටලයක් සහ යෙදවීමට <body>වග බලා ගන්න .heightoverflow-y: scroll;

දත්ත ගුණාංග හරහා

ඔබගේ topbar සංචාලනයට පහසුවෙන් scrollspy හැසිරීම එක් data-spy="scroll"කිරීමට, ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න (බොහෝ විට මෙය වනු ඇත <body>). ඉන්පසු ඕනෑම Bootstrap සංරචකයක data-targetමව් මූලද්‍රව්‍යයේ ID හෝ පන්තිය සමඟ ගුණාංගය එක් කරන්න..nav

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript හරහා

ඔබේ CSS එකතු කිරීමෙන් පසු position: relative;, JavaScript හරහා scrollspy අමතන්න:

$('body').scrollspy({ target: '#navbar-example' })

ක්රම

.scrollspy('refresh')

DOM වෙතින් මූලද්‍රව්‍ය එකතු කිරීම හෝ ඉවත් කිරීම සමඟ සම්බන්ධව scrollspy භාවිතා කරන විට, ඔබට එවැනි නැවුම් කිරීමේ ක්‍රමය ඇමතීමට අවශ්‍ය වනු ඇත:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset="".

නම වර්ගය පෙරනිමිය විස්තර
ඕෆ්සෙට් අංකය 10 අනුචලනයේ පිහිටීම ගණනය කිරීමේදී ඉහළින් ඕෆ්සෙට් කිරීමට පික්සල.

සිදුවීම්

සිදුවීම් වර්ගය විස්තර
activate.bs.scrollspy scrollspy විසින් නව අයිතමයක් සක්‍රිය වන සෑම විටම මෙම සිදුවීම වෙඩි තබයි.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable tabs tab.js

උදාහරණ ටැබ්

පතන මෙනු හරහා පවා දේශීය අන්තර්ගතයේ කවුළු හරහා සංක්‍රමණය වීමට ඉක්මන්, ගතික ටැබ් ක්‍රියාකාරිත්වය එක් කරන්න. නෙස්ටඩ් ටැබ් සඳහා සහය නොදක්වයි.

අමු ඩෙනිම් ඔස්ටින් ජීන් කොට කලිසම ගැන ඔබ අසා නැතුව ඇති. Nesciunt tofu stumptown aliqua, retro synth master cleanse. උඩු රැවුල ක්ලිච් tempor, Williamsburg carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure ටෙරී රිචඩ්සන් හිටපු දැල්ලන්. Aliquip placeat salvia cillum 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.

ටැබ් කළ සංචාලනය දිගු කරයි

මෙම ප්ලගිනය ටැබ් කළ හැකි ප්‍රදේශ එක් කිරීමට ටැබ් කළ සංචාලන සංරචකය දිගු කරයි.

භාවිතය

ජාවාස්ක්‍රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න (එක් එක් ටැබ් එක තනි තනිව සක්‍රිය කළ යුතුය):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

ඔබට ක්‍රම කිහිපයකින් තනි ටැබ් සක්‍රිය කළ හැක:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

සලකුණු කිරීම

data-toggle="tab"ඔබට සරලව සඳහන් කිරීමෙන් හෝ data-toggle="pill"මූලද්‍රව්‍යයක් මත ජාවාස්ක්‍රිප්ට් ලිවීමෙන් තොරව ටැබ් එකක් හෝ පෙති සංචාලනයක් සක්‍රිය කළ හැක . ටැබයට navසහ පන්ති එකතු කිරීමෙන් බූට්ස්ට්‍රැප් ටැබ් මෝස්තරය යෙදේ, සහ පන්ති එකතු කිරීමේදී පෙති මෝස්තරය යෙදේ .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

මැකී යන බලපෑම

ටැබ් මැකී යාමට, එක් .fadeඑක් එක් කරන්න .tab-pane. .inපළමු ටැබ් කවුළුව මූලික අන්තර්ගතය දෘශ්‍යමාන කිරීමට ද තිබිය යුතුය .

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

ක්රම

$().tab

ටැබ් මූලද්‍රව්‍යයක් සහ අන්තර්ගත බහාලුමක් සක්‍රිය කරයි. පටිත්තෙහි DOM හි කන්ටේනර් නෝඩයක් data-targetහෝ ඉලක්ක කර තිබිය යුතුය . hrefඉහත උදාහරණවල, ටැබ් යනු ගුණාංග <a>සහිත s වේ .data-toggle="tab"

.tab('show')

ලබා දී ඇති ටැබය තෝරා එහි සම්බන්ධිත අන්තර්ගතය පෙන්වයි. කලින් තෝරාගත් වෙනත් ටැබ් එකක් නොතේරෙන අතර එහි සම්බන්ධිත අන්තර්ගතය සැඟවී ඇත. ටැබ් කවුළුව ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.tab

$('#someTab').tab('show')

සිදුවීම්

නව ටැබයක් පෙන්වන විට, සිදුවීම් පහත දැක්වෙන අනුපිළිවෙලින් සිදු වේ:

  1. hide.bs.tab(වත්මන් සක්‍රිය ටැබය මත)
  2. show.bs.tab(පෙන්වීමට ඇති ටැබය මත)
  3. hidden.bs.tab(පෙර සක්‍රිය පටිත්තෙහි, hide.bs.tabසිදුවීමට සමාන එකක්)
  4. shown.bs.tab(අලුතින්-ක්‍රියාකාරී දැන්-පෙන්වූ පටිත්තෙහි, සිදුවීම සඳහාම show.bs.tab)

කිසිදු ටැබයක් දැනටමත් සක්‍රියව නොතිබුනේ නම්, hide.bs.tabසහ hidden.bs.tabසිදුවීම් ඉවත් නොකෙරේ.

සිදුවීම් වර්ගය විස්තර
show.bs.tab මෙම සිදුවීම ටැබ් දර්ශනය මත වෙඩි තැබේ, නමුත් නව ටැබය පෙන්වීමට පෙර. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න event.targetසහ ඉලක්ක කරන්න.event.relatedTarget
පෙන්නුවා.bs.tab මෙම සිදුවීම ටැබ් එකක් පෙන්වීමෙන් පසු ටැබ් දර්ශනය මත වෙඩි තබයි. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න event.targetසහ ඉලක්ක කරන්න.event.relatedTarget
hide.bs.tab මෙම සිදුවීම නව ටැබයක් පෙන්වීමට (සහ පෙර සක්‍රිය ටැබය සැඟවිය යුතු) විට වෙඩි තැබීම සිදු වේ. පිළිවෙළින් වත්මන් සක්‍රිය ටැබය සහ නව ඉක්මනින් ක්‍රියාත්මක වීමට නියමිත ටැබය ඉලක්ක කර event.targetභාවිතා කරන්න .event.relatedTarget
සැඟවුණු.bs.tab නව ටැබයක් පෙන්වීමෙන් පසුව මෙම සිදුවීම ගිනිබත් වේ (එමගින් පෙර සක්‍රිය ටැබය සැඟවී ඇත). පිළිවෙළින් පෙර සක්‍රිය ටැබය සහ නව සක්‍රිය ටැබය ඉලක්ක කර event.targetභාවිත කරන්න .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

මෙවලම් ඉඟි මෙවලම් ඉඟි. js

Jason Frame විසින් ලියන ලද විශිෂ්ට jQuery.tipsy ප්ලගිනය මගින් දේවානුභාවයෙන්; මෙවලම් ඉඟි යනු යාවත්කාලීන කළ අනුවාදයකි, එය රූප මත රඳා නොපවතින, සජීවිකරණ සඳහා CSS3 සහ දේශීය මාතෘකා ආචයනය සඳහා දත්ත-ගුණාංග භාවිතා කරයි.

ශුන්‍ය-දිග මාතෘකා සහිත මෙවලම් ඉඟි කිසිවිටෙක නොපෙන්වයි.

උදාහරණ

මෙවලම් ඉඟි බැලීමට පහත සබැඳි මත සැරිසරන්න:

තද කලිසම් ඊළඟ මට්ටමේ keffiyeh ඔබ ඒවා ගැන අසා නැතුව ඇති. ඡායාරූප කුටිය රැවුල අමු ඩෙනිම් ලෙටර්ප්‍රෙස් වීගන් මැසෙන්ජර් බෑග් ස්ටම්ප්ටවුන්. Farm-to-Table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel වල ටෙරී රිචඩ්සන් vinyl chambray ඇත. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel Williamsburg marfa, four loko mcsweeney's cleanse Vegan chambray. ඇත්ත වශයෙන්ම උත්ප්‍රාසාත්මක ශිල්පියෙක් ඕනෑම කීටාර් , සීන්ස්ටර් ෆාම්-ටු-ටේබල් බෑන්ක්සි ඔස්ටින් ට්විටර් හැන්ඩ්ල් ෆ්‍රීගන් ක්‍රෙඩ් අමු ඩෙනිම් තනි සම්භවයක් ඇති කෝපි වෛරස්.

ස්ථිතික මෙවලම් ඉඟිය

විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.

දිශාවන් හතරක්

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

තේරීමේ ක්‍රියාකාරීත්වය

කාර්ය සාධන හේතූන් මත, Tooltip සහ Popover දත්ත-apis තෝරාගෙන ඇත, එනම් ඔබ ඒවා ඔබම ආරම්භ කළ යුතුය .

පිටුවක සියලුම මෙවලම් ඉඟි ආරම්භ කිරීමට එක් ක්‍රමයක් වනුයේ ඒවායේ data-toggleගුණාංගය අනුව ඒවා තෝරාගැනීමයි:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

භාවිතය

මෙවලම් ඉඟි ප්ලගිනය ඉල්ලුම මත අන්තර්ගතය සහ සලකුණු උත්පාදනය කරයි, සහ පෙරනිමියෙන් මෙවලම් ඉඟි ඒවායේ ප්‍රේරක මූලද්‍රව්‍යයට පසුව තබයි.

JavaScript හරහා මෙවලම් ඉඟිය ක්‍රියාරම්භ කරන්න:

$('#example').tooltip(options)

සලකුණු කිරීම

මෙවලම් ඉඟියක් සඳහා අවශ්‍ය සලකුණු කිරීම විශේෂණයක් පමණක් වන අතර dataHTML titleමූලද්‍රව්‍ය මත ඔබට මෙවලම් ඉඟියක් තිබිය යුතුය. මෙවලම් ඉඟියක උත්පාදනය කරන ලද සලකුණු කිරීම තරමක් සරල ය, නමුත් එයට ස්ථානයක් අවශ්‍ය වේ (පෙරනිමියෙන්, topප්ලගිනය මගින් සකසා ඇත).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

බහු පේළි සබැඳි

සමහර විට ඔබට රේඛා කිහිපයක් ඔතා ඇති අධි සබැඳියකට මෙවලම් ඉඟියක් එක් කිරීමට අවශ්‍ය වේ. මෙවලම් ඉඟි ප්ලගිනයේ පෙරනිමි හැසිරීම එය තිරස් අතට සහ සිරස් අතට කේන්ද්‍රගත කිරීමයි. white-space: nowrap;මෙය වළක්වා ගැනීම සඳහා ඔබේ නැංගුරම් වලට එක් කරන්න .

බොත්තම් කණ්ඩායම්, ආදාන කණ්ඩායම් සහ වගු වල මෙවලම් ඉඟි සඳහා විශේෂ සැකසුම අවශ්‍ය වේ

.btn-groupa හෝ a තුළ ඇති මූලද්‍රව්‍ය මත .input-groupහෝ වගු ආශ්‍රිත මූලද්‍රව්‍ය ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) මත මෙවලම් ඉඟි භාවිතා කරන විට, ඔබට container: 'body'අනවශ්‍ය අතුරු ආබාධ වළක්වා ගැනීමට විකල්පය (පහත ලේඛනගත කර ඇති) සඳහන් කිරීමට සිදු වනු ඇත (මූලද්‍රව්‍යය පුළුල් ලෙස වර්ධනය වීම සහ/ හෝ මෙවලම් ඉඟිය ක්‍රියාත්මක වන විට එහි වටකුරු කොන් අහිමි වීම).

සැඟවුණු මූලද්‍රව්‍ය මත මෙවලම් ඉඟි පෙන්වීමට උත්සාහ නොකරන්න

$(...).tooltip('show')ඉලක්ක මූලද්‍රව්‍යය ඇති display: none;විට ආයාචනා කිරීම මෙවලම් ඉඟිය වැරදි ලෙස ස්ථානගත වීමට හේතු වේ.

යතුරුපුවරුව සහ සහායක තාක්‍ෂණ භාවිතා කරන්නන් සඳහා ප්‍රවේශ විය හැකි මෙවලම් ඉඟි

යතුරුපුවරුවකින් සංචාලනය කරන පරිශීලකයින් සඳහා සහ විශේෂයෙන් සහායක තාක්ෂණයන් භාවිතා කරන්නන් සඳහා, ඔබ සබැඳි, පෝරම පාලන, හෝ ගුණාංගයක් සහිත ඕනෑම අත්තනෝමතික මූලද්‍රව්‍ය වැනි යතුරුපුවරුව කේන්ද්‍රගත කළ හැකි මූලද්‍රව්‍ය වෙත මෙවලම් ඉඟි පමණක් එක් කළ යුතුය tabindex="0".

ආබාධිත මූලද්‍රව්‍ය පිළිබඳ මෙවලම් ඉඟි සඳහා දවටන මූලද්‍රව්‍ය අවශ්‍ය වේ

යම් disabledහෝ .disabledමූලද්‍රව්‍යයකට මෙවලම් ඉඟියක් එක් කිරීමට, මූලද්‍රව්‍යය a තුළට දමා ඒ වෙනුවට <div>මෙවලම් ඉඟිය යොදන්න .<div>

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම ටයිප් කරන්න පෙරනිමිය විස්තර
සජීවීකරණය බූලියන් සැබෑ මෙවලම් ඉඟියට CSS ෆේඩ් සංක්‍රාන්තියක් යොදන්න
බහාලුම් තන්තුව | බොරු බොරු

විශේෂිත මූලද්‍රව්‍යයකට මෙවලම් ඉඟිය එක් කරයි. උදාහරණය container: 'body':. මෙම විකල්පය විශේෂයෙන් ප්‍රයෝජනවත් වන්නේ එය ප්‍රේරක මූලද්‍රව්‍ය අසල ලේඛනයේ ප්‍රවාහයේ මෙවලම් ඉඟිය ස්ථානගත කිරීමට ඔබට ඉඩ සලසයි - එමඟින් කවුළුව ප්‍රමාණය වෙනස් කිරීමේදී මෙවලම් ඉඟිය ප්‍රේරක මූලද්‍රව්‍යයෙන් ඉවතට පාවීම වළක්වයි.

ප්රමාදය අංකය | වස්තුව 0

මෙවලම් ඉඟිය (ms) පෙන්වීම සහ සැඟවීම ප්‍රමාද කිරීම - අතින් ප්‍රේරක වර්ගයට අදාළ නොවේ

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { "show": 500, "hide": 100 }

html බූලියන් බොරු මෙවලම් ඉඟියට HTML ඇතුළු කරන්න. අසත්‍ය නම්, textDOM වෙත අන්තර්ගතය ඇතුළු කිරීමට jQuery හි ක්‍රමය භාවිතා කරනු ඇත. ඔබ XSS ප්‍රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න.
ස්ථානගත කිරීම තන්තුව | කාර්යය 'ඉහළ'

මෙවලම් ඉඟිය ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි | ස්වයංක්‍රීය.
"ස්වයංක්‍රීය" සඳහන් කළ විට, එය මෙවලම් ඉඟිය ගතිකව නැවත දිශානතියට පත් කරයි. උදාහරණයක් ලෙස, ස්ථානගත කිරීම "ස්වයං වමට" නම්, මෙවලම් ඉඟිය හැකි විට වමට දර්ශනය වනු ඇත, එසේ නොමැතිනම් එය දකුණට පෙන්වනු ඇත.

ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්‍රිතයක් භාවිතා කරන විට, එය මෙවලම් ඉඟි DOM නෝඩය එහි පළමු තර්කය ලෙසත්, ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි දෙවැන්න ලෙසත් හැඳින්වේ. සන්දර්භය මෙවලම් ඉඟි අවස්ථාවට thisසකසා ඇත.

තේරීම්කරු නූල් බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ. ප්‍රායෝගිකව, මෙය භාවිතා කරන්නේ ගතික HTML අන්තර්ගතයන් මෙවලම් ඉඟි එකතු කිරීමට සක්‍රීය කිරීමටයි. මෙය සහ තොරතුරු සහිත උදාහරණයක් බලන්න .
සැකිල්ල නූල් '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

මෙවලම් ඉඟිය සෑදීමේදී භාවිතා කිරීමට මූලික HTML.

මෙවලම් ඉඟිය titleතුළට එන්නත් කරනු ලැබේ .tooltip-inner.

.tooltip-arrowමෙවලම් ඉඟියේ ඊතලය බවට පත් වනු ඇත.

පිටතම දවටන මූලද්රව්යයේ .tooltipපන්තිය තිබිය යුතුය.

ශීර්ෂය තන්තුව | කාර්යය ''

titleගුණාංගය නොමැති නම් පෙරනිමි මාතෘකා අගය .

ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය thisමෙවලම් තුඩය අමුණා ඇති මූලද්‍රව්‍ය වෙත යොමු කර ඇත.

අවුලුවාලීම නූල් 'හවර් ෆෝකස්' මෙවලම් ඉඟිය අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබට ප්‍රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න. manualවෙනත් ප්‍රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක.
viewport තන්තුව | වස්තුව | කාර්යය {තේරීම: 'ශරීරය', පිරවුම: 0 }

මෙවලම් ඉඟිය මෙම මූලද්‍රව්‍යයේ සීමාවන් තුළ තබා ගනී. උදාහරණය: viewport: '#viewport'හෝ{ "selector": "#viewport", "padding": 0 }

ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි එකම තර්කය ලෙස හැඳින්වේ. සන්දර්භය මෙවලම් ඉඟි අවස්ථාවට thisසකසා ඇත.

තනි මෙවලම් ඉඟි සඳහා දත්ත ගුණාංග

ඉහත පැහැදිලි කර ඇති පරිදි, දත්ත උපලක්ෂණ භාවිතයෙන්, තනි මෙවලම් ඉඟි සඳහා විකල්ප විකල්ප වශයෙන් සඳහන් කළ හැක.

ක්රම

$().tooltip(options)

මූලද්‍රව්‍ය එකතුවකට මෙවලම් ඉඟි හසුරුවන්නක් අමුණන්න.

.tooltip('show')

මූලද්‍රව්‍යයක මෙවලම් ඉඟියක් හෙළි කරයි. මෙවලම් ඉඟිය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. shown.bs.tooltipමෙය මෙවලම් ඉඟියේ "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ. ශුන්‍ය-දිග මාතෘකා සහිත මෙවලම් ඉඟි කිසිවිටෙක නොපෙන්වයි.

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

.tooltip('hide')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවයි. මෙවලම් ඉඟිය සැබවින්ම සැඟවීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. hidden.bs.tooltipමෙය මෙවලම් ඉඟියේ "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ.

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

.tooltip('toggle')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය ටොගල් කරයි. මෙවලම් ඉඟිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීමට හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. මෙය මෙවලම් ඉඟියේ "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ.shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

.tooltip('destroy')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන මෙවලම් ඉඟි ( විකල්පය භාවිතයෙන් සාදනු ලැබේ )selector පැවත එන ප්‍රේරක මූලද්‍රව්‍ය මත තනි තනිව විනාශ කළ නොහැක.

$('#element').tooltip('destroy')

සිදුවීම්

සිදුවීම් වර්ගය විස්තර
show.bs.tooltip showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත.bs.tooltip මෙවලම් ඉඟිය පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
hide.bs.tooltip hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.උපකරණ ඉඟිය මෙවලම් ඉඟිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
inserted.bs.tooltip show.bs.tooltipමෙවලම් ඉඟි අච්චුව DOM වෙත එක් කළ විට මෙම සිදුවීම සිදුවීමෙන් පසුව සිදු කෙරේ .
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

නිවාස ද්විතීයික තොරතුරු සඳහා ඕනෑම මූලද්‍රව්‍යයකට අයිපෑඩ් වැනි අන්තර්ගතවල කුඩා ආවරණ එක් කරන්න.

මාතෘකාව සහ අන්තර්ගතය ශුන්‍ය-දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.

ප්ලගින යැපීම

Popovers සඳහා මෙවලම් ඉඟි ප්ලගිනය ඔබේ Bootstrap අනුවාදයට ඇතුළත් කිරීමට අවශ්‍ය වේ.

තේරීමේ ක්‍රියාකාරීත්වය

කාර්ය සාධන හේතූන් මත, Tooltip සහ Popover දත්ත-apis තෝරාගෙන ඇත, එනම් ඔබ ඒවා ඔබම ආරම්භ කළ යුතුය .

පිටුවක ඇති සියලුම popovers ආරම්භ කිරීමට එක් ක්‍රමයක් වනුයේ ඒවායේ data-toggleගුණාංගය අනුව ඒවා තෝරාගැනීමයි:

$(function () {
  $('[data-toggle="popover"]').popover()
})

බොත්තම් කණ්ඩායම්, ආදාන කණ්ඩායම් සහ වගු වල Popovers විශේෂ සැකසුම අවශ්‍ය වේ

.btn-groupa හෝ a තුළ ඇති මූලද්‍රව්‍ය මත popovers භාවිතා කරන විට .input-groupහෝ වගු ආශ්‍රිත මූලද්‍රව්‍ය ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) මත අනවශ්‍ය අතුරු ආබාධ වළක්වා ගැනීමට (පහත ලේඛනගත කර ඇති) විකල්පය සඳහන් කිරීමට සිදු වනු ඇත container: 'body'(මූලද්‍රව්‍යය පුළුල් ලෙස වර්ධනය වීම සහ/ හෝ popover අවුලුවන විට එහි වටකුරු කොන් අහිමි වීම).

සැඟවුණු මූලද්‍රව්‍ය මත popovers පෙන්වීමට උත්සාහ නොකරන්න

$(...).popover('show')ඉලක්ක මූලද්‍රව්‍යය විට කැඳවීම popover display: none;වැරදි ලෙස ස්ථානගත වීමට හේතු වේ.

ආබාධිත මූලද්‍රව්‍ය මත ඇති පොපෝවර්වලට දවටන මූලද්‍රව්‍ය අවශ්‍ය වේ

disabledයම් මූලද්‍රව්‍යයකට හෝ මූලද්‍රව්‍යයකට popover එකක් එක් කිරීමට .disabled, මූලද්‍රව්‍යය a තුළට දමා <div>එයට popover යොදන්න<div> ඒ වෙනුවට

බහු පේළි සබැඳි

සමහර විට ඔබට පේළි කිහිපයක් ඔතා ඇති හයිපර්ලින්ක් එකකට පොපෝවර් එකක් එක් කිරීමට අවශ්‍ය වේ. popover ප්ලගිනයේ පෙරනිමි හැසිරීම එය තිරස් අතට සහ සිරස් අතට මධ්‍යගත කිරීමයි. white-space: nowrap;මෙය වළක්වා ගැනීම සඳහා ඔබේ නැංගුරම් වලට එක් කරන්න .

උදාහරණ

ස්ථිතික popover

විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.

පොපෝවර් ටොප්

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover අයිතිය

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

පොපෝවර් පතුල

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

පොපෝවර් වමේ

ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

සජීවී demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

දිශාවන් හතරක්

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

ඊළඟ ක්ලික් කිරීම මත ඉවතලන්න

focusපරිශීලකයා කරන ඊළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්‍රේරකය භාවිතා කරන්න .

ඊළඟ-ක්ලික් කිරීම මත ඉවත් කිරීම සඳහා නිශ්චිත සලකුණු කිරීම අවශ්‍ය වේ

නිසි හරස් බ්‍රවුසරය සහ හරස් වේදිකා හැසිරීම සඳහා, ඔබ ටැගය භාවිතා කළ යුතුය, ටැගය<a> භාවිතා කළ යුතු අතර , ඔබ සහ ගුණාංග ද ඇතුළත් කළ යුතුය .<button>role="button"tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

භාවිතය

JavaScript හරහා popovers සබල කරන්න:

$('#example').popover(options)

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම ටයිප් කරන්න පෙරනිමිය විස්තර
සජීවීකරණය බූලියන් සැබෑ Popover වෙත CSS ෆේඩ් සංක්‍රාන්තියක් යොදන්න
බහාලුම් තන්තුව | බොරු බොරු

විශේෂිත මූලද්‍රව්‍යයකට popover එකතු කරයි. උදාහරණය container: 'body':. මෙම විකල්පය විශේෂයෙන් ප්‍රයෝජනවත් වන්නේ එය ප්‍රේරක මූලද්‍රව්‍ය අසල ලේඛනයේ ප්‍රවාහයේ popover ස්ථානගත කිරීමට ඔබට ඉඩ සලසයි - එමඟින් කවුළුව ප්‍රමාණය වෙනස් කිරීමේදී ප්‍රේරක මූලද්‍රව්‍යයෙන් ඉවතට පාවීම වළක්වයි.

අන්තර්ගතය තන්තුව | කාර්යය ''

data-contentගුණාංගය නොමැති නම් පෙරනිමි අන්තර්ගත අගය .

ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය thispopover අමුණා ඇති මූලද්‍රව්‍යයට එහි යොමු කට්ටලය සමඟ කැඳවනු ලැබේ.

ප්රමාදය අංකය | වස්තුව 0

popover (ms) පෙන්වීම සහ සැඟවීම ප්‍රමාද කිරීම - අතින් ප්‍රේරක වර්ගයට අදාළ නොවේ

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { "show": 500, "hide": 100 }

html බූලියන් බොරු popover වෙත HTML ඇතුළු කරන්න. අසත්‍ය නම්, textDOM වෙත අන්තර්ගතය ඇතුළු කිරීමට jQuery හි ක්‍රමය භාවිතා කරනු ඇත. ඔබ XSS ප්‍රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න.
ස්ථානගත කිරීම තන්තුව | කාර්යය 'හරි'

popover ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි | ස්වයංක්‍රීය.
"ස්වයංක්‍රීය" සඳහන් කළ විට, එය popover ගතිකව නැවත දිශානතියට පත් කරයි. උදාහරණයක් ලෙස, ස්ථානගත කිරීම "ස්වයං වමට" නම්, popover හැකි විට වමට දර්ශනය වනු ඇත, එසේ නොමැතිනම් එය දකුණට පෙන්වනු ඇත.

ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්‍රිතයක් භාවිතා කරන විට, එය එහි පළමු තර්කය ලෙස popover DOM නෝඩය සහ ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි දෙවැන්න ලෙස හැඳින්වේ. thisසන්දර්භය popover අවස්ථාවට සකසා ඇත .

තේරීම්කරු නූල් බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, popover වස්තූන් නිශ්චිත ඉලක්ක වෙත පවරනු ලැබේ. ප්‍රායෝගිකව, මෙය popovers එකතු කිරීමට ගතික HTML අන්තර්ගතය සක්‍රීය කිරීමට භාවිතා කරයි. මෙය සහ තොරතුරු සහිත උදාහරණයක් බලන්න .
සැකිල්ල නූල් '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

popover නිර්මාණය කිරීමේදී භාවිතා කිරීමට මූලික HTML.

පොපෝවර් titleඑන්නත් කරනු ලැබේ .popover-title.

පොපෝවර් contentඑන්නත් කරනු ලැබේ .popover-content.

.arrowpopover ගේ ඊතලය බවට පත් වනු ඇත.

පිටතම දවටන මූලද්රව්යයේ .popoverපන්තිය තිබිය යුතුය.

ශීර්ෂය තන්තුව | කාර්යය ''

titleගුණාංගය නොමැති නම් පෙරනිමි මාතෘකා අගය .

ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය thispopover අමුණා ඇති මූලද්‍රව්‍යයට එහි යොමු කට්ටලය සමඟ කැඳවනු ලැබේ.

අවුලුවාලීම නූල් 'ක්ලික් කරන්න' popover අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබට ප්‍රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න. manualවෙනත් ප්‍රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක.
viewport තන්තුව | වස්තුව | කාර්යය {තේරීම: 'ශරීරය', පිරවුම: 0 }

මෙම මූලද්‍රව්‍යයේ සීමාවන් තුළ පොපෝවර් තබා ගනී. උදාහරණය: viewport: '#viewport'හෝ{ "selector": "#viewport", "padding": 0 }

ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි එකම තර්කය ලෙස හැඳින්වේ. thisසන්දර්භය popover අවස්ථාවට සකසා ඇත .

තනි පුද්ගල popovers සඳහා දත්ත ගුණාංග

ඉහත පැහැදිලි කර ඇති පරිදි, තනි පුද්ගල popovers සඳහා විකල්ප විකල්ප වශයෙන් දත්ත ගුණාංග භාවිතයෙන් නියම කළ හැක.

ක්රම

$().popover(options)

මූලද්‍රව්‍ය එකතුවක් සඳහා popover ආරම්භ කරයි.

.popover('show')

මූලද්‍රව්‍යයක පොපෝවර් හෙළි කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් shown.bs.popoverසිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ. මාතෘකාව සහ අන්තර්ගතය ශුන්‍ය-දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.

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

.popover('hide')

මූලද්‍රව්‍යයක පොපෝවර් සඟවයි. popover ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් hidden.bs.popoverසිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ.

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

.popover('toggle')

මූලද්‍රව්‍යයක popover ටොගල් කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම shown.bs.popoverහෝ සිදුවීමට පෙර hidden.bs.popover) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්‍රේරකයක් ලෙස සැලකේ.

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

.popover('destroy')

මූලද්‍රව්‍යයක පොපෝවර් සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන Popovers ( විකල්පය භාවිතයෙන් සාදනු ලබනselector ) පැවත එන ප්‍රේරක මූලද්‍රව්‍ය මත තනි තනිව විනාශ කළ නොහැක.

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

සිදුවීම්

සිදුවීම් වර්ගය විස්තර
show.bs.popover showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත.bs.popover popover පරිශීලකයාට දෘශ්‍යමාන කළ විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
hide.bs.popover hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.popover popover පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
ඇතුල් කරන ලදී.bs.popover මෙම සිදුවීම show.bs.popoverDOM වෙත popover අච්චුව එක් කළ විට සිදුවීමෙන් පසුව සිදු කෙරේ.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

ඇඟවීම් පණිවිඩ alert.js

උදාහරණ ඇඟවීම්

මෙම ප්ලගිනය සමඟින් සියලුම අනතුරු ඇඟවීමේ පණිවිඩ සඳහා ඉවත් කිරීමේ ක්‍රියාකාරිත්වය එක් කරන්න.

බොත්තමක් භාවිතා කරන විට .close, එය පළමු දරුවා විය යුතු අතර .alert-dismissibleසලකුණු කිරීමේදී කිසිදු පෙළ අන්තර්ගතයක් එයට පෙර නොපැමිණේ.

භාවිතය

data-dismiss="alert"අනතුරු ඇඟවීමේ සමීප ක්‍රියාකාරීත්වයක් ස්වයංක්‍රීයව ලබා දීමට ඔබගේ වසන්න බොත්තමට එක් කරන්න. අනතුරු ඇඟවීමක් වැසීමෙන් එය DOM වෙතින් ඉවත් කරයි.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

ඔබගේ ඇඟවීම් වසා දැමීමේදී සජීවිකරණය භාවිතා කිරීමට, ඒවා දැනටමත් ඒවාට අදාළ කර ඇති බව සහතික කර .fadeගන්න .in.

ක්රම

$().alert()

data-dismiss="alert"උපලක්ෂණ ඇති පරම්පරාවේ මූලද්‍රව්‍ය මත ක්ලික් සිදුවීම් සඳහා අනතුරු ඇඟවීමක් සවන් දෙන්න . (data-api's auto-initialization භාවිතා කරන විට අවශ්‍ය නොවේ.)

$().alert('close')

අනතුරු ඇඟවීමක් DOM වෙතින් ඉවත් කිරීමෙන් එය වසා දමයි. .fadeමූලද්‍රව්‍යයේ සහ පන්ති තිබේ නම් .in, එය ඉවත් කිරීමට පෙර අනතුරු ඇඟවීම මැකී යනු ඇත.

සිදුවීම්

Bootstrap හි අනතුරු ඇඟවීමේ ප්ලගිනය අනතුරු ඇඟවීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම් වර්ගය විස්තර
close.bs.alert closeනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
Closed.bs.alert අනතුරු ඇඟවීම වසා ඇති විට මෙම සිදුවීම වෙඩි තබා ඇත (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

බොත්තම් button.js

බොත්තම් සමඟ තවත් කරන්න. පාලන බොත්තම සඳහන් කරයි හෝ මෙවලම් තීරු වැනි තවත් සංරචක සඳහා බොත්තම් කණ්ඩායම් සාදන්න.

හරස් බ්‍රවුසර ගැළපුම

ෆයර්ෆොක්ස් පිටු පැටවීම් හරහා ආකෘති පාලන තත්වයන් (ආබාධිත බව සහ පරීක්ෂා කිරීම) දිගටම පවතී . මේ සඳහා විසඳුමක් භාවිතා කිරීමයි autocomplete="off". Mozilla bug #654072 බලන්න .

රාජ්යමය

data-loading-text="Loading..."බොත්තමක් මත පැටවීමේ තත්වයක් භාවිතා කිරීමට එක් කරන්න .

මෙම විශේෂාංගය v3.3.5 සිට අත්හරින ලද අතර v4 තුළ ඉවත් කර ඇත.

ඔබ කැමති ඕනෑම රාජ්යයක් භාවිතා කරන්න!

මෙම නිදර්ශනය සඳහා, අපි භාවිතා කරන්නේ data-loading-textසහ $().button('loading'), නමුත් ඔබට භාවිතා කළ හැකි එකම තත්වය එය නොවේ. මේ පිළිබඳ වැඩි විස්තර පහත $().button(string)ලේඛනයෙන් බලන්න .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

තනි ටොගල්

data-toggle="button"තනි බොත්තමක් මත ටොගල කිරීම සක්‍රිය කිරීමට එක් කරන්න .

පෙර-ටොගල් බොත්තම් අවශ්‍ය .activeසහaria-pressed="true"

පෙර-ටොගල් බොත්තම් සඳහා, ඔබ විසින්ම .activeපන්තිය සහ aria-pressed="true"ගුණාංගය එක් කළ යුතුය button.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

පිරික්සුම් කොටුව / ගුවන්විදුලිය

data-toggle="buttons"ඒවායේ අදාළ මෝස්තරවල ටොගල් කිරීම සබල කිරීමට .btn-groupඅඩංගු පිරික්සුම් පෙට්ටියකට හෝ රේඩියෝ ආදානවලට එක් කරන්න .

කලින් තෝරාගත් විකල්ප අවශ්යයි.active

කලින් තෝරාගත් විකල්ප සඳහා, ඔබ විසින්ම .activeආදානයට පන්තිය එක් කළ යුතුය label.

දෘශ්‍ය පරීක්‍ෂා කළ තත්ත්වය ක්ලික් කිරීමෙන් පමණක් යාවත්කාලීන වේ

තේරීම් කොටු බොත්තමක ​​පිරික්සුම් කළ තත්ත්වය බොත්තම clickමත සිදුවීමක් සිදු නොකර යාවත්කාලීන කර ඇත්නම් (උදා: ආදානයේ ගුණය <input type="reset">සැකසීම හරහා හෝ හරහා ), ඔබ විසින්ම ආදානයේ පන්තිය checkedටොගල් කිරීමට අවශ්‍ය වනු ඇත ..activelabel

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

ක්රම

$().button('toggle')

තල්ලු තත්ත්වය ටොගල් කරයි. බොත්තමට එය සක්රිය කර ඇති පෙනුමක් ලබා දෙයි.

$().button('reset')

බොත්තම් තත්ත්වය යළි සකසයි - පෙළ මුල් පෙළට මාරු කරයි. මෙම ක්‍රමය අසමමුහුර්ත වන අතර යළි පිහිටුවීම ඇත්ත වශයෙන්ම සම්පූර්ණ වීමට පෙර ආපසු පැමිණේ.

$().button(string)

ඕනෑම දත්ත නිර්වචනය කළ පෙළ තත්ත්වයකට පෙළ මාරු කරයි.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

හැකිලීම කඩා වැටීම .js

පහසු ටොගල් හැසිරීම සඳහා පන්ති අතලොස්සක් භාවිතා කරන නම්‍යශීලී ප්ලගිනය.

ප්ලගින යැපීම

හැකිලීමට සංක්‍රාන්ති ප්ලගිනය ඔබේ Bootstrap අනුවාදයට ඇතුළත් කිරීම අවශ්‍ය වේ.

උදාහරණයක්

පන්ති වෙනස්කම් හරහා වෙනත් අංගයක් පෙන්වීමට සහ සැඟවීමට පහත බොත්තම් ක්ලික් කරන්න:

  • .collapseඅන්තර්ගතය සඟවයි
  • .collapsingමාරුවීම් වලදී යොදනු ලැබේ
  • .collapse.inඅන්තර්ගතය පෙන්වයි

ඔබට ගුණාංගය සමඟ සබැඳියක් hrefහෝ ගුණාංගය සහිත බොත්තමක් භාවිතා කළ හැකිය data-target. අවස්ථා දෙකේදීම, data-toggle="collapse"එය අවශ්ය වේ.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

ඇකෝනියන් උදාහරණයක්

පැනල සංරචකය සමඟ එකෝඩියන් එකක් සෑදීමට පෙරනිමි බිඳවැටීමේ හැසිරීම දිගු කරන්න.

Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys සමඟ s මාරු කිරීමට ද හැකිය .list-group.

  • Bootply
  • එක itmus ac facilin එකක්
  • දෙවන eros

ප්‍රවේශ විය හැකි පුළුල්/හැකිළීමේ පාලන කරන්න

aria-expandedපාලන මූලද්රව්යයට එකතු කිරීමට වග බලා ගන්න . මෙම ගුණාංගය තිර කියවනයට සහ ඒ හා සමාන උපකාරක තාක්‍ෂණවලට කඩා වැටෙන මූලද්‍රව්‍යයේ වත්මන් තත්ත්වය පැහැදිලිව නිර්වචනය කරයි. කඩා වැටිය හැකි මූලද්‍රව්‍යය පෙරනිමියෙන් වසා තිබේ නම්, එහි අගයක් තිබිය යුතුය aria-expanded="false". ඔබ inපන්තිය භාවිතයෙන් පෙරනිමියෙන් කඩාහැරිය හැකි මූලද්‍රව්‍යය විවෘත කිරීමට සකසා ඇත්නම්, සකසන්නaria-expanded="true" භාවිතයෙන් පෙරනිමියෙන් කඩාහැලෙන මූලද්‍රව්‍යය විවෘත කිරීමට සකසා ඇත්නම්, ඒ වෙනුවට පාලනය මත සකසන්න. ප්ලගිනය බිඳවැටිය හැකි මූලද්‍රව්‍යය විවෘත කර තිබේද නැද්ද යන්න මත පදනම්ව මෙම ගුණාංගය ස්වයංක්‍රීයව ටොගල කරයි.

අතිරේකව, ඔබේ පාලන මූලද්‍රව්‍ය තනි බිඳවැටිය හැකි මූලද්‍රව්‍යයක් ඉලක්ක කරන්නේ නම් - එනම් data-targetගුණාංගය idතේරීම්කාරකයක් වෙත යොමු කරයි නම් - ඔබට කඩාවැටෙන aria-controlsමූලද්‍රව්‍ය අඩංගු පාලන මූලද්‍රව්‍යයට අමතර උපලක්ෂණයක් එක් කළ හැකිය id. නවීන තිර කියවනය සහ ඒ හා සමාන උපකාරක තාක්ෂණයන් මෙම ගුණාංගය භාවිතා කර පරිශීලකයින්ට කඩා වැටෙන මූලද්‍රව්‍ය වෙත කෙලින්ම සැරිසැරීමට අමතර කෙටිමං ලබා දෙයි.

භාවිතය

කඩා වැටීමේ ප්ලගිනය බර ඉසිලීම හැසිරවීමට පන්ති කිහිපයක් භාවිතා කරයි:

  • .collapseඅන්තර්ගතය සඟවයි
  • .collapse.inඅන්තර්ගතය පෙන්වයි
  • .collapsingසංක්‍රාන්තිය ආරම්භ වන විට එකතු කරනු ලබන අතර එය අවසන් වූ විට ඉවත් කරනු ලැබේ

මෙම පන්ති සොයාගත හැකිය component-animations.less.

දත්ත ගුණාංග හරහා

බිඳ වැටිය හැකි මූලද්‍රව්‍යයක පාලනය ස්වයංක්‍රීයව පැවරීමට මූලද්‍රව්‍යයට එක් කරන්න data-toggle="collapse"සහ a කරන්න. උපලක්ෂණය බිඳවැටීම යෙදීමට CSS තේරීමක් පිළිගනී data-target. කඩා වැටිය හැකි මූලද්‍රව්‍යයට data-targetපන්තිය එක් කිරීමට වග බලා ගන්න . collapseඔබ එය පෙරනිමියෙන් විවෘත කිරීමට කැමති නම්, අමතර පන්තිය එක් කරන්න in.

කඩාවැටෙන පාලනයකට Accordion වැනි කණ්ඩායම් කළමනාකරණය එක් කිරීමට, දත්ත ගුණාංගය එක් කරන්න data-parent="#selector". මෙය ක්‍රියාත්මක වන ආකාරය බැලීමට ආදර්ශනය වෙත යොමු වන්න.

JavaScript හරහා

සමඟ අතින් සබල කරන්න:

$('.collapse').collapse()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-parent="".

නම වර්ගය පෙරනිමිය විස්තර
දෙමාපියන් තේරීම්කරු බොරු තේරීම් කාරකයක් සපයා තිබේ නම්, මෙම කඩා වැටිය හැකි අයිතමය පෙන්වන විට සඳහන් කරන ලද මාපිය යටතේ ඇති සියලුම කඩා වැටිය හැකි මූලද්‍රව්‍ය වසා දමනු ඇත. (සාම්ප්‍රදායික ඇකෝනියන් හැසිරීමට සමානයි - මෙය panelපන්තිය මත රඳා පවතී)
ටොගල් කරන්න බූලියන් සැබෑ ආමන්ත්‍රණයේදී කඩාහැලෙන මූලද්‍රව්‍යය ටොගල් කරයි

ක්රම

.collapse(options)

ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්‍රව්‍යයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

හකුළ හැකි මූලද්‍රව්‍යයක් පෙන්වීමට හෝ සැඟවීමට ටොගල් කරයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය සත්‍ය වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapsehidden.bs.collapse

.collapse('show')

කඩා වැටෙන මූලද්‍රව්‍යයක් පෙන්වයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapse

.collapse('hide')

කඩා වැටෙන මූලද්‍රව්‍ය සඟවයි. බිඳ වැටිය හැකි මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.hidden.bs.collapse

සිදුවීම්

Bootstrap හි කඩා වැටීමේ පන්තිය බිඳ වැටීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම් වර්ගය විස්තර
show.bs. කඩා වැටීම showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත.bs. කඩා වැටීම බිඳවැටීමේ මූලද්‍රව්‍යයක් පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
hide.bs.collapse hideක්රමවේදය කැඳවා ඇති විට මෙම සිද්ධිය වහාම වෙඩි තබා ඇත.
සැඟවුණු.bs.කඩා වැටීම බිඳවැටීමේ මූලද්‍රව්‍යයක් පරිශීලකයාගෙන් සඟවා ඇති විට මෙම සිදුවීම පුපුරවා හරිනු ලැබේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

කැරොසල් වැනි මූලද්‍රව්‍ය හරහා බයිසිකල් පැදීම සඳහා විනිවිදක දර්ශන සංරචකයකි. කැදලි කැරොසල් සඳහා සහය නොදක්වයි.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

විකල්ප සිරස්තල

.carousel-captionඕනෑම එකක් තුළ ඇති මූලද්‍රව්‍ය සමඟින් ඔබේ විනිවිදකවලට සිරස්තල එක් කරන්න .item. එහි ඇතුළත ඕනෑම විකල්ප HTML පමණ තබන්න, එය ස්වයංක්‍රීයව පෙළගස්වා හැඩතල ගන්වනු ඇත.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

බහු කැරොසල්

කැරොසල් පාලනය නිසියාකාරව ක්‍රියාත්මක වීමට කැරොසල් වලට idපිටතම ඇති බහාලුමක් (ද ) භාවිතා කිරීම අවශ්‍ය වේ . .carouselකැරොසල් කිහිපයක් එකතු කරන විට හෝ කැරොසල් වෙනස් කිරීමේදී idඅදාළ පාලන යාවත්කාලීන කිරීමට වග බලා ගන්න.

දත්ත ගුණාංග හරහා

කැරූසලයේ පිහිටීම පහසුවෙන් පාලනය කිරීමට දත්ත ගුණාංග භාවිතා කරන්න. data-slideමූල පද පිළිගනී prevහෝ next, එහි වත්මන් ස්ථානයට සාපේක්ෂව විනිවිදක ස්ථානය වෙනස් කරයි. විකල්පයක් ලෙස, data-slide-toraw slide index එකක් carousel වෙත යැවීමට භාවිතා කරන්න data-slide-to="2", එය Slide ස්ථානය ආරම්භ වන විශේෂිත දර්ශකයකට මාරු කරයි 0.

පිටු data-ride="carousel"පූරණයෙන් ආරම්භ වන කැරොසල් සජීවීකරණයක් ලෙස සලකුණු කිරීමට උපලක්ෂණ භාවිතා වේ. එය එකම කැරූසලයේ (අතිරික්ත සහ අනවශ්‍ය) පැහැදිලි ජාවාස්ක්‍රිප්ට් ආරම්භ කිරීම සමඟ ඒකාබද්ධව භාවිතා කළ නොහැක.

JavaScript හරහා

කැරූසල් හස්තීයව අමතන්න:

$('.carousel').carousel()

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-interval="".

නම වර්ගය පෙරනිමිය විස්තර
පරතරය අංකය 5000 අයිතමයක් ස්වයංක්‍රීයව බයිසිකල් පැදීම අතර ප්‍රමාද විය යුතු කාලය. අසත්‍ය නම්, කැරොසල් ස්වයංක්‍රීයව චක්‍රීය නොවේ.
විරාමයක් තන්තුව | null "හවර්" ලෙස සකසා ඇත්නම් "hover", කැරොසලයේ බයිසිකල් පැදීම විරාමයක් තබා කැරූසලයේ බයිසිකල් mouseenterපැදීම නැවත ආරම්භ කරයි mouseleave. ලෙස සකසා ඇත්නම් null, කැරොසල් මත සැරිසැරීමෙන් එය විරාමයක් නැත.
එතුම බූලියන් සැබෑ කැරොසලය අඛණ්ඩව චක්‍රීය කළ යුතුද නැතහොත් දැඩි නැවතුම් තිබේද යන්න.
යතුරු පුවරුව බූලියන් සැබෑ කැරොසල් යතුරුපුවරු සිදුවීම්වලට ප්‍රතිචාර දැක්විය යුතුද යන්න.

විකල්ප විකල්ප සමඟ කැරොසල් objectආරම්භ කර අයිතම හරහා බයිසිකල් පැදීම ආරම්භ කරයි.

$('.carousel').carousel({
  interval: 2000
})

කැරොසල් අයිතම හරහා වමේ සිට දකුණට චක්‍රීය කරයි.

අයිතම හරහා බයිසිකල් පැදීමෙන් කැරොසල් නවත්වයි.

විශේෂිත රාමුවකට කැරොසල් චක්‍රීය කරයි (0 පදනම්, අරාවකට සමාන).

පෙර අයිතමයට සයිකල්.

ඊළඟ අයිතමයට සයිකල්.

Bootstrap's carousel පන්තිය කැරූසල් ක්‍රියාකාරීත්වයට සම්බන්ධ කිරීම සඳහා සිදුවීම් දෙකක් හෙලිදරව් කරයි.

සිදුවීම් දෙකටම පහත අමතර ගුණාංග ඇත:

  • direction: කැරොසල් ලිස්සා යන දිශාව (එක්කෝ "left"හෝ "right").
  • relatedTarget: DOM මූලද්‍රව්‍යය සක්‍රිය අයිතමය ලෙස ස්ථානගත වෙමින් පවතී.

සියලුම කැරොසල් සිදුවීම් කැරූසල් වෙතම (එනම් හිදී <div class="carousel">) වෙඩි තබා ඇත.

සිදුවීම් වර්ගය විස්තර
slide.bs.carousel slideනිදසුන් ක්‍රමය ක්‍රියාත්මක කළ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
slid.bs.carousel කැරොසල් එහි ස්ලයිඩ සංක්‍රාන්තිය සම්පූර්ණ කළ විට මෙම සිදුවීම වෙඩි තබා ඇත.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js _

උදාහරණයක්

position: fixed;සමඟින් සොයාගත් බලපෑම අනුකරණය කරමින්, affix ප්ලගිනය සක්‍රිය සහ අක්‍රිය position: sticky;වේ. දකුණු පස ඇති උප සංචලනය ඇෆික්ස් ප්ලගිනයේ සජීවී ආදර්ශනයකි.


භාවිතය

දත්ත ගුණාංග හරහා හෝ ඔබේම ජාවාස්ක්‍රිප්ට් සමඟින් affix ප්ලගිනය භාවිතා කරන්න. අවස්ථා දෙකේදීම, ඔබ ඔබේ ඇලවූ අන්තර්ගතයේ ස්ථානගත කිරීම සහ පළල සඳහා CSS සැපයිය යුතුය.

සටහන: Safari විදැහුම්කරණ දෝෂයක් හේතුවෙන්, ඇදගත් හෝ තල්ලු කරන ලද තීරුවක් වැනි සාපේක්ෂ වශයෙන් ස්ථානගත කර ඇති මූලද්‍රව්‍යයක අඩංගු මූලද්‍රව්‍යයක් මත affix ප්ලගිනය භාවිතා නොකරන්න .

CSS හරහා ස්ථානගත කිරීම

ඇෆික්ස් ප්ලගිනය පන්ති තුනක් අතර ටොගල් කරයි, එක් එක් විශේෂිත රාජ්‍යයක් නියෝජනය කරයි: .affix, .affix-top, සහ .affix-bottom. ඔබ විසින්ම මෙම පන්ති සඳහා (මෙම ප්ලගිනයෙන් ස්වාධීනව) සත්‍ය තනතුරු හැසිරවීමට, position: fixed;on හැර, මෝස්තර සැපයිය යුතුය ..affix

ඇෆික්ස් ප්ලගිනය ක්‍රියා කරන ආකාරය මෙන්න:

  1. .affix-topආරම්භ කිරීමට, මූලද්‍රව්‍යය එහි ඉහළම ස්ථානයේ ඇති බව දැක්වීමට ප්ලගිනය එක් කරයි . මෙම අවස්ථාවේදී CSS ස්ථානගත කිරීම අවශ්ය නොවේ.
  2. ඔබට ඇලවීමට අවශ්‍ය මූලද්‍රව්‍යය පසුකර අනුචලනය කිරීම සත්‍ය ඇලවීම අවුලුවාලිය යුතුය. .affixප්‍රතිස්ථාපන .affix-topසහ සකසන position: fixed;(Bootstrap හි CSS මගින් සපයනු ලබන්නේ) මෙයයි .
  3. පහළ ඕෆ්සෙට් එකක් අර්ථ දක්වා තිබේ නම්, එය පසුකර අනුචලනය කිරීම මගින් ප්‍රතිස්ථාපනය කළ .affixයුතුය .affix-bottom. ඕෆ්සෙට් විකල්ප නොවන බැවින්, එකක් සැකසීමට ඔබට සුදුසු CSS සැකසීම අවශ්‍ය වේ. මෙම අවස්ථාවේදී, position: absolute;අවශ්ය විට එකතු කරන්න. ප්ලගිනය එහි සිට මූලද්‍රව්‍යය ස්ථානගත කළ යුත්තේ කොතැනද යන්න තීරණය කිරීමට දත්ත උපලක්ෂණ හෝ JavaScript විකල්පය භාවිතා කරයි.

පහත භාවිත විකල්ප දෙකෙන් එකක් සඳහා ඔබේ CSS සැකසීමට ඉහත පියවර අනුගමනය කරන්න.

දත්ත ගුණාංග හරහා

ඕනෑම මූලද්‍රව්‍යයකට affix හැසිරීම පහසුවෙන් එක් කිරීමට data-spy="affix", ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න. මූලද්‍රව්‍යයක් ඇමිණීම ටොගල් කළ යුත්තේ කවදාද යන්න නිර්වචනය කිරීමට ඕෆ්සෙට් භාවිත කරන්න.

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

JavaScript හරහා

JavaScript හරහා affix ප්ලගිනය අමතන්න:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset-top="200".

නම වර්ගය පෙරනිමිය විස්තර
ඕෆ්සෙට් අංකය | කාර්යය | වස්තුව 10 අනුචලන ස්ථානය ගණනය කිරීමේදී තිරයෙන් ඕෆ්සෙට් කිරීමට පික්සල. තනි අංකයක් සපයා ඇත්නම්, ඕෆ්සෙට් ඉහළ සහ පහළ යන දෙපසම යෙදේ. අද්විතීය, පහළ සහ ඉහළ ඕෆ්සෙට් සැපයීමට වස්තුවක් offset: { top: 10 }හෝ offset: { top: 10, bottom: 5 }. ඔබට ඕෆ්සෙට් එකක් ගතිකව ගණනය කිරීමට අවශ්‍ය වූ විට ශ්‍රිතයක් භාවිතා කරන්න.
ඉලක්කය තේරීම්කරු | නෝඩය | jQuery මූලද්රව්යය windowවස්තුව _ ඇලවීමේ ඉලක්ක මූලද්‍රව්‍යය සඳහන් කරයි.

ක්රම

.affix(options)

ඔබගේ අන්තර්ගතය ඇලවූ අන්තර්ගතයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

අදාළ මූලද්‍රව්‍යවල මානයන්, පිහිටීම සහ අනුචලන ස්ථානය මත පදනම්ව ඇලවීමේ තත්වය නැවත ගණනය කරයි. , .affix, .affix-topසහ .affix-bottomපන්ති නව තත්වයට අනුව අමුණා ඇති අන්තර්ගතයට එකතු කර හෝ ඉවත් කරනු ලැබේ. අමුණා ඇති අන්තර්ගතයේ මානයන් හෝ ඉලක්ක මූලද්‍රව්‍යයේ මානයන් වෙනස් කරන විට, ඇලවූ අන්තර්ගතය නිවැරදිව ස්ථානගත කිරීම සහතික කිරීම සඳහා මෙම ක්‍රමය ඇමතීමට අවශ්‍ය වේ.

$('#myAffix').affix('checkPosition')

සිදුවීම්

Bootstrap හි affix ප්ලගිනය affix ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

සිදුවීම් වර්ගය විස්තර
affix.bs.affix මෙම සිදුවීම මූලද්‍රව්‍යය ඇලවීමට පෙර වහාම ක්‍රියාත්මක වේ.
ඇලවූ.bs.ඇෆික්ස් මූලද්රව්යය ඇලවීමෙන් පසුව මෙම සිදුවීම වෙඩි තබා ඇත.
affix-top.bs.affix මෙම සිදුවීම මූලද්‍රව්‍යය ඉහළට ඇලවීමට පෙර වහාම ක්‍රියාත්මක වේ.
ඇලවූ-top.bs.affix මූලද්‍රව්‍යය ඉහළට ඇලවීමෙන් පසු මෙම සිදුවීම වෙඩි තබා ඇත.
affix-bottom.bs.affix මෙම සිදුවීම මූලද්‍රව්‍යය පහළට ඇලවීමට පෙර වහාම ක්‍රියාත්මක වේ.
ඇලවූ-පහළ.bs.ඇෆික්ස් මූලද්‍රව්‍යය පහළට ඇලවීමෙන් පසු මෙම සිදුවීම සිදු වේ.