How to Increase jqGrid toolbar / navbar icon size for visual accessibility?

﹥>﹥吖頭↗ 提交于 2019-12-23 02:21:14

问题


Here is a requirement that we received, can we increase the size Struts2-jQuery Grid /jQGrid 'Toolbar Icons' ? like Save/Delete/Find/Add etc ?

Our users would need visual accessibility in this regard. Is there any solution apart from setting the zoom size of the browser ?

Update (How we fixed it):

Step 1: Downloaded a 32px icon sprite grid
Step 2: Placed this sprite grid image in the webapp\template\mytheme\images folder
Step 3: Updated the jquery-ui.css file (which was generated for our custom theme from ThemeRoller)
Step 4: In the ICONS section update the .ui-state-default class to point the new image
Step 5: Added width: 16px; height: 16px; properties to the same class
Step 6: Adjusted the position in every image classes
Step 7: We used image editing tools to compress it's size so that we could make all icons from 32px to 24px and varied the color settings (Hue/Saturation..etc) to get different colors for various UI states.

 example: 
Changed
.ui-icon-trash { background-position: -176px -96px; }

to 

.ui-icon-trash { background-position: -352px -192px; }

This brought the new sized icons.The only challenge we face now is to find a suitable 32px css sprite grid icon image for various states (Active, Default, Hover and Error).

It would have been great if ThemeRoller has this option to generate icon set of various sizes.


回答1:


you will have to download a new set of icons which are available in 32px, these icons come along with jquery ui custom css.

check this link for further help

http://wiki.jqueryui.com/w/page/26308090/ThemeRoller-icon-set



来源:https://stackoverflow.com/questions/11642242/how-to-increase-jqgrid-toolbar-navbar-icon-size-for-visual-accessibility

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!