jQuery Mobile - Menú de selección de icono izquierdo

Descripción

De forma predeterminada, el icono del menú de selección personalizado se encuentra en el lado derecho. La posición del botón de icono de menú de selección personalizado se establece en el lado izquierdo mediante el atributo data-iconpos = "left" del conjunto de campos.

Ejemplo

El siguiente ejemplo demuestra el uso del icono a la izquierda en el menú de selección en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Selectmenu Icon Left Position Example</h2>
      <div class = "ui-field-contain">
         <label for = "select-custom">Custom Select</label>
         
         <select id = "select-custom" data-native-menu = "false" data-iconpos = "left">
            <option value = "mu">Mumbai</option>
            <option value = "pu">Pune</option>
            <option value = "be">Belgaum</option>
            <option value = "ch">Chennai</option>
            <option value = "ban">Bangalore</option>
         </select>
         
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como selectmenu_icon_left.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/selectmenu_icon_left.html y se mostrará el siguiente resultado.

↰ Previous page