JQuery UI
De Banane Atomic
Aller à la navigationAller à la recherche
Liens
Accordion
|
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion({
collapsible: true
});
} );
</script>
</head>
<body>
<div id="accordion">
<p>Section 1</p>
<div>Texte texte texte</div>
<p>Section 2</p>
<div>Texte texte texte</div>
</div>
|
Datepicker
|
|
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript" src="i18n/datepicker-fr.js"></script>
<script>
$(function() {
$(".datefield").datepicker($.extend(
{},
$.datepicker.regional['fr'], // définir la localisation avant le format
{
showAnim: 'drop',
dateFormat: 'dd/mm'
}
);
});
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Date: <input type="date" name="date" class="datefield">
|
MonthPicker
|
// s'applique sur les input de type month et text
$('#id').MonthPicker(
{
Button: false,
MaxMonth: -1, // seulement les mois du passé
MonthFormat: 'MM yy', // January 2019
SelectedMonth: '-1m', // sélectionne le mois précédent
OnAfterChooseMonth: selectedDate => {
// ...
}
}
);
|
Tabs
|
|
<html>
<head>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery.ui.core.js" type="text/javascript"></script>;
<script src="jquery.ui.widget.js" type="text/javascript"></script>
<script src="jquery.ui.tabs.js" type="text/javascript"></script>
<link href="jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Onglet 1</a></li>
<li><a href="#tabs-2">Onglet 2</a></li>
<li><a href="#tabs-3">Onglet 3</a></li>
</ul>
<div id="tabs-1">
Contenu de l'onglet 1
</div>
<div id="tabs-2">
Contenu de l'onglet 2
</div>
<div id="tabs-3">
Contenu de l'onglet 3
</div>
</div>
|
