Image in jQuery Mobile back button doesn't appear

StackOverflow https://stackoverflow.com/questions/4666491

Question

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

Was it helpful?

Solution

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>

OTHER TIPS

You should check http://jquerymobile.com/download/ and the zip file at the end of the page.

The zip file contains the images directory.

You have to place the images directory in the same directory as your jquery mobile css file.

data-icon="arrow-l" is needed in the back button. I'm not sure how they make it the default for auto-generated back button ojn jquerymobile.com docs pages. Looking into it. Come back later.

Also - you shouldn't copy the jqm-docs.css

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top