相关疑难解决方法(0)

我有一个共同的理解问题,我不清楚什么是最好的前进方式.所以我决定向社区寻求建议.

jQuery UI定义了CSS Framework,其中包含类"ui-icon"和许多特定类,用于不同的标准图标(总共320个图标),可以在测试页面上看到.有许多使用CSS框架的插件,网站等.例如jqGrid Pluging使用它.将由jqGrid创建的网格包含图标.

在写了关于使用Font Awesome图标而不是一些jQuery UI图标的答案后,我经常问我同样的问题:为什么jQuery UI CSS框架有光栅图标而不是基于矢量的图标？在我看来,有一个jQuery UI CSS Framework的Icon部分的另一个实现是非常实际的.在这种情况下,人们可以直接替换jQuery UI主题并拥有以更好的方式实现的图标.

我们现在生活在具有高DPI(平板电脑和智能手机事件)的显示器时代.如此多的人使用缩放设置高达100%作为Web浏览器中的标准设置.如果比较一下

同

人们会看到差异很明显.

当前版本的Web浏览器(包括旧IE7)支持至少一种格式为WOFF,EOT,TTF,OTF或SVG的基于矢量的Web字体.这些字体是W3C工作草案文档"CSS Fonts Module Level 3"的一部分(参见http://www.w3.org/TR/css3-fonts/#src-desc).

那么为什么不用Web字体替代品替换jQuery UI的当前PNG图标呢？有提供已经有很多免费的开源字体(见这里,这里,这里,这里等等)的大多数(但不是全部)图标,其中一个需要.

使用Web字体的其他好处,我看到将简化jQuery UI主题的创建.如果我比较基本主题内部使用的图像ui-icons_XXX_256x240.png,或者如果我将其与另一个主题的相应图像进行比较,那么我会看到图像中使用的颜色是唯一的区别.在使用矢量字体的情况下,人们可以只指定color,background-color或使用linear-gradient或radial-gradientCSS样式来改变颜色或产生漂亮的颜色效果:

我看到许多使用矢量图标的优势,但我到目前为止还没有找到一个可以放置矢量图标的功能请求的好地方.我发布了功能请求和这一个,但我认为我们这里有越来越多的常见jQuery UI Framework问题.

在 …

如何从网格中设置默认视图的宽度.默认值为300px,但我找不到有关如何更改它的任何文档.我可以找到有关更改默认编辑宽度但不更改视图的信息.

我试图弄清楚如何解决这个问题,但我似乎无法找到解决方案.

我正在使用jqGrid 4.4.1(jQuery UI 1.8.23),我刚开始使用twitter bootstrap.
正如你在这个小提琴中看到的那样,导航栏很麻烦.
页面选择器元素比它应该长得多.
这是没有twitter bootstrap的jqGrid 的小提琴.

那里有谁可以帮我解决这个问题吗？
还有其他我应该注意的问题吗？

谢谢你的帮助.

我正在尝试使用Font Awesome图标代替jqGrid中工具栏的jqueryUI图标(添加,编辑,删除,查看图标).

这个演示正是我想要完成的.我读过Oleg的答案,演示了删除图标类并在其位置添加Font Awesome图标.但是,当我尝试这样做时,没有任何改变.我相信我可能会错误地引用图标.

我下载了Font Awesome 4.0.3并且我有jqGrid 4.5.4 - 在FA文件树的_icons.scss文件中,图标引用如下:

.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }

但在奥列格建议的代码中,新图标标记为"icon-pencil":

$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
        addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
        refreshicon: "icon-refresh", viewicon: "icon-file",view: true});

$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");

这是我的代码:我只为这个例子做了编辑图标.我还使用了新标签的图标,"fa-pencil".

jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true});

$('#grid_toppager .navtable .ui-pg-div>span').removeClass('ui-icon'); 

为了用Font Awesome图标替换ui-icons,我需要哪些代码组合？

任何有用的提示将不胜感激,谢谢