Comment faire pour utiliser jQuery UI icônes sans boutons?

jQuery UI est livré avec des icônes de bonnes.
Comment puis-je les utiliser sans boutons? Disons que la façon de créer un lien avec plus signer et à réagir sur le vol stationnaire et cliquez sur par le changement des icônes?
Ici est la démo juste avec ajout d'une icône.

Upd 1:
Sur passez la souris sur l'icône doit changer la couleur du gris au noir (veuillez voir ici). Dans mon démo c'est noir dès le début.

2 Upd:
Ici est presque ce que j'ai besoin d' - http://jsfiddle.net/and7ey/gZQzt/6/ - mais sans que le rectangle de fond, j'ai juste besoin du signe plus.

3 Upd:
Ressemble, il serait préférable de ne pas utiliser la norme de jQuery UI styles, mais de se référer directement à la images, mais je ne sais pas comment l'utiliser.

Semble que j'ai besoin de définir CSS comme:

width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;

Positions peuvent être facilement trouvés sur jquery.l'interface utilisateur.thème.css fichier.
Mais comment dois-je:

  1. définir correcte de fond-url de l'image?
  2. modifier le CSS pour réagir sur un clic, passez?
Pouvez-vous préciser votre question? Vous avez déjà utilisé les bonnes classes, etc., j'imagine donc que la référence à la CSS a:hover { ... } n'est pas nécessaire ici.
J'ai mis à jour la question.
mise à jour de ma réponse, donc il répond à planer.

OriginalL'auteur LA_ | 2011-11-06

  1. 9

    Vous pouvez utiliser les icônes avec n'importe quel élément en ajoutant le ui-icon et la classe appropriée pour l'icône que vous souhaitez pour l'élément.

    <a href="#" class="ui-icon ui-icon-plusthick"></a>

    Si vous voulez ajouter du texte pour le lien ainsi que l'icône, vous aurez besoin de mettre de l'icône sur un élément du texte. Par exemple:

    <a href="#"><span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span></a>

    De changer l'icône sur le vol stationnaire, vous aurez besoin d'utiliser un peu de javascript. La suite nécessite jQuery:

    $(".MySelector").hover(function() { 
    $(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() { 
    $(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});
    Évidemment, vous n'avez pas testé cette. ui-icon permet de définir une largeur fixe, il n'est donc pas possible de la définir n'importe quel texte du lien, sauf si vous utilisez d'autres règles CSS pour la largeur.
    J'ai testé, mais n'a pas pensé à le mentionner. Je vais mettre à jour la réponse.
    Il fonctionne, mais l'icône n'est pas modifié sur la souris sur...
    Je vois le hover exigence dans votre post aujourd'hui, mais il n'était pas là quand j'ai répondu à la question. Voir mon edit.
    Merci, @Kyle. Mais encore une fois il ne fonctionne pas - jsfiddle.net/and7ey/gZQzt/5 - tout d'abord, l'icône n'est pas modifié. Deuxièmement, icône incorrect est utilisé (comment extraire le gris icône plus, qui est utilisé avec la norme jquery bouton?).

    OriginalL'auteur Kyle Trauberman

  2. 8

    Ce n'est pas "bon", mais au moins cela fonctionne.
    Veuillez spécifier votre question, ce qui devrait arriver sur cliquez et faites glisser.

    Échantillon

    http://jsfiddle.net/gZQzt/2/

    HTML

    <a href="#" class="img-link">
    <span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
    <span class="link-text">Link</span>
</a>

    CSS

    .img-link {
    text-decoration: none;
}

.link-text {
    text-decoration: underline;
}

    OriginalL'auteur Smamatti

  3. 4

    Essayez ceci:

    <a>
  <span class="ui-icon ui-icon-plusthick"></span>
</a>

    et:

    $('a').hover(function(){$(this).toggleClass('ui-state-highlight')});

    Vous pouvez le voir ici: http://jsfiddle.net/gZQzt/4/

    J'ai testé cela dans la dernière version de FF - lorsque la souris sur cette icône, il est constamment rafraîchir (et même un peu de bleu plus est affiché près de la normale et plus) - c'est sûrement ce que je ne veux pas avoir.

    OriginalL'auteur samura

  4. 2

    Puisque je ne peux pas répondre à des réponses encore, voici ce que j'ai fait à l'aide de Kyle Traubermann code:

    <div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>

    Fondamentalement, vous devez mettre de l'état dans un autre div. Cela modifie l'image de la bonne couleur, mais il ajoute également une frontière et un gloss, donc j'ai dû le désactiver avec nvos. Vous pourriez avoir besoin d'une couleur: none; là aussi bien.

    Il y a probablement un moyen plus simple de faire cela, mais je ne connais pas vraiment sur CSS encore.

    Malheureusement, il n'affiche rien jsfiddle.net/xUWvD
    Je n'ai aucune idée de ce que jsfiddle est en train de faire, mais vous devez inclure le css: durand1.co.cc/dump/jqueryui_icons/icons.html j'ai aussi fait une erreur. L'icône est appelée à vérifier, pas de tique, mais le reste du code doit être correcte.

    OriginalL'auteur Durand

  5. 1

    Enfin, j'ai juste décidé d'utiliser jQuery UI fichiers d'image - Comment utiliser une icône à partir de différents fichiers d'image?:

    a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}

    OriginalL'auteur LA_

  6. 1

    De l'INTERFACE utilisateur sur l'icône de point d'ancrage (pas de texte):

    Fonctionne pour moi:

    <a href="http://wow.com"><span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span></a>

    Pertinente: à l'ordre de l'interface utilisateur, les noms de classe.

    OriginalL'auteur Michal Wrd