Weblogs Código

RecorteX

» jquery
73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
Estás viendo los recortes de la etiqueta jquery

RSS
Recortes: 3

Etiquetas relacionadas:
altura
javascript
menu
validacion
alertas

Inserción de alertas en la validación de los formularios

Me gustó que las etiquetas con los errores de validación se crearan en el momento de mostrar estas alertas y que además salieran con una sutil animación.


<p id="pnombre">
  <label id="lnombre">Nombre:</label>
  <input type="text" id="inombre" name="nombre"  />
</p>
...
<p class="btn"><a id="send" href="#">[enviar]</a></p>

$(document).ready(function() {
  $("#send").click(function() {
    var oForm    = document.forms[0];
    var oNombre  = oForm.elements["nombre"];
    var bOk      = true;
    $("p.error").remove();
    if(oNombre.value=="") {
      oNombre.focus();
      $("#pnombre" ).after("<p class='error'>Por favor, indíca tu nombre.</p>");
      bOk = false;
    }
    ...
    $("p.error").slideDown();
    if(bOk) oForm.submit();
    return false;
  });
});

Menu desplegable multinivel

Se trata de un menú totalmente accesible.
Puede tener varios niveles.
Los enlaces a # desplegan un submenu y los enlaces a una página van a ella.


.submenu { display: none; }

<ul id="menu">
   <li><a href="#">opcion 1</a><ul class="submenu">
      <li><a href="opcion.php">opcion 1.1</a></li>
   </ul></li>
   <li><a href="#">opcion 2</a><ul class="submenu">
      <li><a href="opcion.php">opcion 2.1</a></li>
      <li><a href="#">opcion 2.2</a><ul class="submenu">
         <li><a href="opcion.php">opcion 2.2.1</a></li>
         <li><a href="opcion.php">opcion 2.2.2</a></li>
      </ul></li>
   </ul></li>
</ul>

$(document).ready(function () {
    $("#menu a").click(fOption);
});

function fOption() {
    var jThis = $(this);
    var href  = jThis.attr("href");
    if(href.indexOf("#")>-1) {
        $(".submenu").css({ display: "none" });
        jThis.parent().children("ul").css({ display: "block" });
        jThis.parents(".submenu").css({ display: "block" });
        return false;
    }
    return true;
}

Bloques de la misma altura con jquery

Yo había creado bloques de la misma altura con jquery (es muy sencillo) pero esta función lo hace de modo genérico (se le pasa la lista de elementos).

Visto en Sentido Web

 
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
 

Ejemplo de llamada:

 
$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});
 
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin