Mvccontrib Pager изображения
-
09-10-2019 - |
Вопрос
Я могу использовать сетевой пейджер 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 соответствуют генерируемому разметку. Тем не менее я не вижу изображения на браузере. Есть идеи?
Для инвалидов изображений
Для включенных изображений
Решение
Конечно:
<%= 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 определяют фоновые изображения.
ОБНОВИТЬ:
Для фоновых изображений для применения ваших элементов промежутки необходимо иметь некоторое содержание. Так что попробуйте добавить пространство:
<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>
Другие советы
Попробуйте катиться своим собственным. Я реализовал пользовательскую сетку и пейджер, который использует темы jQuery ui - это может помочь вам катиться, или вы можете использовать реализацию. Блог есть здесь со ссылками на демо и источник.