Comment le style d'une liste non ordonnée avec jQuery UI, de sorte que les éléments de commencer avec une INTERFACE utilisateur icône au lieu de la valeur par défaut de la liste de symbole?

Je voudrais utiliser une icône de la jQuery UI icon set de style une liste non ordonnée.

<div>
    <ul>
        <li>John Doe</li>
        <li>Jack Snow</li>
        <li>Mary Moe</li>
    </ul>
</div>

Par défaut, cette liste apparaît avec des points à l'avant de chaque élément:

  • John Doe
  • Jack Neige
  • Marie Moe

Au lieu je voudrais remplacer le point par une icône comme ui-icon-person

Comment faire cela?

OriginalL'auteur oko | 2010-12-12

  1. 5

    Je sais que cette question est un peu out-of-date - mais ici, c'est un travail entièrement exemple:

    HTML:

    <div>
  <ul class="icon person">
    <li>John Doe</li>
    <li>Jack Snow</li>
    <li>Mary Moe</li>
  </ul>
</div>

    CSS:

    ul.icon {
    list-style: none; /* This removes the default bullets */
    padding-left: 20px; /* This provides proper indentation for your icons */
}
ul.icon li { 
    position: relative; /* Allows you to absolutely place the :before element
                           relative to the <li>'s bounding box. */
}
ul.icon.person li:before {
    background: url(/images/ui-icons_888888_256x240.png) -144px -96px;
   /* ex: download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png */
   /* The -144px, -96px coordinate is the location of the 16x16 Person icon */

    /* The next 2 lines are necessary in order to make the :before pseudo-element
       appear, and thereby show it's background, your icon. */
    content: ''; 
    display: inline-block;

    /* Absolute is always in relation to the nearest positioned parent. In this
       case, that's the <li> with _relative_ positioning, above. */
    position: absolute;

    left: -16px; /* Places the icon 16px left of the <li>'s edge */
    top: 2px;    /* Adjust this based on your font-size and line-height */

    height: 16px; width: 16px; /* jQuery UI icons (with spacing) are 16x16 */
}

    Ici est un jsFiddle montrant de travail. Le résultat devrait ressembler à quelque chose comme ceci:

    Comment le style d'une liste non ordonnée avec jQuery UI, de sorte que les éléments de commencer avec une INTERFACE utilisateur icône au lieu de la valeur par défaut de la liste de symbole?

    La raison que j'ai utilisé le :before pseudo-élément, c'est que vous êtes désireux d'utiliser jQuery-UI icônes qui apparaissent dans la forme d'une image-objet de la carte. En d'autres termes, toutes les icônes sont trouvés dans une grille à l'intérieur d'une seule image, comme dans cet exemple:

    Source: http://download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png

    Comment le style d'une liste non ordonnée avec jQuery UI, de sorte que les éléments de commencer avec une INTERFACE utilisateur icône au lieu de la valeur par défaut de la liste de symbole?

    Si vous avez essayé de faire juste le fond de la <li> cette image, il serait plus compliqué de faire la même icône que vous souhaitez apparaître sans l'affichage de l'ensemble de ses voisins. À l'aide de la :before élément, cependant, vous pouvez créer une plus petite, 16px par 16px zone de l'icône, et ainsi de facilement couper vers le bas à montrer une seule icône.

    Si vous voulez en savoir plus sur :before et :after pseudo-éléments, découvrez ce fantastique article comme un point de départ.

    OriginalL'auteur Troy Alford

  2. 4

    Regardant le source de la page, il suffit de mettre le fichier de la classe de l'élément de la liste pour effacer l'élément standard, puis de définir une balise span ajouter l'icône nouveau.

    <li class="ui-state-default ui-corner-all">
  <span class="ui-icon ui-icon-person"></span>
</li>

    OriginalL'auteur Codemwnci

  3. 1
    ul li { 
    list-style-type: none; 
    background: url('your/path/image.png') no-repeat left center; 
}

    Vous devrez peut-être ajouter un peu de padding à gauche.

    OriginalL'auteur Vlad.P