我正在创建一个 jQuery 移动应用程序。图标没有出现在我的任何页面中。
这是代码
<link rel="stylesheet" href="css/jquery.mobile.min.css" />
<script src="script/jquery-1.7.1.min.js"></script>
<script src="script/jquery.mobile.min.js"></script>
但是当我使用 CDN 托管文件时,它工作正常。为什么会发生这种情况?
我正在创建一个 jQuery 移动应用程序。图标没有出现在我的任何页面中。
这是代码
<link rel="stylesheet" href="css/jquery.mobile.min.css" />
<script src="script/jquery-1.7.1.min.js"></script>
<script src="script/jquery.mobile.min.js"></script>
但是当我使用 CDN 托管文件时,它工作正常。为什么会发生这种情况?
如果您在本地使用它,则必须从 images 目录中再下载 4 个文件:icons-18-black.png、icons-36-black.png、icons-18-white.png 和 icons-36-white.png . 这些是 jquery css 用来显示这些图标的四个图像文件。下载它们并将其保存在“图像”文件夹中,并与您的 css 文件共享相同的根文件夹。它会很好地工作,因为 CDN 将为您托管这些图像。
因为您使用的是内部包。内部包必须从您的电脑获取图标。您应该必须将整个文件包含在正确的目录中。或者尝试包括这个托管库
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
你没有在你的问题中提供足够的信息。您的错误可能有多种原因,例如:
font-size
设置为可见值?我下载的 jQuery Mobile 版本也有同样的问题。
我从“ jquerymobile.jqGrid-Trial.zip ”文件中下载了代码。在我的笔记本电脑上,jqGrid Mobile 图标看起来不错,但在 iPhone 或 Android 设备上,它们会被严重抵消。
我的解决方案是将jquery.mobile.css文件的一部分修改为如下所示:
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit,
.ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-18-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
(以前,它在其中有不同的背景图像名称,并且引用的图像宽度为 864 像素,而不是 776 像素。)
顺便说一句,为了找到这个解决方案,我实际上忽略了我从 jQuery 网站下载的 .zip 文件,查看了 jqGrid 自己的示例(它在设备上运行良好),然后比较了“ jquery-mobile-1.2.0.他们选择使用的css文件:
希望这可以帮助。