RazorとMVC3を使用してwebgridのページャーメソッドのCSSを修正しました

Question

私はWebGridを使用しており、RazorでMVC3を使用しています。この非常にグリッドのページングには次のコードを使用しています。

問題：ページングボタンは、選択/クリックされたときと選択/クリックされなかったときの両方で同じサイズを保持する必要があります。

私は、私は私のクライアントは、私はthisフィドルリンクでhttp://fiddle.jshell.net/Z5L4g/

レイザーコード

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

それを複製していたかった設計を実現するためにCSSとJavaScriptを使用しているいくつかのCSSの問題を抱えています私のCSSコードは body { font-family：Calibri; 背景色： ＃D8D8D8; margin-top：0px; テキスト装飾：なし;私はここで

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; 

を使用していた }

#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のコードは私の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

私がコメントで言ったように、

症状を治そうとしないでください。あなたのケースでは、there is no selector for text nodesなので、CSS修正はそのトリックを行いません。

迅速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 また、これはjavascriptのコードあなたのlinklabelsを置き換える：いいえ、HTMLのは、ちょうどそのようかみそりページングコードとあるの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

選択した番号は折り返し要素なしで表示されるため、インラインで表示されます。

次のようにspanタグでラップしてみてください。私は透明な背景と黒のテキストの色を持つ以外、ブラックボックスのクラスと同じルールを共有する選択したクラスとのスパンで選択した番号を、包まれているhttp://jsfiddle.net/Z5L4g/2/

。

私はCSSの問題だとは言いませんが、マークアップの問題です。選択されたページインジケータは幅や高さを取得せず、テキストのようにスタイルを設定することはできません。

提案：マークアップを変更するか、#footerのinnerHTMLをjavascriptで分割してそこから作業してください。私は最初の選択肢に行くだろう。