jQuery UI Icônes de la difficulté - comment puis-je obtenir juste l'image affichée

À l'aide de jQuery UI icônes, je veux juste afficher l'icône dans la ligne avec le reste ("il vous suffit d'afficher l'icône, sans saut de ligne, etc). Fondamentalement, je veux obtenir une ligne d'images cliquables, alors que je suis en utilisant jQuery UI thèmes pour ma page.

Ici certaines choses que j'ai essayé:

1: <div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/>
2: <input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />

1: complètement gâcher la mise en page.
2: donne mon un supplément de saut de ligne autour de l'image

-- demande de contexte plus large --

 <tr class="ui-widget-content">
   <td>...</td>
   <td>
      <input name="xy" id="xy" type="text" size="5" />
      <input name="xz" id="xz" type="text" size="5" />
      <input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />
    </td>
  </tr>

-- span --

À l'aide de span conduit à la même chose que ci-dessus, l'icône est affichée, mais dans sa propre ligne.

  <span class="ui-icon ui-icon-carat-1-n"></span>

jQuery UI Icônes de la difficulté - comment puis-je obtenir juste l'image affichée

À l'aide d'icônes où exactement? Dans ce contexte?
Vous ne pouvez pas utiliser une image sprite comme une image normale, si vous souhaitez afficher une INTERFACE utilisateur icône inline essayer de les appliquer à une durée de (inline) de la balise. par exemple <span class="ui-icon ui-icon-carat-1-n"></span>
Yep, mais ce qui était essentiellement le manque de l'inline-block comme dans la réponse ci-dessous.

OriginalL'auteur Horst Walter | 2011-08-05

  1. 10

    Je pense que la clé est de faire de l'icône de conteneurs display: inline-block.

    <div style="display: inline-block" class="ui-state-default">
    <span class="ui-icon ui-icon-lightbulb"></span>
</div>

    Voir cet exemple: http://jsfiddle.net/2U5TN/1/.

    Aussi, vous pouvez trouver cette page utile: http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html. Il affiche toutes les icônes possibles que vous pouvez utiliser avec jQuery UI CSS.

    OriginalL'auteur William Niu

  2. 1

    Utiliser la barre d'outils Exemple sur le site de Jquery UI http://jqueryui.com/demos/button/#toolbar

    La mise en texte de faux, juste afficher l'icône:

    $( "#beginning" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-start"
            }
        });

    Il apparaît également qu'ils utilisent la valeur de texte de garder une trace de l'état du bouton. Consulter le play/pause et stop boutons dans l'exemple.

    À partir du lien ci-dessus, je suis également à travers les filamentgroup.com/lab/... qui est une belle intro. Merci pour pointer dans cette direction.

    OriginalL'auteur Chris Lucian