Question

我不确定如何为以下场景设置用户界面：

您是否可以在5:00或6:30使用，或者都？如果两者都相同，你更喜欢一个其他

到目前为止，我有两组单选按钮，但我仍然坚持“你喜欢一个比另一个”的情况。我想如果他们按住YES单选按钮，然后它会改变颜色或某些东西来表示他们不仅可以选择，而且他们也更喜欢这个选择。

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>5:00</legend>
            <input type="radio" name="Avail500" id="Avail500_0" value="0">
            <label for="Avail500_0">No</label>
            <input type="radio" name="Avail500" id="Avail500_1" value="1">
            <label for="Avail500_1">Yes</label>
        </fieldset>
    </div>
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>6:30</legend>
            <input type="radio" name="Avail630" id="Avail630_0" value="0">
            <label for="Avail630_0">No</label>
            <input type="radio" name="Avail630" id="Avail630_1" value="1">
            <label for="Avail630_1">Yes</label>
        </fieldset>
    </div>

由于移动设备是一种新思维模式，我认为我应该问Stackoverflow而不是构建我自己的用户界面。

Answer 1

首先，你不应该有单选按钮，你应该使用复选框，因为单选按钮不允许多个选择。此外，您可以做的是，一旦用户点击下一个，如果用户选择了两个时间，他们将获得可点击的按钮来选择他们的偏好。

Answer 2

直播示例：

http://jsfiddle.net/CMJ8K/（使用复选框）
http://jsfiddle.net/CMJ8K/10/（双选项）

HTML：

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 
        <div  data-role="fieldcontain"> 
             <fieldset data-role="controlgroup"> 
                <legend>Select Available Times:</legend> 
                <input type="checkbox" name="Avail500" id="Avail500" class="custom" /> 
                <label for="Avail500">5:00</label>
                <input type="checkbox" name="Avail630" id="Avail630" class="custom" /> 
                <label for="Avail630">6:30</label> 
                <input type="checkbox" name="Avail930" id="Avail930" class="custom" /> 
                <label for="Avail930">9:30</label>
            </fieldset> 
        </div> 
    </div>
</div>

另一个优点是使用的代码少了很多

移动设备中是/否/首选方案的首选用户界面

2 个答案: