jQuery Mobile ist eine webbasierte Technologie, die verwendet wird, um responsive Inhalte zu erstellen, auf die auf allen Smartphones, Tablets und Desktops zugegriffen werden kann. In diesem Artikel erstellen wir mit jQuery Mobile einen Farbeingabebereich.

Ansatz: Fügen Sie für Ihr Projekt benötigte jQuery Mobile-Skripte hinzu.

<link rel=“stylesheet“ href=“http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css“ />
<script src=“http://code .jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js“></script>

Beispiel: Wir erstellen einen Farbeingabebereich mit jQuery Mobile. Wir verwenden das Attribut type="color", um die Farbe des Eingabebereichs festzulegen.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  
    <script src=
        "http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h4>
            Design a Color Input using jQuery Mobile
        </h4>
  
        <form style="width: 50%;">
            <label for="colorInput1">
                Color Input Area:
            </label>
            <input type="color" data-clear-btn="false" 
                name="colorInput1" id="colorInput1" value="">
  
            <label for="colorInput2">
                Color Input Area with clear Button:
            </label>
            <input type="color" data-clear-btn="true" 
                name="colorInput2" id="colorInput2" value="" >
        </form>
    </center>
</body>
  
</html>

Ausgabe: