jQuery Mobile Navbar Ajouter un bouton inconnu

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

Question

Je recherche ce problème pendant plus de 2 heures et je ne comprends pas pourquoi quelque chose de si simple ne fonctionne pas.

J'essaie d'implémenter une barre de navigation dans mon pied de page mais je ne sais pas pourquoi jQuery ajoute des boutons et la mise en page devient horrible.

Ceci est mon code:

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>VeryGoodTrip</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>   
</head> 
<body>  
    <div data-role="page">
        <div data-role="header">
            <h1>Destinations</h1>
        </div><!-- /header -->

        <div data-role="content" data-theme="c">
            <ul data-role="listview">
                <li><a href="index.html">
                    <img src="img/corse.png" />
                    <h3>Corse</h3>
                    <p>Corse</p>

                </a></li>
                <li><a href="index.html">
                    <img src="img/golf.png" />
                    <h3>Golf du Lyon</h3>
                    <p>Golf du Lyon</p>
                </a></li>
                <li><a href="index.html">
                    <img src="img/lerins.png" />

                    <h3>Iles de lerins</h3>
                    <p>Iles de lerins</p>
                </a></li>
                <li><a href="index.html">
                    <img src="img/menton.png" />
                    <h3>Menton</h3>
                    <p>Menton</p>

                </a></li>
                <li><a href="index.html">
                    <img src="img/monaco.png" />
                    <h3>Monaco</h3>
                    <p>Monaco</p>
                </a></li>
                <li><a href="index.html">
                    <img src="img/nice.png" />      
                    <h3>Nice</h3>
                    <p>Nice</p>
                </a></li>
                <li><a href="index.html">
                    <img src="img/tropez.png" />
                    <h3>Saint-Tropez</h3>
                    <p>Saint-Tropez</p>
                </li>
            </ul>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">      
            <div data-role="navbar" data-iconpos="right">
                <ul>
                    <li><a href="index.html" data-icon="refresh" class="ui-state-persist ui-btn-active">Destinations</a></li>
                    <li><a href="index.html" data-icon="refresh">Activités</a></li>
                    <li><a href="index.html" data-icon="refresh">Planning</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

    </div><!-- /page -->
</body>

Et c'est ce que j'obtiens avec Firebug:

<div data-position="fixed" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-overlay" role="contentinfo" style="top: -155px;">
    <a href="index.html" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text"></span>
        </span>
    </a>
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
        **<a href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right">
            <span class="ui-btn-inner">
                <span class="ui-btn-text"></span>
            </span>
        </a>**
        <ul class="ui-grid-c">
            <a href="index.html" class="ui-block-a ui-btn ui-btn-icon-right ui-btn-up-a" data-theme="a">
                <span class="ui-btn-inner">
                    <span class="ui-btn-text"></span>
                </span>
            </a>
            <li class="ui-block-b">
                <a href="index.html" data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-up-a">
                    <span class="ui-btn-inner">
                        <span class="ui-btn-text"></span>
                    </span>
                </a>
                <a class="ui-state-persist ui-btn-active ui-btn ui-btn-icon-right ui-btn-up-a" data-icon="refresh" href="index.html" data-theme="a">
                    <span class="ui-btn-inner">
                        <span class="ui-btn-text">Destinations</span>
                        <span class="ui-icon ui-icon-refresh ui-icon-shadow"></span>
                    </span>
                </a>
            </li>
            <li class="ui-block-c">
                <a data-icon="refresh" href="index.html" data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-up-a">
                    <span class="ui-btn-inner">
                        <span class="ui-btn-text">Activit?s</span>
                        <span class="ui-icon ui-icon-refresh ui-icon-shadow"></span>
                    </span>
                </a>
            </li>
            <li class="ui-block-d">
                <a data-icon="refresh" href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right">
                    <span class="ui-btn-inner">
                        <span class="ui-btn-text">Planning</span>
                        <span class="ui-icon ui-icon-refresh ui-icon-shadow"></span>
                    </span>
                </a>
            </li>
        </ul>
    </div><!-- /navbar -->
</div>

Comme vous pouvez le voir, le bouton suivant ne devrait pas être ici une idée?

<a href="index.html" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span>
</span>
</a>

<a href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right">
<span class="ui-btn-inner">
    <span class="ui-btn-text"></span>
</span>
</a>

Merci

Pas de solution correcte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top