អំពីម៉ូឌុល

ការសម្រួល ប៉ុន្តែអាចបត់បែនបាន ទទួលយកកម្មវិធីជំនួយម៉ូឌុល javascript បែបប្រពៃណី ជាមួយនឹងមុខងារដែលត្រូវការអប្បបរមា និងលំនាំដើមឆ្លាតវៃប៉ុណ្ណោះ។

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

ខាងក្រោម​នេះ​គឺ​ជា​ម៉ូឌុល​ដែល​បាន​បង្ហាញ​ដោយ​ឋិតិវន្ត។

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

បិទ/បើកម៉ូឌុលតាមរយៈ javascript ដោយចុចប៊ូតុងខាងក្រោម។ វា​នឹង​រំកិល​ចុះ​ក្រោម ហើយ​ចុះ​ពី​ខាង​លើ​នៃ​ទំព័រ។

ដោយប្រើ bootstrap-modal

ហៅ modal តាមរយៈ javascript:

$ ( '#myModal' ) ។ ម៉ូឌុល ( ជម្រើស )

ជម្រើស

សម្គាល់

អ្នកអាចធ្វើឱ្យម៉ូឌុលសកម្មនៅលើទំព័ររបស់អ្នកយ៉ាងងាយស្រួលដោយមិនចាំបាច់សរសេរ javascript តែមួយជួរ។ គ្រាន់​តែ​កំណត់ data-toggle="modal"​លើ​ធាតុ​ឧបករណ៍​បញ្ជា​ដែល​មាន data-target="#foo"​ឬ href="#foo"​ដែល​ត្រូវ​នឹង​លេខ​សម្គាល់​ធាតុ​ម៉ូឌុល ហើយ​ពេល​ចុច​វា​នឹង​បើក​ដំណើរការ​ម៉ូឌុល​របស់​អ្នក។

ដូចគ្នានេះផងដែរ ដើម្បីបន្ថែមជម្រើសទៅក្នុងគំរូម៉ូឌុលរបស់អ្នក គ្រាន់តែបញ្ចូលពួកវាជាគុណលក្ខណៈទិន្នន័យបន្ថែមលើធាតុវត្ថុបញ្ជា ឬសញ្ញាសម្គាល់ម៉ូឌុលខ្លួនឯង។

<a class="btn" data-toggle = "modal" href="#myModal"> ម៉ូឌុល ចាប់ផ្តើម </a> _ _ _ _    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </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>

វិធីសាស្រ្ត

.modal(ជម្រើស)

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាគំរូ។ ទទួលយកជម្រើសស្រេចចិត្ត object។

$ ( '#myModal' ) ។ ម៉ូឌុល ({
  ក្តារចុច ៖ មិនពិត 
})

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

បិទ/បើកម៉ូឌុលដោយដៃ។

$ ( '#myModal' ) ។ ម៉ូឌុល ( 'បិទបើក' )

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

បើកម៉ូឌុលដោយដៃ។

$ ( '#myModal' ) ។ ម៉ូឌុល ( 'បង្ហាញ' )

.modal('លាក់')

លាក់ម៉ូឌុលដោយដៃ។

$ ( '#myModal' ) ។ ម៉ូឌុល ( 'លាក់' )

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

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

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

អំពីការទម្លាក់ចុះ

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

ឧទាហរណ៍

ចុចលើតំណ nav ទម្លាក់ចុះក្នុងរបារ navbar និងថ្នាំខាងក្រោមដើម្បីសាកល្បងទម្លាក់ចុះ។

• តំណភ្ជាប់ធម្មតា។
• ទម្លាក់​ចុះ
  • Action
  • Another action
  • Something else here
  • Separated link
• ទម្លាក់ចុះ ២
  • Action
  • Another action
  • Something else here
  • Separated link
• ទម្លាក់ចុះ ៣
  • Action
  • Another action
  • Something else here
  • Separated link

ដោយប្រើ bootstrap-dropdown.js

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

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

សម្គាល់

ដើម្បីបន្ថែមមុខងារទម្លាក់ចុះយ៉ាងលឿនទៅធាតុណាមួយគ្រាន់តែបន្ថែម data-toggle="dropdown"ហើយទម្លាក់ចុះ bootstrap ត្រឹមត្រូវណាមួយនឹងត្រូវបានធ្វើឱ្យសកម្មដោយស្វ័យប្រវត្តិ។

<ul class = "nav nav-pills" > 
  <li class = "active" > <a href="#"> តំណ ធម្មតា </a></li >  
  <li class = "dropdown" id = "menu1" >  
    <a class="dropdown-toggle" data-toggle = "dropdown" href="#menu1"> _ _ _ _ _   
      ទម្លាក់​ចុះ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href="#"> សកម្មភាព </a> < /li > 
      <li><a href="#"> សកម្មភាព មួយទៀត </a> </li > 
      <li><a href="#"> អ្វី ផ្សេងទៀត នៅទីនេះ </a></li > 
      <li class = "divider" ></li> 
      <li><a href="#"> តំណ ​បំបែក </a> </li > 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class="dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _ _ _    
      ទម្លាក់​ចុះ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

វិធីសាស្រ្ត

$().dropdown()

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

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

ឧទាហរណ៍ navbar ជាមួយ scrollspy

រមូរតំបន់ខាងក្រោម ហើយមើលបច្ចុប្បន្នភាពនៃការរុករក។ ធាតុរងដែលទម្លាក់ចុះនឹងត្រូវបានបន្លិចផងដែរ។ សាកល្បង​វា!

ដោយប្រើ bootstrap-scrollspy.js

ហៅ scrollspy តាមរយៈ javascript:

$ ( '#navbar' ) ។ scrollspy ()

សម្គាល់

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

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

វិធីសាស្រ្ត

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

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

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

ជម្រើស

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

កម្មវិធីជំនួយនេះបន្ថែមមុខងារផ្ទាំងរហ័ស ថាមវន្ត និងគ្រាប់ថ្នាំសម្រាប់ការផ្លាស់ប្តូរតាមរយៈមាតិកាក្នុងស្រុក។

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

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

• ផ្ទះ
• ប្រវត្តិរូប
• ទម្លាក់​ចុះ
  • @fat
  • @mdo

ការប្រើប្រាស់ bootstrap-tab.js

បើកផ្ទាំងដែលអាចប្រើបានតាមរយៈ 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នឹងអនុវត្តការកំណត់រចនាប័ទ្មផ្ទាំងចាប់ផ្ដើម។

<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 សម្រាប់ចលនា និងទិន្នន័យ-គុណលក្ខណៈសម្រាប់ការផ្ទុកចំណងជើងមូលដ្ឋាន។

ឧទាហរណ៍នៃការប្រើប្រាស់ព័ត៌មានជំនួយ

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

ដោយប្រើ bootstrap-tooltip.js

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

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

ជម្រើស

សម្គាល់

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

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

វិធីសាស្រ្ត

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

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

.tooltip('show')

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

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

.tooltip('លាក់')

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

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

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

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

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

អំពី popovers

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

* តម្រូវឱ្យ បញ្ចូល ព័ត៌មានជំនួយ

ឧទាហរណ៍​ដាក់​លើ​ផ្ទាំង​ប៉ាណូ

ដាក់លើប៊ូតុងដើម្បីកេះផ្ទាំងលេចចេញ។

ការប្រើប្រាស់ bootstrap-popover.js

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

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

ជម្រើស

សម្គាល់

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

វិធីសាស្រ្ត

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

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

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

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

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

.popover('លាក់')

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

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

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

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

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

អំពីការជូនដំណឹង

កម្មវិធីជំនួយការជូនដំណឹងគឺជាថ្នាក់តូចមួយសម្រាប់បន្ថែមមុខងារជិតស្និទ្ធទៅនឹងការជូនដំណឹង។

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

កម្មវិធីជំនួយការជូនដំណឹងដំណើរការលើសារដាស់តឿនធម្មតា និងរារាំងសារ។

ការប្រើប្រាស់ bootstrap-alert.js

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

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

សម្គាល់

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

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

វិធីសាស្រ្ត

$().alert()

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

.alert('បិទ')

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

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

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

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

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

អំពី

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

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

ប្រើកម្មវិធីជំនួយប៊ូតុងសម្រាប់រដ្ឋ និងបិទបើក។

ការប្រើប្រាស់ bootstrap-button.js

បើកប៊ូតុងតាមរយៈ javascript៖

$ ( '.nav-tabs' ) ។ ប៊ូតុង ()

សម្គាល់

គុណលក្ខណៈទិន្នន័យគឺរួមបញ្ចូលជាមួយកម្មវិធីជំនួយប៊ូតុង។ សូមពិនិត្យមើលកូដឧទាហរណ៍ខាងក្រោមសម្រាប់ប្រភេទសម្គាល់ផ្សេងៗ។

<!-- Add data-toggle="button" ដើម្បីបើកដំណើរការបិទបើកនៅលើប៊ូតុងតែមួយ -->
<button class = "btn" data-toggle = "button" > បិទបើកតែមួយ </button>  
 
<!-- Add data-toggle="buttons-checkbox" សម្រាប់រចនាប័ទ្មប្រអប់ធីក បិទបើកនៅលើ btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ឆ្វេង </button> 
  <button class = "btn" > កណ្តាល </button> 
  <button class = "btn" > ស្តាំ </button> 
</div>
 
<!-- Add data-toggle="buttons-radio" សម្រាប់ការបិទបើករចនាប័ទ្មវិទ្យុនៅលើ btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ឆ្វេង </button> 
  <button class = "btn" > កណ្តាល </button> 
  <button class = "btn" > ស្តាំ </button> 
</div>

វិធីសាស្រ្ត

$().button('toggle')

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

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

$().button('loading')

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

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

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

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

$().button(string)

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

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

អំពី

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

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

ឧទាហរណ៍ accordion

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

ដោយប្រើ bootstrap-collapse.js

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

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

ជម្រើស

សម្គាល់

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

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

វិធីសាស្រ្ត

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

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុដែលអាចបង្រួមបាន។ ទទួលយកជម្រើសស្រេចចិត្ត 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 ។

ស្លាកសញ្ញារូបភាពតូចទីពីរ

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 ។

ស្លាកសញ្ញារូបភាពតូចទីបី

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 ។

‹ ›

ការប្រើប្រាស់ bootstrap-carousel.js

ហៅតាម javascript៖

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

ជម្រើស

សម្គាល់

គុណលក្ខណៈទិន្នន័យត្រូវបានប្រើសម្រាប់ការគ្រប់គ្រងមុន និងបន្ទាប់។ សូមពិនិត្យមើលការសម្គាល់ឧទាហរណ៍ខាងក្រោម។

<div id = "myCarousel" class = "carousel" >  
  <!-- ធាតុ 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>

វិធីសាស្រ្ត

.carousel(ជម្រើស)

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

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

.carousel('វដ្ត')

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

.carousel('ផ្អាក')

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

.carousel(លេខ)

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

.carousel('prev')

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

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

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

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

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

អំពី

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

ឧទាហរណ៍

ចាប់ផ្តើមវាយបញ្ចូលក្នុងប្រអប់ខាងក្រោម ដើម្បីបង្ហាញលទ្ធផលវាយអក្សរ។

ការប្រើប្រាស់ bootstrap-typeahead.js

ហៅអក្សរកាត់តាម javascript:

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

ជម្រើស

សម្គាល់

បន្ថែមគុណលក្ខណៈទិន្នន័យ ដើម្បីចុះឈ្មោះធាតុដែលមានមុខងារវាយអក្សរ។

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

វិធីសាស្រ្ត

.typeahead(ជម្រើស)

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