Question

我一直在研究这个链接，但我无法弄清楚他如何调整选项框的大小，我想知道如何调整jquery移动中的选项框文本框按钮等但我无法找到一种方法来调整它们我也想知道是否有可能在使用内部页面的jquery移动设备上阻止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');
});

Answer 1

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

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

   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内部页面。也许你应该创建一个单独的，更具体的问题......

在内部页面上调整大小按钮选项框等.ajax工具

1 个答案: