កម្មវិធីជំនួយ Modal របស់យើងគឺជាកម្មវិធីជំនួយម៉ូឌុល js ដ៏ស្ដើងបំផុតដោយយកចិត្តទុកដាក់ជាពិសេសដើម្បីរួមបញ្ចូលតែមុខងារទទេដែលយើងត្រូវការនៅទីនេះនៅ twitter ។

ទាញយក

ដោយប្រើ bootstrap-modal

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

ជម្រើស

ឈ្មោះ	ប្រភេទ	លំនាំដើម	ការពិពណ៌នា
ផ្ទៃខាងក្រោយ	ប៊ូលីន, ខ្សែអក្សរ	មិនពិត	រួមបញ្ចូលធាតុផ្ទៃខាងក្រោយម៉ូឌុល។ កំណត់ផ្ទាំងខាងក្រោយទៅ "static"ប្រសិនបើអ្នកមិនចង់ឱ្យម៉ូឌុលបិទនៅពេលដែលផ្ទាំងខាងក្រោយត្រូវបានចុច។
ក្តារចុច	ប៊ូលីន	មិនពិត	បិទម៉ូឌុលនៅពេលចុចគ្រាប់ចុចគេច
បង្ហាញ	ប៊ូលីន	មិនពិត	បើកម៉ូឌុលនៅលើការចាប់ផ្តើមថ្នាក់

សម្គាល់

អ្នកអាចធ្វើឱ្យម៉ូឌុលសកម្មនៅលើទំព័ររបស់អ្នកយ៉ាងងាយស្រួលដោយមិនចាំបាច់សរសេរ javascript តែមួយជួរ។ គ្រាន់តែផ្តល់គុណលក្ខណៈធាតុមួយ data-controls-modalដែលត្រូវនឹងលេខសម្គាល់ធាតុម៉ូឌុល ហើយនៅពេលចុច វានឹងបើកដំណើរការម៉ូឌុលរបស់អ្នក។ ដើម្បីបន្ថែមជម្រើសម៉ូឌុល គ្រាន់តែបញ្ចូលពួកវាជាគុណលក្ខណៈទិន្នន័យផងដែរ។

<a class="btn" data-controls-modal = "my-modal" data-backdrop = "static"> ការ ចាប់ផ្ដើម ម៉ូឌុល </a> _    

សេចក្តីជូនដំណឹង ប្រសិនបើអ្នកចង់ឱ្យម៉ូឌុលរបស់អ្នកមានចលនាក្នុង និងក្រៅ គ្រាន់តែបន្ថែម .fadeថ្នាក់ទៅ .modalធាតុរបស់អ្នក (សូមមើលការបង្ហាញដើម្បីមើលវានៅក្នុងសកម្មភាព)។

វិធីសាស្រ្ត

.modal(ជម្រើស)

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

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

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

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

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

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

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

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

.modal('លាក់')

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

$ ( '#my-modal' ) ។ ម៉ូឌុល ( 'លាក់' )

.modal(ពិត)

ត្រឡប់​ឧទាហរណ៍​ថ្នាក់​ម៉ូឌុល​ធាតុ។

$ ( '#my-modal' ) ។ គំរូ ( ពិត )

សេចក្តីជូនដំណឹង ម្យ៉ាងវិញទៀត វាអាចត្រូវបានទាញយកមកវិញជាមួយ $().data('modal').

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

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

ព្រឹត្តិការណ៍	ការពិពណ៌នា
បង្ហាញ	ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
បានបង្ហាញ	ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ម៉ូឌុល​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​អាច​មើល​ឃើញ (នឹង​រង់ចាំ​ឱ្យ​ការ​ផ្លាស់ប្តូរ css បញ្ចប់)។
លាក់	ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
លាក់	ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលម៉ូឌុលបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ css បញ្ចប់)។

$ ( '#my-modal' ) ។ bind ( 'លាក់' មុខងារ ( ) {   
  // ធ្វើអ្វី​មួយ ...
})

ការបង្ហាញ

ចាប់ផ្តើមម៉ូឌុល

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

ទាញយក

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

$ ( '#topbar' ) ។ ទម្លាក់ចុះ ()

សម្គាល់

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

<ul class = "tabs" > 
  <li class = "active" > <a href="#"> ផ្ទះ </a> </li >  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href="#" class="dropdown-toggle"> ទម្លាក់ ចុះ </a> _ _ _ _  
    <ul class = "dropdown-menu" > 
      <li><a href="#"> តំណ បន្ទាប់បន្សំ </a> </li > 
      <li><a href="#"> អ្វី ផ្សេងទៀត នៅទីនេះ </a></li > 
      <li class = "divider" ></li> 
      <li><a href="#"> តំណ ​មួយ ​ទៀត </a></li > 
    </ul>
  </li>
</ul>

សេចក្តីជូនដំណឹង ប្រសិនបើ ui របស់អ្នកមានការទម្លាក់ចុះជាច្រើន សូមពិចារណាបន្ថែម data-dropdownគុណលក្ខណៈទៅធាតុកុងតឺន័រដែលសំខាន់ជាងដូចជា .tabsឬ .topbar.

វិធីសាស្រ្ត

$().dropdown()

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

ការបង្ហាញ

កម្មវិធីជំនួយនេះគឺសម្រាប់បន្ថែមអន្តរកម្មរបស់ scrollspy (auto update nav) ទៅកាន់ bootstrap topbar។

ទាញយក

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

$ ( '#topbar' ) ។ scrollSpy ()

សម្គាល់

ដើម្បីងាយស្រួលបន្ថែមឥរិយាបថ scrollspy ទៅ nav របស់អ្នក គ្រាន់តែបន្ថែម data-scrollspyគុណលក្ខណៈទៅ .topbar.

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

វិធីសាស្រ្ត

$().scrollSpy()

បើកដំណើរការដោយស្វ័យប្រវត្តិនូវប៊ូតុងរុករកដោយអ្នកប្រើប្រាស់ទីតាំងរមូរ។

$ ( 'តួ > .topbar' ) ។ scrollSpy ()

សេចក្តីជូនដំណឹង ស្លាកយុថ្កា Topbar ត្រូវតែមានគោលដៅលេខសម្គាល់ដែលអាចដោះស្រាយបាន។ ឧទាហរណ៍ <a href="#home">home</a>ត្រូវតែឆ្លើយតបទៅនឹងអ្វីមួយនៅក្នុង dom ដូចជា <div id="home"></div>.

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

scrollspy cache ប៊ូតុង nav និងផ្នែកសម្របសម្រួលសម្រាប់ដំណើរការ។ ប្រសិនបើអ្នកត្រូវការធ្វើបច្ចុប្បន្នភាពឃ្លាំងសម្ងាត់នេះ (ទំនងជាប្រសិនបើអ្នកមានមាតិកាថាមវន្ត) គ្រាន់តែហៅវិធីសាស្ត្រធ្វើឱ្យស្រស់នេះ។ ប្រសិនបើអ្នកបានប្រើគុណលក្ខណៈទិន្នន័យដើម្បីកំណត់ scrollspy របស់អ្នក គ្រាន់តែហៅ refresh នៅលើតួ។

$ ( 'រាងកាយ' ) ។ scrollSpy ( 'ធ្វើឱ្យស្រស់' )

ការបង្ហាញ

សូមពិនិត្យមើលការរុករករបារកំពូលនៅលើទំព័រនេះ។

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

ទាញយក

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

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

វិធីសាស្រ្ត

$().button('toggle')

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

សេចក្តីជូនដំណឹង អ្នកអាចបើកការបិទបើកដោយស្វ័យប្រវត្តិនៃប៊ូតុងមួយដោយប្រើ data-toggleគុណលក្ខណៈ។

<button class = "btn" data-toggle = "បិទ/បើក" > ... </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').button('complete')
</scrip>

ការបង្ហាញ

កំពុងផ្ទុកសាកល្បង បិទ/បើកការបង្ហាញ

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

ទាញយក

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

$ ( '.tabs' ) ។ ផ្ទាំង ()

សម្គាល់

អ្នកអាចបើកដំណើរការផ្ទាំង ឬថ្នាំគ្រាប់រុករកដោយមិនចាំបាច់សរសេរ javascript ណាមួយដោយគ្រាន់តែផ្តល់ឱ្យពួកគេនូវ data-tabsគុណលក្ខណៈ data-pills។

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

វិធីសាស្រ្ត

$().tabs ឬ $().ថ្នាំគ្រាប់

បើកដំណើរការមុខងារផ្ទាំង និងថ្នាំគ្រាប់សម្រាប់ធុងដែលបានផ្តល់ឱ្យ។ តំណភ្ជាប់ផ្ទាំងគួរតែយោងលេខសម្គាល់នៅក្នុងឯកសារ។

<ul class = "tabs" > 
  <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 = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "សារ" > ... </div> 
  <div id = "ការកំណត់" > ... </div> 
</div>
 
<script>
  $ ( មុខងារ () {  
    $ ( '.tabs' ) ។ ផ្ទាំង ()
  })
</script>

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

ព្រឹត្តិការណ៍	ការពិពណ៌នា
ការផ្លាស់ប្តូរ	ព្រឹត្តិការណ៍នេះចាប់ផ្តើមផ្លាស់ប្តូរផ្ទាំង។ ប្រើ event.targetនិង event.relatedTargetដើម្បីកំណត់គោលដៅផ្ទាំងសកម្ម និងផ្ទាំងសកម្មពីមុនរៀងៗខ្លួន។

$ ( '#.tabs' ) ។ ចង ( 'ផ្លាស់ប្តូរ ' មុខងារ ( អ៊ី ) {   
  អ៊ី _ គោលដៅ // ផ្ទាំងដែលបានធ្វើឱ្យសកម្ម
  អ៊ី _ គោលដៅដែលទាក់ទង // ផ្ទាំងមុន ។
})

ការបង្ហាញ

• ផ្ទះ
• ប្រវត្តិរូប
• សារ
• ការកំណត់
• ទម្លាក់​ចុះ
  • @ខ្លាញ់
  • @mdo

ផ្អែកលើកម្មវិធីជំនួយ jQuery.tipsy ដ៏ល្អឥតខ្ចោះដែលសរសេរដោយ Jason Frame; twipsy គឺជាកំណែដែលបានអាប់ដេត ដែលមិនពឹងផ្អែកលើរូបភាព ប្រើ css3 សម្រាប់ចលនា និង data-attributes សម្រាប់ការផ្ទុកចំណងជើង!

ទាញយក

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

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

ជម្រើស

ឈ្មោះ	ប្រភេទ	លំនាំដើម	ការពិពណ៌នា
ចលនា	ប៊ូលីន	ពិត	អនុវត្តការផ្លាស់ប្តូរ css បន្ថយទៅព័ត៌មានជំនួយ
ពន្យាពេលក្នុង	ចំនួន	0	ពន្យាពេលមុនពេលបង្ហាញព័ត៌មានជំនួយ (ms)
ពន្យាពេលចេញ	ចំនួន	0	ពន្យាពេលមុនពេលលាក់ព័ត៌មានជំនួយ (ms)
ធ្លាក់​ចុះ​មក​វិញ	ខ្សែអក្សរ	''	អត្ថបទដែលត្រូវប្រើនៅពេលដែលគ្មានចំណងជើងព័ត៌មានជំនួយ
ការដាក់	ខ្សែអក្សរ	'ខាងលើ'	របៀបដាក់ឧបករណ៍ជំនួយ - ខាងលើ | ខាងក្រោម | ឆ្វេង | ត្រឹមត្រូវ។
html	ប៊ូលីន	មិនពិត	អនុញ្ញាតឱ្យមាតិកា html នៅក្នុងព័ត៌មានជំនួយ
រស់នៅ	ប៊ូលីន	មិនពិត	ប្រើការចាត់តាំងព្រឹត្តិការណ៍ជំនួសឱ្យអ្នកដោះស្រាយព្រឹត្តិការណ៍បុគ្គល
អុហ្វសិត	ចំនួន	0	ភីកសែលអុហ្វសិតនៃព័ត៌មានជំនួយពីធាតុគោលដៅ
ចំណងជើង	ខ្សែអក្សរ, មុខងារ	'ចំណងជើង'	គុណលក្ខណៈ ឬវិធីសាស្រ្តសម្រាប់ការទាញយកអត្ថបទចំណងជើង
កេះ	ខ្សែអក្សរ	'លោត'	របៀប​ដែល​ព័ត៌មាន​ជំនួយ​ត្រូវ​បាន​កេះ - hover | ផ្តោតអារម្មណ៍ | ហត្ថកម្ម
គំរូ	ខ្សែអក្សរ	[កំណត់សម្គាល់លំនាំដើម]	គំរូ html ដែលប្រើសម្រាប់បង្ហាញ twipsy ។

សេចក្តីជូនដំណឹង ជម្រើសឧទាហរណ៍ twipsy បុគ្គលអាចត្រូវបានបញ្ជាក់ជាជម្រើសតាមរយៈការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ។

<a href="#" data-placement = "ខាងក្រោម" rel = 'twipsy' title = 'អត្ថបទចំណងជើងខ្លះ' > អត្ថបទ </a> _ _    

វិធីសាស្រ្ត

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

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

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

បង្ហាញធាតុ twipsy ។

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

.twipsy('លាក់')

លាក់ធាតុ twipsy ។

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

.twipsy(ពិត)

ត្រឡប់​ធាតុ​ឧទាហរណ៍​ថ្នាក់ twipsy ។

$ ( '# ធាតុ' ) ។ twipsy ( ពិត )

សេចក្តីជូនដំណឹង ម្យ៉ាងវិញទៀត វាអាចត្រូវបានទាញយកមកវិញជាមួយ $().data('twipsy').

ការបង្ហាញ

កម្មវិធីជំនួយ popover ផ្តល់នូវចំណុចប្រទាក់សាមញ្ញមួយសម្រាប់បន្ថែម popovers ទៅក្នុងកម្មវិធីរបស់អ្នក។ វាពង្រីក កម្មវិធីជំនួយ bootstrap-twipsy.js ដូច្នេះត្រូវប្រាកដថាចាប់យកឯកសារនោះផងដែរ នៅពេលរួមបញ្ចូល popovers នៅក្នុងគម្រោងរបស់អ្នក!

សេចក្តីជូនដំណឹង អ្នកត្រូវតែបញ្ចូលឯកសារ bootstrap-twipsy.js មុនពេល bootstrap-popover.js ។

ទាញយក

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

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

ជម្រើស

ឈ្មោះ	ប្រភេទ	លំនាំដើម	ការពិពណ៌នា
ចលនា	ប៊ូលីន	ពិត	អនុវត្តការផ្លាស់ប្តូរ css បន្ថយទៅព័ត៌មានជំនួយ
ពន្យាពេលក្នុង	ចំនួន	0	ពន្យាពេលមុនពេលបង្ហាញព័ត៌មានជំនួយ (ms)
ពន្យាពេលចេញ	ចំនួន	0	ពន្យាពេលមុនពេលលាក់ព័ត៌មានជំនួយ (ms)
ធ្លាក់​ចុះ​មក​វិញ	ខ្សែអក្សរ	''	អត្ថបទដែលត្រូវប្រើនៅពេលដែលគ្មានចំណងជើងព័ត៌មានជំនួយ
ការដាក់	ខ្សែអក្សរ	'ត្រូវ'	how to position the tooltip - above | below | left | right
html	boolean	false	allows html content within tooltip
live	boolean	false	use event delegation instead of individual event handlers
offset	number	0	pixel offset of tooltip from target element
title	string, function	'title'	attribute or method for retrieving title text
content	string, function	'data-content'	a string or method for retrieving content text. if none are provided, content will be sourced from a data-content attribute.
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual
template	string	[default markup]	The html template used for rendering a popover.

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

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

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

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

.popover('hide')

Hides an elements popover.

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

Demo

hover for popover

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

Download

Using bootstrap-alerts.js

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

Markup

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

Options

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

Methods

$().alert()

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

.alert('close')

Closes an alert.

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

Demo