JQuery UI

De Banane Atomic
Aller à la navigationAller à la recherche

Liens

Accordion

Html.svg
<!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

Scripts des langues

Html.svg
<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

Js.svg
// 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 => {
      // ...
    }
  }
);

wiki

Tabs

Html.svg
<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>