Динамические деления с помощью тумблера в JQuery Mobile - PullRequest
Новая
       2

Динамические деления с помощью тумблера в JQuery Mobile

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

Я хотел бы использовать виджет Flip Switch Toggle , чтобы пользователь мог переключаться между двумя элементами на странице.Я знаю, что этот элемент обычно используется для выбора между бинарными опциями в форме, так что это будет немного злоупотреблять элементами, но я думаю, что это должно быть возможно путем повторного использования.скажем, вам нужно обработать все формы на стороне сервера, хотя я хочу избежать серверной транзакции для этого - у меня уже есть оба элемента div на странице.

Возможно ли это вообще?

1 Ответ

5 голосов
/ 23 июня 2011

Рабочий пример:

HTML 

<div data-role="page" id="home" class="type-home"> 
    <div data-role="content"> 
        <div class="content-primary"> 
            <p>The flip toggle switch is displayed like this:</p> 
            <div data-role="fieldcontain"> 
                <label for="slider">Flip switch:</label> 
                <select name="slider" id="my-slider" data-role="slider"> 
                    <option value="off">Off</option> 
                    <option value="on">On</option> 
                </select> 
            </div> 
            <div id="show-me" class="hidden">
                <p>
                    Bacon ipsum dolor sit amet bresaola velit laboris bacon eiusmod. Id ex short ribs, dolor dolore rump pork belly beef ad ullamco salami labore aute ut. Jowl et in do, fatback jerky salami reprehenderit irure laboris pork loin commodo qui eu. Chuck tri-tip cupidatat, turkey sunt in anim jerky pork belly exercitation bacon. Eu corned beef qui adipisicing, ground round veniam turkey chicken incididunt deserunt. Proident t-bone chuck, non excepteur biltong elit in anim minim swine short loin magna do. Sint enim nisi, minim nulla tongue ut incididunt ground round.
                </p>  
            </div>
        </div>
    </div>
</div>

JS 

$('#my-slider').change(function() {
    var myswitch = $(this);
    var show     = myswitch[0].selectedIndex == 1 ? true:false;
    $('#show-me').toggle(show);
});

CSS 

.hidden {
    display:none;   
}
...