jQuery Mobile Flipswitch Widget esquinas Opción

jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio. En este artículo, utilizaremos la opción de esquinas
del widget Flipswitch de jQuery Mobile para establecer la esquina del radio del borde . Acepta valor de tipo booleano y su valor por defecto es true .

Sintaxis:

$( ".selector" ).flipswitch({
    corners: boolean
});

Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.

<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/ jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script >

Ejemplo:

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  
    <script src=
        "//code.jquery.com/jquery-1.10.2.min.js">
    </script>
  
    <script src=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
  
    <script>
        $(document).ready(function () {
            $("#GFG").flipswitch({
                corners: false
            });
        });
    </script>
</head>
  
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>GeeksforGeeks</h1>
            <h3>jQuery Mobile Flipswitch Widget corners Option</h3>
        </div>
  
        <div class="ui-field-contain">
            <form>
                <div data-role="fieldcontain">
                    <center>
                        <label for="GFG">
                            Flipswitch Checkbox:
                        </label>
                          
                        <input type="checkbox" id="GFG" 
                            data-role="flipswitch">
                    </center>
                </div>
            </form>
        </div>
    </div>
</body>
  
</html>

Producción:

Las esquinas de la casilla de verificación Flipswitch se establecen en falso

Nota : en el código anterior, si la opción de las esquinas se establece en verdadero, obtenemos el siguiente resultado. Puede notar la diferencia en las esquinas de la casilla de verificación flipswitch.

Producción:

Las esquinas de la casilla de verificación Flipswitch se establecen en verdadero

Referencia: https://api.jquerymobile.com/flipswitch/#option-corners

Publicación traducida automáticamente

Artículo escrito por ppatelkap y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *