මෙවලම් ඉඟි ඔබට ඇති විය හැකි කුඩාම UI ගැටලුව ලෙස හැඟේ. ඒවා කුඩා වන අතර සාමාන්යයෙන් සැඟවී ඇත. යමෙක් එකක් ගොඩනඟන්නේ කෙසේදැයි විමසූ විට, සම්ප්රදායික පිළිතුර සෑම විටම පාහේ යම් JavaScript පුස්තකාලයක් භාවිතයෙන් නැවත පැමිණේ. දිගු කලක් තිස්සේ එය සංවේදී උපදෙස් විය. මමත් එය අනුගමනය කළා. මතුපිටින්, මෙවලම් ඉඟියක් සරල ය. මූලද්රව්යයක් මත සැරිසරන්න හෝ අවධානය යොමු කරන්න, යම් පෙළක් සහිත කුඩා කොටුවක් පෙන්වන්න, පසුව පරිශීලකයා ඉවතට යන විට එය සඟවන්න. නමුත් ඔබ එකක් සැබෑ පරිශීලකයින්ට නැව්ගත කළ පසු, දාර පෙන්වීමට පටන් ගනී. යතුරුපුවරු පරිශීලකයන් ප්රේරකයට ටැබ් කරන්න, නමුත් කිසි විටෙක මෙවලම් ඉඟිය නොදකින්න. තිර කියවන්නන් එය දෙවරක් නිවේදනය කරයි, නැතහොත් කිසිසේත් නැත. ඔබ මූසිකය ඉතා ඉක්මනින් ගෙන යන විට මෙවලම් ඉඟිය දැල්වෙයි. එය කුඩා තිරවල අන්තර්ගතය අතිච්ඡාදනය කරයි. Esc එබීමෙන් එය වැසෙන්නේ නැත. අවධානය නැති වෙනවා. කාලයත් සමඟම, මගේ මෙවලම් ඉඟි කේතය මට තවදුරටත් අයිති කර ගැනීමට අවශ්ය නැති දෙයක් බවට වර්ධනය විය. සිදුවීම් අසන්නන් ගොඩගැසී ඇත. සැරිසැරීම සහ අවධානය වෙන වෙනම හැසිරවීමට සිදු විය. පිටත ක්ලික් කිරීම් සඳහා විශේෂ අවස්ථා අවශ්ය විය. ARIA ගුණාංග අතින් සමමුහුර්තව තබා ගත යුතු විය. සෑම කුඩා නිවැරදි කිරීමක්ම තවත් තාර්කික ස්ථරයක් එක් කළේය. පුස්තකාලවලට උදව් කළ නමුත් ඒවා තිරය පිටුපස සිදුවන්නේ කුමක්ද යන්න සම්පූර්ණයෙන් වටහා ගැනීම වෙනුවට මම වැඩ කළ කළු පෙට්ටි වැනි ය. නව Popover API දෙස බැලීමට මා පෙලඹවූයේ එයයි. පුස්තකාලයක ආධාරයක් නොමැතිව බ්රවුසරයේ ස්වදේශීය ආකෘතිය භාවිතයෙන් මම තනි මෙවලම් ඉඟියක් නැවත ගොඩනැගුවහොත් කුමක් සිදුවේදැයි බැලීමට මට අවශ්ය විය. අප ආරම්භ කරන විට, ඕනෑම නව අංගයක් සමඟ මෙන්, එය සමඟ සමහර දේවල් තවමත් ඉවත් කර ඇති බව සඳහන් කිරීම වටී. සමස්ත API සඳහා කොටස් කිහිපයක් ප්රවාහයේ පැවතුනද, එය දැනට විශාල බ්රව්සර් සහායක් භුක්ති විඳියි. මේ අතරතුර Caniuse ගැන විමසිල්ලෙන් සිටීම වටී. "පැරණි" මෙවලම් ඉඟිය Popover API ට පෙර, මෙවලම් ඉඟි පුස්තකාලයක් භාවිතා කිරීම කෙටි මගක් නොවීය. එය පෙරනිමිය විය. මූසිකය, යතුරුපුවරුව සහ සහායක තාක්ෂණය හරහා ක්රියා කරන මෙවලම් ඉඟියක ස්වදේශීය සංකල්පයක් බ්රවුසරවලට නොතිබුණි. ඔබ නිවැරදි බව ගැන සැලකිල්ලක් දැක්වූයේ නම්, ඔබේ එකම විකල්පය වූයේ පුස්තකාලයක් භාවිතා කිරීමයි, මා කළේ එයයි. ඉහළ මට්ටමක දී, රටාව සැමවිටම සමාන විය: ප්රේරක මූලද්රව්යයක්, සැඟවුණු මෙවලම් ඉඟි මූලද්රව්යයක් සහ ජාවාස්ක්රිප්ට් දෙක සම්බන්ධීකරණය කිරීමට.
පුස්තකාලය මඟින් මූලද්රව්යයට හෝවර් හෝ ෆෝකස් මත පෙන්වීමට, නොපැහැදිලි හෝ මූසික නිවාඩු මත සැඟවීමට, සහ අනුචලනය මත නැවත ස්ථානගත කිරීමට/ප්රමාණය වෙනස් කිරීමට ඉඩ සලසන රැහැන් හසුරුවයි.
කාලයත් සමඟ මෙවලම් ඉඟිය බිඳෙනසුලු විය හැකිය. කුඩා වෙනස්කම් අවදානමක් ගෙන ඇත. සුළු නිවැරදි කිරීම් පසුබෑමකට හේතු විය. නරකම දෙය නම්, නව මෙවලම් ඉඟි එකතු කිරීම එම සංකීර්ණත්වයම උරුම කර ගැනීමයි. දේවල් තාක්ෂණිකව ක්රියාත්මක වූ නමුත් කිසි විටෙකත් සමථයකට පත් වී හෝ සම්පූර්ණ වී නැත. බ්රවුසරයේ ස්වදේශික Popover API භාවිතයෙන් මෙවලම් ඉඟිය නැවත ගොඩනැගීමට මා තීරණය කළ විට තත්වය එයයි. මම Popover API උත්සාහ කළ මොහොත මට අලුත් දෙයක් අත්හදා බැලීමට අවශ්ය නිසා මම Popover API භාවිතා කිරීමට මාරු නොවෙමි. බ්රවුසරය දැනටමත් තේරුම් ගෙන තිබිය යුතු යැයි මා විශ්වාස කළ මෙවලම් ඉඟි හැසිරීමෙන් මා වෙහෙසට පත් වූ නිසා මම මාරු කළෙමි. මට මුලින් සැක හිතුනා. බොහෝ නව වෙබ් API සරල බව පොරොන්දු වන නමුත්, තවමත් ඔබ ගැලවීමට උත්සාහ කළ එම සංකීර්ණත්වයම නිහඬව ප්රතිනිර්මාණය කරන මැලියම්, එජ්-කේස් හැසිරවීම හෝ පසුබැසීමේ තර්කනය අවශ්ය වේ. ඒ නිසා, මම හැකි කුඩාම ආකාරයෙන් Popover API උත්සාහ කළා. මෙන්න එය පෙනෙන්නේ කෙසේද:
වෙත සම්බන්ධතාවය සාදයි
1. යතුරුපුවරුව "යන්තම් ක්රියා කරයි" යතුරුපුවරු සහාය නිවැරදිව පෙලගැසී ඇති බහු ස්ථර මත රඳා පවතී: අවධානය යොමු කිරීම මෙවලම් ඉඟිය ක්රියාත්මක කිරීමට සිදු විය, නොපැහැදිලි එය සැඟවීමට සිදු විය, Esc අතින් රැහැන්ගත කිරීමට සිදු විය, සහ වේලාව වැදගත් වේ. ඔබට එක් දාර නඩුවක් මග හැරුනේ නම්, මෙවලම් ඉඟිය බොහෝ වේලාවක් විවෘතව පවතිනු ඇත, නැතහොත් එය කියවීමට පෙර අතුරුදහන් වනු ඇත. popover ගුණාංගය ස්වයංක්රීය හෝ අත්පොත ලෙස සකසා ඇති විට, බ්රවුසරය මූලික කරුණු භාර ගනී: Tab සහ Shift+Tab සාමාන්ය ලෙස හැසිරේ, Esc සෑම විටම මෙවලම් ඉඟිය වසා දමයි, අමතර සවන්දෙන්නන් අවශ්ය නොවේ.
මගේ කේත පදනමෙන් අතුරුදහන් වූයේ ගෝලීය යතුරුපුවරු හසුරුවන්න, Esc-විශේෂිත පිරිසිදු කිරීමේ තර්කනය සහ යතුරුපුවරු සංචාලනය අතරතුර රාජ්ය චෙක්පත් ය. යතුරුපුවරු අත්දැකීම මට නඩත්තු කළ යුතු දෙයක් වීම නතර වූ අතර එය බ්රව්සර් සහතිකයක් බවට පත් විය. 2. තිර කියවන්නාගේ පුරෝකථනය කිරීමේ හැකියාව මෙය වියවිශාලතම දියුණුව. ප්රවේශමෙන් ARIA වැඩ කළත්, මා කලින් සඳහන් කළ පරිදි හැසිරීම වෙනස් විය. සෑම කුඩා වෙනසක්ම අවදානම් සහගත බවක් දැනුනි. නිසි භූමිකාවක් සහිත පොපෝවර් එකක් භාවිතා කිරීම සිදුවන්නට යන දේ සම්බන්ධයෙන් වඩා ස්ථායී සහ පුරෝකථනය කළ හැකි බව පෙනේ:
සහ මෙන්න තවත් ජයග්රහණයක්: ස්විචයෙන් පසුව, ලයිට්හවුස් අන්තර්ක්රියා සඳහා වැරදි ARIA රාජ්ය අනතුරු ඇඟවීම් සලකුණු කිරීම නැවැත්වූයේ, බොහෝ දුරට මට අහම්බෙන් වැරදීම සඳහා අභිරුචි ARIA තත්වයන් නොමැති බැවිනි.
3. අවධානය යොමු කළමණාකරණය අවධානය කලින් බිඳෙන සුළු විය. මීට පෙර, මට මෙවැනි නීති තිබුණි: නාභිගත ප්රේරකයට මෙවලම් ඉඟිය පෙන්වීමට ඉඩ දෙන්න, අවධානය මෙවලම් ඉඟියට ගෙන ගොස් වසා නොගන්න, එය ඉතා ආසන්න වූ විට ප්රේරකය බොඳ කරන්න, සහ මෙවලම් ඉඟිය වසා දමා අවධානය අතින් ප්රතිසාධනය කරන්න. එය නොකෙරෙන තුරු මෙය ක්රියාත්මක විය. Popover API සමඟින්, බ්රවුසරය වඩාත් ස්වභාවිකව popover වෙත අවධානය යොමු කළ හැකි සරල ආකෘතියක් බලාත්මක කරයි. popover වැසීම ප්රේරකය වෙත නැවත අවධානය යොමු කරයි, සහ නොපෙනෙන නාභිගත උගුල් හෝ නැති වූ නාභිගත අවස්ථා නොමැත. සහ මම නාභිගත ප්රතිස්ථාපන කේතය එක් කළේ නැත; මම එය ඉවත් කළා.
නිගමනය Popover API යනු මෙවලම් ඉඟි තවදුරටත් ඔබ අනුකරණය කරන දෙයක් නොවන බවයි. ඒවා බ්රවුසරයට තේරෙන දෙයක්. විවෘත කිරීම, වසා දැමීම, යතුරුපුවරු හැසිරීම, ගැලවීම හැසිරවීම සහ විශාල ප්රවේශ්යතා දැන් පැමිණෙන්නේ වේදිකාවෙන් ම මිස ad-hoc JavaScript වෙතින් නොවේ. සංකීර්ණ සැලසුම් පද්ධති, අධික අභිරුචිකරණය හෝ උරුම බාධක සඳහා තවමත් අර්ථවත් වන නිසා මෙවලම් ඉඟි පුස්තකාල යල් පැන ගිය බව එයින් අදහස් නොවේ, නමුත් පෙරනිමිය මාරු වී ඇත. පළමු වතාවට, සරලම මෙවලම් ඉඟිය වඩාත් නිවැරදි එකක් විය හැකිය. ඔබ කුතුහලයෙන් සිටින්නේ නම්, මෙම අත්හදා බැලීම උත්සාහ කරන්න: ඔබේ නිෂ්පාදනයේ එක් මෙවලම් ඉඟියක් පමණක් Popover API සමඟ ප්රතිස්ථාපනය කරන්න, සියල්ල නැවත ලියන්න එපා, සම්පූර්ණ පද්ධතියක් සංක්රමණය නොකරන්න, සහ එකක් තෝරාගෙන ඔබේ කේතයෙන් අතුරුදහන් වන්නේ කුමක්දැයි බලන්න. වේදිකාව ඔබට වඩා හොඳ ප්රාථමිකයක් ලබා දෙන විට, ජයග්රහණය යනු ජාවාස්ක්රිප්ට් පේළි අඩු ප්රමාණයක් පමණක් නොවේ, නමුත් එය ඔබට කිසිසේත් කරදර විය යුතු කරුණු අඩුය. මගේ GitHub repo හි සම්පූර්ණ මූල කේතය පරීක්ෂා කරන්න. වැඩිදුර කියවීම popovers සහ අදාළ API වෙත ගැඹුරින් කිමිදීම සඳහා:
"පොපින් ඉන්", ජෙෆ් ග්රැහැම් "Popovers සහ Dialogs අතර සම්බන්ධය පැහැදිලි කිරීම", Zell Liew "popover=ඉඟිය යනු කුමක්ද?", Una Kravets "Invoker Commands", Daniel Schwarz “HTML Popover සමඟ ස්වයංක්රීයව වසා දැමීමේ දැනුම්දීමක් නිර්මාණය කිරීම”, ප්රීති UI Popover API පැහැදිලි කරන්නා විවෘත කරන්න "බැලුන් උඩින් පොප්", ජෝන් රියා "CSS නැංගුරම් ස්ථානගත කිරීම", Juan Diego Rodríguez
MDN Popover API සඳහා විස්තීර්ණ තාක්ෂණික ලියකියවිලි ද පිරිනමයි.
