Question

我想使用Flip Switch Toggle小部件让用户在页面上的两个div之间切换（淡入淡出）。我知道该元素通常用于在表单中选择二元期权，因此这会有点滥用，但我认为应该可以通过创意重复使用。

但是，表单文档说你需要处理所有表单服务器端，而我想避免服务器事务 - 我已经在页面中有两个div。

这甚至可能吗？

Answer 1

工作示例：

http://jsfiddle.net/KCQ4Z/7/（切换选项）
http://jsfiddle.net/KCQ4Z/8/（淡入/淡出选项）

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

动态div通过JQuery Mobile中的翻转切换开关

1 个答案: