Solución CSS para el método de buscapersonas de webgrid usando Razor y MVC3

Question

Estoy usando MVC3 con Razor, para mostrar una grilla estoy usando WebGrid, y para buscar esta cuadrícula, estoy usando el siguiente código.

Mi problema: Los botones de búsqueda deben mantener el mismo tamaño tanto cuando se seleccionan/hacen clic y cuando no se seleccionan/hacen clic.

Estoy teniendo algunos problemas css, he utilizado CSS y Javascript para lograr un diseño que mi cliente quería he replicado al enlace this violín http://fiddle.jshell.net/Z5L4g/

Código Razor

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

Mi código CSS cuerpo { font-family: Calibri; color de fondo: # D8D8D8; margin-top: 0px; texto-decoración: ninguno; }

#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; 
    } 

Código Javascript he utilizado

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; 

Aquí es cómo mi HTML se hacen después de usar el código anterior

y el código se representa como HTML está por debajo de

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

Sé que tiene que ser realmente fácil alguna forma o truco para hacer esto, que simplemente no puedo encontrar ... por favor, ayúdenme en esto.

Answer 1

Como ya he dicho en los comentarios,

no tratan de curar los síntomas. En su caso, una solución CSS no funcionará porque there is no selector for text nodes.

una solución rápida sería jQuery a pesar de que el truco:

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

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

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

Esto envolver su elemento de texto en solitario con un palmo con selectedBox clase para la que hay que añadir un poco de CSS. You can see it in action here.

ACTUALIZACIÓN here is a complete solution Esto también sustituye a su linklabels código 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

El número seleccionado se muestra sin un elemento de envoltura, por lo que se representa en línea.

Trate de envolver en una etiqueta span así: http://jsfiddle.net/Z5L4g/2/

he envuelto el número seleccionado en un lapso con la clase seleccionada, que comparte las mismas reglas que la clase de la caja negra, excepto tener fondo transparente y el color del texto negro .

No diría que es un problema de CSS, pero un problema de marcado. El indicador de página seleccionado no tiene ancho ni alto y no se puede diseñar, ya que solo es texto.

Sugerencia: cambie el marcado, o divida el innerHTML del #footer con javascript y trabaje desde allí. Me gustaría ir con la primera opción.