MVCCONTRIB PAGER图像
-
09-10-2019 - |
题
我能够像以下样本一样使用MVCCONTRIB网格Pager
Html.Pager(Model.CustomerList)
.First("First")
.Last("Last")
.Next("Next")
.Previous("Previous")
有什么方法可以修改链接以显示可单击的图像而不是纯文本?
编辑
我已经应用了Darin解决方案,除了浏览器未显示的图像外,它非常好。这是Pager Helper产生的标记
<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主题 - 它可能会帮助您滚动自己,也可以使用该实现。博客是 这里 带有指向演示和源的链接。
不隶属于 StackOverflow