Question

我想调整我在移动应用中使用Phonegap的jquery移动表单元素。现在我想调整大小并根据屏幕大小的某些数字或百分比给出更高的高度来形成元素。我知道jquery Mobile手柄宽度本身，但我想通过JS给出高度，以便所有表单元素的高度按特定的比率/百分比增加。

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

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

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

Answer 1

这是一个用输入元素证明这一点的小提琴：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);
    });
});

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

是否可以更改jquery移动表单元素，按JS增加大小％

1 个答案: