បុគ្គល ឬចងក្រង

កម្មវិធីជំនួយអាចត្រូវបានរួមបញ្ចូលដោយឡែកពីគ្នា (ទោះបីជាមួយចំនួនតម្រូវឱ្យមានភាពអាស្រ័យ) ឬទាំងអស់ក្នុងពេលតែមួយ។ ទាំង bootstrap.js និង bootstrap.min.js មានកម្មវិធីជំនួយទាំងអស់នៅក្នុងឯកសារតែមួយ។

គុណលក្ខណៈទិន្នន័យ

អ្នកអាចប្រើកម្មវិធីជំនួយ Bootstrap ទាំងអស់តាមរយៈ markup API ដោយមិនចាំបាច់សរសេរ JavaScript តែមួយជួរ។ នេះគឺជា API ថ្នាក់ដំបូងរបស់ Bootstrap ហើយគួរតែជាការពិចារណាដំបូងរបស់អ្នកនៅពេលប្រើកម្មវិធីជំនួយ។

ដែលបាននិយាយថា ក្នុងស្ថានភាពខ្លះ វាអាចជាការចង់បិទមុខងារនេះ។ ដូច្នេះហើយ យើងក៏ផ្តល់លទ្ធភាពក្នុងការបិទដំណើរការ API គុណលក្ខណៈទិន្នន័យ ដោយការមិនចងភ្ជាប់ព្រឹត្តិការណ៍ទាំងអស់នៅលើតួអត្ថបទដែលដាក់ដោយ `'data-api'`។ វាមើលទៅដូចនេះ៖

$ ( 'រាងកាយ' ) ។ បិទ ( '.data-api' )

ជាជម្រើស ដើម្បីកំណត់គោលដៅកម្មវិធីជំនួយជាក់លាក់មួយ គ្រាន់តែបញ្ចូលឈ្មោះរបស់កម្មវិធីជំនួយជា namespace រួមជាមួយនឹង data-api namespace ដូចនេះ៖

$ ( 'រាងកាយ' ) ។ បិទ ( '.alert.data-api' )

API កម្មវិធី

យើងក៏ជឿថាអ្នកគួរតែអាចប្រើកម្មវិធីជំនួយ Bootstrap ទាំងអស់តាមរយៈ JavaScript API ។ APIs សាធារណៈទាំងអស់គឺជាវិធីសាស្រ្ដតែមួយ ដែលអាចច្រវ៉ាក់បាន ហើយត្រឡប់ការប្រមូលដែលបានធ្វើសកម្មភាព។

$ ( ".btn.danger" ). ប៊ូតុង ( "បិទបើក" ) ។ addClass ( "ខ្លាញ់" )

វិធីសាស្រ្តទាំងអស់គួរតែទទួលយកវត្ថុជម្រើសស្រេចចិត្ត ខ្សែអក្សរដែលកំណត់គោលដៅវិធីសាស្រ្តជាក់លាក់ណាមួយ ឬគ្មានអ្វីសោះ (ដែលផ្តួចផ្តើមកម្មវិធីជំនួយដែលមានឥរិយាបថលំនាំដើម)៖

$ ( "#myModal" ) ។ modal () // ចាប់ផ្តើមជាមួយលំនាំដើម                       
$ ( "#myModal" ) ។ modal ({ keyboard : false }) // ចាប់ផ្តើមដោយគ្មានក្តារចុច     
$ ( "#myModal" ) ។ modal ( 'show' ) // ចាប់ផ្តើម និងហៅបង្ហាញភ្លាមៗ                

កម្មវិធីជំនួយនីមួយៗក៏លាតត្រដាង constructor ឆៅរបស់វានៅលើលក្ខណៈសម្បត្តិ `Constructor`៖ $.fn.popover.Constructor. ប្រសិនបើអ្នកចង់ទទួលបានឧទាហរណ៍កម្មវិធីជំនួយជាក់លាក់មួយ ទាញយកវាដោយផ្ទាល់ពីធាតុមួយ៖ $('[rel=popover]').data('popover').

គ្មានជម្លោះ

ពេលខ្លះចាំបាច់ត្រូវប្រើកម្មវិធីជំនួយ Bootstrap ជាមួយនឹងក្របខ័ណ្ឌ UI ផ្សេងទៀត។ ក្នុង​កាលៈទេសៈ​ទាំងនេះ ការ​ប៉ះទង្គិច​ឈ្មោះ​ចន្លោះ​អាច​កើតឡើង​ម្តងម្កាល។ ប្រសិនបើរឿងនេះកើតឡើង អ្នកអាចហៅ .noConflictទៅកម្មវិធីជំនួយដែលអ្នកចង់ត្រឡប់តម្លៃនៃ

var bootstrapButton = $ ។ fn _ ប៊ូតុង ។ noConflict () // ត្រឡប់ $.fn.button ទៅតម្លៃដែលបានកំណត់ពីមុន 
$ _ fn _ bootstrapBtn = bootstrapButton             // ផ្តល់ $().bootstrapBtn មុខងារ bootstrap

ព្រឹត្តិការណ៍

Bootstrap ផ្តល់នូវព្រឹត្តិការណ៍ផ្ទាល់ខ្លួនសម្រាប់សកម្មភាពពិសេសៗរបស់កម្មវិធីជំនួយភាគច្រើន។ ជាទូទៅ ទាំងនេះមកក្នុងទម្រង់ចូលរួមគ្មានកំណត់ និងអតីតកាល ដែលអកំណត់ (ឧ។ show) ត្រូវបានបង្កឡើងនៅពេលចាប់ផ្តើមព្រឹត្តិការណ៍ ហើយទម្រង់ចូលរួមអតីតកាលរបស់វា (ឧ. shown) គឺជាកេះនៅពេលបញ្ចប់សកម្មភាព។

ព្រឹត្តិការណ៍គ្មានកំណត់ទាំងអស់ផ្តល់នូវមុខងារការពារលំនាំដើម។ វាផ្តល់នូវសមត្ថភាពក្នុងការបញ្ឈប់ការប្រតិបត្តិនៃសកម្មភាពមុនពេលវាចាប់ផ្តើម។

$ ( '#myModal' ) ។ នៅលើ ( ' បង្ហាញ' មុខងារ ( អ៊ី ) {   
    ប្រសិនបើ (! data ) ត្រឡប់ e . PreventDefault () // បញ្ឈប់ម៉ូឌុលពីការត្រូវបានបង្ហាញ   
})

អំពីដំណើរផ្លាស់ប្តូរ

សម្រាប់បែបផែនការផ្លាស់ប្តូរសាមញ្ញ រួមបញ្ចូល bootstrap-transition.js ម្តងជាមួយឯកសារ JS ផ្សេងទៀត។ ប្រសិនបើអ្នកកំពុងប្រើ bootstrap.js ដែល បានចងក្រង (ឬបង្រួម) វាមិនចាំបាច់បញ្ចូលវាទេ វាមានរួចហើយ។

ករណីប្រើប្រាស់

ឧទាហរណ៍មួយចំនួននៃកម្មវិធីជំនួយការផ្លាស់ប្តូរ៖

• ការរអិលឬរសាត់តាមគំរូ
• បាត់ផ្ទាំង
• បាត់ការជូនដំណឹង
• បន្ទះក្តាររអិល

ឧទាហរណ៍

ម៉ូឌុលត្រូវបានធ្វើឱ្យទាន់សម័យ ប៉ុន្តែអាចបត់បែនបាន ប្រអប់ជំរុញឱ្យមានមុខងារចាំបាច់អប្បបរមា និងលំនាំដើមឆ្លាតវៃ។

ឧទាហរណ៍ឋិតិវន្ត

ម៉ូឌុលដែលបង្ហាញជាមួយបឋមកថា តួ និងសំណុំសកម្មភាពនៅក្នុងបាតកថា។

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> បឋមកថាម៉ូឌុល </h3>
  </div>
  <div class = "modal-body" > 
    <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 class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > បឋមកថាម៉ូឌុល </h3> 
  </div>
  <div class = "modal-body" > 
    <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

ហៅម៉ូឌុលដែលមានលេខសម្គាល់ myModalជាមួយបន្ទាត់តែមួយនៃ JavaScript៖

$ ( '#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' ) ។ ម៉ូឌុល ( 'លាក់' )

ព្រឹត្តិការណ៍

ថ្នាក់ modal របស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់ចូលទៅក្នុងមុខងារ modal ។

$ ( '#myModal' ) ។ លើ ( 'លាក់' មុខងារ ( ) {   
  // ធ្វើអ្វី​មួយ…
})

ឧទាហរណ៍

បន្ថែមម៉ឺនុយទម្លាក់ចុះទៅស្ទើរតែទាំងអស់ជាមួយនឹងកម្មវិធីជំនួយដ៏សាមញ្ញនេះ រួមទាំងរបាររុករក ផ្ទាំង និងថ្នាំគ្រាប់។

នៅក្នុង navbar មួយ។

នៅក្នុងផ្ទាំង

ការប្រើប្រាស់

តាមរយៈគុណលក្ខណៈទិន្នន័យ

បន្ថែម data-toggle="dropdown"ទៅតំណ ឬប៊ូតុងដើម្បីបិទបើកបញ្ជីទម្លាក់ចុះ។

<div class = "dropdown" > 
  <a class="dropdown-toggle" data-toggle = "dropdown" href="#"> គន្លឹះ ទម្លាក់ ចុះ </a> _ _ _   
  <ul class = "dropdown-menu" តួនាទី = "ម៉ឺនុយ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

ដើម្បីរក្សា URL ឱ្យនៅដដែល សូមប្រើ data-targetគុណលក្ខណៈជំនួសឱ្យ href="#".

<div class = "dropdown" > 
  <a class="dropdown-toggle" id = "dLabel" តួនាទី = "ប៊ូតុង" data-toggle = "dropdown" data-target = "#" href="/page.html"> _ _ _ _ _      
    ទម្លាក់​ចុះ
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" តួនាទី = "ម៉ឺនុយ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

តាមរយៈ JavaScript

ហៅបញ្ជីទម្លាក់ចុះតាមរយៈ JavaScript៖

$ ( '.dropdown-toggle' ) ។ ទម្លាក់ចុះ ()

ជម្រើស

គ្មាន

វិធីសាស្រ្ត

$().dropdown('toggle')

api កម្មវិធី​សម្រាប់​បិទបើក​ម៉ឺនុយ​សម្រាប់​របារ​រុករក​ដែល​បាន​ផ្ដល់​ឱ្យ ឬ​ការ​រុករក​តាម​ផ្ទាំង។

ឧទាហរណ៍នៅក្នុង navbar

កម្មវិធីជំនួយ ScrollSpy គឺសម្រាប់ធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិនូវគោលដៅ nav ដោយផ្អែកលើទីតាំងរមូរ។ រមូរតំបន់ខាងក្រោមរបាររុករក ហើយមើលការផ្លាស់ប្តូរថ្នាក់សកម្ម។ ធាតុរងដែលទម្លាក់ចុះនឹងត្រូវបានបន្លិចផងដែរ។

ការប្រើប្រាស់

តាមរយៈគុណលក្ខណៈទិន្នន័យ

ដើម្បីងាយស្រួលបន្ថែមឥរិយាបទ scrollspy ក្នុងការរុករក topbar របស់អ្នក គ្រាន់តែបន្ថែម data-spy="scroll"ទៅធាតុដែលអ្នកចង់ឈ្លបយកការណ៍ (ភាគច្រើនវាជាតួ) ហើយ data-target=".navbar"ជ្រើសរើស nav ណាដែលត្រូវប្រើ។ អ្នកនឹងចង់ប្រើ scrollspy ជាមួយ .navសមាសភាគមួយ។

<body data-spy = "រមូរ" data-target = ".navbar" > ... </body>  

តាមរយៈ JavaScript

ហៅ scrollspy តាមរយៈ JavaScript៖

$ ( '#navbar' ) ។ scrollspy ()

វិធីសាស្រ្ត

.scrollspy('ធ្វើឱ្យស្រស់')

នៅពេលប្រើ scrollspy ដោយភ្ជាប់ជាមួយការបន្ថែម ឬការដកធាតុចេញពី DOM អ្នកនឹងត្រូវហៅវិធីសាស្ត្រធ្វើឱ្យស្រស់ដូចនេះ៖

$ ( '[data-spy="scroll"]' ) ។ នីមួយៗ ( មុខងារ () {  
  var $spy = $ ( នេះ ). scrollspy ( 'ធ្វើឱ្យស្រស់' )
});

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-offset="".

ព្រឹត្តិការណ៍

ផ្ទាំងឧទាហរណ៍

បន្ថែមមុខងារផ្ទាំងរហ័ស និងថាមវន្តទៅការផ្លាស់ប្តូរតាមរយៈផ្ទាំងនៃមាតិកាមូលដ្ឋាន សូម្បីតែតាមរយៈម៉ឺនុយទម្លាក់ចុះក៏ដោយ។

ការប្រើប្រាស់

បើកផ្ទាំងដែលអាចប្រើបានតាមរយៈ JavaScript (ផ្ទាំងនីមួយៗត្រូវធ្វើឱ្យសកម្មដាច់ដោយឡែក)៖

$ ( '#myTab a' ). ចុច ( មុខងារ ( អ៊ី ) {  
  អ៊ី _ ការពារលំនាំដើម ();
  $ ( នេះ ) ។ ផ្ទាំង ( 'បង្ហាញ' );
})

អ្នកអាចធ្វើឱ្យផ្ទាំងនីមួយៗសកម្មតាមវិធីជាច្រើន៖

$ ( '#myTab a[href="#profile"]' ) ។ ផ្ទាំង ( 'បង្ហាញ' ); // ជ្រើសរើសផ្ទាំងតាមឈ្មោះ 
$ ( '#myTab a:first' ) ។ ផ្ទាំង ( 'បង្ហាញ' ); // ជ្រើសរើសផ្ទាំងដំបូង 
$ ( '#myTab a: ចុងក្រោយ' ) ។ ផ្ទាំង ( 'បង្ហាញ' ); // ជ្រើសរើសផ្ទាំងចុងក្រោយ 
$ ( '#myTab li:eq(2) a' ). ផ្ទាំង ( 'បង្ហាញ' ); // ជ្រើសរើសផ្ទាំងទីបី (0-indexed) 

សម្គាល់

អ្នកអាចបើកដំណើរការផ្ទាំង ឬថ្នាំគ្រាប់រុករកដោយមិនចាំបាច់សរសេរ JavaScript ដោយគ្រាន់តែបញ្ជាក់ data-toggle="tab"ឬ data-toggle="pill"នៅលើធាតុមួយ។ ការបន្ថែម navនិង nav-tabsថ្នាក់ទៅផ្ទាំង ulនឹងអនុវត្តការកំណត់រចនាប័ទ្មផ្ទាំង Bootstrap ។

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> ទំព័រដើម </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>

វិធីសាស្រ្ត

$().ផ្ទាំង

ធ្វើឱ្យធាតុផ្ទាំង និងឧបករណ៍ផ្ទុកមាតិកាសកម្ម។ ថេបគួរតែមាន មួយ data-targetឬ hrefកំណត់គោលដៅថ្នាំងកុងតឺន័រនៅក្នុង DOM ។

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href="#home"> ផ្ទះ </a> </li >  
  <li><a href = "#profile"> ប្រវត្តិរូប </a> </li> 
  <li><a href="#messages"> សារ </a> < /li > 
  <li><a href = "#settings"> ការកំណត់ </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <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: ចុងក្រោយ' ) ។ ផ្ទាំង ( 'បង្ហាញ' );
  })
</script>

ព្រឹត្តិការណ៍

$ ( 'a[data-toggle="tab"]' ) ។ on ( 'បង្ហាញ ' មុខងារ ( អ៊ី ) {   
  អ៊ី _ គោលដៅ // ផ្ទាំងដែលបានធ្វើឱ្យសកម្ម
  អ៊ី _ គោលដៅដែលទាក់ទង // ផ្ទាំងមុន ។
})

ឧទាហរណ៍

បំផុសគំនិតដោយកម្មវិធីជំនួយ jQuery.tipsy ដ៏ល្អឥតខ្ចោះដែលសរសេរដោយ Jason Frame; ការណែនាំអំពីឧបករណ៍គឺជាកំណែដែលបានអាប់ដេត ដែលមិនពឹងផ្អែកលើរូបភាព ប្រើ CSS3 សម្រាប់គំនូរជីវចល និងគុណលក្ខណៈទិន្នន័យសម្រាប់ការផ្ទុកចំណងជើងមូលដ្ឋាន។

សម្រាប់ហេតុផលនៃការអនុវត្ត ការណែនាំឧបករណ៍ និងទិន្នន័យ popover-apis ត្រូវបានជ្រើសរើស មានន័យថា អ្នកត្រូវតែចាប់ផ្តើមពួកវាដោយខ្លួនឯង .

ដាក់លើតំណខាងក្រោមដើម្បីមើលព័ត៌មានជំនួយ៖

ទិសទាំងបួន

ព័ត៌មានជំនួយនៅក្នុងក្រុមបញ្ចូល

នៅពេលប្រើព័ត៌មានជំនួយ និងការលេចឡើងជាមួយក្រុមបញ្ចូល Bootstrap អ្នកនឹងត្រូវកំណត់ជម្រើស container(ឯកសារខាងក្រោម) ដើម្បីជៀសវាងផលប៉ះពាល់ដែលមិនចង់បាន។

ការប្រើប្រាស់

កេះព័ត៌មានជំនួយតាមរយៈ JavaScript៖

$ ( '#ឧទាហរណ៍' ) ។ ព័ត៌មានជំនួយ ( ជម្រើស )

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-animation="".

សម្គាល់

<a href="#" data-toggle = "tooltip" title="ព័ត៌មានជំនួយដំបូង"> ដាក់ពីលើ ខ្ញុំ </a> _ _ _ _   

វិធីសាស្រ្ត

$().ព័ត៌មានជំនួយ(ជម្រើស)

ភ្ជាប់ឧបករណ៍ដោះស្រាយព័ត៌មានជំនួយទៅនឹងបណ្តុំធាតុ។

.tooltip('show')

បង្ហាញព័ត៌មានជំនួយរបស់ធាតុមួយ។

$ ( '# ធាតុ' ) ។ ព័ត៌មានជំនួយ ( 'បង្ហាញ' )

.tooltip('លាក់')

លាក់ព័ត៌មានជំនួយរបស់ធាតុមួយ។

$ ( '# ធាតុ' ) ។ ព័ត៌មានជំនួយ ( 'លាក់' )

.tooltip('បិទ/បើក')

បិទបើកព័ត៌មានជំនួយរបស់ធាតុមួយ។

$ ( '# ធាតុ' ) ។ ព័ត៌មានជំនួយ ( 'បិទបើក' )

.tooltip('បំផ្លាញ')

លាក់ និងបំផ្លាញព័ត៌មានជំនួយរបស់ធាតុមួយ។

$ ( '# ធាតុ' ) ។ ព័ត៌មានជំនួយ ( 'បំផ្លាញ' )

ឧទាហរណ៍

បន្ថែមការត្រួតគ្នាតូចៗនៃមាតិកាដូចជានៅលើ iPad ទៅនឹងធាតុណាមួយសម្រាប់ព័ត៌មានបន្ទាប់បន្សំនៃលំនៅដ្ឋាន។ ដាក់លើប៊ូតុងដើម្បីកេះផ្ទាំងលេចចេញ។ តម្រូវឱ្យ បញ្ចូល ព័ត៌មានជំនួយ ។

popover ឋិតិវន្ត

មានជម្រើសចំនួនបួន៖ ខាងលើ ស្តាំ បាត និងតម្រឹមឆ្វេង។

គ្មានការសម្គាល់ដែលបង្ហាញថាជាការលេចឡើងត្រូវបានបង្កើតពី JavaScript និងមាតិកានៅក្នុង dataគុណលក្ខណៈមួយ។

ការបង្ហាញផ្ទាល់

ទិសទាំងបួន

ការប្រើប្រាស់

បើកដំណើរការ popovers តាមរយៈ JavaScript៖

$ ( '#ឧទាហរណ៍' ) ។ popover ( ជម្រើស )

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-animation="".

សម្គាល់

សម្រាប់ហេតុផលដំណើរការ ការណែនាំ និង Popover data-apis ត្រូវបានជ្រើសរើសចូល។ ប្រសិនបើអ្នកចង់ប្រើពួកវា គ្រាន់តែបញ្ជាក់ជម្រើសឧបករណ៍ជ្រើសរើស។

វិធីសាស្រ្ត

$().popover(ជម្រើស)

ចាប់ផ្តើម popovers សម្រាប់ការប្រមូលធាតុ។

.popover('បង្ហាញ')

បង្ហាញធាតុលេចចេញ។

$ ( '# ធាតុ' ) ។ popover ( 'បង្ហាញ' )

.popover('លាក់')

លាក់ការលេចឡើងនៃធាតុ។

$ ( '# ធាតុ' ) ។ popover ( 'លាក់' )

.popover('បិទ/បើក')

បិទ/បើក​ធាតុ។

$ ( '# ធាតុ' ) ។ popover ( 'បិទ/បើក' )

.popover('បំផ្លាញ')

លាក់ និងបំផ្លាញការលេចឡើងនៃធាតុមួយ។

$ ( '# ធាតុ' ) ។ popover ( 'បំផ្លាញ' )

ការជូនដំណឹងឧទាហរណ៍

បន្ថែមមុខងារច្រានចោលទៅសារជូនដំណឹងទាំងអស់ជាមួយកម្មវិធីជំនួយនេះ។

ការប្រើប្រាស់

បើកការច្រានចោលការជូនដំណឹងតាមរយៈ JavaScript៖

$ ( ".alert" )។ ដាស់តឿន ()

សម្គាល់

គ្រាន់តែបន្ថែម data-dismiss="alert"ទៅប៊ូតុងបិទរបស់អ្នក ដើម្បីផ្តល់មុខងារបិទការជូនដំណឹងដោយស្វ័យប្រវត្តិ។

<a class="close" data-dismiss = "alert" href="#"> & times ; _ _ _ </a>   

វិធីសាស្រ្ត

$().alert()

បិទការជូនដំណឹងទាំងអស់ជាមួយនឹងមុខងារជិតស្និទ្ធ។ ដើម្បីអោយការដាស់តឿនរបស់អ្នកមានចលនានៅពេលបិទ សូមប្រាកដថាពួកវាបានប្រើ .fadeនិង .inថ្នាក់រួចហើយ។

.alert('បិទ')

បិទការជូនដំណឹង។

$ ( ".alert" )។ ការជូនដំណឹង ( 'បិទ' )

ព្រឹត្តិការណ៍

ថ្នាក់ដាស់តឿនរបស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ភ្ជាប់មុខងារជូនដំណឹង។

$ ( '#my-alert' ) ។ ចង ( 'បិទ' មុខងារ ( ) {   
  // ធ្វើអ្វី​មួយ…
})

ការប្រើប្រាស់ឧទាហរណ៍

ធ្វើច្រើនទៀតដោយប្រើប៊ូតុង។ ស្ថានភាពប៊ូតុងគ្រប់គ្រង ឬបង្កើតក្រុមនៃប៊ូតុងសម្រាប់សមាសធាតុជាច្រើនទៀតដូចជារបារឧបករណ៍ជាដើម។

រដ្ឋ

បន្ថែម data-loading-text="Loading..."ដើម្បីប្រើស្ថានភាពផ្ទុកនៅលើប៊ូតុងមួយ។

<button type = "button" class = "btn btn-primary" data-loading-text = "កំពុងផ្ទុក..." > ស្ថានភាពកំពុងផ្ទុក </button>   

បិទបើកតែមួយ

បន្ថែម data-toggle="button"ដើម្បីធ្វើឱ្យការបិទបើកនៅលើប៊ូតុងតែមួយ។

<button type = "button" class = "btn btn-primary" data-toggle = "button" > បិទបើកតែមួយ </button>   

ប្រអប់ធីក

បន្ថែម data-toggle="buttons-checkbox"សម្រាប់ការបិទបើករចនាប័ទ្មប្រអប់ធីកនៅលើ btn-group ។

<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-group ។

<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('toggle')

បិទបើកស្ថានភាពរុញ។ ផ្តល់ឱ្យប៊ូតុងនូវរូបរាងដែលវាត្រូវបានធ្វើឱ្យសកម្ម។

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

$().button('loading')

កំណត់ស្ថានភាពប៊ូតុងទៅការផ្ទុក - បិទប៊ូតុង និងប្តូរអត្ថបទទៅជាការផ្ទុកអត្ថបទ។ ការផ្ទុកអត្ថបទគួរតែត្រូវបានកំណត់នៅលើធាតុប៊ូតុងដោយប្រើគុណលក្ខណៈទិន្នន័យ data-loading-text។

<button type = "button" class = "btn" data-loading-text = "កំពុង​ផ្ទុក​វត្ថុ..." > ... </button>    

$().button('កំណត់ឡើងវិញ')

កំណត់ស្ថានភាពប៊ូតុងឡើងវិញ - ប្តូរអត្ថបទទៅជាអត្ថបទដើម។

$().button(string)

កំណត់ស្ថានភាពប៊ូតុងឡើងវិញ - ប្តូរអត្ថបទទៅស្ថានភាពអត្ថបទដែលបានកំណត់ទិន្នន័យណាមួយ។

<button type = "button" class = "btn" data-complete-text = "រួចរាល់!" > ... </button>    
<script>
  $ ( '.btn' ). ប៊ូតុង ( 'បញ្ចប់' )
</script>

អំពី

ទទួលបានរចនាប័ទ្មមូលដ្ឋាន និងការគាំទ្រដែលអាចបត់បែនបានសម្រាប់សមាសធាតុដែលអាចបង្រួមបានដូចជា accordions និងការរុករក។

* ទាមទារកម្មវិធីជំនួយ Transitions ត្រូវបានរួមបញ្ចូល។

ឧទាហរណ៍ accordion

ដោយប្រើកម្មវិធីជំនួយការដួលរលំ យើងបានបង្កើតធាតុក្រាហ្វិករចនាប័ទ្ម accordion សាមញ្ញមួយ៖

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class="accordion-toggle" data-toggle = "ដួលរលំ" data-parent = "#accordion2" href = "#collapseOne" > _ _    
        ធាតុក្រុមដែលអាចបង្រួមបាន #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        សត្វពាហនៈ...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class="accordion-toggle" data-toggle = "ដួលរលំ" data-parent = "#accordion2" href = "#collapseTwo"> _ _ _    
        ធាតុក្រុមដែលអាចបង្រួមបាន #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        សត្វពាហនៈ...
      </div>
    </div>
  </div>
</div>
...

អ្នកក៏អាចប្រើកម្មវិធីជំនួយដោយមិនមានការសម្គាល់ accordion ផងដែរ។ បង្កើតប៊ូតុងបិទបើកការពង្រីក និងការដួលរលំនៃធាតុផ្សេងទៀត។

<button type = "button" class = "btn btn-danger" data-toggle = "ដួលរលំ" data-target = "#demo" >    
  ការដួលរលំសាមញ្ញ
</button>
 
<div id = "ការបង្ហាញ" class = "ដួលរលំនៅក្នុង" > … </div>  

ការប្រើប្រាស់

តាមរយៈគុណលក្ខណៈទិន្នន័យ

គ្រាន់​តែ​បន្ថែម data-toggle="collapse"​និង data-target​ធាតុ​ទៅ​ធាតុ​ដើម្បី​កំណត់​ការ​គ្រប់​គ្រង​ដោយ​ស្វ័យ​ប្រវត្តិ​នៃ​ធាតុ​ដែល​អាច​បង្រួម​។ គុណលក្ខណៈ data-targetទទួលយកឧបករណ៍ជ្រើសរើស css ដើម្បីអនុវត្តការដួលរលំទៅ។ ត្រូវប្រាកដថាបន្ថែមថ្នាក់ collapseទៅធាតុដែលអាចបង្រួមបាន។ ប្រសិនបើអ្នកចង់ឱ្យវាបើកលំនាំដើម សូមបន្ថែមថ្នាក់បន្ថែម in។

ដើម្បីបន្ថែមការគ្រប់គ្រងក្រុមដូច accordion ទៅការគ្រប់គ្រងដែលអាចបង្រួមបាន សូមបន្ថែមគុណលក្ខណៈទិន្នន័យ data-parent="#selector"។ សូមមើលការបង្ហាញដើម្បីមើលសកម្មភាពនេះ។

តាមរយៈ JavaScript

បើកដំណើរការដោយដៃជាមួយ៖

$ ( ".ដួលរលំ" ) ។ ដួលរលំ ()

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-parent="".

វិធីសាស្រ្ត

.ដួលរលំ(ជម្រើស)

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុដែលអាចបង្រួមបាន។ ទទួលយកជម្រើសស្រេចចិត្ត object។

$ ( '#myCollapsible' ) ។ ដួលរលំ ({
  បិទបើក ៖ មិនពិត 
})

.ដួលរលំ('បិទ/បើក')

បិទ/បើកធាតុដែលអាចបង្រួមបានដើម្បីបង្ហាញ ឬលាក់។

.ដួលរលំ('បង្ហាញ')

បង្ហាញធាតុដែលអាចបង្រួមបាន។

.ដួលរលំ('លាក់')

លាក់ធាតុដែលអាចបង្រួមបាន។

ព្រឹត្តិការណ៍

ថ្នាក់ដួលរលំរបស់ Bootstrap លាតត្រដាងព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារដួលរលំ។

$ ( '#myCollapsible' ) ។ លើ ( 'លាក់' មុខងារ ( ) {   
  // ធ្វើអ្វី​មួយ…
})

ឧទាហរណ៍ វង់

ការបញ្ចាំងស្លាយខាងក្រោមបង្ហាញពីកម្មវិធីជំនួយទូទៅ និងសមាសភាគសម្រាប់ជិះកង់ឆ្លងកាត់ធាតុដូចជា រង្វង់មូល។

ស្លាកសញ្ញារូបភាពតូចដំបូង

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

Second Thumbnail label

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.

Third Thumbnail label

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" class = "ស្លាយ carousel" >  
  <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>
  <!-- ធាតុ Carousel -->
  <div class = "carousel-inner" > 
    <div class = "ធាតុសកម្ម" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <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

ហៅទូរសព្ទទៅរង្វង់ដោយដៃដោយប្រើ៖

$ ( '.carousel' ). រង្វង់មូល ()

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScriptz ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-interval="".

វិធីសាស្រ្ត

.carousel(ជម្រើស)

ចាប់ផ្ដើម​រង្វង់​មូល​ជាមួយ​ជម្រើស​ជា​ជម្រើស objectហើយ​ចាប់ផ្ដើម​ជិះ​កង់​តាម​ធាតុ។

$ ( '.carousel' ). រង្វង់មូល ({
  ចន្លោះពេល ៖ ២០០០ 
})

.carousel('វដ្ត')

ធ្វើរង្វង់តាមធាតុរង្វង់ពីឆ្វេងទៅស្តាំ។

.carousel('ផ្អាក')

បញ្ឈប់​រង្វង់​មូល​មិន​ឱ្យ​ជិះ​កង់​កាត់​វត្ថុ។

.carousel(លេខ)

បង្វិល​រង្វង់​ទៅ​ស៊ុម​ជាក់លាក់​មួយ (ដោយ​ផ្អែក 0 ស្រដៀង​នឹង​អារេ​មួយ)។

.carousel('prev')

រង្វង់ទៅធាតុមុន។

.carousel('បន្ទាប់')

រង្វង់ទៅធាតុបន្ទាប់។

ព្រឹត្តិការណ៍

ថ្នាក់ carousel របស់ Bootstrap លាតត្រដាងនូវព្រឹត្តិការណ៍ចំនួនពីរសម្រាប់ភ្ជាប់មុខងារ carousel ។

ឧទាហរណ៍

កម្មវិធីជំនួយជាមូលដ្ឋាន និងងាយស្រួលពង្រីកសម្រាប់បង្កើតក្បាលពុម្ពយ៉ាងរហ័សជាមួយនឹងការបញ្ចូលអត្ថបទទម្រង់ណាមួយ។

< ប្រភេទ បញ្ចូល = "អត្ថបទ" data-provide = "typeahead" >  

អ្នក​នឹង​ចង់​កំណត់ autocomplete="off"​ដើម្បី​ការពារ​ម៉ឺនុយ​កម្មវិធីរុករក​តាម​អ៊ីនធឺណិត​លំនាំដើម​មិន​ឱ្យ​លេច​ឡើង​នៅ​លើ​ម៉ឺនុយ​ទម្លាក់​ចុះ​ប្រភេទ Bootstrap។

ការប្រើប្រាស់

តាមរយៈគុណលក្ខណៈទិន្នន័យ

បន្ថែមគុណលក្ខណៈទិន្នន័យ ដើម្បីចុះឈ្មោះធាតុដែលមានមុខងារ typeahead ដូចបង្ហាញក្នុងឧទាហរណ៍ខាងលើ។

តាមរយៈ JavaScript

ហៅទូរស័ព្ទទៅក្បាលម៉ាស៊ីនដោយដៃជាមួយ៖

$ ( '.typeahead' ) ។ អក្សរកាត់ ()

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-source="".

វិធីសាស្រ្ត

.typeahead(ជម្រើស)

ចាប់ផ្ដើម​ការ​បញ្ចូល​ដោយ​មាន​ក្បាល​អក្សរ។

ឧទាហរណ៍

subnavigation នៅខាងឆ្វេងគឺជាការបង្ហាញផ្ទាល់នៃកម្មវិធីជំនួយ affix ។

ការប្រើប្រាស់

តាមរយៈគុណលក្ខណៈទិន្នន័យ

ដើម្បីងាយស្រួលបន្ថែមឥរិយាបទ affix ទៅធាតុណាមួយ គ្រាន់តែបន្ថែម data-spy="affix"ទៅធាតុដែលអ្នកចង់ឈ្លបយកការណ៍។ បន្ទាប់មកប្រើអុហ្វសិតដើម្បីកំណត់ពេលដែលត្រូវបិទបើកការខ្ទាស់នៃធាតុមួយ បើក និងបិទ។

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

តាមរយៈ JavaScript

ហៅកម្មវិធីជំនួយ affix តាមរយៈ JavaScript៖

$ ( '#navbar' ) ។ ភ្ជាប់ ()

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-offset-top="200".