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

前端之家收集整理的这篇文章主要介绍了jquery-mobile – JQuery Mobile – 在输入文本区域旁边放置一个输入按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在其右侧添加一个inputtext区域和一个提交按钮.
理想情况下,两者一起使用100%的宽度并且只是并排.

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

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

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

非常感谢你的帮助,

解决方法

隐藏在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中操作它们,你应该为这些项目命名并给出一个id.希望这证明对于那些没有被< table> s性质推迟的人有所帮助.使用jQuery Mobile的简单界面/主题,我无法看到这种方法的缺点.

最后,您可能想停下来问问自己是否需要提交按钮.在移动设备(例如移动设备)中,只要表格输入元素与其交互,键盘上就会出现标有“Go”的按钮.其操作与返回键相同,可以提交搜索词.我目前还没有在其他浏览器上审查此选项.

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

猜你在找的jQuery相关文章