jquerymobile数据-图标问题

Question

如果我使用CDN托管的javascript和css url，我的html数据图标将正确显示。如果我在项目中使用本地文件夹位置，它就不能工作。查找下面的代码以供参考。我有从下面提到的CDN url的内容。请告知我做错了什么。

下面的代码不工作，圆形图标显示，但我没有得到信息标志“我”在图标内。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
 </head>
<body>
<div data-role="page" id="test">
    <div data-role="header" data-theme="b">
        <a href="#home" data-icon="info" data-iconpos="notext"></a>
        <h1>Home</h1>
    </div>
</div>
</body>
</html>

如果我使用CDN url (图标中有信息符号)，这段代码就能工作。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css" />
<script type="text/javascript" src="code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="test">
    <div data-role="header" data-theme="b">
        <a href="#home" data-icon="info" data-iconpos="notext"></a>
        <h1>Home</h1>
    </div>
</div>
</body>
</html>

Answer 1

如果您在本地使用它，则需要将图标图像上传到服务器。CDN将在第二个示例中为您托管图像，因为css正在相对于css文件的文件夹中查找。

在图标类的CSS中，您将看到它使用以下内容：

background-image: url(images/icons-36-white.png);

因此，您需要从jquery下载图标文件。例如，从这里：http://code.jquery.com/mobile/1.3.2/images/icons-36-white.png

Answer 2

如果您正在承载用于jQuery移动的CSS样式表，那么您还需要托管这些图像(这些图像位于JS和CSS文件传入的同一个.zip文件中)。

图像精灵应该位于一个名为jQuery的目录中，该目录与jQuery Mobile样式表(样式表相对地引用图像如下：背景图像：)位于同一个目录中。

源位置