Question

如果我在我的html数据图标中使用CDN托管的javascript和css url正确显示。如果我在我的项目中使用本地文件夹位置它无法正常工作。找到以下代码以供参考。我只收到了下面提到的CDN网址的内容。请建议我做错了什么。

下面的代码无效，圆形图标正在显示，但我没有在图标内获得信息标识“i”。

<!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网址，带有信息符号的图标

，则此代码有效

<!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 Mobile的CSS样式表，那么您还需要托管图像（可以在JS和CSS文件所在的.zip文件中找到）

图像精灵应位于名为images的目录中，该目录与jQuery Mobile CSS样式表位于同一目录中（样式表相对引用如下图像： background-image：url（images /图标-18-white.png）; ）

Source Location

jquerymobile数据图标问题

2 个答案: