Question

我正在尝试在其右侧添加input文本区域和submit按钮。理想情况下，两者将使用100％的宽度并且并排放置。

我一直试图使用ui-grid-a和类似的选项，但一切都失败了。您可以看到一些尝试there。它们都同样难看，但最复杂的是将两个元素并排放置一个具有固定宽度（按钮）的元素和一个应该占据其余宽度的元素（因此既不固定也不固定百分比）。 / p>

你知道如何正确渲染吗？

在梦想世界中，jQuery会有一些内置函数来对这些控件进行分组（就像<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">一样用于分组复选框。但它似乎并非如此。

非常感谢你的帮助，

狂

Answer 1

隐藏在jQuery Mobile的own documentation中我找到了一种适用于我的搜索框 + 搜索按钮实施的方法。

在该页面中，他们通过使用简单的<table>布局来并排比较事物，这也激发了我对它的依赖。虽然表格不是进行布局/设计的首选资源，但它非常有效，简单，并且避免了我在这里看到的解决方法的许多麻烦。以下是我的方法可以为您的jsfiddle you linked做些什么。见第四次迭代。

换句话说，由于jQuery Mobile如何构建页面的复杂性，添加了不在标记中的div和样式等，这可能是这个特定场景的最佳选择：

想要两列项目，其中第二列是固定宽度。
第一列展开以填充调整大小时屏幕的宽度。
您希望元素包含设备的整个宽度。

（值得注意的是，如果你想调整这些特定方面中的任何一个，那么一些简单的CSS填充或对齐应该从这个基础解决方案开始）

<table style='width:100%'><tr>
    <td>
        <input type='text' (or type='search') />
    </td>
    <td style='font-size:80%; width:7em'>
         <input type='submit' value='Submit' />
    </td>
</tr></table>

显然，如果您想将这些项目发布到某个位置或在javascript中操作它们，您应该name并为这些项目提供id。希望这证明对于那些没有被<table> s性质推迟的人有所帮助。使用jQuery Mobile的简单界面/主题，我无法看到这种方法的缺点。

最后，您可能想停下来问问自己是否需要提交按钮。在诸如移动设备之类的移动设备中，只要表格输入元件正在与之交互，键盘上就有一个标记为“Go”的按钮。其操作与返回键相同，可以提交搜索词。我目前还没有在其他浏览器上审查过这个选项。

（这不是一个可以与你改变搜索框图标的方法相媲美的解决方案。这非常聪明，但似乎不是你原来的问题。）

Answer 2

我为那些正在看这个帖子的人找到了一个新的答案。

在与jQuery Mobile的集成方面，我发现它要好得多。但是，它可能容易受到jQuery Mobile的升级，因为它依赖于图标图像文件的组织方式。

我只是添加了这个CSS规则：

.ui-icon-searchfield:after {background-position: -252px !important;}

图标神奇地变成data-icon="check"。正是我在寻找的！您可以通过更改偏移量并查看images/icons-18-white.png图标映射来选择您想要的任何图标。

当然，您需要优化选择器，以便只定位要更改的输入框。

享受黑客攻击。

Answer 3

我解决这个问题的方法是将输入框浮动到按钮旁边，然后让pagebeforeshow将输入框的大小设置为窗口宽度减去按钮的大小。

Answer 4

与adamdehaven进行了富有成效的讨论之后，事实证明：

验证按钮大部分时间都是不必要的，并且违背了移动应用程序的逻辑。最好使用<input type="search" />来解决此类问题
该框架不允许自定义type="search"内容的图标。

为了制作后者，我把一个丑陋的黑客放在一起，你可以看到there。除非你放大很多，除了深灰色之外你不会看到常规type="search"的差别。但是，我怀疑这个解决方案可能会在未来容易受到框架的微小改动。

另一个解决方案是直接拉出图标并手动覆盖input上的自制图标按钮。它应该稍微强一些（因为至少按钮不会基于框架）但需要一些快速的Photoshop改变来拉出图标并将其放在一个propper文件中。

JQuery Mobile - 在输入文本区域旁边放置一个输入按钮

4 个答案: