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

我试图在文本区域右边附加一个input文本区域和一个submit按钮。理想情况下，两者将一起使用100％的宽度并且并排。JQuery Mobile - 在输入文本区域旁边放置一个输入按钮

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

你知道如何正确渲染吗？

在一个梦幻世界的jQuery将有一些内置的功能组这些控件（就像<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">进行分组复选框，但它似乎不那么。

非常感谢你的帮助，

狂

来源

2012-03-11 Mad Echet

我发现了一个新的答案，你正在看这个帖子。

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

我只是简单地添加这个CSS规则：

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

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

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

享受破解。

来源

2012-03-26 12:36:07

与adamdehaven了卓有成效的讨论后，事实证明：

甲验证按钮是大部分时间不必要和针对移动应用的逻辑。对于此类问题，最好使用<input type="search" />
该框架不允许自定义type="search"内容的图标。

为了使后者，我把一个丑陋的黑客，你可以看到there。除非放大很多，否则除了较暗的灰色之外，您不会看到与常规的type="search"不同的区别。但是，我怀疑这个解决方案可能会在未来对框架进行微小的更改。

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

来源

2012-03-16 13:28:51

我发现了另一个解决方案，我稍后发布。请参阅它并选择适合您的最适合您的产品。 – 2012-03-26 12:38:37

我解决了这个问题的方式是浮动按钮旁边的输入框，然后有pagebeforeshow设置输入框的大小，以窗口宽度减去按钮的大小。

来源

2012-12-27 09:24:01 mike029

这种方法是否处理倾斜他们的设备和改变纵横比的用户？如何重新调整窗户大小？ – veeTrain 2013-01-02 21:17:41

如果您正在使用phonegap等，那么请在设备倾斜时重新运行尺寸调整功能。您也可以将所有内容设置为百分比。对于窗口大小的变化，我想你可以在jQuery中做类似的事情来检测窗口大小何时发生变化，但我还没有解决这个特定的问题。 – mike029 2013-01-04 07:57:24

隐藏在jQuery Mobile的的own documentation我发现，工作就好了我搜索框 + 搜索按钮实现的方法。

在该网页上，他们是通过一个简单的<table>布局，启发了我就靠这个也比较东西并排侧。尽管表格不是用于布局/设计的首选资源，但它非常有效，简单，并避免了我在这里看到的变通方法的许多麻烦。这是我的方法可以为您的jsfiddle you linked做什么。见第四次迭代。

换句话说，由于jQuery Mobile的如何建立一个网页的复杂性，在申报单和造型是不是在您的标记等补充说，这可能是这种特定的情况你最好的选择：

婉婷其中第二塔是固定宽度的项目两列。
其中第一列扩展以填充在调整大小的屏幕的宽度。
您希望元素包含整个设备宽度的位置。

（值得注意的是，如果你想调整任何以下几个方面的，一些简单的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>

显然，你应该name，给一个id这些项目，如果你想发布他们的地方或操纵他们的JavaScript。希望这对于不会被<table>的性质推迟的其他人来说是有帮助的。我一直无法看到使用jQuery Mobile简单界面/主题的这种方法的缺点。

最后，您可能要停下来问自己，如果一个提交按钮，甚至是必要的。在诸如移动Safari之类的移动设备中，无论何时与表单输入元素进行交互，键盘上都会有一个标有“Go”的按钮。这与返回键相同，可以提交搜索词。我目前还没有在其他浏览器上审核过此选项。

（这不是你的对手的方式来移动搜索框图标的解决方案。这是非常聪明，但似乎并没有成为你原来的问题是什么。）

来源

2013-01-02 21:16:50 veeTrain

感谢您的建议！确实，有时候老式的桌子可以为我们节省很多麻烦。我知道我的解决方案从我最初的目标中偏离了一点，因为我意识到这种并排输入按钮并不符合jquery移动理念。 – 2013-01-03 18:52:59

不是问题Mad Echet;感谢您发布我遇到的同一个问题。整个框架似乎反对这样做，我发现专栏/ ui-grid-a的东西非常麻烦。你最终删除了按钮？ – veeTrain 2013-01-03 20:39:49

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

回答

相关问题