如何增加jqGrid工具栏/导航栏图标大小以实现可视化访问?
这是我们收到的一个要求,我们可以增加Struts2-jQuery Grid / jQGrid’工具栏图标’的大小吗? 喜欢保存/删除/查找/添加等?
在这方面,我们的用户需要视觉可访问性。 除了设置浏览器的缩放尺寸外,还有其他解决方案吗?
更新(我们如何修复它):
第1步: 下载 32px图标精灵网格
第2步:将此精灵网格图像放在webapp \ template \ mytheme \ images文件夹中
第3步:更新了jquery-ui.css
文件(从ThemeRoller为我们的自定义主题生成)
步骤4:在ICONS部分更新.ui-state-default
类以指向新图像
第5步:增加width: 16px; height: 16px;
width: 16px; height: 16px;
属性为同一个类
第6步:调整每个图像类中的位置
第7步:我们使用图像编辑工具来压缩它的大小,以便我们可以制作从32px到24px的所有图标,并改变颜色设置(Hue / Saturation..etc)以获得各种UI状态的不同颜色。
example: Changed .ui-icon-trash { background-position: -176px -96px; } to .ui-icon-trash { background-position: -352px -192px; }
这带来了新尺寸的图标。我们现在面临的唯一挑战是为各种状态(活动,默认,hover和错误)找到合适的32px css精灵网格图标图像。
如果ThemeRoller有这个选项来生成各种大小的图标集,那将会很棒。
你将不得不下载一组32px的新图标,这些图标随jquery ui custom css一起提供。
查看此链接以获取进一步的帮助
http://wiki.jqueryui.com/w/page/26308090/ThemeRoller-icon-set