MVCContrib пейджер изображение

Я могу использовать MVCContrib сетку пейджер, как показан в следующем примереMVCContrib пейджер изображение

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

Есть ли способ, чтобы изменить ссылки, чтобы показать интерактивные изображения вместо обычного текста?

EDIT

я применил решение Дарин, и она работает очень хорошо для изображения не показали браузер, за исключением. Это разметка генерируется пейджера помощник

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

и эти правила CSS определены

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

Как вы можете видеть из следующих изображений правильные правила CSS соответствуют разметки документа. Тем не менее я не вижу изображения в браузере. Есть идеи?

Для изображений с ограниченными alt text

Для активных изображений alt text

источник

2011-01-11 Lorenzo

Конечно:

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

или, если вы предпочитаете использовать CSS:

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

, а затем вотдельный файл CSS определяет фоновые изображения.

UPDATE:

Для фоновых изображений, которые должны применяться ваши пролетных элементы должны иметь некоторое содержание. Поэтому постарайтесь добавить пробел:

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

источник

2011-01-11 13:27:48

спасибо. Ваше предложение работает очень хорошо. Однако есть проблема, если я на первой или последней странице. Я бы хотел, чтобы пейджер мог использовать тусклое изображение для неактивных ссылок. Есть ли способ справиться с этим? – Lorenzo

@Lorenzo, интерактивные страницы будут находиться в теге привязки. Таким образом, вы можете написать другое правило CSS для тех пространств, которые находятся внутри привязки: '.pagination a span {/ ** ENABLE IMAGE ЗДЕСЬ ** /}'. По умолчанию вы можете сгладить изображения и включить те, которые соблюдают это правило CSS: '.pagination span {/ ** DISABLE IMAGE ЗДЕСЬ ** /}'. –

Большое спасибо. Я попытаюсь это сделать :) – Lorenzo

Попробуйте перевернуть самостоятельно. Я внедрил пользовательскую сетку и пейджер, которая использует темы пользовательского интерфейса jQuery - это может помочь вам свернуть или использовать эту реализацию. Блог here со ссылками на демо и источник.

источник

2011-01-12 11:45:31

поздравление! это выглядит впечатляюще :) – Lorenzo

MVCContrib пейджер изображение

ответ

Смежные вопросы