Css 是否可以更改jquery移动表单元素,将大小按JS的%增加
我想调整我在移动应用程序中使用Phonegap的jquery移动表单元素的大小。现在,我想调整大小,并根据一些数字或百分比为表单元素提供更多的高度,这些数字或百分比取决于屏幕大小。我知道jquery移动句柄的宽度,但我想通过JS给出高度,这样所有表单元素的高度都会以特定的比率/百分比增加 我知道JQuery移动CSS可以更改,但我想在运行时使用JS更改高度,而不是一次设置CSS。那么,最好的方法是什么呢 实际上,我想得到屏幕大小,并根据某个百分比给出所有元素的大小。如果我看到jquerymobilecss,那么我需要设置很多东西,但仍然不确定是否会设置。那么,有没有什么方法可以在不修改或重写整个CSS的情况下做到这一点?或者我只需要编写自定义CSS和表单元素Css 是否可以更改jquery移动表单元素,将大小按JS的%增加,css,jquery-mobile,cordova,Css,Jquery Mobile,Cordova,我想调整我在移动应用程序中使用Phonegap的jquery移动表单元素的大小。现在,我想调整大小,并根据一些数字或百分比为表单元素提供更多的高度,这些数字或百分比取决于屏幕大小。我知道jquery移动句柄的宽度,但我想通过JS给出高度,这样所有表单元素的高度都会以特定的比率/百分比增加 我知道JQuery移动CSS可以更改,但我想在运行时使用JS更改高度,而不是一次设置CSS。那么,最好的方法是什么呢 实际上,我想得到屏幕大小,并根据某个百分比给出所有元素的大小。如果我看到jquerymobi
任何建议和努力都将不胜感激 这里有一把小提琴,用输入元素演示了这一点: 在本例中,我有3个文本类型的输入和一个按钮,每次单击该按钮时,该按钮的高度会翻倍。该按钮遍历每个输入,获取其当前高度,然后将高度设置为当前高度的2倍
<div data-role="fieldcontain">
<label for="textinput-fc1">Text Input:</label>
<input type="text" name="textinput-fc1" id="textinput-fc1" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc2">Text Input:</label>
<input type="text" name="textinput-fc2" id="textinput-fc2" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc3">Text Input:</label>
<input type="text" name="textinput-fc3" id="textinput-fc3" placeholder="Text input" value="" />
</div>
<input id="btnSet" type="button" value="Set Heights" data-theme="a" />
$('#btnSet').on("click", function(e){
$("[type='text']").each(function( index ) {
var curH = $(this).height();
$(this).height(curH * 2);
});
});
注意:根据您使用的表单元素的类型,设置高度不会适用于所有表单元素。我建议您查看inspector中为表单生成的代码,看看为每个元素类型设置高度的最佳方法。jQM以不同的方式呈现/增强每个表单元素。您最终需要遍历每个元素,并使用.css动态地进行更改。例如,文本输入被包装在div.ui-input-text中,selectmenu也被包装在div.ui-select中。因此,您首先需要知道所有呈现的DOM元素的结构。在您的示例中,它只是增加了字段的高度,但显示文本的位置仍然很小。这和我需要为每个元素增加很多东西的高度是一样的。所以似乎没有简单的方法可以做到这一点,比如,增加整个表单或所有元素的垂直大小e.t.c.是的,我不认为会有一行简单的代码自动缩放表单的所有元素。耶,我现在已经通过从CSS更新表单元素中的字体来做到这一点,然后更改标签和输入标签e.t.c.的宽度,以适应屏幕上的宽度。看起来不错。