2

次のサンプルのように MVContrib 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 ファイルで背景画像を定義します。

アップデート：

背景画像を適用するには、スパン要素に何らかのコンテンツが必要です。スペースを追加してみてください：

<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 に答える