jQuery Mobile-在输入文本区域旁边放置一个输入按钮 [英] JQuery Mobile - Position a input button next to an input text area

问题描述

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

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

您知道如何正确呈现吗?

在理想世界中，jQuery将具有一些内置功能来对这些控件进行分组(就像<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">用于对复选框进行分组一样.但事实并非如此.

非常感谢您的帮助，

疯了

解决方案

我为正在关注此线程的你们找到了新答案.

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

我只是添加了以下CSS规则:

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

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

当然，您将需要优化选择器，以便仅将要更改的输入框作为目标.

享受黑客.

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.

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?

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.

Thanks a lot for your help,

Mad

解决方案

I found a new answer for those of you that are looking at this thread.

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.

I simply added this CSS rule :

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

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.

Enjoy the hack.

这篇关于jQuery Mobile-在输入文本区域旁边放置一个输入按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！