1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
|
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LstCheckbox.aspx.vb" Inherits="Jquery.LstCheckbox" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="/script/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
/* Affichage du menu déroulant au clic */
$("#menu-deroulant-style").on("click", function () {
/* $("#menu-deroulant-style-on").show(); */
$("#menu-deroulant-style-on").show();
});
/* Disparition du menu déroulant au clic sur le bouton OK */
$("#bouton-valid-style").on("click", function () {
$("#menu-deroulant-style-on").hide();
});
/* Disparition du menu déroulant au clic hors de la zone (sauf sur le champ input #menu-deroulant-style) */
$(document).on("click", function (e) {
if ($(e.target).closest("#menu-deroulant-style-on")[0] === undefined) {
if ((e.target.id != "menu-deroulant-style-on") && (e.target.id != "menu-deroulant-style")) {
$("#menu-deroulant-style-on").hide();
}
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td style="border-width: medium;background-color:green;">
<div class="input-prepend">
<input type="text" placeholder="Style musical" id="menu-deroulant-style" />
</div>
<div id="menu-deroulant-style-on" style="height: 100px; width: 100px; background-color: red; display: none;">
<label for="checkbox1">Option 1 </label>
<input type="checkbox" name="checkbox1" id="checkbox4" value="1" /><br />
<label for="checkbox2">Option 2 </label>
<input type="checkbox" name="checkbox2" id="checkbox5" value="2" /><br />
<label for="checkbox3">Option 3 </label>
<input type="checkbox" name="checkbox3" id="checkbox6" value="3" />
<button type="submit" class="btn" id="bouton-valid-style">OK</button>
</div>
</td>
<td>test</td>
</tr>
</table>
</body>
</html> |
Partager