javascript - 根据设备方向重新排列 html 形式的单选按钮

Question

我对 HTML 和 jQuery 还很陌生。

我现在正在制作一个 html 表单，我将在多个平板电脑上使用它。我想要的是，例如，当平板电脑为纵向时，可用选项应显示在两行上，如下所示:

但是当平板电脑处于横向位置时，可用选项应显示在四行上，如下所示:

或者像这样如果最后一个单选按钮后面有一个“文本输入”字段(例如“其他:”“| |”)

遗憾的是，我在寻找答案的过程中并没有成功。如果有人能向我展示如何做到这一点(或者甚至给出一个带有代码的示例)，我将非常感激。

非常感谢!

Answer 1

对于初学者来说，要创建看起来像布局设计中那样的按钮，您不能轻松地使用 radio输入类型。

这样做的原因是，您无法像按钮输入类型那样将单选按钮设置为在其中包含文本值。所以在我的 fiddle example ，我选择使用按钮输入类型，但您可以选择使用任何允许您将文本换行的 html 标签

<!-- Your design requires html elements that can wrap text inside -->
<input type="button" class="answer" value="CSS or JS" />

接下来，要使您的按钮和问题具有响应能力:

您可以简单地使用 css media-queries为了达成这个。首先，设置默认宽度，然后使用 css media-queries更改相对于屏幕尺寸的任何页面元素:

/* the default width */
.question input { width: 100px; }

/* the width when the screen is >= 700px */
@media (min-width: 700px) {
    .question input { width:350px; }    
}

使用媒体查询，您可以完全控制页面在您想要定位的每个屏幕尺寸上的显示方式。

/* You can get more granular control with orientation targets: */
@media (min-width: 700px) and (orientation: landscape) {
    .question input { }    
}

<强> See this link 有关使用媒体查询的更多信息。

媒体查询是处理表单响应性所需的全部内容。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~

奖励:用 Javascript/jQuery 处理表单数据

您的布局设计要求您能够以特殊方式设置按钮样式(即元素中间的文本看起来像按钮)，但您不能将单选按钮设置为看起来像它们的样式在你的设计中这样做，所以你必须“伪造”它，通过使用将常规 html 元素转换为交互式元素的常用技术(例如:通过分配可点击行为将常规 <div> 或 <span> 转换为按钮到它)。这是开发人员使用 CSS 和 Javascript 来使应用程序的行为与应用程序的设计保持一致的流行技术。

解决您的问题的一个明显的解决方案(不需要任何 JavaScript，但会迫使您更改设计)是重新设计您的表单以仅使用常规 <form>元素，在这种情况下，您可以使用 <form>它是像平常一样的提交按钮。

因此，为了支持像您这样的自定义设计，您必须跳出框框思考，并找到一种方法来使样式化的 html 元素“看起来像一个按钮”和“像一个按钮”......这在 JavaScript 和 CSS 中非常简单。

由于这个主题与您的问题并不完全相关(您的问题更适合响应式设计)，我将简要提及您可以使用 jQuery 完成设计的技术，然后向您展示一个工作示例。

首先，由于您的按钮不再是真正的表单元素，因此您必须找到一种方法来在应用程序中存储或记录用户的选择(以便您可以处理或验证它们)。一种简单的方法是使用 jQuery，并附加 click()处理程序到每个按钮，这将允许您分配(或取消分配)您想要为“选定”按钮提供的外观，并且还捕获按钮答案的值并将该值存储在某处，例如在 JavaScript 对象上，例如)。然后，当用户单击“提交”时，您可以访问此存储的表单数据并执行应用程序需要执行的任何操作...

You can see a working demo of these ideas in action here

希望这可以帮助您走上正确的道路!