jQuery Mobile 后退按钮中的图像不出现
Posted
技术标签:
【中文标题】jQuery Mobile 后退按钮中的图像不出现【英文标题】：Image in jQuery Mobile back button doesn't appear 【发布时间】：2011-06-07 16:18:32 【问题描述】：我已经按照 jQueryMobile 文档的说明在我的博客移动版本中设置了 jQueryMobile 插件。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
描述页面如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Against All Odds</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<link rel="stylesheet" href="_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>my title</h1>
</div><!-- /header -->
<div data-role="content">
my description
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
很遗憾，后退按钮中的图像没有出现在我的页面中。而且我还将 jQuerymobile 图像文件夹放入我的项目页面。有没有我忘记设置的配置？
【问题讨论】：
【参考方案1】：您应该检查http://jquerymobile.com/download/ 和页面末尾的 zip 文件。
zip 文件包含图像目录。
您必须将 images 目录与您的 jquery 移动 css 文件放在同一目录中。
【讨论】：
当然，我已经将 Images 文件夹与 CSS 文件放在同一目录中。但是没用，【参考方案2】：我昨天正在查看这段代码，但我没有查看 Alpha 2 版本（从 2010 年 11 月 12 日起），而是转到 GitHub 上的 jquery-mobile 页面并获得了主分支 download.zip。
下面的代码是将后退按钮添加到标题并自动将data-icon 设置为arrow-l。我也忘了把 images 目录放在我的项目中。
// auto-add back btn on pages beyond first view
if ( o.addBackBtn && role === "header" &&
($.mobile.urlHistory.getPrev() || $(".ui-page").length > 1) &&
!leftbtn && $this.data( "backbtn" ) !== false )
$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
.click(function()
history.back();
return false;
)
.prependTo( $this );
我还需要包含这些 js 和 css 文件，这些文件是我从下载中复制到项目的根目录中的。
<link rel="stylesheet" href="jquery.mobile.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>
【讨论】：
投票给你并正确回答。我昨天下载了 Alpha 2 并且已经测试过了。奇怪的是，返回按钮中显示的箭头很好。【参考方案3】：后退按钮中需要data-icon="arrow-l"。我不确定他们如何将其设为自动生成的后退按钮 ojn jquerymobile.com 文档页面的默认设置。调查它。稍后回来。
另外 - 你不应该复制 jqm-docs.css
【讨论】：
不。后退按钮由 jQueryMobile 自动生成。我已经浏览过文档页面中的“后退”按钮。但是，还没有得到任何答复。 是的，我知道它是生成的。但不知何故，在 jquerymobile 上的文档和演示中，它获取了 data-icon 属性，而当我使用它时 - 它没有。以上是关于jQuery Mobile 后退按钮中的图像不出现的主要内容，如果未能解决你的问题，请参考以下文章
如何在 JQuery Mobile for iOS 中发生页面更改时添加一些操作
jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。