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