images pager MvcContrib

Question

Je suis en mesure d'utiliser la grille MvcContrib Pager comme dans l'exemple suivant de

Html.Pager(Model.CustomerList)
        .First("First")
        .Last("Last")
        .Next("Next")
        .Previous("Previous")

Est-il possible de modifier les liens pour afficher des images cliquables au lieu de texte brut?

EDIT

J'ai appliqué la solution Darin et il fonctionne très bien à part l'image ne pas être montré par le navigateur. Ceci est le balisage généré par l'assistant de pager

<div class="pagination">
    <span class="paginationLeft">1-2 di 4</span>
    <span class="paginationRight">
        <span class="first"></span> | 
        <span class="previous"></span> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="next"></span>
        </a> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="last"></span>
        </a>
    </span>
</div>

et ce sont les règles CSS définies

.pagination span.paginationRight span.first { width: 12px; height: 12px; background-image: url('../images/disabled-pager-first.png') }
.pagination span.paginationRight span.next { width: 12px; height: 12px; background-image: url('../images/disabled-pager-next.png') }
.pagination span.paginationRight span.last { width: 12px; height: 12px; background-image: url('../images/disabled-pager-last.png') }
.pagination span.paginationRight span.previous { width: 12px; height: 12px; background-image: url('../images/disabled-pager-previous.png') }

.pagination span.paginationRight a span.first { width: 12px; height: 12px; background-image: url('../images/pager-first.png') }
.pagination span.paginationRight a span.next { width: 12px; height: 12px; background-image: url('../images/pager-next.png') }
.pagination span.paginationRight a span.last { width: 12px; height: 12px; background-image: url('../images/pager-last.png') }
.pagination span.paginationRight a span.previous { width: 12px; height: 12px; background-image: url('../images/pager-previous.png') }

Comme vous pouvez le voir sur les images ci-dessous les règles CSS correctes correspondent au balisage généré. Je ne peux toujours pas voir les images sur le navigateur. Toute idée?

Pour les images handicapées

Pour les images activé

Answer 1

Bien sûr:

<%= Html.Pager(Model.CustomerList)
        .First("<img src=\"http://example.com/first.png\" alt=\"first\" />")
        .Last("<img src=\"http://example.com/last.png\" alt=\"last\" />")
        .Next("<img src=\"http://example.com/next.png\" alt=\"next\" />")
        .Previous("<img src=\"http://example.com/previous.png\" alt=\"previous\" />")
%>

ou si vous préférez utiliser CSS:

<%= Html.Pager(Model.CustomerList)
        .First("<span class=\"first\" />")
        .Last("<span class=\"last\" />")
        .Next("<span class=\"next\" />")
        .Previous("<span class=\"previous\" />")
%>

puis dans un fichier CSS séparé définir les images d'arrière-plan.

---

Mise à jour:

Pour les images de fond à appliquer vos éléments span besoin d'avoir un certain contenu. Donc, essayez d'ajouter un espace:

<div class="pagination">
    <span class="paginationLeft">1-2 di 4</span>
    <span class="paginationRight">
        <span class="first">&nbsp;</span> | 
        <span class="previous">&nbsp;</span> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="next">&nbsp;</span>
        </a> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="last">&nbsp;</span>
        </a>
    </span>
</div>

Answer 2

Essayez rouler votre propre. J'ai mis en place une coutume grille et Pager qui profite des thèmes jQuery UI - il peut vous aider à rouler votre propre ou vous pouvez utiliser la mise en œuvre. Blog est avec des liens vers une démo et la source.