Comment utiliser jquery dans ecshop

ECShop, en tant que plateforme de commerce électronique open source nationale, a toujours été soutenue et appréciée par les petites et moyennes entreprises et les particuliers. En tant que l'un des frameworks JavaScript les plus populaires, jQuery est également largement utilisé dans tous les aspects du développement Web.

Cet article vise à présenter comment utiliser jQuery dans ECShop pour obtenir certains effets d'interaction front-end courants. Plus précisément, nous couvrirons le contenu suivant :

1. Introduction et installation de jQuery ;
2. Introduction de jQuery dans ECShop
3. Scénarios d'application jQuery courants : carrousels, menus déroulants, fenêtres contextuelles, etc. ; Application dans le développement de plug-ins ECShop.
4. 1. Introduction et installation de jQuery

jQuery est un framework JavaScript rapide et concis qui permet aux développeurs d'exploiter plus facilement les documents HTML, de traiter les événements et d'obtenir des effets d'animation, etc. Il simplifie le fonctionnement de JavaScript, permettant aux développeurs d'effectuer leur travail de développement front-end plus efficacement.

Avant de commencer à utiliser jQuery, nous devons l'introduire dans notre projet. Plus précisément, nous pouvons y parvenir des manières suivantes :

Introduit via CDN : ajoutez simplement le code suivant dans la balise head de la page HTML.

1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Télécharger et importer des fichiers locaux : Nous pouvons télécharger la version correspondante du fichier jQuery depuis le site officiel (https://jquery.com/), puis l'importer via les méthodes suivantes.

2. <script src="js/jquery-3.6.0.min.js"></script>

Utilisez npm pour installer : Si votre projet utilise npm comme outil de gestion de packages, nous pouvons installer jQuery via la commande suivante.

3. npm install jquery

2. Présentation de jQuery dans ECShop

Introduire jQuery dans ECShop est également très simple. Il suffit d'ajouter le code suivant au fichier modèle.

<script src="__PUBLIC__/jquery/jquery-3.6.0.min.js"></script>

Parmi elles,

est une variable système, qui représente le répertoire public du projet. Nous pouvons placer le fichier jQuery dans ce répertoire pour faciliter le partage de plusieurs fichiers modèles.

__PUBLIC__3. Scénarios d'application jQuery courants

Graphique carrousel

1. Le graphique carrousel est un effet interactif frontal très courant, qui peut rendre la page plus vivante et plus riche. Dans ECShop, nous pouvons utiliser jQuery pour obtenir l'effet d'images carrousel.

Plus précisément, nous pouvons implémenter des carrousels grâce à des minuteries et à la modification dynamique des propriétés CSS. Le code est le suivant.

<!-- HTML代码 -->
<div class="carousel">
  <div class="carousel-item active"><img src="__PUBLIC__/images/1.jpg"></div>
  <div class="carousel-item"><img src="__PUBLIC__/images/2.jpg"></div>
  <div class="carousel-item"><img src="__PUBLIC__/images/3.jpg"></div>
</div>

<!-- CSS代码 -->
.carousel {
  position: relative;
  width: 100%;
  height: 400px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .5s ease;
}

.carousel-item.active {
  opacity: 1;
}

<!-- JavaScript代码 -->
<script>
  $(function() {
    var $items = $('.carousel-item');
    var len = $items.length;
    var index = 0;

    setInterval(function() {
      $items.removeClass('active');
      $($items[index]).addClass('active');
      index++;

      if (index === len) {
        index = 0;
      }
    }, 3000);
  });
</script>

Menu déroulant

2. Le menu déroulant est également un effet interactif très courant, qui peut rendre la page plus concise, claire et facile à utiliser. Dans ECShop, nous pouvons utiliser jQuery pour implémenter rapidement l'effet de menu déroulant.

Plus précisément, nous pouvons ajouter un événement de survol à l'élément de menu, puis modifier les propriétés CSS pour obtenir l'effet du menu déroulant. Le code est le suivant.

<!-- HTML代码 -->
<ul class="menu">
  <li><a href="#">菜单1</a>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
</ul>

<!-- CSS代码 -->
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  float: left;
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  color: #666;
  text-decoration: none;
}

.menu > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
}

.menu > li:hover > ul {
  display: block;
}

.menu > li > ul > li > a {
  display: block;
  padding: 10px;
  color: #666;
  text-decoration: none;
}

.menu > li > ul > li > a:hover {
  background-color: #f7f7f7;
}

Fenêtre contextuelle

3. La fenêtre contextuelle est également un effet d'interaction frontale courant, qui peut rendre la page plus flexible et plus facile à utiliser pour les utilisateurs. Dans ECShop, nous pouvons utiliser jQuery pour obtenir l'effet pop-up.

Plus précisément, nous pouvons ajouter un calque de masque et un élément pop-up, puis modifier dynamiquement les propriétés CSS pour obtenir l'effet pop-up. Le code est le suivant.

<!-- HTML代码 -->
<div class="modal">
  <div class="modal-overlay"></div>
  <div class="modal-dialog">
    <div class="modal-header">提示</div>
    <div class="modal-body">你确定要删除吗？</div>
    <div class="modal-footer">
      <button class="btn btn-ok">确定</button>
      <button class="btn btn-cancel">取消</button>
    </div>
  </div>
</div>

<!-- CSS代码 -->
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  background-color: #000;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.modal-header {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.modal-body {
  padding: 10px;
  font-size: 14px;
}

.modal-footer {
  padding: 10px;
  text-align: right;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-ok {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-ok:hover {
  background-color: #449d44;
}

.btn-cancel {
  margin-left: 10px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-cancel:hover {
  background-color: #e6e6e6;
}

<!-- JavaScript代码 -->
<script>
  $(function() {
    $('.btn-delete').click(function() {
      $('.modal').fadeIn();
    });

    $('.btn-ok, .btn-cancel').click(function() {
      $('.modal').fadeOut();
    });
  });
</script>

4. L'application de jQuery dans le développement de plug-ins ECShop

ECShop, en tant que plate-forme de commerce électronique open source, prend également en charge le développement de plug-ins pour répondre aux besoins personnalisés des utilisateurs en matière de fonctions. Dans le développement de plug-ins, nous pouvons également utiliser jQuery pour obtenir des effets interactifs.

Plus précisément, nous pouvons obtenir divers effets interactifs en introduisant jQuery dans le fichier modèle du plug-in, puis en utilisant les différentes API qu'il fournit. Par exemple, pour implémenter un plug-in de personnalisation de la page de commande dans ECShop, nous pouvons utiliser le code suivant pour modifier la quantité de produits sur la page.

<!-- HTML代码 -->
<input type="text" name="goods_num" value="1" data-max="100" class="form-control" />

<!-- JavaScript代码 -->
<script>
  $(function() {
    $('input[name=goods_num]').change(function() {
      var max = $(this).data('max');
      var num = parseInt($(this).val());

      if (num > max) {
        num = max;
      }

      if (num < 1) {
        num = 1;
      }

      $(this).val(num);
    });
  });
</script>

Le code ci-dessus déterminera et limitera automatiquement la quantité entre 1 et le maximum lorsque la quantité du produit change.

Résumé

Dans cet article, nous avons présenté comment utiliser jQuery dans ECShop pour obtenir des effets d'interaction front-end courants. Plus précisément, nous avons expliqué l'introduction et l'utilisation de jQuery, l'introduction de jQuery dans ECShop, les scénarios d'application courants tels que les carrousels, les menus déroulants et les fenêtres contextuelles, ainsi que l'application de jQuery dans le développement de plug-ins ECShop.

Je pense qu'en étudiant cet article, tout le monde comprendra mieux comment utiliser jQuery pour obtenir des effets interactifs front-end. Dans le processus de développement actuel, nous pouvons choisir la pile technologique appropriée pour obtenir divers effets interactifs basés sur des besoins spécifiques afin d'améliorer l'expérience interactive de l'utilisateur.

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!