1

我有一个简单的用例，我正在为客户创建一个表单来更新他们的个人资料信息。我正在使用 jquery 手机。所以我有几个字段，比如电子邮件电话号码。唯一的问题是我的电话号码分为 3 个字段 Code Code、Area code 和 number。我创建了 3 个文本字段来使用 Jquery Mobile Grid 捕获这些项目中的每一个，当我从纵向模式切换到设备的横向模式时，唯一的问题是元素不会重排。正如您从下面的屏幕截图中看到的那样，电话号码字段不会像电子邮件标题字段那样重排。请参阅随附的屏幕截图。 在此处输入图像描述

在此处输入图像描述

这个的源代码是

<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
         <h3>
            Header
        </h3>

        <div data-role="fieldcontain">
            <label>Telephone number</label>
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <input name="" id="textinput4" placeholder="area code" value="" type="text">
                </div>
                <div class="ui-block-b">
                    <input name="" id="textinput5" placeholder="c code" value="" type="text">
                </div>
                <div class="ui-block-c">
                    <input name="" id="textinput6" placeholder="number" value="" type="text">
                </div>
            </div>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput1">Email</label>
            <input name="" id="textinput1" placeholder="" value="" type="email">
        </div>
        <div data-role="fieldcontain">
            <label for="textinput8">Title</label>
            <input name="" id="textinput8" placeholder="" value="" type="text">
        </div>
    </div>
    <div data-role="content"></div>
    <div data-theme="a" data-role="footer" data-position="fixed">
         <h3>
            Footer
        </h3>

    </div>
</div>

JS fiddle 链接是 http://jsfiddle.net/jsfiddle_one/mBBYf/

对你的帮助表示感谢。抱歉，如果您看不到屏幕截图，只需展开并折叠小提琴上的输出，您就会明白我的意思。

4

2 回答 2

0

您必须添加 jquery mobile 所需的元标记以使其响应和整洁。

  <!DOCTYPE html> 
  <html> 
  <head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

  </head>

将此添加到您的 html 的顶部。具有设备宽度和初始比例的元标记更重要

- - 编辑 - - -

您需要在 fieldcontain div 之前关闭标题并像这样启动 data-role="content" div

http://jsfiddle.net/mBBYf/1/

于 2013-09-19T06:10:23.027 回答
0

在 ui-grid-b 之后添加类“ui-responsive”。这将使所有这些文本元素堆叠在一起

于 2015-06-11T00:20:29.780 回答