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 das Bearbeitungssymbol mit jQuery Mobile.

Ansatz: Fügen Sie zunächst jQuery Mobile-Skripte hinzu, die für Ihr Projekt benötigt werden.

<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 1:

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>Edit Icon using jQuery Mobile</h4>
    </center>
      
    <p><strong>icon="edit"</strong></p>
  
    <a href="https://www.geeksforgeeks.org/" 
       data-role="button" data-icon="edit">
       GeeksforGeeks
    </a>
</body> 
  
</html>

Ausgabe:

Beispiel 2:

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>Edit Icon using jQuery Mobile</h4>
    </center>
      
    <p><strong>icon="edit"</strong></p>
  
    <button id="gfg" data-role="button" 
            data-icon="edit">
            GeeksforGeeks
    </button>
</body>
  
</html>

Ausgabe: