Intégration PHP et jQuery pour une conception Web réactive

L'objectif de la conception Web est de créer un site Web capable d'avoir d'excellents effets d'affichage sur plusieurs plates-formes et plusieurs terminaux, et la conception Web réactive est devenue une solution idéale pour atteindre cet objectif. La conception Web réactive permet une adaptation aux différents terminaux en modifiant dynamiquement la mise en page et l'affichage des éléments des pages Web en fonction des différents appareils. Dans la conception Web réactive, PHP et jQuery sont deux technologies très importantes, et l'intégration des deux peut permettre d'obtenir de nombreuses fonctions et effets utiles. Cet article explique comment utiliser l'intégration PHP et jQuery pour implémenter une conception Web réactive.

1. Implémenter une mise en page réactive

La mise en page Web est l'un des contenus essentiels de la conception Web réactive. Étant donné que les tailles d'écran des différents appareils sont différentes, nous devons faire en sorte que la page présente le meilleur effet sur les appareils avec des largeurs d'écran différentes sans affecter le contenu de la page Web. Dans ce contexte, d'excellents frameworks tels que Bootstrap et Foundation fournissent une méthode simple basée sur CSS et JavaScript pour modifier le style et la mise en page des pages Web en fonction de la taille de l'écran de l'appareil.

Cependant, dans cette approche, nous devons définir les règles réactives manuellement. L'approche habituelle consiste à imbriquer du code Media Query dans un fichier de feuille de style CSS. Cette approche peut fonctionner sur de petits sites Web, mais lorsque l'application Web devient plus complexe, le maintien de ces règles devient très difficile. À l’heure actuelle, nous pouvons utiliser PHP pour générer automatiquement des règles réactives. Par exemple, pour modifier le nombre de colonnes fence, nous pouvons utiliser le code suivant :

<?php
    function getColumnClass($screen_size, $col_count){
        $class = "col-".$screen_size."-".$col_count;
        return $class;
    }
?>

Dans cet exemple, nous utilisons la fonction getColumnClass pour renvoyer la classe responsive de Bootstrap. Dans Bootstrap, la classe col-- définit la taille et la position de la grille de clôture. Parmi eux, les astérisques représentent respectivement les tailles d'écran de quatre appareils : extra-petit (ex : téléphone portable), petit (ex : tablette), moyen (ex : ordinateur portable) et grand (ex : ordinateur de bureau). Le deuxième astérisque représente chacun. La proportion de la largeur occupée par la grille de clôture. En utilisant cette fonction, nous pouvons générer un ou plusieurs noms de classe pour s'adapter automatiquement aux différentes tailles d'écran dans le système de grille Bootstrap.

2. Utilisez jQuery pour réaliser l'interaction

En plus de créer une mise en page Web belle et efficace, vous devez également réfléchir à la manière d'implémenter la fonction interactive de l'application Web. À cet égard, jQuery est une bibliothèque populaire qui nous permet d'implémenter rapidement divers effets interactifs, tels que l'expansion des menus, le masquage d'éléments, le glissement rapide, etc. Grâce à jQuery, nous pouvons piloter le comportement des applications Web via les clics et les saisies des utilisateurs. Prenons l'exemple de l'utilisation de jQuery pour implémenter les effets de menu.

Placez une liste de menu HTML sur la page et chaque élément de la liste a un événement lié. Lorsque l'utilisateur clique sur un élément de menu, la liste des menus glisse pour révéler d'autres éléments de menu. Voici le code de menu utilisant la démonstration d'erreur jQuery :

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

<script type="text/javascript">
    $(function(){
        $('.menu a').click(function(){
            $('.menu').slideUp();
        });
    });
</script>

Dans cet exemple, nous utilisons la bibliothèque jQuery et déclarons un gestionnaire d'événements de clic. Lorsque l'utilisateur clique sur un élément de menu, nous utiliserons la méthode slideUp pour faire glisser la liste de menus hors de la page. Cependant, cette méthode ne prend pas en compte si le menu a été développé. Si le menu a été développé, la méthode slideUp() masquera l'intégralité du menu, ce qui n'est pas cohérent avec les attentes de l'utilisateur.

Pour résoudre ce problème, nous devons ajouter un peu de logique pour faire glisser le menu vers le bas ou vers le haut. Nous pouvons utiliser une variable pour suivre l'état actuel du menu. Par exemple, voici un code de menu amélioré :

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

<script type="text/javascript">
    var isOpen = false;
    $(function(){
        $('.menu a').click(function(){
            if(!isOpen){
                $('.menu').slideDown();
                isOpen = true;
            }else{
                $('.menu').slideUp();
                isOpen = false;
            }
        });
    });
</script>

Dans cet exemple, nous définissons une variable booléenne isOpen pour suivre l'état actuel du menu. Lorsqu'on clique sur un élément de menu, nous vérifions d'abord la variable isOpen, si le menu est déjà développé, nous le masquerons à l'aide de la méthode slideUp, sinon nous l'afficherons à l'aide de la méthode slideDown.

3. Utilisez l'intégration PHP et jQuery pour obtenir une conception Web réactive

PHP et jQuery peuvent être combinés librement pour obtenir une conception Web réactive plus étonnante. Par exemple, nous pouvons utiliser du code PHP pour générer dynamiquement un style de menu qui correspond à l'écran de l'appareil :

<?php
    function buildMenu($screen_size, $menu_items){
        $column_class = getColumnClass($screen_size, count($menu_items));
        $menu = "<ul class='menu'>";
        foreach($menu_items as $item){
            $menu .= '<li class="'.$column_class.'"><a href="#">'. $item .'</a></li>';
        }
        $menu .= "</ul>";
        return $menu;
    }
?>

<?php
    $menu_items = array('Home', 'About Us', 'Services' ,'Contact Us');
    $menu_small = buildMenu('xs', $menu_items);
    $menu_large = buildMenu('lg', $menu_items);
?>

<body>
    <?php echo $menu_small ?>
    <script type="text/javascript">
        $(function(){
            var windowWidth = $(window).width();
            if(windowWidth>=992){
                $('body').append('<?php echo $menu_large ?>');
            }
        });
    </script>
</body>

Dans cet exemple, nous avons d'abord créé la fonction buildMenu pour générer dynamiquement le code du menu. Ensuite, utilisez cette fonction en PHP pour générer deux menus, un pour les appareils à petit écran et un pour les appareils à grand écran. Ensuite, dans la page HTML, nous affichons le menu sur petit écran comme d'habitude. Lorsque la page est chargée, nous vérifions si l'appareil actuel est un grand écran ou un petit écran en fonction de la largeur de la fenêtre. Si l'appareil dispose d'un grand écran, utilisez jQuery pour ajouter dynamiquement un menu grand écran à la page.

4. Conclusion

Dans la conception Web moderne, la conception Web réactive est devenue une technologie essentielle. Lors de la mise en œuvre d'une mise en page réactive et de fonctions interactives, PHP et jQuery doivent être utilisés pour implémenter de nombreuses fonctionnalités complexes. Dans ce qui précède, j'ai brièvement présenté les principales technologies d'utilisation de l'intégration PHP et jQuery pour obtenir une conception Web réactive, notamment la génération de styles Bootstrap basés sur la largeur de la fenêtre, l'utilisation de jQuery pour obtenir des effets interactifs et l'utilisation d'une combinaison de PHP et jQuery pour créer de puissants pages Web réactives, etc. Nous pensons que l'intégration de PHP et jQuery jouera un rôle important dans l'avenir de la conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!