0

我想调整我在移动应用程序中使用 Phonegap 的 jquery 移动表单元素的大小。现在我想根据屏幕大小的某个数字或百分比来调整大小并为表单元素提供更多高度。我知道 jquery Mobile 本身处理宽度，但我想通过 JS 给出高度，以便所有表单元素的高度增加该特定比率/百分比。

我知道可以更改 JQuery Mobile CSS，但我想在运行时使用 JS 更改高度，而不是设置一次 CSS。那么最好的方法是什么？

我实际上想获得屏幕尺寸并根据某个百分比为所有元素提供尺寸。虽然如果我在 jQuery Mobile CSS 上看到，那么我需要设置很多东西，但仍然不确定它是否会被设置。那么有没有办法在不修改或重写整个 CSS 的情况下做到这一点？或者我只需要编写自定义 CSS 和表单元素？

任何建议和努力将不胜感激。

4

1 回答 1

0

这是一个用输入元素演示这个的小提琴：http: //jsfiddle.net/ezanker/akgEa/

在这个例子中，我有 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);
    });
});

注意：根据您使用的表单元素类型，设置高度不适用于所有表单元素。我建议您在检查器中查看为您的表单生成的代码，看看为每种元素类型设置高度的最佳方法是什么。

于 2013-10-08T21:33:18.767 回答