jQuery - Menu de sélection de widget
La description
le Widget Select MenuLa fonction peut être utilisée avec des widgets dans JqueryUI.Il fournit un remplacement d'élément de sélection stylable. Un menu de sélection simple est illustré ci-dessous.
Syntaxe
Voici la syntaxe simple pour utiliser Select Menu -
$( "#menu" ).selectmenu();
Exemple
Voici un exemple simple montrant l'utilisation du menu de sélection -
<!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>
Cela produira le résultat suivant -
jquery-widgets.htm