Question

jQuery Mobile从v 1.4开始处理图标的方式似乎有所变化。例如

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

现在生成的标记读取

<a href="index.html" data-role="button" data-icon="delete" class="ui-link ui-btn ui-icon-delete 
 ui-btn-icon-left ui-shadow ui-corner-all" role="button">
 "Delete"
 ::after
 </a>

after伪类似乎使用相应的icons.min.css文件中的标记，该文件读取

.ui-icon-delete:after 
{
 background-image: url("data:image/svg+xml;
 charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22..g%3E");
}

据我所知，/ images文件夹中的图标图像根本不会被使用。没有问题，因为它似乎工作。但是，我非常感谢任何能够解释这些变化的人。另外，为什么他们坚持提供两个单独的.min.css文件 - 一个仅用于SVG图像。

......过了一会儿

嗯......我对此进行了一些调查，甚至更加困惑。 jquery.mobile.icons.css文件不会更改，并且icons-png文件夹中的图像也不会更改。为什么他们不只是让人们从他们的CDN链接到他们？

Answer 1

SVG规范非常广泛，目前没有浏览器支持整个规范。据说所有主流浏览器的所有最新版本都有基本的SVG支持。由于他们都没有完全的支持，您需要检查您所定位的每个浏览器中的各个功能。

jQuery Mobile试图提供全方位的支持，而不是像Sencha Touch那样只提供对we-kit浏览器的支持，至少在最初阶段。

2个单独实现的原因是对旧版浏览器的支持。如果检测到较旧的浏览器，它将像以前一样优雅地切换到PNG图标。

更新

jQuery Mobile有两个独立的 CSS 文件结构：

首先是：http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css

这个内容包含所有内容，支持机器人类图标，一切都是CDN存储库的一部分。

例如，这是来自 CDN 存储库的icon set。

第二个是：http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css

这个只包含核心jQuery Mobile CSS ，它与Theme Roller一起使用。当您从themeroller下载主题时，您将找到完整的jQuery Mobile自定义所需的一切，包括不一致。

如果您希望图标成为 CDN 的一部分而您正在使用自己的主题，只需打开 jquery.mobile-1.4.2.min.css ，将其初始复制 CSS 处理图标并将其置于 jquery.mobile.structure-1.4.2.min.css 中。没有必要创建大量的CSS文件来满足每个人的需求。在某些时候，你需要自己做点什么。

你和我同意这一点，很遗憾为什么jQuery Mobile开发人员没有像为JavaScript那样创建自定义CSS下载器。

jQuery Mobile 1.4+图标图像

1 个答案:

更新