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
| <html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test des onglets</title>
<link rel='stylesheet' href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/themes/base/jquery.ui.css'>
<link rel='stylesheet' href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/themes/base/jquery.ui.all.css'>
<link href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/themes/base/jquery.ui.datepicker.css' rel='stylesheet' type='text/css' />
<script src='JsQuery/jquery-ui-1.10.0.custom/js/jquery-1.9.0.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/js/jquery-ui.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.core.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.widget.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.tabs.js'></script>
<script type='text/javascript' src='chemin_Dev/ui/i18nj/query.ui.datepicker-fr.js'></script>
<link rel='stylesheet' href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/demos/demos.css'>
<script>
$(function() {
$( "#tabs" ).tabs();
jQuery.noConflict(); (j'ai rajouté çà au cas où)
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div>
<h2>Essai d'écrans avec onglets</h2><br>
<form action="/Test_onglet.php" method="post">
Saisie date : <input type=text id=datepicker name=annee><br><br>
<input type=submit value='Validation' name=ok>
</form>
</div>
<div id=tabs>
<ul>
<li><a href=#tabs-1>Titre premier onglet</a></li>
<li><a href=#tabs-2>Titre deuxième onglet</a></li>
<li><a href=#tabs-3>Titre troisième onglet</a></li>
</ul>
<div id=tabs-1><p>Contenu du premier onglet.</p>
Saisie date : <input type=text id=datepicker name=annee><br><br>
</div>
<div id=tabs-2>
<form action="/Test_onglet.php" method="post">
<input type=submit value='Validation' name=ok>
</form>
</div>
<div id=tabs-3><p>Contenu du troisième onglet, première ligne.</p>
<p>Contenu du troisième onglet, deuxième ligne.</p>
</div>
</div>
</body>
</html> |
Partager