是否可以在jquery mobile的搜索输入旁边有一个按钮？

Question

jQuery mobile文档中的所有表单示例都在其自己的行中显示每个表单元素。我想在搜索输入字段的右侧有一个标准按钮（将链接到另一个页面）。这可以用jQuery Mobile吗？

由于

Answer 1

不是原生内联单位。但是，表单元素可以合理有效地与布局网格系统一起使用：

http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Answer 2

jQM的UI网格强制相等宽度的列。在我的情况下，我希望提交按钮只是图标，以允许搜索框更多的空间。我在几篇帖子中看到<table>，但发现其他输入（特别是selectmenu）在他们是意外元素的孩子时无法正常工作。 [1]

为了避免小部件破损，我设法做到了：

.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
    width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
    width: 14.95%;
}

它不是防弹的，但可以扩展到其他网格定义。它使用特异性来获取现有UI的所有网格规则，然后重新定义列宽。没有内联样式，没有其他标签，并且小部件不会中断。并且由于特殊性，它可以在jQM结构样式表之后的或之前加载。

[1]：https://github.com/jquery/jquery-mobile/issues/6077 jQM Github错误报告

Answer 3

使用新版本，您可以： http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs

旧式解决方案仍然有效：覆盖ui-input-search

div.ui-input-search{ 
  width: 55%;
  display: inline-block;
}

不要忘记在a href的类中添加 ui-btn-inline （如果使用Button标记语法）