jQuery Mobile 1.4+图标图像 [英] jQuery Mobile 1.4+ icon images

问题描述

从1.4版本开始，jQuery Mobile处理图标的方式似乎有所变化.例如

There appear to be changes in the way jQuery Mobile handles icons starting from v 1.4. For instance

<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伪类似乎使用来自相应icon.min.css文件的标记，该文件读取

The after pseudo class appears to use markup from the corresponding icons.min.css file which reads

.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图像.

As far as I can tell the icon images in the /images folder do not get used at all. No issues with this since it seems to work. However, I would be most grateful to anyone who might be able to explain these changes. Also, why do they insist on supplying two separate .min.css files - one only for the SVG images.

...过一会儿

嗯...我对此进行了更多研究，甚至更加困惑. jquery.mobile.icons.css文件不会更改，icons-png文件夹中的图像也不会更改.为什么他们不仅仅让人们从他们的CDN链接到他们?

Hmmm... I looked into this a bit more and still even more puzzled. The jquery.mobile.icons.css file does not change and neither do the images in the icons-png folder. Why do they not just get people to link to them from their CDN?

推荐答案

SVG规范非常广泛，目前没有浏览器支持整个规范.话虽如此，所有主要浏览器的所有最新版本都具有基本的SVG支持.由于它们都不具有完整的支持，因此您需要在定位的每个浏览器中检查各个功能.

The SVG spec is extensive and no browser currently supports the entire spec. That being said all the latest versions of all the major browsers have basic SVG support. Since none of them have complete support you'll need to check individual features in each browser you're targeting.

jQuery Mobile试图提供全方位的支持，不像Sencha Touch那样，它至少在开始时才提供对we-kit浏览器的支持.

jQuery Mobile tries to provide all around support, not like Sencha Touch which only provided support for we-kit browsers, at least initially.

两个单独实现的原因是对较旧浏览器的支持.如果检测到较旧的浏览器，它将像往常一样正常切换到PNG图标.

Reason for 2 separate implementations are support for older browsers. If older browser is detected it would gracefully switch to PNG icons, as it used to be.

jQuery Mobile具有2个独立的 CSS 文件结构:

jQuery Mobile has 2 separate CSS file structures:

第一个是: http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css

这其中包含了所有内容，支持bot类图标，并且所有内容都是CDN存储库的一部分.

This one has everything inside, support for bot kind of icons and everything is part of CDN repository.

例如，这是一个 图标集 (来自 CDN 存储库).

For example, here's an icon set from CDN repository.

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

这个仅包含核心jQuery Mobile CSS ，它与Theme Roller一起使用.从themeroller下载主题时，您会找到完整的jQuery Mobile自定义所需的一切，包括incons.

This one holds only core jQuery Mobile CSS, it is used with Theme Roller. When you download theme from themeroller you will find everything you need for full jQuery Mobile customization, including incons.

如果您希望图标成为 CDN 的一部分，并且您正在使用自己的主题，只需打开 jquery.mobile-1.4.2.min.css ，将其初始复制 CSS 处理图标并将其放置在 jquery.mobile.structure-1.4.2.min.css 内.创建大量可以满足每个人需求的CSS文件是毫无意义的.在某些时候，您需要自己做一些事情.

If you want icons to be part of CDN and you are using your own theme just open jquery.mobile-1.4.2.min.css, copy it initial CSS dealing with icons and place it inside jquery.mobile.structure-1.4.2.min.css. There's no point ion creating numerous numbers of CSS files which will cover everyone's needs. At some point you need to do something by yourself.

您，我同意这一点，为什么jQuery Mobile开发人员没有像创建JavaScript那样创建自定义CSS向下加载程序，这是可耻的.

Thou, and I would agree with this, it is shame why jQuery Mobile developers didn't create custom CSS down loader like they did for JavaScript.

这篇关于jQuery Mobile 1.4+图标图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！