Mehrere Schaltflächen und Suche Platzierung im header die jQuery Mobile?

Ich versuche, fügen Sie eine such-Eingang und drei Tasten auf der gleichen Zeile in der jQuery-Mobile, aber es entpuppt sich als wirklich frustrierend. Hier ist der code, den ich versuche:

<div data-role="header" class="header">
    <input type="search" name="search" id="search-header" value="" data-mini="true" data-inline="true" data-theme="c" />
    <a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
    <a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a>
    <a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a>
</div>

Mit CSS dieses:

.page .header .ui-input-search
{
    margin-right: 90px;
}

Ich bin ok mit den Standard-icons kommen mit JQM, aber die Platzierung endet auf der Suche wie dieses aber:

Mehrere Schaltflächen und Suche Platzierung im header die jQuery Mobile?

Ich habe sogar versucht, indem Sie eine controlgroup um die Tasten nur und auch um die buttons und das Eingabefeld, sondern setzen Sie die buttons unter dem Suchfeld.

Wie würde ich dieses Ziel zu erreichen JQM?

InformationsquelleAutor TruMan1 | 2012-07-09
  1. 1

    Haben Sie versucht, entfernen die Marge? Rechts off sehe ich, dass könnte einige Probleme verursachen. Auch möchten Sie vielleicht zu schweben Ihre Bilder.

    Habe ich hier eine Lösung: http://jsfiddle.net/cncpts/B4Pa6/2/

    • Ich habe versucht, entfernen den Rand. Ihre Probe bricht mit der neuesten JQM: jsfiddle.net/B4Pa6/3 . Scheint auch ein wenig hacky da schwebt versuchen, Sie zu überschreiben, absolutes.
    InformationsquelleAutor HjalmarCarlson
  2. 0

    Ich glaube, ich habe es funktioniert!

    <div data-role="header" class="header">
    <input type="search" name="search" value="" data-mini="true" data-theme="c" class="search-header" />
    <div class="ui-btn-right">
        <a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
        <a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a>
        <a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a>
    </div>
</div>
    InformationsquelleAutor TruMan1
Schreibe einen Kommentar