使用剃刀和MVC3的webgrid的尋呼機方法的CSS修復程序

Question

我正在使用MVC3與剃刀，用於顯示一個網格我正在使用WebGrid，併爲此非常網格分頁使用下面的代碼。

我的問題：分頁按鈕應保持相同的大小，當他們被選中/點擊，當他們沒有被選中/點擊。

我有，我已經使用CSS和JavaScript來實現設計，我的客戶希望我在this撥弄鏈接複製它http://fiddle.jshell.net/Z5L4g/

剃刀代碼

@grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 15, firstText: "<<", lastText: ">>", previousText: "<", nextText: ">") 

一些CSS問題我的CSS代碼 body { font-family：Calibri; background-color： ＃D8D8D8; margin-top：0px; text-decoration：none; }

#footer:not([href]) { 
    letter-spacing: 0px; 
    } 

    #footer { 
    text-align: center; 
    margin-top: 10px; 
    } 

    .pagingCss { 
    font-size: 13px; 
    } 

    .whiteBox { 
    background-color: 
    white; 
    color: 
    black; 
    padding-right: 7px; 
    padding-left: 7px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    text-decoration: none; 
    margin-top: 10px; 
    letter-spacing: 0px; 
    } 

    .blackBox { 
    background-color: 
    black; 
    color: 
    white; 
    padding-right: 7px; 
    padding-left: 7px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    text-decoration: none; 
    margin-top: 10px; 
    letter-spacing: 0px; 
    } 

    .pagingCss a { 
    font-size: 13px; 
    color: white; 
    text-decoration:none; 
    } 

的Javascript我已經使用

var keywords = ['>>', '<<', '<', '>']; 

    function linklabels() { 

     var footerDiv = document.getElementById('footer'); 
     var oldLinks = footerDiv.getElementsByTagName('A'); 

     var oldLinksCount = oldLinks.length; 
     var keywordsCount = keywords.length; 

     for (var i = 0; i < oldLinks.length; i++) { 

      if (oldLinks[i].firstChild.nodeValue == '>>' || oldLinks[i].firstChild.nodeValue == '<<' || oldLinks[i].firstChild.nodeValue == '>' || oldLinks[i].firstChild.nodeValue == '<') { 
       var my_div = null; 
       var newDiv = null; 

       var newDiv = document.createElement("span"); 
       var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue); 
       newDiv.appendChild(newContent); 
       newDiv.className = "whiteBox"; 

       oldLinks[i].firstChild.nodeValue = ""; 

       oldLinks[i].appendChild(newDiv); 
      } 
      else { 
       var my_div = null; 
       var newDiv = null; 

       var newDiv = document.createElement("span"); 
       var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue); 
       newDiv.appendChild(newContent); 
       newDiv.className = "blackBox"; 

       oldLinks[i].firstChild.nodeValue = ""; 

       oldLinks[i].appendChild(newDiv); 
      } 

     } // end of for 

     // footer 

    } 
    window.onload = linklabels; 

下面的代碼是我的HTML是如何使用上面的代碼

後呈現和代碼呈現爲HTML低於

<div id="footer" class="pagingCss"> 

<a href="/CompanySearch/Home/Results?page=1"> 
    <span class="whiteBox">&lt;&lt;</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=5"> 
    <span class="whiteBox">&lt;</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=1"> 
    <span class="blackBox">1</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=2"> 
    <span class="blackBox">2</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=3"> 
    <span class="blackBox">3</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=4"> 
    <span class="blackBox">4</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=5"> 
    <span class="blackBox">5</span> 
</a> 

6 <a href="/CompanySearch/Home/Results?page=7"> 
<span class="blackBox">7</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=8"> 
    <span class="blackBox">8</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=9"> 
    <span class="blackBox">9</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=10"> 
    <span class="blackBox">10</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=7"> 
    <span class="whiteBox">&gt;</span> 
</a> 

<a href="/CompanySearch/Home/Results?page=10"> 
    <span class="whiteBox">&gt;&gt;</span> 
</a> 
    </div>​ 

我知道必須有一些方法或技巧來做到這一點，這是我找不到的......請幫我解決這個問題。

Answer 1

正如我在評論中所說的，

不要試圖治癒症狀。在你的情況下，一個CSS修復不會執行這個技巧，因爲there is no selector for text nodes。

快速jQuery的解決將在招雖然：

$(function() { 
$("#footer").contents().filter(function() { 

    var $this = $(this); 
    return $this.children().length == 0 && $.trim($this.text()).length > 0; 

}).wrap("<span class='selectedBox' />");  
}); 

這將與您必須添加一些CSS類selectedBox跨度換你孤獨的文本元素。 You can see it in action here.

UPDATE here is a complete solution 這也替換您linklabels javascript代碼：

function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

$(function() { 
$("#footer a").contents().wrap("<span class='blackBox' />"); 
$("#footer").find("a span").each(function(){ 
    var val = $.trim($(this).text()); 
    if (!isNumber(val)) 
     $(this).attr('class', 'whiteBox');  
    });  

$("#footer").contents().filter(function() { 

    var $this = $(this); 
    return $this.children().length == 0 && $.trim($this.text()).length > 0; 

}).wrap("<span class='whiteBox' />");  
}); 

Answer 2

所選編號顯示時沒有包裝元素，因此它以內聯方式呈現。

嘗試包裹它在一個範圍標記是這樣的：http://jsfiddle.net/Z5L4g/2/

我已經包裹在與類跨度所選擇的號碼中選擇，這股相同的規則作爲黑盒類，除了具有透明背景和黑色文本顏色。

我不會說這是一個CSS問題，而是一個標記問題。選定的頁面指示器不具有任何寬度或高度，因爲它只是文本而無法設置樣式。

建議：更改標記或將#footer的innerHTML與javascript分開，並從那裏開始工作。我會選擇第一個選項。