JQuery Mobile ListView-Steuerelement zeigt text auf mehreren Zeilen

Arbeite ich an einer Liste Ansicht mit jQuery Mobile und ich bin versucht, etwas ähnliches zu tun, um dieses Beispiel:
http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html

Habe ich einen Titel und eine lange Beschreibung.
Das problem ist, dass ich brauche, das text in eine neue Zeile beginnen, wenn der Bildschirm zu klein ist (oder der text zu lang), was jetzt passiert, ist, dass der text, wird geschnitten und Hinzugefügt dots ...

<div data-role="content" data-theme="c">
     <ul data-role="listview" data-theme="c">               
     <li>
     <a href="tl1.html" data-transition="fade">
     <img style="margin-left: 8px" width="80" height="80" alt="sample" src="images/sample_event.jpg" align="left"/>
     My band
     <br>
     <font style="font-size: small">
     Event description, enter the event description. Please enter the event description, event            description enter. Add a description of the event.
     </font>
     </a>
     </li>
     </ul>
</div>

Dank!
Marco

InformationsquelleAutor Marco Matarazzi | 2011-10-26

  1. 33

    Wie ich es Tat, war es hinzufügen white-space:normal; zu den CSS-Code für diesen Abschnitt. Hoffe, das hilft.

    InformationsquelleAutor Jordan Gagne

  2. 22

    ruthc68 von jQuery Mobile offiziellen forum die Frage beantwortet:

    <font style="white-space:normal; font-size: small" >

    Hoffe, dies wird sparen Sie einige Zeit zu jemand 🙂

    +1. Sie meinen Tag gerettet. danke

    InformationsquelleAutor Marco Matarazzi

  3. 4
    1. open (jquery.mobile.Struktur-1.0.min.css) und
    2. ersetzen Sie alle white-space:nowrap von white-space: normal
    schon ziemlich extrem. Es mache die Aktualisierung auch ein Alptraum
    Es ist immer eine schlechte Idee, zu gehen und zu verändern Bibliotheken. Ich würde empfehlen, es nicht zu tun!
    Ein anderer Weg, dies zu tun, kann die Arbeit in einigen Fällen ist das hinzufügen, um alle Elemente: * { white-space: normal !wichtig;}

    InformationsquelleAutor ciwmcit

  4. 2

    Schluck.

    "JQuery Mobile ListView-Steuerelement zeigt text auf mehreren Zeilen "

    Stolperte ich über diese StackOverflow Frage, wie ich wurde auch gefragt, wie dies zu tun.

    Aber nach Herumspielen mit jqGrid Handy, meine beste Antwort auf diese Frage ist dieser: tun Sie es nicht.

    Wenn Sie eine Gruppe von Datensätzen, wobei jeder Datensatz enthält mehrere Zeilen, dann ist es ein viel schöneres Erlebnis der Benutzer Ihren eigenen code schreiben.

    Hier ein paar screenshots von meinem iPhone app, Ihnen zu zeigen, was ich meine.

    JQuery Mobile ListView-Steuerelement zeigt text auf mehreren Zeilen

    Auf dem ersten scren, wo der Benutzer sucht nach einer Firma, ich tun Verwendung jqGrid Mobile, zusammen mit einem Textfeld, wo der Benutzer eingeben kann, die in einer Firma-Namen und sofort finden Sie die passenden Datensätze in das jqGrid.

    Ich dokumentiert, wie können Sie diese Funktionalität hinzuzufügen, jqGrid hier:

    jqGrid - Ändern filter - /such-pop-up-form - flach auf die Seite - kein dialog

    Auf der zweiten Webseite, die ich aber bewusst nicht verwenden, jqGrid überhaupt. Ich fand es war weit mehr Benutzer-freundlich zu kopieren jqGrid css-styling, und erstellen Sie zwei HTML-Steuerelemente:

    • eine "header" - Leiste, zeigen den Kontext von, was Sie sehen (Ihre gewählten Firmennamen, die in diesem Beispiel)
    • eine scrollbare Liste der Orte, füllt den rest des Bildschirms.

    Ja, ich weiß, es bedeutet, dass zum schreiben mehr JavaScript-code, aber es sieht fantastisch aus, auf einem Gerät, und macht das beste aus den begrenzten Platz auf dem Bildschirm. Beachten Sie, wie in dem obigen Bild habe ich nach unten gescrollt meiner Liste von Orten, und Safari hat automatisch versteckt die Navigations-Leiste (wo die Zurück/Weiter - /Senden-buttons angezeigt wurden).

    Natürlich, es funktioniert gut, in diesem speziellen Beispiel, weil ich weiß, dass es nicht viele Einträge auf diesem Bildschirm (Standorte für ein bestimmtes Unternehmen). Durch wegwerfen jqGrid auf diesem Bild, ich habe die Fähigkeit verloren, für den Benutzer zu suchen, zu sagen, Standorte in einem bestimmten Land,

    Aber, für diese app, nicht mit jqGrid auf einem der Bildschirme stark verbesserte Benutzerfreundlichkeit.

    Ich Schätze in diesem Beispiel nicht vorhanden jeder JavaScript-code, aber ich hoffe, die screenshots begeistern, dass Sie denken, außerhalb der jqGrid-box bei der Entwicklung von apps für Geräte.

    InformationsquelleAutor Mike Gledhill

Schreibe einen Kommentar