开发者

Dynamic divs via flip toggle switch in JQuery Mobile

I'd like to use the Flip Switch Toggle widget to let the user toggle (fade) between two div开发者_运维百科s on a page. I know that element is generally used for selecting between binary options in a form, so this would be a bit of element abuse, but am thinking it should be possible through creative re-use.

However, the form docs say you need to process all forms server side, while I want to avoid a server transaction for this - I already have both divs in the page.

Is this even possible?


Working Example:

  • http://jsfiddle.net/KCQ4Z/7/ (toggle option)
  • http://jsfiddle.net/KCQ4Z/8/ (fade In/Out option)

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;   
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜