使用 Razor 和 MVC3 对 webgrid 的寻呼机方法进行 CSS 修复

Question

我将 MVC3 与 Razor 一起使用，为了显示一个网格，我正在使用 WebGrid，而对于这个网格的分页，我正在使用以下代码。

我的问题：分页按钮在被选择/点击和未被选择/点击时都应该保持相同的大小。

我遇到了一些 css 问题，我使用 CSS 和 javascript 来实现我的客户想要的设计，我已经在 this fiddle link http://fiddle.jshell.net/Z5L4g/ 复制了它。

剃刀密码

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

我的 CSS 代码 身体 { 字体系列：Calibri； 背景颜色： #D8D8D8; 边距顶部：0px； 文字装饰：无； }

    #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

所选数字显示时没有包装元素，因此它是内联渲染的。

尝试将其包装在像这样的跨度标记中：http://jsfiddle.net/Z5L4g/2/

我已将所选数字包装在一个带有所选类的跨度中，它与黑盒类具有相同的规则，除了具有透明背景和黑色文本颜色。

我不会说这是一个 CSS 问题，而是一个标记问题。选定的页面指示器没有任何宽度或高度，并且不能设置样式，因为它只是文本。

建议：要么更改标记，要么使用 javascript 拆分 #footer 的 innerHTML 并从那里开始工作。我会选择第一个选项。

Answer 2

正如我在 cmets 中所说的，

不要试图治愈症状。在您的情况下，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' />");       
});   

这将用一个带有 selectedBox 类的 span 包裹你的单独文本元素，你必须为其添加一些 css。 You can see it in action here.

更新 here is a complete solution 这也替换了您的链接标签 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' />");       
});