jQuery Mobile 后退按钮中的图像不出现

发布于 2024-10-11 17:38:49 字数 1412 浏览 2 评论 0原文

我已经按照 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 图像文件夹放入我的项目页面中。是否有任何配置我忘记设置了？

替代文本

原文

I've set-up jQueryMobile plugin into my blog mobile version by the instruction of jQueryMobile documentation.

<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>

and description page is as follow

<!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>

Unfortunately, the image in back button doesn't appear in my page. And I've also put jQuerymobile images folder into my project page. Is there any configuration did I forget to setup?

alt text

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

止于盛夏 2024-10-18 17:38:49

您应该检查 http://jquerymobile.com/download/ 以及页面末尾的 zip 文件。

zip 文件包含图像目录。

您必须将 images 目录放置在与 jquery mobile css 文件相同的目录中。

回复收藏 0 原文

零時差 2024-10-18 17:38:49

我昨天查看了这段代码，但没有查看 Alpha 2 版本（从 2010 年 11 月 12 日开始），我去了 jquery-mobile GitHub 页面并获取主分支 download.zip。

下面的代码将后退按钮添加到标题中，并将 data-icon 自动设置为 arrow-l。我还忘记将图像目录放入我的项目中。

// 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>

I was looking through this code yesterday, but instead of looking at the Alpha 2 release (from Nov 12, 2010), I went out to the jquery-mobile page on GitHub and got the master branch download.zip.

The code below is what adds the back button to the header and auto sets the data-icon to arrow-l. I had also forgot to put the images directory in my project.

// 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 );
}

I also needed to include these js and css files, which I copied from the download into the root directory of my project.

<link rel="stylesheet" href="jquery.mobile.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>

回复收藏 0 原文