Динамическое изменение размера входов - PullRequest
Новая
       9

Динамическое изменение размера входов

2 голосов
/ 19 января 2010

У меня есть этот фрагмент кода для страницы jQTouch / jQuery, который динамически изменяет размеры входных данных в innerWidth окна - соответствующая ширина метки - 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 в приложении. Кто-нибудь есть какие-либо предложения о том, как получить этот код для изменения размера входов, когда входы и метки не на 1-й панели?

1 Ответ

1 голос
/ 23 августа 2011 
$('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();

});
...