MVCContrib пейджер изображения - PullRequest
Новая
       21

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

2 голосов
/ 11 января 2011

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

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

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

РЕДАКТИРОВАТЬ

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

<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

Ответы [ 2 ]

3 голосов
/ 11 января 2011

Конечно: 

<%= 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 определите фоновые изображения.

ОБНОВЛЕНИЕ:

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

<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>
1 голос
/ 12 января 2011

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

...