Вопросы Теги

Исправление CSS для метода пейджера webgrid с использованием Razor и MVC3

Я использую MVC3 с Razor, для отображения сетки я использую WebGrid, а для разбиения по страницам для этой самой сетки я использую следующий код.

Моя задача : Разбиение по страницам-кнопки должны иметь одинаковый размер как при выборе/нажатии, так и при их невыборе/нажатии.

У меня возникли некоторые проблемы с css, я использовал CSS и javascript для достижения дизайна, который хотел мой клиент, я воспроизвел его в это fiddle link http://fiddle.jshell.net/Z5L4g/

Razor Code

@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 Code, который я использовал

    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 отображается после использования приведенного выше кода Here is how it look

, и код отображается как html ниже

​

Я знаю, что должен быть действительно простой какой-то способ или трюк, чтобы сделать это, который я просто не могу найти... пожалуйста, помогите мне в этом.

6
задан Yasser 13 June 2012 в 07:03
поделиться