2

我可以使用 MVCContrib Grid Pager，如下例所示

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

有没有办法修改链接以显示可点击的图像而不是纯文本？

编辑

我已经应用了 Darin 解决方案，除了浏览器未显示图像外，它的效果非常好。这是寻呼机助手生成的标记

<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 规则与生成的标记相匹配。我仍然无法在浏览器上看到图像。任何的想法？

对于禁用的图像 替代文字

对于启用的图像 替代文字

4

2 回答 2

3

当然：

<%= 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>
于 2011-01-11T13:27:48.217 回答
1

尝试自己滚动。我已经实现了一个利用 jQuery UI 主题的自定义 Grid 和 Pager - 它可以帮助您自己滚动，或者您可以使用该实现。博客在这里带有演示和源代码的链接。

于 2011-01-12T11:45:31.253 回答