MVCContrib尋呼機圖像

我能夠使用MVCContrib電網尋呼機如下面的示例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>

生成的標記，這些都是定義

.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規則生成的標記匹配看到的CSS規則。我仍然無法在瀏覽器上看到圖像。任何想法？

對於殘疾人士的圖像 alt text

對於啓用圖像 alt text

來源

2011-01-11 Lorenzo

當然：

<%= 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文件定義背景圖像。

UPDATE：

爲背景圖片將應用於您的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-11 13:27:48

謝謝。你的建議很好。但是，如果我在第一頁或最後一頁上，則會出現問題。我希望尋呼機可以爲不活動的鏈接使用灰色圖像。有沒有辦法解決這個問題？ – Lorenzo 2011-01-11 19:08:19

@Lorenzo，可點擊的頁面將位於錨標籤內。因此，您可以爲錨內的跨度編寫不同的CSS規則：`.pagination a span {/ ** ENABLE IMAGE HERE ** /}`。默認情況下，您可以調暗圖像並啓用尊重此CSS規則的圖像：`.pagination span {/ ** DISABLE IMAGE HERE ** /}`。 – 2011-01-11 19:21:05

試着滾動你自己的。我已經實現了一個自定義的Grid和Pager，它利用了jQuery UI主題 - 它可以幫助你推出自己的或者你可以使用實現。博客是here，鏈接到演示和源代碼。

來源

2011-01-12 11:45:31

MVCContrib尋呼機圖像

回答

相關問題