Динамически изменяет размер Входы

У меня есть эта часть кода для страницы jQTouch/jQuery, которая динамически изменяет размеры входных данных на внутреннюю ширину окна - соответствующую ширину метки - 50 пикселей.Динамически изменяет размер Входы

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

HTML, является ...

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

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

источник

2010-01-19 DataZombies

Что происходит, когда имеется более одного div? Изменены только входы в первом div? – eliah

Это правильно. – 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(); 

});

источник

2011-08-23 08:45:18 Michael

Динамически изменяет размер Входы

ответ

Смежные вопросы