JQuery Mobile - 在输入文本区域旁边放置一个输入按钮 [英] JQuery Mobile - Position a input button next to an input text area
问题描述
我试图在它的右侧添加一个 input 文本区域和一个 submit 按钮.理想情况下，两者一起使用 100% 的宽度并且只是并排.
I am trying to get a inputtext area and a submit button attached just to the right of it.
Ideally, the two together will use 100% of the width and be just side by side.
我一直在尝试使用 ui-grid-a 和类似的选项，但一切都失败了.你可以在那里看到一些尝试.它们都同样丑陋，但最复杂的事情是将两个元素并排放置，其中一个具有固定宽度(按钮)，另一个应该占用其余的宽度(因此既不是固定的也不是百分比).
I have been trying to play around with ui-grid-a and similar options but everything fails miserably. You can see some attemps there. They are all equally ugly but the most complicated thing is to get the two elements side by side with one that has a fixed width (the button) and one that should take the rest of the width (hence neither fixed nor a percentage).
你知道如何正确渲染它吗?
Do you have any idea how to render this properly?
在梦想世界中，jQuery 会有一些内置函数来对这些控件进行分组(就像 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> 用于分组复选框.但似乎并非如此.
In a dream world jQuery would have some built-in function to group those controls (just like <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> for grouping checkboxes. But it does not seem so.
非常感谢您的帮助，
疯了
推荐答案
我为正在查看此主题的人找到了一个新答案.
I found a new answer for those of you that are looking at this thread.
我发现它在与 jQuery Mobile 的集成方面要好得多.但是，它可能容易受到 jQuery Mobile 升级的影响，因为它依赖于图标图像文件的组织方式.
I find it much better in terms of integration with jQuery Mobile. However, it could be vulnerable to upgrades in jQuery Mobile since it relies on how the icon image file is organized.
我只是添加了这个 CSS 规则:
I simply added this CSS rule :
.ui-icon-searchfield:after {background-position: -252px !important;}
然后图标神奇地变成了data-icon="check".正是我要找的！您可以通过更改偏移量并查看图标映射的 images/icons-18-white.png 来选择您想要的任何图标.
And the icon magically turns into a data-icon="check". Exactly what I was looking for! You can pick whatever icon you want by changing the offset and looking into images/icons-18-white.png for the icon mapping.
当然，您需要优化选择器，以便只针对要更改的输入框.
Of course you will want to refine the selector so you only target the input boxes you want to change.
享受黑客攻击.
这篇关于JQuery Mobile - 在输入文本区域旁边放置一个输入按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
