MVCContrib Pager Bilder

Ich kann die MVCContrib Grid Pager wie in dem folgende BeispielMVCContrib Pager Bilder

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

Gibt es eine Möglichkeit nutzen Sie die Links zu modifizieren anklickbare Bilder zu zeigen, statt Klartext?

EDIT

I Darin Lösung angewendet haben und es funktioniert sehr schön, außer für das Bild vom Browser nicht gezeigt werden. Dies ist das Markup durch den Pager Helfer erzeugt

<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>

und das sind die

.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') }

definiert CSS-Regeln

Wie Sie aus den folgenden Bildern die richtigen CSS-Regeln entsprechen dem Markup generiert sehen können. Trotzdem kann ich keine Bilder im Browser sehen. Irgendeine Idee?

Für behinderte Bilder alt text

Für aktiviert Bilder alt text

Quelle

2011-01-11 Lorenzo

Natürlich:

<%= 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\" />") 
%>

oder wenn Sie es vorziehen, CSS zu verwenden:

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

und dann in ein separate CSS-Datei definieren die Hintergrundbilder.

UPDATE:

Hintergrundbilder angewendet Ihre Spannweite Elemente werden müssen einige Inhalte haben. So versuchen Sie, ein Leerzeichen hinzuzufügen:

<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>

Quelle

2011-01-11 13:27:48

Vielen Dank. Dein Vorschlag funktioniert ziemlich gut. Es gibt jedoch ein Problem, wenn ich auf der ersten oder letzten Seite bin. Ich möchte, dass der Pager ein abgeblendetes Bild für die Links verwenden kann, die inaktiv sind. Gibt es einen Weg, damit umzugehen? – Lorenzo

@Lorenzo, anklickbare Seiten befinden sich in einem Anker-Tag. Sie könnten also eine andere CSS-Regel für die Bereiche schreiben, die sich in einem Anker befinden: '.pagination a span {/ ** Bild hier aktivieren ** /}'. Standardmäßig können Sie Bilder dimmen und diejenigen aktivieren, die diese CSS-Regel einhalten: '.pagination span {/ ** DISPLAY BILD HIER ** /}'. –

Vielen Dank. Ich werde es versuchen :) – Lorenzo

Versuchen Sie, Ihre Selbst zu rollen. Ich habe ein benutzerdefiniertes Grid und Pager implementiert, das die Vorteile von jQuery UI-Designs nutzt. Es kann Ihnen dabei helfen, eigene Designs zu erstellen, oder Sie können die Implementierung verwenden. Blog ist here mit Links zu einer Demo und Quelle.

Quelle

2011-01-12 11:45:31

gratulation! es sieht beeindruckend aus :) – Lorenzo

Antwort

Verwandte Themen