使用剃刀和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分开，并从那里开始工作。我会选择第一个选项。