JavaScript
අභිරුචි jQuery ප්ලගීන දුසිමකට වඩා සමඟින් Bootstrap හි සංරචක ජීවයට ගෙන එන්න. ඒවා සියල්ලම පහසුවෙන් හෝ එකින් එක ඇතුළත් කරන්න.
අභිරුචි jQuery ප්ලගීන දුසිමකට වඩා සමඟින් Bootstrap හි සංරචක ජීවයට ගෙන එන්න. ඒවා සියල්ලම පහසුවෙන් හෝ එකින් එක ඇතුළත් කරන්න.
ප්ලගීන තනි තනිව ඇතුළත් කළ හැක (Bootstrap හි තනි *.js
ගොනු භාවිතා කරමින්), හෝ එකවර (භාවිතා bootstrap.js
හෝ minified bootstrap.min.js
).
දෙකම bootstrap.js
සහ bootstrap.min.js
එක් ගොනුවක සියලුම ප්ලගීන අඩංගු වේ. එකක් පමණක් ඇතුළත් කරන්න.
සමහර ප්ලගින සහ CSS සංරචක වෙනත් ප්ලගීන මත රඳා පවතී. ඔබ තනි තනිව ප්ලගීන ඇතුළත් කරන්නේ නම්, ලේඛනවල මෙම පරායත්තතා පරීක්ෂා කිරීමට වග බලා ගන්න. සියලුම ප්ලගීන jQuery මත රඳා පවතින බව සලකන්න (මෙයින් අදහස් වන්නේ ප්ලගින ගොනු වලට පෙර jQuery ඇතුළත් කළ යුතු බවයි). jQuery හි කුමන අනුවාද සඳහා සහය දක්වන්නේද යන්න බැලීමට අපගේ උපදෙස් ලබා ගන්න.bower.json
JavaScript එක පේළියක්වත් ලිවීමෙන් තොරව ඔබට සියලුම Bootstrap ප්ලගීන මාර්ක්අප් API හරහා භාවිතා කළ හැක. මෙය Bootstrap හි පළමු පන්තියේ API වන අතර ප්ලගිනයක් භාවිතා කරන විට ඔබේ පළමු සැලකිල්ල විය යුතුය.
එනම්, සමහර අවස්ථාවලදී මෙම ක්රියාකාරිත්වය අක්රිය කිරීම යෝග්ය විය හැකිය. එම නිසා, සමඟින් ඇති ලේඛනයේ සියලුම සිදුවීම් බන්ධනය කිරීමෙන් දත්ත උපලක්ෂණ API අක්රිය කිරීමේ හැකියාව ද අපි ලබා දෙන්නෙමු data-api
. මෙය පෙනෙන්නේ මෙසේය.
විකල්පයක් ලෙස, නිශ්චිත ප්ලගිනයක් ඉලක්ක කිරීම සඳහා, ප්ලගිනයේ නම නාම අවකාශයක් ලෙස දත්ත-api නාම අවකාශය සමඟ ඇතුළත් කරන්න:
එකම මූලද්රව්යයේ බහු ප්ලගීන වලින් දත්ත උපලක්ෂණ භාවිතා නොකරන්න. උදාහරණයක් ලෙස, බොත්තමකට මෙවලම් ඉඟියක් තිබිය නොහැක සහ මාදිලියක් ටොගල් කළ නොහැක. මෙය සිදු කිරීම සඳහා, එතීමේ මූලද්රව්යයක් භාවිතා කරන්න.
JavaScript API හරහා ඔබට සියලුම Bootstrap ප්ලගීන භාවිතා කිරීමට හැකි වනු ඇතැයි අපි විශ්වාස කරමු. සියලුම පොදු API තනි, දම්වැල් ක්රම වන අතර, ක්රියා කළ එකතුව ආපසු ලබා දෙන්න.
සියලුම ක්රම විකල්ප විකල්ප වස්තුවක්, විශේෂිත ක්රමයක් ඉලක්ක කරන තන්තුවක් හෝ කිසිවක් (පෙරනිමි හැසිරීම් සහිත ප්ලගිනයක් ආරම්භ කරන) පිළිගත යුතුය:
සෑම ප්ලගිනයක්ම එහි අමු ඉදිකිරීම්කරු Constructor
දේපලක් මත නිරාවරණය කරයි: $.fn.popover.Constructor
. ඔබ විශේෂිත ප්ලගින අවස්ථාවක් ලබා ගැනීමට කැමති නම්, එය මූලද්රව්යයකින් කෙලින්ම ලබා ගන්න: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
ප්ලගිනයේ වස්තුව වෙනස් කිරීමෙන් ඔබට ප්ලගිනයක් සඳහා පෙරනිමි සැකසුම් වෙනස් කළ හැක :
සමහර විට වෙනත් UI රාමු සමඟ Bootstrap ප්ලගීන භාවිතා කිරීම අවශ්ය වේ. මෙම තත්වයන් තුළ, නාම අවකාශයේ ගැටීම් විටින් විට සිදු විය හැක. මෙය සිදුවුවහොත්, ඔබට .noConflict
අගය ප්රතිවර්තනය කිරීමට අවශ්ය ප්ලගිනය ඇමතීමට හැකිය.
Bootstrap බොහෝ ප්ලගීනවල අද්විතීය ක්රියා සඳහා අභිරුචි සිදුවීම් සපයයි. සාමාන්යයෙන්, මේවා අසංඛ්යාත සහ අතීත කෘදන්ත ස්වරූපයකින් පැමිණේ - එහිදී show
යම් සිදුවීමක් ආරම්භයේදී අසංඛ්යාත (උදා.) ක්රියාරම්භ කරන අතර, එහි අතීත කෘදන්ත ස්වරූපය (උදා. shown
) ක්රියාවක් සම්පූර්ණ වූ විට ක්රියාරම්භ කරයි.
3.0.0 වන විට, සියලුම බූට්ස්ට්රැප් සිද්ධීන් නම් පරතරයක් ඇත.
සියලුම අනන්ත සිදුවීම් preventDefault
ක්රියාකාරීත්වය සපයයි. මෙය ක්රියාවක් ආරම්භ වීමට පෙර ක්රියාත්මක කිරීම නැවැත්වීමේ හැකියාව සපයයි.
එක් එක් Bootstrap හි jQuery ප්ලගීන වල අනුවාදය VERSION
ප්ලගිනයේ කන්ස්ට්රක්ටරයේ දේපල හරහා ප්රවේශ විය හැක. උදාහරණයක් ලෙස, මෙවලම් ඉඟි ප්ලගිනය සඳහා:
ජාවාස්ක්රිප්ට් අක්රිය කර ඇති විට බූට්ස්ට්රැප් ප්ලගීන විශේෂයෙන් අලංකාර ලෙස ආපසු නොවැටේ. ඔබ මෙම අවස්ථාවෙහි පරිශීලක අත්දැකීම ගැන සැලකිලිමත් වන්නේ නම්, <noscript>
ඔබගේ පරිශීලකයින්ට තත්වය (සහ JavaScript නැවත සක්රිය කරන්නේ කෙසේද) පැහැදිලි කිරීමට භාවිතා කරන්න, සහ/හෝ ඔබේම අභිරුචි පසුබැසීමක් එක් කරන්න.
Bootstrap නිල වශයෙන් Prototype හෝ jQuery UI වැනි තෙවන පාර්ශවීය JavaScript පුස්තකාල සඳහා සහය නොදක්වයි . සිදුවීම් තිබියදීත් .noConflict
, නම් පරතරය, ඔබ විසින්ම විසඳා ගැනීමට අවශ්ය අනුකූලතා ගැටලු තිබිය හැක.
සරල සංක්රාන්ති ප්රයෝග සඳහා, transition.js
අනෙකුත් JS ගොනු සමඟ එක් වරක් ඇතුළත් කරන්න. ඔබ සම්පාදනය කරන ලද (හෝ කුඩා කළ) භාවිතා කරන්නේ නම් bootstrap.js
, මෙය ඇතුළත් කිරීමට අවශ්ය නැත - එය දැනටමත් තිබේ.
Transition.js යනු සිදුවීම් සඳහා මූලික සහායකයක් transitionEnd
මෙන්ම CSS සංක්රාන්ති ඉමුලේටරයකි. එය CSS සංක්රාන්ති සහාය සඳහා පරීක්ෂා කිරීමට සහ එල්ලෙන සංක්රාන්ති අල්ලා ගැනීමට අනෙකුත් ප්ලගීන විසින් භාවිතා කරයි.
පහත ජාවාස්ක්රිප්ට් ස්නිපටය භාවිතයෙන් සංක්රාන්ති ගෝලීය වශයෙන් අබල කළ හැක, එය පූරණය වූ පසු transition.js
(හෝ bootstrap.js
, එසේ විය හැකි පරිදි) පැමිණිය යුතුය:bootstrap.min.js
මාදිලි විධිමත්, නමුත් නම්යශීලී, අවම අවශ්ය ක්රියාකාරීත්වය සහ ස්මාර්ට් පෙරනිමි සමඟ සංවාද විමසයි.
තවත් මොඩල් එකක් පෙනෙන අතරතුර විවෘත නොකිරීමට වග බලා ගන්න. වරකට මාදිලි එකකට වඩා පෙන්වීමට අභිරුචි කේතය අවශ්ය වේ.
මොඩලයේ පෙනුමට සහ/හෝ ක්රියාකාරීත්වයට බලපාන අනෙකුත් සංරචක වලක්වා ගැනීම සඳහා ඔබේ ලේඛනයේ ඉහළ මට්ටමේ ස්ථානයක මාදිලියේ HTML කේතයක් තැබීමට සැමවිටම උත්සාහ කරන්න.
ජංගම උපාංගවල මාදිලි භාවිතා කිරීම සම්බන්ධයෙන් යම් අනතුරු ඇඟවීම් තිබේ. විස්තර සඳහා අපගේ බ්රවුසර ආධාරක ලේඛනය බලන්න.
HTML5 එහි අර්ථ ශාස්ත්රය නිර්වචනය කරන ආකාරය හේතුවෙන්, autofocus
HTML ගුණාංගය Bootstrap modals වල බලපෑමක් නැත. එකම බලපෑම ලබා ගැනීම සඳහා, සමහර අභිරුචි JavaScript භාවිතා කරන්න:
පාදකයේ ශීර්ෂකය, ශරීරය සහ ක්රියා මාලාවක් සහිත විදැහුම්කරණ මාදිලියකි.
පහත බොත්තම ක්ලික් කිරීමෙන් JavaScript හරහා මාදිලියක් ටොගල් කරන්න. එය පහළට ලිස්සා ගොස් පිටුවේ ඉහළ සිට මැකී යනු ඇත.
මොඩල් මාතෘකාව යොමු කරමින්, වෙත , සහ role="dialog"
එයටම එකතු කිරීමට වග බලා ගන්න .aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
අතිරේකව, මත සමඟින් ඔබේ මාදිලි සංවාදයේ විස්තරයක් ලබා දිය හැක .modal
.
යූ ටියුබ් වීඩියෝ මාදිලිවල කාවැද්දීමට ස්වයංක්රීයව නැවත ධාවනය සහ තවත් දේ නැවැත්වීමට අමතර ජාවාස්ක්රිප්ට් බූට්ස්ට්රැප් තුළ අවශ්ය වේ. වැඩි විස්තර සඳහා මෙම ප්රයෝජනවත් Stack Overflow පෝස්ට් බලන්න .
මාදිලිවලට විකල්ප ප්රමාණ දෙකක් ඇත, ඒවා මත තැබීමට විකරණකාරක පන්ති හරහා ලබා ගත හැකිය .modal-dialog
.
බැලීම සඳහා මැකී යාමට වඩා සරලව පෙනෙන මාදිලි සඳහා, .fade
ඔබේ මාදිලියේ සලකුණු වලින් පන්තිය ඉවත් කරන්න.
.row
මාදිලියක් තුළ බූට්ස්ට්රැප් ජාල පද්ධතියෙන් ප්රයෝජන ගැනීමට .modal-body
, සාමාන්ය ජාල පද්ධති පන්ති භාවිතා කරන්න.
තරමක් වෙනස් අන්තර්ගතයන් සහිත එකම මාදිලිය ක්රියාරම්භ කරන බොත්තම් පොකුරක් තිබේද? ක්ලික් කළ බොත්තම මත පදනම්ව මොඩලයේ අන්තර්ගතය වෙනස් කිරීමට HTML ගුණාංග (සමහර විට jQuery හරහා ) භාවිතා කරන්න event.relatedTarget
. විස්තර සඳහා Modal Events docs බලන්න ,data-*
relatedTarget
මොඩල් ප්ලගිනය දත්ත ගුණාංග හෝ ජාවාස්ක්රිප්ට් හරහා ඔබගේ සැඟවුණු අන්තර්ගතය ඉල්ලුම මත ටොගල් කරයි. එය පෙරනිමි අනුචලන හැසිරීම ප්රතික්ෂේප කිරීම සඳහා එකතු .modal-open
කරන අතර මාදිලියෙන් පිටත ක්ලික් කිරීමේදී පෙන්වා ඇති මාදිලි ඉවත් කිරීම සඳහා ක්ලික් ප්රදේශයක් ලබා දෙයි.<body>
.modal-backdrop
ජාවාස්ක්රිප්ට් ලිවීමෙන් තොරව මොඩලයක් සක්රිය කරන්න. data-toggle="modal"
බොත්තමක් වැනි පාලක මූලද්රව්යයක් data-target="#foo"
හෝ href="#foo"
ටොගල් කිරීමට නිශ්චිත මාදිලියක් සමඟින් සකසන්න .
myModal
ජාවාස්ක්රිප්ට් එක පේළියක් සහිත හැඳුනුම්පතක් සහිත මාදිලියක් අමතන්න :
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-backdrop=""
.
නම | වර්ගය | පෙරනිමිය | විස්තර |
---|---|---|---|
පසුබිම | boolean හෝ string'static' |
සැබෑ | මාදිලි පසුබිම් මූලද්රව්යයක් ඇතුළත් වේ. විකල්පයක් ලෙස, static ක්ලික් කිරීමේදී මාදිලිය වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න. |
යතුරු පුවරුව | බූලියන් | සැබෑ | ගැලවීමේ යතුර එබූ විට මාදිලිය වසා දමයි |
පෙන්වන්න | බූලියන් | සැබෑ | ආරම්භ කළ විට මාදිලිය පෙන්වයි. |
දුරස්ථ | මාර්ගය | බොරු | මෙම විකල්පය v3.3.0 සිට අත්හරින ලද අතර v4 හි ඉවත් කර ඇත. අපි ඒ වෙනුවට සේවාදායකයා-පාර්ශවීය සැකිලි හෝ දත්ත බන්ධන රාමුවක් භාවිතා කිරීම හෝ jQuery.load ඔබම ඇමතීම නිර්දේශ කරමු. දුරස්ථ URL එකක් සපයා ඇත්නම්, අන්තර්ගතය jQuery ක්රමය හරහා එක් වරක් පූරණය කර div |
.modal(options)
ඔබේ අන්තර්ගතය මාදිලියක් ලෙස සක්රිය කරයි. විකල්ප විකල්ප පිළිගනී object
.
.modal('toggle')
මාදිලියක් අතින් ටොගල් කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modal
hidden.bs.modal
.modal('show')
මාදිලියක් අතින් විවෘත කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modal
.modal('hide')
මාදිලියක් අතින් සඟවයි. මාදිලිය සඟවා තැබීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.hidden.bs.modal
.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 මොඩලය විකල්පය භාවිතා කර අන්තර්ගතය පූරණය කර ඇති විට මෙම සිදුවීම සිදු වේ . |
navbar, tabs, සහ pills ඇතුළුව, මෙම සරල ප්ලගිනය සමඟ ඕනෑම දෙයකට පතන මෙනු එක් කරන්න.
දත්ත ගුණාංග හෝ ජාවාස්ක්රිප්ට් හරහා, පතන ප්ලගිනය .open
මාපිය ලැයිස්තු අයිතමයේ පන්තිය ටොගල් කිරීමෙන් සැඟවුණු අන්තර්ගතය (ඩ්රොප් ඩවුන් මෙනු) ටොගල් කරයි.
ජංගම උපාංගවල, පතන විවෘත කිරීම .dropdown-backdrop
මෙනුවෙන් පිටත තට්ටු කරන විට පතන මෙනු වැසීම සඳහා ටැප් ප්රදේශයක් එක් කරයි, නිසි iOS සහාය සඳහා අවශ්යතාවයකි. මෙයින් අදහස් කරන්නේ විවෘත පතන මෙනුවක සිට වෙනත් පතන මෙනුවකට මාරුවීම සඳහා ජංගම දුරකථනය මත අමතර තට්ටු කිරීමක් අවශ්ය බවයි.
සටහන: data-toggle="dropdown"
යෙදුම් මට්ටමකින් පතන මෙනු වැසීම සඳහා ගුණාංගය රඳා පවතී, එබැවින් එය සැමවිටම භාවිතා කිරීම හොඳ අදහසකි.
data-toggle="dropdown"
පතන ටොගල් කිරීමට සබැඳියකට හෝ බොත්තමකට එක් කරන්න .
සබැඳි බොත්තම් සමඟ URL නොවෙනස්ව තබා ගැනීමට, data-target
වෙනුවට ගුණාංගය භාවිතා කරන්න href="#"
.
JavaScript හරහා පතනයන් අමතන්න:
data-toggle="dropdown"
තවමත් අවශ්යයිඔබ ජාවාස්ක්රිප්ට් හරහා ඔබගේ පතන අමතා හෝ ඒ වෙනුවට ඩේටා-ඒපී භාවිතා කරන්නේද යන්න නොසලකා, data-toggle="dropdown"
පතන ප්රේරක මූලද්රව්යයේ සැමවිටම සිටීම අවශ්ය වේ.
කිසිවක් නැත
$().dropdown('toggle')
දී ඇති navbar හෝ ටැබ් කළ සංචාලනයක පතන මෙනුව ටොගල් කරයි.
.dropdown-menu
සියලුම පතන සිදුවීම් ගේ මව් මූලද්රව්ය වෙත වෙඩි තබා ඇත .
සියලුම පතන සිදුවීම් වලට relatedTarget
දේපලක් ඇත, එහි වටිනාකම ටොගල් ඇන්කර් මූලද්රව්යය වේ.
සිදුවීම් වර්ගය | විස්තර |
---|---|
show.bs.dropdown | ප්රදර්ශන අවස්ථා ක්රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
පෙන්වා ඇත.bs.dropdown | පහත වැටීම පරිශීලකයාට දෘශ්යමාන කර ඇති විට මෙම සිදුවීම ක්රියාත්මක වේ (CSS සංක්රාන්ති, සම්පූර්ණ කිරීමට බලා සිටිනු ඇත). |
hide.bs.dropdown | සඟවන අවස්ථා ක්රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
සැඟවුණු.bs.පතන | පහත වැටීම පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම වෙඩි තබා ඇත (CSS සංක්රාන්ති, සම්පූර්ණ කිරීමට බලා සිටිනු ඇත). |
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 සෞන්දර්යය. නිහිල් පච්ච කොටා ගත් චෝදනාව, විශ්වාසවන්ත උත්ප්රාසය ජෛව ඩීසල් කෙෆියේ කලාකරු උල්ලම්කෝ ප්රතිවිපාක.
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.
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.
Navbar සබැඳිවලට විසඳිය හැකි id ඉලක්ක තිබිය යුතුය. උදාහරණයක් ලෙස, <a href="#home">home</a>
DOM වැනි දෙයකට අනුරූප විය යුතුය <div id="home"></div>
.
:visible
මූලද්රව්ය නොසලකා හරින ලදී:visible
jQuery අනුව නොවන ඉලක්ක මූලද්රව්ය නොසලකා හරිනු ඇති අතර ඒවායේ අනුරූප nav අයිතම කිසි විටෙකත් උද්දීපනය නොකෙරේ.
ක්රියාත්මක කිරීමේ ක්රමය කුමක් වුවත්, scrollspy සඳහා position: relative;
ඔබ ඔත්තු බලන මූලද්රව්යය භාවිතා කිරීම අවශ්ය වේ. බොහෝ අවස්ථාවලදී මෙය වේ <body>
. හැර අනෙකුත් මූලද්රව්ය මත අනුචලන ඔත්තු බැලීමේදී , කට්ටලයක් සහ යෙදවීමට <body>
වග බලා ගන්න .height
overflow-y: scroll;
ඔබගේ topbar සංචාලනයට පහසුවෙන් scrollspy හැසිරීම එක් data-spy="scroll"
කිරීමට, ඔබට ඔත්තු බැලීමට අවශ්ය මූලද්රව්යයට එක් කරන්න (බොහෝ විට මෙය වනු ඇත <body>
). ඉන්පසු ඕනෑම Bootstrap සංරචකයක data-target
මව් මූලද්රව්යයේ ID හෝ පන්තිය සමඟ ගුණාංගය එක් කරන්න..nav
ඔබේ CSS එකතු කිරීමෙන් පසු position: relative;
, JavaScript හරහා scrollspy අමතන්න:
.scrollspy('refresh')
DOM වෙතින් මූලද්රව්ය එකතු කිරීම හෝ ඉවත් කිරීම සමඟ සම්බන්ධව scrollspy භාවිතා කරන විට, ඔබට එවැනි නැවුම් කිරීමේ ක්රමය ඇමතීමට අවශ්ය වනු ඇත:
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-offset=""
.
නම | වර්ගය | පෙරනිමිය | විස්තර |
---|---|---|---|
ඕෆ්සෙට් | අංකය | 10 | අනුචලනයේ පිහිටීම ගණනය කිරීමේදී ඉහළින් ඕෆ්සෙට් කිරීමට පික්සල. |
සිදුවීම් වර්ගය | විස්තර |
---|---|
activate.bs.scrollspy | scrollspy විසින් නව අයිතමයක් සක්රිය වන සෑම විටම මෙම සිදුවීම වෙඩි තබයි. |
පතන මෙනු හරහා පවා දේශීය අන්තර්ගතයේ කවුළු හරහා සංක්රමණය වීමට ඉක්මන්, ගතික ටැබ් ක්රියාකාරිත්වය එක් කරන්න. නෙස්ටඩ් ටැබ් සඳහා සහය නොදක්වයි.
අමු ඩෙනිම් ඔස්ටින් ජීන් කොට කලිසම ගැන ඔබ අසා නැතුව ඇති. 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
මෙම ප්ලගිනය ටැබ් කළ හැකි ප්රදේශ එක් කිරීමට ටැබ් කළ සංචාලන සංරචකය දිගු කරයි.
ජාවාස්ක්රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න (එක් එක් ටැබ් එක තනි තනිව සක්රිය කළ යුතුය):
ඔබට ක්රම කිහිපයකින් තනි ටැබ් සක්රිය කළ හැක:
data-toggle="tab"
ඔබට සරලව සඳහන් කිරීමෙන් හෝ data-toggle="pill"
මූලද්රව්යයක් මත ජාවාස්ක්රිප්ට් ලිවීමෙන් තොරව ටැබ් එකක් හෝ පෙති සංචාලනයක් සක්රිය කළ හැක . ටැබයට nav
සහ පන්ති එකතු කිරීමෙන් බූට්ස්ට්රැප් ටැබ් මෝස්තරය යෙදේ, සහ පන්ති එකතු කිරීමේදී පෙති මෝස්තරය යෙදේ .nav-tabs
ul
nav
nav-pills
ටැබ් මැකී යාමට, එක් .fade
එක් එක් කරන්න .tab-pane
. .in
පළමු ටැබ් කවුළුව මූලික අන්තර්ගතය දෘශ්යමාන කිරීමට ද තිබිය යුතුය .
$().tab
ටැබ් මූලද්රව්යයක් සහ අන්තර්ගත බහාලුමක් සක්රිය කරයි. පටිත්තෙහි DOM හි කන්ටේනර් නෝඩයක් data-target
හෝ ඉලක්ක කර තිබිය යුතුය . href
ඉහත උදාහරණවල, ටැබ් යනු ගුණාංග <a>
සහිත s වේ .data-toggle="tab"
.tab('show')
ලබා දී ඇති ටැබය තෝරා එහි සම්බන්ධිත අන්තර්ගතය පෙන්වයි. කලින් තෝරාගත් වෙනත් ටැබ් එකක් නොතේරෙන අතර එහි සම්බන්ධිත අන්තර්ගතය සැඟවී ඇත. ටැබ් කවුළුව ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.tab
නව ටැබයක් පෙන්වන විට, සිදුවීම් පහත දැක්වෙන අනුපිළිවෙලින් සිදු වේ:
hide.bs.tab
(වත්මන් සක්රිය ටැබය මත)show.bs.tab
(පෙන්වීමට ඇති ටැබය මත)hidden.bs.tab
(පෙර සක්රිය පටිත්තෙහි, hide.bs.tab
සිදුවීමට සමාන එකක්)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 |
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. ඇත්ත වශයෙන්ම උත්ප්රාසාත්මක ශිල්පියෙක් ඕනෑම කීටාර් , සීන්ස්ටර් ෆාම්-ටු-ටේබල් බෑන්ක්සි ඔස්ටින් ට්විටර් හැන්ඩ්ල් ෆ්රීගන් ක්රෙඩ් අමු ඩෙනිම් තනි සම්භවයක් ඇති කෝපි වෛරස්.
විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.
කාර්ය සාධන හේතූන් මත, Tooltip සහ Popover දත්ත-apis තෝරාගෙන ඇත, එනම් ඔබ ඒවා ඔබම ආරම්භ කළ යුතුය .
පිටුවක සියලුම මෙවලම් ඉඟි ආරම්භ කිරීමට එක් ක්රමයක් වනුයේ ඒවායේ data-toggle
ගුණාංගය අනුව ඒවා තෝරාගැනීමයි:
මෙවලම් ඉඟි ප්ලගිනය ඉල්ලුම මත අන්තර්ගතය සහ සලකුණු උත්පාදනය කරයි, සහ පෙරනිමියෙන් මෙවලම් ඉඟි ඒවායේ ප්රේරක මූලද්රව්යයට පසුව තබයි.
JavaScript හරහා මෙවලම් ඉඟිය ක්රියාරම්භ කරන්න:
මෙවලම් ඉඟියක් සඳහා අවශ්ය සලකුණු කිරීම විශේෂණයක් පමණක් වන අතර data
HTML title
මූලද්රව්ය මත ඔබට මෙවලම් ඉඟියක් තිබිය යුතුය. මෙවලම් ඉඟියක උත්පාදනය කරන ලද සලකුණු කිරීම තරමක් සරල ය, නමුත් එයට ස්ථානයක් අවශ්ය වේ (පෙරනිමියෙන්, top
ප්ලගිනය මගින් සකසා ඇත).
සමහර විට ඔබට රේඛා කිහිපයක් ඔතා ඇති අධි සබැඳියකට මෙවලම් ඉඟියක් එක් කිරීමට අවශ්ය වේ. මෙවලම් ඉඟි ප්ලගිනයේ පෙරනිමි හැසිරීම එය තිරස් අතට සහ සිරස් අතට කේන්ද්රගත කිරීමයි. white-space: nowrap;
මෙය වළක්වා ගැනීම සඳහා ඔබේ නැංගුරම් වලට එක් කරන්න .
.btn-group
a හෝ a තුළ ඇති මූලද්රව්ය මත .input-group
හෝ වගු ආශ්රිත මූලද්රව්ය ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) මත මෙවලම් ඉඟි භාවිතා කරන විට, ඔබට container: 'body'
අනවශ්ය අතුරු ආබාධ වළක්වා ගැනීමට විකල්පය (පහත ලේඛනගත කර ඇති) සඳහන් කිරීමට සිදු වනු ඇත (මූලද්රව්යය පුළුල් ලෙස වර්ධනය වීම සහ/ හෝ මෙවලම් ඉඟිය ක්රියාත්මක වන විට එහි වටකුරු කොන් අහිමි වීම).
යතුරුපුවරුවකින් සංචාලනය කරන පරිශීලකයින් සඳහා සහ විශේෂයෙන් සහායක තාක්ෂණයන් භාවිතා කරන්නන් සඳහා, ඔබ සබැඳි, පෝරම පාලන, හෝ ගුණාංගයක් සහිත ඕනෑම අත්තනෝමතික මූලද්රව්ය වැනි යතුරුපුවරුව කේන්ද්රගත කළ හැකි මූලද්රව්ය වෙත මෙවලම් ඉඟි පමණක් එක් කළ යුතුය tabindex="0"
.
යම් disabled
හෝ .disabled
මූලද්රව්යයකට මෙවලම් ඉඟියක් එක් කිරීමට, මූලද්රව්යය a තුළට දමා ඒ වෙනුවට <div>
මෙවලම් ඉඟිය යොදන්න .<div>
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-animation=""
.
නම | ටයිප් කරන්න | පෙරනිමිය | විස්තර |
---|---|---|---|
සජීවීකරණය | බූලියන් | සැබෑ | මෙවලම් ඉඟියට CSS ෆේඩ් සංක්රාන්තියක් යොදන්න |
බහාලුම් | තන්තුව | බොරු | බොරු | විශේෂිත මූලද්රව්යයකට මෙවලම් ඉඟිය එක් කරයි. උදාහරණය |
ප්රමාදය | අංකය | වස්තුව | 0 | මෙවලම් ඉඟිය (ms) පෙන්වීම සහ සැඟවීම ප්රමාද කිරීම - අතින් ප්රේරක වර්ගයට අදාළ නොවේ අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්රමාදය යෙදේ වස්තු ව්යුහය යනු: |
html | බූලියන් | බොරු | මෙවලම් ඉඟියට HTML ඇතුළු කරන්න. අසත්ය නම්, text DOM වෙත අන්තර්ගතය ඇතුළු කිරීමට jQuery හි ක්රමය භාවිතා කරනු ඇත. ඔබ XSS ප්රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න. |
ස්ථානගත කිරීම | තන්තුව | කාර්යය | 'ඉහළ' | මෙවලම් ඉඟිය ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි | ස්වයංක්රීය. ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්රිතයක් භාවිතා කරන විට, එය මෙවලම් ඉඟි DOM නෝඩය එහි පළමු තර්කය ලෙසත්, ප්රේරක මූලද්රව්ය DOM නෝඩය එහි දෙවැන්න ලෙසත් හැඳින්වේ. සන්දර්භය මෙවලම් ඉඟි අවස්ථාවට |
තේරීම්කරු | නූල් | බොරු | තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ. ප්රායෝගිකව, මෙය භාවිතා කරන්නේ ගතික HTML අන්තර්ගතයන් මෙවලම් ඉඟි එකතු කිරීමට සක්රීය කිරීමටයි. මෙය සහ තොරතුරු සහිත උදාහරණයක් බලන්න . |
සැකිල්ල | නූල් | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
මෙවලම් ඉඟිය සෑදීමේදී භාවිතා කිරීමට මූලික HTML. මෙවලම් ඉඟිය
පිටතම දවටන මූලද්රව්යයේ |
ශීර්ෂය | තන්තුව | කාර්යය | '' |
ශ්රිතයක් ලබා දෙන්නේ නම්, එය |
අවුලුවාලීම | නූල් | 'හවර් ෆෝකස්' | මෙවලම් ඉඟිය අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබට ප්රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න. manual වෙනත් ප්රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක. |
viewport | තන්තුව | වස්තුව | කාර්යය | {තේරීම: 'ශරීරය', පිරවුම: 0 } | මෙවලම් ඉඟිය මෙම මූලද්රව්යයේ සීමාවන් තුළ තබා ගනී. උදාහරණය: ශ්රිතයක් ලබා දෙන්නේ නම්, එය ප්රේරක මූලද්රව්ය DOM නෝඩය එහි එකම තර්කය ලෙස හැඳින්වේ. සන්දර්භය මෙවලම් ඉඟි අවස්ථාවට |
ඉහත පැහැදිලි කර ඇති පරිදි, දත්ත උපලක්ෂණ භාවිතයෙන්, තනි මෙවලම් ඉඟි සඳහා විකල්ප විකල්ප වශයෙන් සඳහන් කළ හැක.
$().tooltip(options)
මූලද්රව්ය එකතුවකට මෙවලම් ඉඟි හසුරුවන්නක් අමුණන්න.
.tooltip('show')
මූලද්රව්යයක මෙවලම් ඉඟියක් හෙළි කරයි. මෙවලම් ඉඟිය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. shown.bs.tooltip
මෙය මෙවලම් ඉඟියේ "අත්පොත" ප්රේරකයක් ලෙස සැලකේ. ශුන්ය-දිග මාතෘකා සහිත මෙවලම් ඉඟි කිසිවිටෙක නොපෙන්වයි.
.tooltip('hide')
මූලද්රව්යයක මෙවලම් ඉඟිය සඟවයි. මෙවලම් ඉඟිය සැබවින්ම සැඟවීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. hidden.bs.tooltip
මෙය මෙවලම් ඉඟියේ "අත්පොත" ප්රේරකයක් ලෙස සැලකේ.
.tooltip('toggle')
මූලද්රව්යයක මෙවලම් ඉඟිය ටොගල් කරයි. මෙවලම් ඉඟිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීමට හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. මෙය මෙවලම් ඉඟියේ "අත්පොත" ප්රේරකයක් ලෙස සැලකේ.shown.bs.tooltip
hidden.bs.tooltip
.tooltip('destroy')
මූලද්රව්යයක මෙවලම් ඉඟිය සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන මෙවලම් ඉඟි ( විකල්පය භාවිතයෙන් සාදනු ලැබේ )selector
පැවත එන ප්රේරක මූලද්රව්ය මත තනි තනිව විනාශ කළ නොහැක.
සිදුවීම් වර්ගය | විස්තර |
---|---|
show.bs.tooltip | show නිදසුන් ක්රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
පෙන්වා ඇත.bs.tooltip | මෙවලම් ඉඟිය පරිශීලකයාට දෘශ්යමාන කර ඇති විට මෙම සිදුවීම ක්රියාත්මක වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
hide.bs.tooltip | hide නිදසුන් ක්රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
සැඟවුණු.bs.උපකරණ ඉඟිය | මෙවලම් ඉඟිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
inserted.bs.tooltip | show.bs.tooltip මෙවලම් ඉඟි අච්චුව DOM වෙත එක් කළ විට මෙම සිදුවීම සිදුවීමෙන් පසුව සිදු කෙරේ . |
නිවාස ද්විතීයික තොරතුරු සඳහා ඕනෑම මූලද්රව්යයකට අයිපෑඩ් වැනි අන්තර්ගතවල කුඩා ආවරණ එක් කරන්න.
මාතෘකාව සහ අන්තර්ගතය ශුන්ය-දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.
Popovers සඳහා මෙවලම් ඉඟි ප්ලගිනය ඔබේ Bootstrap අනුවාදයට ඇතුළත් කිරීමට අවශ්ය වේ.
කාර්ය සාධන හේතූන් මත, Tooltip සහ Popover දත්ත-apis තෝරාගෙන ඇත, එනම් ඔබ ඒවා ඔබම ආරම්භ කළ යුතුය .
පිටුවක ඇති සියලුම popovers ආරම්භ කිරීමට එක් ක්රමයක් වනුයේ ඒවායේ data-toggle
ගුණාංගය අනුව ඒවා තෝරාගැනීමයි:
.btn-group
a හෝ a තුළ ඇති මූලද්රව්ය මත popovers භාවිතා කරන විට .input-group
හෝ වගු ආශ්රිත මූලද්රව්ය ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) මත අනවශ්ය අතුරු ආබාධ වළක්වා ගැනීමට (පහත ලේඛනගත කර ඇති) විකල්පය සඳහන් කිරීමට සිදු වනු ඇත container: 'body'
(මූලද්රව්යය පුළුල් ලෙස වර්ධනය වීම සහ/ හෝ popover අවුලුවන විට එහි වටකුරු කොන් අහිමි වීම).
disabled
යම් මූලද්රව්යයකට හෝ මූලද්රව්යයකට popover එකක් එක් කිරීමට .disabled
, මූලද්රව්යය a තුළට දමා <div>
එයට popover යොදන්න<div>
ඒ වෙනුවට
සමහර විට ඔබට පේළි කිහිපයක් ඔතා ඇති හයිපර්ලින්ක් එකකට පොපෝවර් එකක් එක් කිරීමට අවශ්ය වේ. popover ප්ලගිනයේ පෙරනිමි හැසිරීම එය තිරස් අතට සහ සිරස් අතට මධ්යගත කිරීමයි. white-space: nowrap;
මෙය වළක්වා ගැනීම සඳහා ඔබේ නැංගුරම් වලට එක් කරන්න .
විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.
ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. 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.
ලොබෝර්ටිස් හි සෙඩ් පොස්යුරේ කොන්සෙක්ටේටර් එස්ට්. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
focus
පරිශීලකයා කරන ඊළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්රේරකය භාවිතා කරන්න .
නිසි හරස් බ්රවුසරය සහ හරස් වේදිකා හැසිරීම සඳහා, ඔබ ටැගය භාවිතා කළ යුතුය, ටැගය<a>
භාවිතා කළ යුතු අතර , ඔබ සහ ගුණාංග ද ඇතුළත් කළ යුතුය .<button>
role="button"
tabindex
JavaScript හරහා popovers සබල කරන්න:
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-animation=""
.
නම | ටයිප් කරන්න | පෙරනිමිය | විස්තර |
---|---|---|---|
සජීවීකරණය | බූලියන් | සැබෑ | Popover වෙත CSS ෆේඩ් සංක්රාන්තියක් යොදන්න |
බහාලුම් | තන්තුව | බොරු | බොරු | විශේෂිත මූලද්රව්යයකට popover එකතු කරයි. උදාහරණය |
අන්තර්ගතය | තන්තුව | කාර්යය | '' |
ශ්රිතයක් ලබා දෙන්නේ නම්, එය |
ප්රමාදය | අංකය | වස්තුව | 0 | popover (ms) පෙන්වීම සහ සැඟවීම ප්රමාද කිරීම - අතින් ප්රේරක වර්ගයට අදාළ නොවේ අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්රමාදය යෙදේ වස්තු ව්යුහය යනු: |
html | බූලියන් | බොරු | popover වෙත HTML ඇතුළු කරන්න. අසත්ය නම්, text DOM වෙත අන්තර්ගතය ඇතුළු කිරීමට jQuery හි ක්රමය භාවිතා කරනු ඇත. ඔබ XSS ප්රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න. |
ස්ථානගත කිරීම | තන්තුව | කාර්යය | 'හරි' | popover ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි | ස්වයංක්රීය. ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්රිතයක් භාවිතා කරන විට, එය එහි පළමු තර්කය ලෙස popover DOM නෝඩය සහ ප්රේරක මූලද්රව්ය DOM නෝඩය එහි දෙවැන්න ලෙස හැඳින්වේ. |
තේරීම්කරු | නූල් | බොරු | තේරීම්කාරකයක් සපයා තිබේ නම්, 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. පොපෝවර් පොපෝවර්
පිටතම දවටන මූලද්රව්යයේ |
ශීර්ෂය | තන්තුව | කාර්යය | '' |
ශ්රිතයක් ලබා දෙන්නේ නම්, එය |
අවුලුවාලීම | නූල් | 'ක්ලික් කරන්න' | popover අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබට ප්රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න. manual වෙනත් ප්රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක. |
viewport | තන්තුව | වස්තුව | කාර්යය | {තේරීම: 'ශරීරය', පිරවුම: 0 } | මෙම මූලද්රව්යයේ සීමාවන් තුළ පොපෝවර් තබා ගනී. උදාහරණය: ශ්රිතයක් ලබා දෙන්නේ නම්, එය ප්රේරක මූලද්රව්ය DOM නෝඩය එහි එකම තර්කය ලෙස හැඳින්වේ. |
ඉහත පැහැදිලි කර ඇති පරිදි, තනි පුද්ගල popovers සඳහා විකල්ප විකල්ප වශයෙන් දත්ත ගුණාංග භාවිතයෙන් නියම කළ හැක.
$().popover(options)
මූලද්රව්ය එකතුවක් සඳහා popover ආරම්භ කරයි.
.popover('show')
මූලද්රව්යයක පොපෝවර් හෙළි කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් shown.bs.popover
සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්රේරකයක් ලෙස සැලකේ. මාතෘකාව සහ අන්තර්ගතය ශුන්ය-දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.
.popover('hide')
මූලද්රව්යයක පොපෝවර් සඟවයි. popover ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් hidden.bs.popover
සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්රේරකයක් ලෙස සැලකේ.
.popover('toggle')
මූලද්රව්යයක popover ටොගල් කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම shown.bs.popover
හෝ සිදුවීමට පෙර hidden.bs.popover
) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" ප්රේරකයක් ලෙස සැලකේ.
.popover('destroy')
මූලද්රව්යයක පොපෝවර් සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන Popovers ( විකල්පය භාවිතයෙන් සාදනු ලබනselector
) පැවත එන ප්රේරක මූලද්රව්ය මත තනි තනිව විනාශ කළ නොහැක.
සිදුවීම් වර්ගය | විස්තර |
---|---|
show.bs.popover | show නිදසුන් ක්රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
පෙන්වා ඇත.bs.popover | popover පරිශීලකයාට දෘශ්යමාන කළ විට මෙම සිදුවීම ක්රියාත්මක වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
hide.bs.popover | hide නිදසුන් ක්රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
සැඟවුණු.bs.popover | popover පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
ඇතුල් කරන ලදී.bs.popover | මෙම සිදුවීම show.bs.popover DOM වෙත popover අච්චුව එක් කළ විට සිදුවීමෙන් පසුව සිදු කෙරේ. |
මෙම ප්ලගිනය සමඟින් සියලුම අනතුරු ඇඟවීමේ පණිවිඩ සඳහා ඉවත් කිරීමේ ක්රියාකාරිත්වය එක් කරන්න.
බොත්තමක් භාවිතා කරන විට .close
, එය පළමු දරුවා විය යුතු අතර .alert-dismissible
සලකුණු කිරීමේදී කිසිදු පෙළ අන්තර්ගතයක් එයට පෙර නොපැමිණේ.
මේකයි ඒකයි වෙනස් කරලා නැවත උත්සහ කරන්න. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
අනතුරු ඇඟවීමේ සමීප ක්රියාකාරීත්වයක් ස්වයංක්රීයව ලබා දීමට ඔබගේ වසන්න බොත්තමට එක් කරන්න. අනතුරු ඇඟවීමක් වැසීමෙන් එය DOM වෙතින් ඉවත් කරයි.
ඔබගේ ඇඟවීම් වසා දැමීමේදී සජීවිකරණය භාවිතා කිරීමට, ඒවා දැනටමත් ඒවාට අදාළ කර ඇති බව සහතික කර .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 සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
බොත්තම් සමඟ තවත් කරන්න. පාලන බොත්තම සඳහන් කරයි හෝ මෙවලම් තීරු වැනි තවත් සංරචක සඳහා බොත්තම් කණ්ඩායම් සාදන්න.
ෆයර්ෆොක්ස් පිටු පැටවීම් හරහා ආකෘති පාලන තත්වයන් (ආබාධිත බව සහ පරීක්ෂා කිරීම) දිගටම පවතී . මේ සඳහා විසඳුමක් භාවිතා කිරීමයි autocomplete="off"
. Mozilla bug #654072 බලන්න .
data-loading-text="Loading..."
බොත්තමක් මත පැටවීමේ තත්වයක් භාවිතා කිරීමට එක් කරන්න .
මෙම විශේෂාංගය v3.3.5 සිට අත්හරින ලද අතර v4 තුළ ඉවත් කර ඇත.
මෙම නිදර්ශනය සඳහා, අපි භාවිතා කරන්නේ data-loading-text
සහ $().button('loading')
, නමුත් ඔබට භාවිතා කළ හැකි එකම තත්වය එය නොවේ. මේ පිළිබඳ වැඩි විස්තර පහත $().button(string)
ලේඛනයෙන් බලන්න .
data-toggle="button"
තනි බොත්තමක් මත ටොගල කිරීම සක්රිය කිරීමට එක් කරන්න .
.active
සහaria-pressed="true"
පෙර-ටොගල් බොත්තම් සඳහා, ඔබ විසින්ම .active
පන්තිය සහ aria-pressed="true"
ගුණාංගය එක් කළ යුතුය button
.
data-toggle="buttons"
ඒවායේ අදාළ මෝස්තරවල ටොගල් කිරීම සබල කිරීමට .btn-group
අඩංගු පිරික්සුම් පෙට්ටියකට හෝ රේඩියෝ ආදානවලට එක් කරන්න .
.active
කලින් තෝරාගත් විකල්ප සඳහා, ඔබ විසින්ම .active
ආදානයට පන්තිය එක් කළ යුතුය label
.
තේරීම් කොටු බොත්තමක පිරික්සුම් කළ තත්ත්වය බොත්තම click
මත සිදුවීමක් සිදු නොකර යාවත්කාලීන කර ඇත්නම් (උදා: ආදානයේ ගුණය <input type="reset">
සැකසීම හරහා හෝ හරහා ), ඔබ විසින්ම ආදානයේ පන්තිය checked
ටොගල් කිරීමට අවශ්ය වනු ඇත ..active
label
$().button('toggle')
තල්ලු තත්ත්වය ටොගල් කරයි. බොත්තමට එය සක්රිය කර ඇති පෙනුමක් ලබා දෙයි.
$().button('reset')
බොත්තම් තත්ත්වය යළි සකසයි - පෙළ මුල් පෙළට මාරු කරයි. මෙම ක්රමය අසමමුහුර්ත වන අතර යළි පිහිටුවීම ඇත්ත වශයෙන්ම සම්පූර්ණ වීමට පෙර ආපසු පැමිණේ.
$().button(string)
ඕනෑම දත්ත නිර්වචනය කළ පෙළ තත්ත්වයකට පෙළ මාරු කරයි.
පහසු ටොගල් හැසිරීම සඳහා පන්ති අතලොස්සක් භාවිතා කරන නම්යශීලී ප්ලගිනය.
හැකිලීමට සංක්රාන්ති ප්ලගිනය ඔබේ Bootstrap අනුවාදයට ඇතුළත් කිරීම අවශ්ය වේ.
පන්ති වෙනස්කම් හරහා වෙනත් අංගයක් පෙන්වීමට සහ සැඟවීමට පහත බොත්තම් ක්ලික් කරන්න:
.collapse
අන්තර්ගතය සඟවයි.collapsing
මාරුවීම් වලදී යොදනු ලැබේ.collapse.in
අන්තර්ගතය පෙන්වයිඔබට ගුණාංගය සමඟ සබැඳියක් href
හෝ ගුණාංගය සහිත බොත්තමක් භාවිතා කළ හැකිය data-target
. අවස්ථා දෙකේදීම, data-toggle="collapse"
එය අවශ්ය වේ.
පැනල සංරචකය සමඟ එකෝඩියන් එකක් සෑදීමට පෙරනිමි බිඳවැටීමේ හැසිරීම දිගු කරන්න.
.panel-body
s සමඟ s මාරු කිරීමට ද හැකිය .list-group
.
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 හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-parent=""
.
නම | වර්ගය | පෙරනිමිය | විස්තර |
---|---|---|---|
දෙමාපියන් | තේරීම්කරු | බොරු | තේරීම් කාරකයක් සපයා තිබේ නම්, මෙම කඩා වැටිය හැකි අයිතමය පෙන්වන විට සඳහන් කරන ලද මාපිය යටතේ ඇති සියලුම කඩා වැටිය හැකි මූලද්රව්ය වසා දමනු ඇත. (සාම්ප්රදායික ඇකෝනියන් හැසිරීමට සමානයි - මෙය panel පන්තිය මත රඳා පවතී) |
ටොගල් කරන්න | බූලියන් | සැබෑ | ආමන්ත්රණයේදී කඩාහැලෙන මූලද්රව්යය ටොගල් කරයි |
.collapse(options)
ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්රව්යයක් ලෙස සක්රිය කරයි. විකල්ප විකල්ප පිළිගනී object
.
.collapse('toggle')
හකුළ හැකි මූලද්රව්යයක් පෙන්වීමට හෝ සැඟවීමට ටොගල් කරයි. බිඳ වැටිය හැකි මූලද්රව්යය සත්ය වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapse
hidden.bs.collapse
.collapse('show')
කඩා වැටෙන මූලද්රව්යයක් පෙන්වයි. බිඳ වැටිය හැකි මූලද්රව්යය ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.collapse
.collapse('hide')
කඩා වැටෙන මූලද්රව්ය සඟවයි. බිඳ වැටිය හැකි මූලද්රව්යය ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.hidden.bs.collapse
Bootstrap හි කඩා වැටීමේ පන්තිය බිඳ වැටීමේ ක්රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.
සිදුවීම් වර්ගය | විස්තර |
---|---|
show.bs. කඩා වැටීම | show නිදසුන් ක්රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
පෙන්වා ඇත.bs. කඩා වැටීම | බිඳවැටීමේ මූලද්රව්යයක් පරිශීලකයාට දෘශ්යමාන කර ඇති විට මෙම සිදුවීම ක්රියාත්මක වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
hide.bs.collapse | hide ක්රමවේදය කැඳවා ඇති විට මෙම සිද්ධිය වහාම වෙඩි තබා ඇත. |
සැඟවුණු.bs.කඩා වැටීම | බිඳවැටීමේ මූලද්රව්යයක් පරිශීලකයාගෙන් සඟවා ඇති විට මෙම සිදුවීම පුපුරවා හරිනු ලැබේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
කැරොසල් වැනි මූලද්රව්ය හරහා බයිසිකල් පැදීම සඳහා විනිවිදක දර්ශන සංරචකයකි. කැදලි කැරොසල් සඳහා සහය නොදක්වයි.
කැරොසල් සංරචකය සාමාන්යයෙන් ප්රවේශ්යතා ප්රමිතීන්ට අනුකූල නොවේ. ඔබට අනුකූල වීමට අවශ්ය නම්, කරුණාකර ඔබේ අන්තර්ගතය ඉදිරිපත් කිරීම සඳහා වෙනත් විකල්ප සලකා බලන්න.
Bootstrap එහි සජීවිකරණ සඳහා CSS3 පමණක් භාවිතා කරයි, නමුත් Internet Explorer 8 සහ 9 අවශ්ය CSS ගුණාංග සඳහා සහය නොදක්වයි. මේ අනුව, මෙම බ්රව්සර් භාවිතා කරන විට විනිවිදක සංක්රාන්ති සජීවිකරණ නොමැත. සංක්රාන්ති සඳහා jQuery මත පදනම් වූ වැටීම් ඇතුළත් නොකිරීමට අපි හිතාමතාම තීරණය කර ඇත්තෙමු.
පන්තිය එක් .active
විනිවිදකයකට එකතු කළ යුතුය. එසේ නොමැති නම්, කැරොසල් නොපෙනේ.
පාලනය සඳහා .glyphicon .glyphicon-chevron-left
සහ .glyphicon .glyphicon-chevron-right
පන්ති අවශ්යයෙන්ම අවශ්ය නොවේ. Bootstrap සරල යුනිකෝඩ් විකල්ප ලෙස .icon-prev
සපයයි ..icon-next
.carousel-caption
ඕනෑම එකක් තුළ ඇති මූලද්රව්ය සමඟින් ඔබේ විනිවිදකවලට සිරස්තල එක් කරන්න .item
. එහි ඇතුළත ඕනෑම විකල්ප HTML පමණ තබන්න, එය ස්වයංක්රීයව පෙළගස්වා හැඩතල ගන්වනු ඇත.
කැරොසල් පාලනය නිසියාකාරව ක්රියාත්මක වීමට කැරොසල් වලට id
පිටතම ඇති බහාලුමක් (ද ) භාවිතා කිරීම අවශ්ය වේ . .carousel
කැරොසල් කිහිපයක් එකතු කරන විට හෝ කැරොසල් වෙනස් කිරීමේදී id
අදාළ පාලන යාවත්කාලීන කිරීමට වග බලා ගන්න.
කැරූසලයේ පිහිටීම පහසුවෙන් පාලනය කිරීමට දත්ත ගුණාංග භාවිතා කරන්න. data-slide
මූල පද පිළිගනී prev
හෝ next
, එහි වත්මන් ස්ථානයට සාපේක්ෂව විනිවිදක ස්ථානය වෙනස් කරයි. විකල්පයක් ලෙස, data-slide-to
raw slide index එකක් carousel වෙත යැවීමට භාවිතා කරන්න data-slide-to="2"
, එය Slide ස්ථානය ආරම්භ වන විශේෂිත දර්ශකයකට මාරු කරයි 0
.
පිටු data-ride="carousel"
පූරණයෙන් ආරම්භ වන කැරොසල් සජීවීකරණයක් ලෙස සලකුණු කිරීමට උපලක්ෂණ භාවිතා වේ. එය එකම කැරූසලයේ (අතිරික්ත සහ අනවශ්ය) පැහැදිලි ජාවාස්ක්රිප්ට් ආරම්භ කිරීම සමඟ ඒකාබද්ධව භාවිතා කළ නොහැක.
කැරූසල් හස්තීයව අමතන්න:
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-interval=""
.
නම | වර්ගය | පෙරනිමිය | විස්තර |
---|---|---|---|
පරතරය | අංකය | 5000 | අයිතමයක් ස්වයංක්රීයව බයිසිකල් පැදීම අතර ප්රමාද විය යුතු කාලය. අසත්ය නම්, කැරොසල් ස්වයංක්රීයව චක්රීය නොවේ. |
විරාමයක් | තන්තුව | null | "හවර්" | ලෙස සකසා ඇත්නම් "hover" , කැරොසලයේ බයිසිකල් පැදීම විරාමයක් තබා කැරූසලයේ බයිසිකල් mouseenter පැදීම නැවත ආරම්භ කරයි mouseleave . ලෙස සකසා ඇත්නම් null , කැරොසල් මත සැරිසැරීමෙන් එය විරාමයක් නැත. |
එතුම | බූලියන් | සැබෑ | කැරොසලය අඛණ්ඩව චක්රීය කළ යුතුද නැතහොත් දැඩි නැවතුම් තිබේද යන්න. |
යතුරු පුවරුව | බූලියන් | සැබෑ | කැරොසල් යතුරුපුවරු සිදුවීම්වලට ප්රතිචාර දැක්විය යුතුද යන්න. |
.carousel(options)
විකල්ප විකල්ප සමඟ කැරොසල් object
ආරම්භ කර අයිතම හරහා බයිසිකල් පැදීම ආරම්භ කරයි.
.carousel('cycle')
කැරොසල් අයිතම හරහා වමේ සිට දකුණට චක්රීය කරයි.
.carousel('pause')
අයිතම හරහා බයිසිකල් පැදීමෙන් කැරොසල් නවත්වයි.
.carousel(number)
විශේෂිත රාමුවකට කැරොසල් චක්රීය කරයි (0 පදනම්, අරාවකට සමාන).
.carousel('prev')
පෙර අයිතමයට සයිකල්.
.carousel('next')
ඊළඟ අයිතමයට සයිකල්.
Bootstrap's carousel පන්තිය කැරූසල් ක්රියාකාරීත්වයට සම්බන්ධ කිරීම සඳහා සිදුවීම් දෙකක් හෙලිදරව් කරයි.
සිදුවීම් දෙකටම පහත අමතර ගුණාංග ඇත:
direction
: කැරොසල් ලිස්සා යන දිශාව (එක්කෝ "left"
හෝ "right"
).relatedTarget
: DOM මූලද්රව්යය සක්රිය අයිතමය ලෙස ස්ථානගත වෙමින් පවතී.සියලුම කැරොසල් සිදුවීම් කැරූසල් වෙතම (එනම් හිදී <div class="carousel">
) වෙඩි තබා ඇත.
සිදුවීම් වර්ගය | විස්තර |
---|---|
slide.bs.carousel | slide නිදසුන් ක්රමය ක්රියාත්මක කළ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
slid.bs.carousel | කැරොසල් එහි ස්ලයිඩ සංක්රාන්තිය සම්පූර්ණ කළ විට මෙම සිදුවීම වෙඩි තබා ඇත. |
position: fixed;
සමඟින් සොයාගත් බලපෑම අනුකරණය කරමින්, affix ප්ලගිනය සක්රිය සහ අක්රිය position: sticky;
වේ. දකුණු පස ඇති උප සංචලනය ඇෆික්ස් ප්ලගිනයේ සජීවී ආදර්ශනයකි.
දත්ත ගුණාංග හරහා හෝ ඔබේම ජාවාස්ක්රිප්ට් සමඟින් affix ප්ලගිනය භාවිතා කරන්න. අවස්ථා දෙකේදීම, ඔබ ඔබේ ඇලවූ අන්තර්ගතයේ ස්ථානගත කිරීම සහ පළල සඳහා CSS සැපයිය යුතුය.
සටහන: Safari විදැහුම්කරණ දෝෂයක් හේතුවෙන්, ඇදගත් හෝ තල්ලු කරන ලද තීරුවක් වැනි සාපේක්ෂ වශයෙන් ස්ථානගත කර ඇති මූලද්රව්යයක අඩංගු මූලද්රව්යයක් මත affix ප්ලගිනය භාවිතා නොකරන්න .
ඇෆික්ස් ප්ලගිනය පන්ති තුනක් අතර ටොගල් කරයි, එක් එක් විශේෂිත රාජ්යයක් නියෝජනය කරයි: .affix
, .affix-top
, සහ .affix-bottom
. ඔබ විසින්ම මෙම පන්ති සඳහා (මෙම ප්ලගිනයෙන් ස්වාධීනව) සත්ය තනතුරු හැසිරවීමට, position: fixed;
on හැර, මෝස්තර සැපයිය යුතුය ..affix
ඇෆික්ස් ප්ලගිනය ක්රියා කරන ආකාරය මෙන්න:
.affix-top
ආරම්භ කිරීමට, මූලද්රව්යය එහි ඉහළම ස්ථානයේ ඇති බව දැක්වීමට ප්ලගිනය එක් කරයි . මෙම අවස්ථාවේදී CSS ස්ථානගත කිරීම අවශ්ය නොවේ..affix
ප්රතිස්ථාපන .affix-top
සහ සකසන position: fixed;
(Bootstrap හි CSS මගින් සපයනු ලබන්නේ) මෙයයි ..affix
යුතුය .affix-bottom
. ඕෆ්සෙට් විකල්ප නොවන බැවින්, එකක් සැකසීමට ඔබට සුදුසු CSS සැකසීම අවශ්ය වේ. මෙම අවස්ථාවේදී, position: absolute;
අවශ්ය විට එකතු කරන්න. ප්ලගිනය එහි සිට මූලද්රව්යය ස්ථානගත කළ යුත්තේ කොතැනද යන්න තීරණය කිරීමට දත්ත උපලක්ෂණ හෝ JavaScript විකල්පය භාවිතා කරයි.පහත භාවිත විකල්ප දෙකෙන් එකක් සඳහා ඔබේ CSS සැකසීමට ඉහත පියවර අනුගමනය කරන්න.
ඕනෑම මූලද්රව්යයකට affix හැසිරීම පහසුවෙන් එක් කිරීමට data-spy="affix"
, ඔබට ඔත්තු බැලීමට අවශ්ය මූලද්රව්යයට එක් කරන්න. මූලද්රව්යයක් ඇමිණීම ටොගල් කළ යුත්තේ කවදාද යන්න නිර්වචනය කිරීමට ඕෆ්සෙට් භාවිත කරන්න.
JavaScript හරහා affix ප්ලගිනය අමතන්න:
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-offset-top="200"
.
නම | වර්ගය | පෙරනිමිය | විස්තර |
---|---|---|---|
ඕෆ්සෙට් | අංකය | කාර්යය | වස්තුව | 10 | අනුචලන ස්ථානය ගණනය කිරීමේදී තිරයෙන් ඕෆ්සෙට් කිරීමට පික්සල. තනි අංකයක් සපයා ඇත්නම්, ඕෆ්සෙට් ඉහළ සහ පහළ යන දෙපසම යෙදේ. අද්විතීය, පහළ සහ ඉහළ ඕෆ්සෙට් සැපයීමට වස්තුවක් offset: { top: 10 } හෝ offset: { top: 10, bottom: 5 } . ඔබට ඕෆ්සෙට් එකක් ගතිකව ගණනය කිරීමට අවශ්ය වූ විට ශ්රිතයක් භාවිතා කරන්න. |
ඉලක්කය | තේරීම්කරු | නෝඩය | jQuery මූලද්රව්යය | window වස්තුව _ |
ඇලවීමේ ඉලක්ක මූලද්රව්යය සඳහන් කරයි. |
.affix(options)
ඔබගේ අන්තර්ගතය ඇලවූ අන්තර්ගතයක් ලෙස සක්රිය කරයි. විකල්ප විකල්ප පිළිගනී object
.
.affix('checkPosition')
අදාළ මූලද්රව්යවල මානයන්, පිහිටීම සහ අනුචලන ස්ථානය මත පදනම්ව ඇලවීමේ තත්වය නැවත ගණනය කරයි. , .affix
, .affix-top
සහ .affix-bottom
පන්ති නව තත්වයට අනුව අමුණා ඇති අන්තර්ගතයට එකතු කර හෝ ඉවත් කරනු ලැබේ. අමුණා ඇති අන්තර්ගතයේ මානයන් හෝ ඉලක්ක මූලද්රව්යයේ මානයන් වෙනස් කරන විට, ඇලවූ අන්තර්ගතය නිවැරදිව ස්ථානගත කිරීම සහතික කිරීම සඳහා මෙම ක්රමය ඇමතීමට අවශ්ය වේ.
Bootstrap හි affix ප්ලගිනය affix ක්රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.
සිදුවීම් වර්ගය | විස්තර |
---|---|
affix.bs.affix | මෙම සිදුවීම මූලද්රව්යය ඇලවීමට පෙර වහාම ක්රියාත්මක වේ. |
ඇලවූ.bs.ඇෆික්ස් | මූලද්රව්යය ඇලවීමෙන් පසුව මෙම සිදුවීම වෙඩි තබා ඇත. |
affix-top.bs.affix | මෙම සිදුවීම මූලද්රව්යය ඉහළට ඇලවීමට පෙර වහාම ක්රියාත්මක වේ. |
ඇලවූ-top.bs.affix | මූලද්රව්යය ඉහළට ඇලවීමෙන් පසු මෙම සිදුවීම වෙඩි තබා ඇත. |
affix-bottom.bs.affix | මෙම සිදුවීම මූලද්රව්යය පහළට ඇලවීමට පෙර වහාම ක්රියාත්මක වේ. |
ඇලවූ-පහළ.bs.ඇෆික්ස් | මූලද්රව්යය පහළට ඇලවීමෙන් පසු මෙම සිදුවීම සිදු වේ. |