Option jQuery Mobile Textinput Widget mini

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

jQuery Mobile est une technologie Web utilisée pour créer du contenu réactif accessible sur tous les smartphones, tablettes et ordinateurs de bureau. Dans cet article, nous utiliserons l’option jQuery Mobile Textinput Widget mini pour afficher la version compacte des champs de saisie de texte. Il affiche les champs de saisie de taille de hauteur moins verticale.

Syntaxe:

$( ".selector" ).textinput({
    mini: boolean
});

Lien CDN : Tout d’abord, ajoutez les scripts jQuery Mobile nécessaires à votre projet.


Exemple:

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").textinput({

                mini: true

            });

        });

    </script>

</head>

 

<body>

    <div data-role="page" id="page1">

        <div data-role="header">

            <h1>GeeksforGeeks</h1>

            <h3>jQuery Mobile Textinput Widget mini Option</h3>

        </div>

 

        <center>

            <div role="main" class="ui-content" style="width: 50%;">

                <label for="GFG">Enter Text:</label>

                <input type="text" name="Geeks" id="GFG" value="">

            </div>

        </center>

    </div>

</body>

 

</html>

Production:

mini

Référence: https://api.jquerymobile.com/textinput/#option-mini

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *