Redimensionner dynamiquement Entrées

J'ai ce morceau de code pour une page jQTouch/jQuery qui redimensionne dynamiquement les entrées de la largeur intérieure de la fenêtre - la largeur d'étiquette associée - 50px.Redimensionner dynamiquement Entrées

<html> 
<head> 
<title>resizeInputs</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> 
<style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.min.css";</style> 
<script src="jqtouch/jquery.1.3.2.min.js" type="application/javascript"></script> 
<script src="jqtouch/jqtouch.min.js" type="application/javascript"></script> 
<script type="text/javascript"> 
var jQT = $.jQTouch({ 
    statusBar: 'default' 
}); 

$(document).ready(function() { 
    function resizeInputs() { 
    $($("input").filter("[type='email'],[type='tel'],[type='text'],[type='url']")).each(function() { 
    $(this).css("width", window.innerWidth - $(this).siblings("label").width() - 50 + "px"); 
    console.log($(this).attr("id")+": " +$(this).siblings("label").length+": "+$(this).siblings("label").width()); 
    }); 
    }; 
    resizeInputs(); 
    $("body").bind("turn", resizeInputs); 
}); 
</script>

Le code HTML est ...

<div id="pnl"> 
    <div class="toolbar"> 
    <h1>resizeInputs</h1> 
    </div> 
    <ul class="edit rounded"> 
    <li> 
     <label for="in1">Input 1</label> 
     <input id="in1" type="text" pattern="\d*" /> 
    </li> 
    <li> 
     <label for="in2">REAAALLLY LONG LABEL</label> 
     <input id="in2" type="url" /> 
    </li> 
    </ul> 
</div>

Il fonctionne très bien si vous avez seulement un panneau div dans l'application. Quelqu'un at-il une suggestion sur la façon d'obtenir ce code pour redimensionner les entrées lorsque les entrées et les étiquettes ne sont pas sur le 1er panneau? Que se passe-t-il lorsqu'il y a plus d'un div?

Source

2010-01-19 DataZombies

Seules les entrées de la première div sont redimensionnées? – eliah

C'est exact. – DataZombies

$('input[type=text]').bind('keydown keyup',function(){ 

    $(this).after('<span class="temp">' + $(this).val() + '</span>'); 

    var minWidth = 50, 
     width = ($(this).next('span.temp').width() > minWidth) ? $(this).next('span.temp').width() : minWidth ; 

    $(this).css('width', width + 20).next('span.temp').remove(); 

});

Source

2011-08-23 08:45:18 Michael

Redimensionner dynamiquement Entrées

Répondre

Questions connexes