2

我一直在研究这个链接，但我不知道他如何调整选项框的大小，我想知道如何在 jquery mobile 中调整选项框文本框按钮等的大小，但我找不到调整它们大小的方法我也想知道它是否可以在使用内部页面的 jquery mobile 上 impelement ajax 吗？以及如何设置标签和文本框之间的距离？这里是链接的代码

http://jsfiddle.net/HwFFU/1/

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <form method="post" action="processForm.php">                    
        <li data-role="fieldcontain"> 
            <label for="children" class="select">Number of Kids</label>
            <select name="children" id="children" data-mini="true">
               <option value="0">0</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
            </select> 
        </li>
            <div id="kidsFields"></div>
    </form>        
    </div><!-- /content -->

</div>

var html = '';
$('#children').on('change', function() {
    children = $(this).val();
    html = '';
    for (var i = 0; i < children; i++) {
        html += '<label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" />';
    }

    $('#kidsFields').html(html);
    $('#kidsFields').append('<input type="submit" value="Submit" />');

    $('.ui-page').trigger('create');
});
4

1 回答 1

0

我已经更新了你的小提琴： http: //jsfiddle.net/ezanker/HwFFU/20/ 这里每个姓名/年龄输入字段对都在一行上，输入调整大小以及标签和输入集之间的距离。

插入表单元素时，您可以用一个设置为 fieldcontain 数据角色的 div 包围它们（这也会自动将元素堆叠在窄屏幕上）：

   for (var i = 0; i < children; i++) {
      html += '<div data-role="fieldcontain"><label>Name</label><input type="text"   id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" /></div>';
   }

然后使用 CSS 设置输入字段的大小以及标签和输入之间的距离，例如

#kidsFields .ui-input-text{
    width: 80px;
    margin: 1em;
}

而且，是的，您可以将 AJAX 与 jQM 内部页面一起使用。也许您应该为此创建一个单独且更具体的问题...

于 2013-10-02T13:51:08.210 回答