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

Question

我正在尝试在其右侧添加一个input文本区域和一个submit按钮.理想情况下,两者将使用100%的宽度并且只是并排.

我一直在尝试ui-grid-a和类似的选择,但一切都失败了.你可以在那里看到一些尝试.它们都同样丑陋,但最复杂的是将两个元素并排放置一个具有固定宽度(按钮)的元素和一个应该占据其余宽度的元素(因此既不固定也不固定百分比).

你知道如何正确渲染这个吗？

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

非常感谢你的帮助,

狂

Answer 1

隐藏在jQuery Mobile 自己的文档中,我发现了一种方法,可以很好地用于我的搜索框 + 搜索按钮实现.

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

换句话说,由于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>.使用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图标映射来选择您想要的任何图标。

当然，您需要优化选择器，以便仅针对要更改的输入框。

享受黑客的乐趣。