Latest

random

Toggle Switch jQuery Mobile - IOS 8 Checkbox Example

iPhone Toggle Button using jQuery 

Toggle is a jQuery plugin that makes easy to create toggle buttons with smooth sliding effect for the web application project. Latest IOS 9 updates and introduced new toggle button, radio button styles, checkbox styles. In this blog post I will demonstrate flip toggle switch jquery. Find the below jQuery with CSS example :-
jquery toggle switch plugin,html toggle button,on off switch css,bootstrap toggle switch,toggle button jquery,jquery toggle button on off,jquery toggles,jquery ui toggle button,flip toggle switch jquery,
jquery mobile toggle switch get value
Default.aspx
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iOS 8 Check Box Button using CSS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.switch').click(function () {
                $(this).toggleClass("switchOn");
            });
            $('.switchBig').click(function () {
                $(this).toggleClass("switchBigOn");
            });
        });
    </script>
    <style>
        body {
            font-family: arial;
        }
        .switch {
            width: 62px;
            height: 32px;
            background: #e5e5e5;
            z-index: 0;
            margin: 0;
            padding: 0;
            appearance: none;
            border: none;
            cursor: pointer;
            position: relative;
            border-radius: 16px;
            -moz-border-radius: 16px;
            -webkit-border-radius: 16px;
        }
            .switch:before {
                content: ' ';
                position: absolute;
                left: 1px;
                top: 1px;
                width: 60px;
                height: 30px;
                background: #fff;
                z-index: 1;
                border-radius: 16px;
                -moz-border-radius: 16px;
                -webkit-border-radius: 16px;
            }
            .switch:after {
                content: ' ';
                height: 29px;
                width: 29px;
                border-radius: 28px;
                background: #fff;
                position: absolute;
                z-index: 2;
                top: 1px;
                left: 1px;
                -webkit-transition-duration: 300ms;
                transition-duration: 300ms;
                -webkit-box-shadow: 0 2px 5px #999999;
                box-shadow: 0 2px 5px #999999;
            }
        .switchOn, .switchOn:before {
            background: #4cd964 !important;
        }
            .switchOn:after {
                left: 32px !important;
            }
        .switchBig {
            width: 200px;
            height: 105px;
            background: #e5e5e5;
            z-index: 0;
            margin: 0;
            padding: 0;
            appearance: none;
            border: none;
            cursor: pointer;
            position: relative;
            border-radius: 53px;
            -moz-border-radius: 53px;
            -webkit-border-radius: 53px;
        }
            .switchBig:before {
                content: ' ';
                position: absolute;
                left: 2px;
                top: 2px;
                width: 196px;
                height: 101px;
                background: #fff;
                z-index: 1;
                border-radius: 52px;
                -moz-border-radius: 52px;
                -webkit-border-radius: 52px;
            }
            .switchBig:after {
                content: ' ';
                height: 100px;
                width: 100px;
                border-radius: 52px;
                background: #fff;
                position: absolute;
                z-index: 2;
                top: 2px;
                left: 2px;
                -webkit-transition-duration: 300ms;
                transition-duration: 300ms;
                -webkit-box-shadow: 0 2px 5px #999999;
                box-shadow: 0 2px 5px #999999;
            }
        .switchBigOn, .switchBigOn:before {
            background: #4cd964 !important;
        }
            .switchBigOn:after {
                left: 98px !important;
            }
    </style>
</head>
<body>
    <div style="margin:0 auto;width:auto">
        <h1>CSS Toggle Button Style</h1>
        <b>Small Switch</b><br />
        <label>
            <input type="checkbox" name="checkboxName" class="checkbox" />
            <div class="switch"></div>
        </label>
        <br /><br />


        <b>Big Switch</b><br />
        <label>
            <input type="checkbox" name="checkboxName" class="checkbox" /> <br /><br />
            <div class="switchBig"></div>
        </label>
    </div>
</body>
</html>

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.