Wie Home-Taste mit Jquery-mobilen hinzufügen?

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

Frage

Standardmäßig jquery-mobile eine Zurück-Taste auf jeder Seite nach Hauptseite ergänzt. Ich möchte wissen, wie kann ich die Home-Taste auch hinzufügen?
Hier ein Beispiel: http://jquerymobile.com/demos/1.0a1/#experiments /api-viewer/index.html

Hinweis: Dieser Link ist nur gut für firefox / chrom

Danke.

War es hilfreich?

Lösung

Ohne den Jquery-mobile.js Quellcode zu ändern, den einzigen Weg, die ich denken kann, es zu tun, ist Ihre eigenen Navigations-Links zu den Header hinzuzufügen. Sobald Sie Ihren eigenen Link, die automatische Schaltfläche ‚Zurück‘ verschwindet hinzufügen, so dass wir zwei Verbindungen schaffen, einen für zurück, und für zu Hause.

Sie werden feststellen, Seite 2 und 3 beide Tasten haben zurück und eine Home-Taste und Sie können entweder zurück oder direkt zu Hause springen. Dies erfordert, dass Sie den ‚Header‘ Abschnitt für jede Seite zu ändern, aber es ist nicht so große Sache, da es ist immer das gleiche (Kopieren und Einfügen) ohne Änderung pro Instanz benötigt.

Der ‚Heimat‘ Link oben rechts sein (gemäß dem Standardverhalten eines zweiten Link, um es rechts oben).

Hier ist das Beispiel: 

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>


<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a href="#secondpage">second page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="thirdpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.  (this is thirdpage)</p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

</body>
</html>

Wenn Sie es tun, es automatisch machen möchten, können Sie auch die nur hacken js ...

Gleich nach diesem Stück Code (um Zeile 1084 der nicht minified jquery.mobile-1.0a2.js) 

$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
                                                .click(function() {
                                                        history.back();
                                                        return false;
                                                })
                                                .prependTo( $this );

Fügen Sie eine Zeile wie diese, wo #firstpage ist die ID Ihrer Homepage, konnte ich nicht einen Weg finden, die Homepage zu verweisen, ohne sie beim Namen zu nennen, fühlen Sie sich frei .. verbessern ich nicht wollte tun / oder # wird nicht funktionieren ... aber diese Methode funktioniert 

$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );

Andere Tipps

Es gibt eine einfachere Lösung: einfach einen Link zu Ihrem Header div mit class="ui-btn-right" hinzuzufügen. Dies ist wichtig, damit die jQuery Mobile Zurück-Taste kann automatisch nach links hinzugefügt werden. Es gibt auch ein paar andere Daten- * Attribute, die Sie verwenden können, so dass Sie den Einbau-Thema Symbol usw. verwenden können, wie gezeigt: 

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
        <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
           data-direction="reverse">Home</a> 
    </div>
    <div data-role="content">
        ...

(Natürlich die URL sinnvoll, etwas mit nach Hause href ändern für Ihre Umgebung, nicht einfach verwenden „/“, weil es Grenzen, wo Ihr App kann eingesetzt werden.)

Wenn er zum ersten JQM mit einer Anwendung zu entwickeln, wollte ich beide nach Hause und zurück Tasten auf der Oberseite Header, weil die Navigationsstruktur tief ist. Mit der Kern Taste Klassen wie „ui-btn-right“ oder „ui-btn-links“ Arbeit great-- wenn Sie auf jeder Seite eine Taste mögen.

Aber wenn Sie wie ich sind und wollen zwei Tasten auf der linken Seite, können Sie einen wenig benutzerdefinierten CSS verwenden und zu positionieren, es zu bekommen, wo Sie wollen. Ich wickelte auch die Schaltflächen in einer benutzerdefinierten-Header-Klasse sowie die Verwendung CSS den Titel in der Kopfzeile zu steuern. Sie werden den Platz jede Taste auf einem anderen Z-Index benötigen, andernfalls jede Taste mit den anderen in Konflikt geraten wird.

Dies ist der Header:

    

    <div id="home-btn" class="header-btn-left-pos1">
        <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
    </div><!-- /home-btn -->

    <div id="back-btn" class="header-btn-left-pos2">
        <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
    </div><!-- /back-btn -->

    <div class="header-title" align="center">
        <h4>Business Locations</h4>
    </div><!-- /header-title -->

</div><!-- /custom header -->

Dies ist die CSS: 

.custom-header
{
    height:18px;
}
.header-title
{
    position:relative;
    top:-10px;
}
.header-btn-left-pos1
{
    position:absolute;
    left:25px;
    top:5px;
    z-index:1;
}
.header-btn-left-pos2
{
    position:absolute;
    left:105px;
    top:5px;
    z-index:2;
}

Hope dies gibt Ihnen mehr Möglichkeiten. 

<div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
        </div>
    </div>

Sie könnten rel=external verwenden in Ihnen Tag href. Dies wird die Homepage ohne Rücktaste öffnen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top