Ist es möglich, dass Schaltflächen in einer jQuery Mobile-Listenansicht wie Links aussehen?

Question

Ich versuche, eine Listenansicht zu erstellen, die eine Mischung aus Schaltflächen und Links enthält.Gibt es Ergänzungen / Anpassungen, die ich am Markup vornehmen kann, damit Schaltflächen genauso wie Links angezeigt werden?In diesem Stadium versuche ich so viel wie möglich mit Markup und nicht mit benutzerdefiniertem CSS (oder JS!)

Der markup, das ich benutze is:

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a></li>
    <li>
        <form action="#">
            <button type="submit">Publish</button>
        </form>
    </li>
    <li>
        <form action="#">
            <button type="submit">Delete</button>
        </form>
    </li>
</ul>

Was ich möchte, ist das:

_{(Quelle: reb4.me)}

Ich scheine nur in der Lage zu sein, das zu verstehen:

_{(Quelle: reb4.me)}

Answer 1

Hier ist ein Weg, es zu tun.

jQM 1.4

Fügen Sie die Klassen hinzu, um die Pfeilsymbole rechts zu erhalten ui-btn ui-btn-icon-right ui-icon-carat-r zu den Buttons:

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
    </li>
</ul>

Dann entfernen Sie die zusätzlichen Polster, Ränder, Schatten usw.füge dieses CSS hinzu:

.ui-li-static {
    padding: 0 !important;
}
.ui-li-static form button {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
}

Hier ist ein DEMO

jQM 1.3

Wenn Sie mit jQM 1.3 nicht weiterkommen, ist es etwas komplizierter:

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
</ul>

.ui-li-static {
    padding: 0 !important;
}
.fakeLinkIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
}
.ui-li-static form div.ui-submit{
    padding-right: 2.5em;
}
.ui-li-static form div.ui-submit {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
    border-radius: 0;
}
.ui-li-static form div.ui-submit .ui-btn-inner{
    padding-left: 15px;  
}
.ui-last-child form div.ui-submit {
     border-bottom-right-radius: 16px;   
     border-bottom-left-radius: 16px;   
}
.ui-first-child form div.ui-submit {
     border-top-right-radius: 16px;   
     border-top-left-radius: 16px;   
}

DEMO