6

私は Razor で MVC3 を使用しています。グリッドを表示するためにWebGridを使用しています。このグリッドのページングには次のコードを使用しています。

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

CSS に問題があります。CSS と JavaScript を使用して、クライアントが望んでいたデザインを実現しました。このフィドル リンクhttp://fiddle.jshell.net/Z5L4g/で複製しました。

レーザーコード

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

私の CSS コード body { 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修正ではうまくいきません。

ただし、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を持つスパンで唯一のテキスト要素がラップされます。 ここで実際の動作を確認できます。

ここでの更新 は完全なソリューションです 。これにより、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' />");       
});
于 2012-06-13T08:05:00.870 に答える
2

選択した数値はラッピング要素なしで表示されるため、インラインでレンダリングされます。

次のような span タグでラップしてみてください: http://jsfiddle.net/Z5L4g/2/

クラスが選択されたスパンで選択した数値をラップしました。これは、透明な背景と黒のテキスト色を除いて、ブラックボックス クラスと同じルールを共有します。

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

提案: マークアップを変更するか、#footer の innerHTML を javascript で分割して、そこから作業してください。私は最初のオプションを使用します。

于 2012-06-13T07:12:26.943 に答える