如何增加jqGrid工具栏/导航栏的图标大小可视化辅助功能？ [英] How to Increase jqGrid toolbar / navbar icon size for visual accessibility?

问题描述

这是我们收到的要求，我们可以增加Struts2-jQuery Grid / jQGrid工具栏图标的大小吗？像保存/删除/查找/添加等？

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 ?

更新（我们如何修复）：< br>

Update (How we fixed it):

步骤1：下载一个32px图标精灵网格

步骤2：将此sprite网格图像放置在webapp\template\mytheme\images文件夹中

步骤3：更新了 jquery-ui.css 文件（它是从ThemeRoller为自定义主题生成的）

步骤4：在ICONS部分更新 .ui-state-default 指向新图像的类

步骤5：添加 width：16px; height：16px; 属性到同一个类

步骤6：调整每个图像类中的位置

第7步：我们使用图像编辑工具来压缩它的大小，使我们可以使所有图标从32像素到24像素，并改变颜色设置（色相/饱和度等级），以获得各种UI状态的不同颜色。

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; }

这带来了新的大小图标。我们现在面临的唯一挑战是找到一个合适的32px css各种状态的精灵网格图标图像（活动，默认，悬停和错误）。

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).

如果ThemeRoller有此选项可生成各种大小的图标集，那将是非常好的。

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

推荐答案

您将不得不下载一组32像素的图标，这些图标与jquery ui自定义CSS一起。

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

这篇关于如何增加jqGrid工具栏/导航栏的图标大小可视化辅助功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！