Предпочтительный пользовательский интерфейс для да / нет / предпочтительный сценарий в мобильном телефоне - PullRequest
Новая
       0

Предпочтительный пользовательский интерфейс для да / нет / предпочтительный сценарий в мобильном телефоне

0 голосов
/ 24 июня 2011

Я не уверен, как настроить пользовательский интерфейс для следующего сценария:

Вы доступны на 5:00 или 6:30, или и то и другое? И если оба, вы предпочитаете один над другой

Пока у меня есть две группы радиокнопок, но я застрял в сценарии «вы предпочитаете одну над другой». Я думаю, что если они удерживают переключатель «ДА», то он меняет цвет или что-то еще, что означает, что они не только доступны для этого выбора, но и что они предпочитают этот выбор. 

    <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 вместо создания собственного пользовательского интерфейса.

Ответы [ 2 ]

2 голосов
/ 24 июня 2011

Прежде всего, у вас не должно быть переключателей, вы должны использовать флажки, так как переключатели не допускают многократного выбора. Кроме того, что вы могли бы сделать, - это когда пользователь нажимает кнопку «Далее», если пользователь выбрал оба раза, ему предоставляются нажимаемые кнопки для выбора предпочтения.

1 голос
/ 24 июня 2011

Live Пример:

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>

Еще один плюс в том, что он использует намного меньше кода

...