jQuery - Menú de selección de widgets

Descripción

los Widget Select MenuLa función se puede usar con widgets en JqueryUI. Proporciona un reemplazo de elemento de selección con estilo. Un menú de selección simple se muestra a continuación.

Sintaxis

Aquí está la sintaxis simple para usar el menú de selección:

$( "#menu" ).selectmenu();

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso del menú de selección:

<!doctype html>
<html lang="en">
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>jQuery UI Selectmenu - Default functionality</title>
		
      <link rel = "stylesheet" 
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
  
      <script>
         $(function() {
            $( "#speed" ).selectmenu();
            $( "#files" ).selectmenu();
            $( "#number" ).selectmenu().selectmenu( "menuWidget" ).addClass( "overflow" );
         });
      </script>
		
      <style>
         fieldset {
            border: 0;
         }
			
         label {
            display: block;
            margin: 30px 0 0 0;
         }
			
         select {
            width: 200px;
         }
			
         .overflow {
            height: 200px;
         }
      </style>
   </head>
	
   <body>
      <div class = "demo">
 
         <form action = "#">
 
            <fieldset>
		
               <label for = "speed">Select a speed</label>
			
               <select name = "speed" id = "speed">
                  <option>Slower</option>
                  <option>Slow</option>
                  <option selected = "selected">Medium</option>
                  <option>Fast</option>
                  <option>Faster</option>
               </select>
 
               <label for = "files">Select a file</label>
					
               <select name = "files" id = "files">
					
                  <optgroup label = "Scripts">
                     <option value = "jquery">jQuery.js</option>
                     <option value = "jqueryui">ui.jQuery.js</option>
                  </optgroup>
						
                  <optgroup label = "Other files">
                     <option value = "somefile">Some unknown file</option>
                     <option value = "someotherfile">Some other file with a
                        very long option text</option>
                  </optgroup>
						
               </select>
 
               <label for = "number">Select a number</label>
					
               <select name = "number" id = "number">
                  <option>1</option>
                  <option selected = "selected">2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                  <option>10</option>
                  <option>11</option>
                  <option>12</option>
                  <option>13</option>
                  <option>14</option>
                  <option>15</option>
                  <option>16</option>
                  <option>17</option>
                  <option>18</option>
                  <option>19</option>
               </select>
					
            </fieldset>
 
         </form>
 
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

jquery-widgets.htm

↰ Previous page