Comment utiliser Layui pour implémenter une fonction de sélecteur de temps déplaçable

Comment utiliser Layui pour implémenter une fonction de sélecteur de temps déplaçable

Layui est un framework de développement front-end très populaire. Il fournit une multitude de composants et d'outils pour rendre le développement front-end plus simple et plus efficace. Parmi eux, le sélecteur d'heure est un composant que nous devons souvent utiliser dans le développement Web, qui permet aux utilisateurs de sélectionner une heure spécifique. Pour certains scénarios, nous devrons peut-être également implémenter la fonction glisser-déposer du sélecteur d'heure afin que les utilisateurs puissent sélectionner librement la zone horaire. Cet article explique comment utiliser Layui pour implémenter une fonction de sélecteur de temps déplaçable et fournit des exemples de code spécifiques.

Tout d'abord, nous devons présenter les fichiers de ressources pertinents de Layui. Ajoutez le code suivant dans l'en-tête du fichier HTML :

<link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/css/layui.css">
<script src="https://cdn.bootcss.com/layui/2.5.6/layui.js"></script>

Ensuite, nous devons créer un sélecteur de temps déplaçable. Vous pouvez ajouter le code suivant au fichier HTML :

<div class="layui-row">
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header">时间选择器</div>
      <div class="layui-card-body">
        <div id="timePicker" class="layui-slider" lay-filter="sliderTest"></div>
      </div>
    </div>
  </div>
</div>

Parmi eux, layui-slider est un composant de curseur fourni par Layui, qui est utilisé pour obtenir l'effet glisser-déposer. L'attribut lay-filter est utilisé pour spécifier le nom de la fonction de rappel. layui-slider是Layui提供的一个滑块组件，用于实现拖拽的效果。lay-filter属性用于指定回调函数的名称。

然后，在JavaScript文件中添加以下代码：

layui.use('slider', function () {
  var slider = layui.slider;
  
  // 渲染滑块
  slider.render({
    elem: '#timePicker',
    value: [8, 18],  // 初始时间范围
    range: true,    // 开启范围选择
    min: 0,
    max: 24,
    change: function (value) {
      console.log(value);  // 打印当前时间范围
    }
  });
});

在上述代码中，我们通过layui.use('slider', function () {...})来加载Layui的滑块模块。然后，通过slider.render({...})来渲染滑块，并传入相应的配置项。

其中，elem属性指定了滑块的容器元素的选择器；value属性用于设置初始时间范围；range属性用于开启时间范围选择；min和max属性分别用于设置时间范围的最小值和最大值。在change

rrreee

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!