Listview avec plus d'un bouton split?

Basé sur JQuery Mobile exemple de la Bouton Split liste je suis en train de générer un composant listview dans Android avec deux boutons à droite, un à côté de l'autre. Le problème est que le code ne génère qu'un seul bouton, et le second est ajouté un lien vers l'article en cours.

Voici mon code:

<ul data-role="listview" data-filter="true" data-theme="b">
  <li>
    <a href="#" onclick="alert('the item!');">
      <h3>The item</h3>
    </a>
    <a href="#" onclick="alert('1st splitbutton!');">1st link</a>
    <a href="#" onclick="alert('2nd splitbutton!');">2nd link</a>
  </li>
</ul>

C'est ce qu'elle engendre:

Listview avec plus d'un bouton split?

Et quelque chose comme cela, c'est ce que j'essaie de produire:

Listview avec plus d'un bouton split?

Est-il un moyen pour y parvenir? Je vous remercie à l'avance.

voici un double question
Désolé, mais ce n'est pas un doublon. Je viens de tester et le code de réponse à cette question produit un <li> avec trois boutons de la même taille, et je veux générer un <li> avec le principal élément de liaison et deux boutons supplémentaires, comme dans l'image.
oui, c'est exactement le même que l'article lié est d'essayer, mais il a abandonné et est venu avec une solution différente - juste pensé que peut vous aider à avancer

OriginalL'auteur Pablo | 2011-11-30

  1. 14

    J'étais enfin en mesure de réaliser quelque chose de similaire:

    Listview avec plus d'un bouton split?

    Dans le cas où quelqu'un est intéressé, voici le code final:

    <ul data-role="listview" data-filter="true" data-theme="b" style="margin-bottom: 50px;">
  <li>
    <a href="#" onclick="alert('the item!');">
      <h3>The item</h3>
    </a>
    <a href="#" onclick="alert('1st splitbutton!');" class="split-button-custom" data-role="button" data-icon="gear" data-iconpos="notext">1st link</a>
    <a href="#" onclick="alert('2nd splitbutton!');" class="split-button-custom" data-role="button" data-icon="arrow-r" data-iconpos="notext">2nd link</a>
    <a href="#" style="display: none;">Dummy</a>
  </li>
</ul>

    Et les nouvelles classes définies:

    .split-button-custom {
    float: right;
    margin-right: 10px;
    margin-top: -32px;
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;   
}

.split-button-custom span.ui-btn-inner {
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;
    padding-right: 0px;
}

.split-button-custom span.ui-icon {
    margin-top: 0px;
    right: 0px;
    top: 0px;
    position: relative;
}
    Nice. Merci pour cette. Je suis après le même genre d'effet.
    Très beau travail est ce dont j'avais besoin, grand fil

    OriginalL'auteur Pablo

  2. 6

    Inspiré par Pablo réponse

    <ul data-role="listview">
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
</ul>

    par placer les liens dans un wrapper de la div il n'y a pas besoin d'un "dummy" l'ancre (et peut prendre plus de deux ancres).

    le style css donne les boutons de la même hauteur que le listitem, de sorte que l'accessibilité est la même que la norme bouton split

    .split-custom-wrapper {
    /* position wrapper on the right of the listitem */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.split-custom-button {
    position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

.split-custom-button span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px; 
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}
    Très cool juste ce que j'étais réservation pour..

    OriginalL'auteur Arney

  3. 0

    http://jsfiddle.net/YneYY/

    <ul data-role="listview">
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
</ul>

    JS Fiddle clreated pour Arney l'exemple de

    OriginalL'auteur Sandeep Taneja

  4. 0

    Ici est une autre option pour réaliser la même chose

    http://jsfiddle.net/wZg75/

    <ul data-role='listview'>
    <li >
        <a>i can run
        </a>
        <p>test</p> 
        <p>test</p> 
        <p>test</p> 
        <p>test</p> 
        <div position=relative align=right data-role="controlgroup" data-type="horizontal">
            <a href="index.html" data-role="button">Yes</a>
            <a href="index.html" data-role="button">No</a>
            <a href="index.html" data-role="button">Maybe</a>
        </div>
    </li>
</ul>

    OriginalL'auteur Sandeep Taneja

  5. 0

    Il fonctionne pour moi

    <ul data-role="listview" >
                    <li>
                        <div class="ui-grid-b">
                            <div class="ui-block-b" style="width: 60%;">
                                <div data-role="fieldcontain">
                                    <h2>Manikandan</h2>
                                    <p>Email : [email protected]</p>
                                    <p>Store Name : Mani Store</p>
                                </div>
                            </div>
                            <div class="ui-block-c" style="width: 40%; padding-top: 20px; float: right;">
                                <div style="float: right;">
                                    <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
                                    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

    OriginalL'auteur Mani