Dynamically resize Inputs
I've got this piece of code for a jQTouch/jQuery page that dynamically resizes inputs to the window's innerWidth - the associated label width - 50px.
<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/javasc开发者_开发问答ript"></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>
The HTML is...
<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>
It works great if you only have one div panel in the app. Does anyone have any suggestion on how to get this code to resize inputs when the inputs and labels are not on the 1st panel?
$('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();
});
加载中,请稍侯......
精彩评论