Sửa lỗi CSS cho phương pháp máy nhắn tin của webgrid bằng Razor và MVC3

Question

Tôi đang sử dụng MVC3 với Dao cạo, để hiển thị lưới Tôi đang sử dụng WebGrid và để phân trang cho lưới này, tôi đang sử dụng mã sau.

Vấn đề của tôi: Nút phân trang phải giữ cùng kích thước khi chúng được chọn/nhấp và khi chúng không được chọn/nhấp.

Tôi gặp một số vấn đề css, tôi đã sử dụng CSS và javascript để đạt được một thiết kế mà khách hàng của tôi muốn tôi đã nhân rộng nó tại liên kết this fiddle http://fiddle.jshell.net/Z5L4g/

Razor Mã

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

Mã CSS của tôi nội dung { họ phông chữ: Calibri; màu nền: # D8D8D8; margin-top: 0px; trang trí văn bản: không có; }

#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 Mã Tôi đã sử dụng

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; 

Đây là cách HTML của tôi được làm sau khi sử dụng các mã trên

và mã được render như html là bên dưới

<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>​ 

Tôi biết phải có một cách thực sự dễ dàng để thực hiện việc này, điều mà tôi không thể tìm thấy ... hãy giúp tôi thực hiện việc này.

Answer 1

Như tôi đã nói trong phần nhận xét,

không cố gắng chữa lành các triệu chứng. Trong trường hợp của bạn, bản sửa lỗi CSS sẽ không thực hiện thủ thuật vì there is no selector for text nodes.

một sửa chữa nhanh chóng jquery sẽ để lừa mặc dù:

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

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

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

này sẽ quấn yếu tố văn bản duy nhất của bạn với một nhịp với lớp selectedBox mà bạn có thêm một số css. You can see it in action here.

CẬP NHẬT here is a complete solution này cũng thay thế linklabels bạn mã 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

Số được chọn được hiển thị mà không có phần tử bao gói, do đó, nó được hiển thị nội dòng.

Hãy thử gói nó trong một thẻ div như thế này: http://jsfiddle.net/Z5L4g/2/

tôi đã quấn số được lựa chọn trong một khoảng thời với lớp chọn, mà chia sẻ các quy tắc tương tự như các lớp Blackbox, ngoại trừ có nền trong suốt và màu sắc văn bản màu đen .

Tôi sẽ không nói đó là vấn đề về CSS, mà là vấn đề đánh dấu. Chỉ báo trang đã chọn không nhận được bất kỳ chiều rộng hoặc chiều cao nào và không thể được tạo kiểu vì nó chỉ là văn bản.

Đề xuất: hoặc thay đổi đánh dấu hoặc chia innerHTML của #footer bằng javascript và làm việc từ đó. Tôi sẽ đi với tùy chọn đầu tiên.