Est-il possible que les boutons prennent l'apparence de liens dans une liste jQuery Mobile ?

Question

J'essaie de créer une Listview contenant un mélange de boutons et de liens.Y a-t-il des ajouts/ajustements que je peux apporter au balisage pour que les boutons apparaissent de la même manière que les liens ?À ce stade, j'essaie de faire autant que possible en balisage et non en CSS personnalisé (ou JS !)

Le balisage que j'utilise est:

<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>

Ce que j'aimerais, c'est ceci :

_{(source: reb4.moi)}

Il me semble que je ne peux obtenir que ceci :

_{(source: reb4.moi)}

Answer 1

Voici une façon de le faire.

jQM 1.4

Pour obtenir les icônes fléchées à droite, ajoutez les classes ui-btn ui-btn-icon-right ui-icon-carat-r aux boutons :

<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>

Ensuite, pour supprimer le remplissage supplémentaire, les bordures, les ombres, etc.ajoutez ce CSS :

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

Voici une DÉMO

jQM 1.3

Si vous êtes bloqué avec jQM 1.3 c'est un peu plus compliqué :

<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;   
}

DÉMO