6

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

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

我遇到了一些 css 问题，我使用 CSS 和 javascript 来实现我的客户想要的设计，我已经在这个小提琴链接http://fiddle.jshell.net/Z5L4g/上复制了它

剃刀代码

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

我的 CSS 代码 正文 { font-family: 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>​

我知道必须有一些非常简单的方法或技巧来做到这一点，我只是找不到......请帮我解决这个问题。

4

2 回答 2

3

正如我在评论中所说，

不要试图治愈症状。在您的情况下，CSS 修复无法解决问题，因为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。 你可以在这里看到它的实际效果。

这里的更新 是一个完整的解决方案 这也替换了您的链接标签 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' />");       
});
于 2012-06-13T08:05:00.870 回答
2

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

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

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

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

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

于 2012-06-13T07:12:26.943 回答