jQuery Mobile Seleccionar menú shadowOption

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, usaremos la opción de sombra jQuery Mobile Selectmenu . Cuando el valor de esta opción de sombra se establece en verdadero, se aplica el estilo de sombra paralela al botón de selección.

Sintaxis:  

Inicializando el menú de selección con la opción de sombra.

$( ".selector" ).selectmenu({
 shadow: true
});
  • Configuración de la opción de sombra.

    $( ".selector" ).selectmenu("option", "shadow", true);
  • Conseguir la opción de sombra.

    var shadow = $( ".selector" ).selectmenu( "option", "shadow" );

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

<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=” //code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile- 1.5.0-alpha.1.min.js”></secuencia de comandos>

Ejemplo: Este ejemplo describe la opción shadow del menú Select de jQuery Mobile .

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.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
</head>
  
<body>
    <center>
        <div data-role="page">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Selectmenu shadow Option</h3>
            <div role="main" class="ui-content">
                <label for="GFG" class="select">
                    GeeksforGeeks Courses:
                </label>
                <select name="GFG" id="GFG"
                        data-native-menu="false">
                    <option value="C">
                      C Programming
                    </option>
                    <option value="CPP">
                      C++ Programming
                    </option>
                    <option value="JAVA">
                      Java Programming
                    </option>
                    <option value="overnight">
                      Python Programming
                    </option>
                    <option value="WEB">
                      Web Development
                    </option>
                </select>
            </div>
            <input type="button" id="Button" 
                   value="Value of the shadow option">
            <div id="log"></div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#GFG").selectmenu({
                shadow: true
            });
            $("#GFG").selectmenu("option", "shadow", true);
            $("#Button").on('click', function () {
                var a = $("#GFG").selectmenu("option", "shadow");
                $('#log').html(a);
            });
        });
    </script>
</body>
  
</html>

Producción:

jQuery Mobile Selectmenu shadowOption

jQuery Mobile Seleccionar menú shadowOption

Referencia: https://api.jquerymobile.com/selectmenu/#option-shadow

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray 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 *