📌  相关文章
📜  JqueryUI-切换(1)

📅  最后修改于: 2023-12-03 15:16:50.597000             🧑  作者: Mango

JqueryUI - 切换

JqueryUI是一个基于jQuery的JavaScript库，提供用户界面组件和交互效果。其中，JqueryUI-切换可以使网页中的不同部分在显示和隐藏之间互相切换，从而为用户提供更好的交互体验。

安装方法

JqueryUI-切换是JqueryUI的一个模块，需要在页面引入Jquery库和JqueryUI库，然后再引入相应的模块文件。可以通过以下方式来安装：

1. 下载

通过Jquery官方网站或者Github下载Jquery库和JqueryUI库。官方网站：https://jquery.com/，Github页面：https://github.com/jquery/jquery-ui。

2. 引入

在HTML页面的head标签中引入Jquery库和JqueryUI库：

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
3. 使用

引入Jquery库和JqueryUI库后，就可以在HTML页面中使用JqueryUI的切换功能了。可以通过以下方式来切换元素的显示和隐藏：

$(document).ready(function(){
  $("#button1").click(function(){
    $("#panel1").toggle();
  });
});

其中，button1是触发切换的按钮，panel1是需要切换的元素的ID，toggle()方法可以使元素在显示和隐藏之间互相切换。

API
toggle( [duration ] [, easing ] [, complete ] )

用于切换元素的显示和隐藏。如果元素被隐藏，则toggle()方法会将元素显示出来；如果元素已经显示出来，则toggle()方法会将元素隐藏起来。

  • duration：可选的，表示动画执行的时间，可以是毫秒或者字符串（如"slow"和"fast"），默认值为 "normal"。
  • easing：可选的，表示动画执行的缓动函数，可以是预定义的缓动函数名称或者自定义的缓动函数，这里不再赘述。
  • complete：可选的，当动画执行完毕时，执行的回调函数。
show( [duration ] [, easing ] [, complete ] )

用于显示元素。

  • duration：可选的，表示动画执行的时间，可以是毫秒或者字符串（如"slow"和"fast"），默认值为 "normal"。
  • easing：可选的，表示动画执行的缓动函数，可以是预定义的缓动函数名称或者自定义的缓动函数，这里不再赘述。
  • complete：可选的，当动画执行完毕时，执行的回调函数。
hide( [duration ] [, easing ] [, complete ] )

用于隐藏元素。

  • duration：可选的，表示动画执行的时间，可以是毫秒或者字符串（如"slow"和"fast"），默认值为 "normal"。
  • easing：可选的，表示动画执行的缓动函数，可以是预定义的缓动函数名称或者自定义的缓动函数，这里不再赘述。
  • complete：可选的，当动画执行完毕时，执行的回调函数。
callback

当动画执行完毕时，可以执行一个回调函数。

实例

在下面的实例中，我们用JqueryUI的切换功能实现了一个简单的任务列表，点击每个任务可以切换任务的状态（未完成和已完成），点击删除按钮可以删除任务。

<!DOCTYPE html>
<html>
<head>
  <title>JqueryUI-切换实例</title>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    /* 定义样式 */
    .done {text-decoration: line-through; }
    button { margin-left: 10px; }
  </style>
  <script>
    $(document).ready(function(){
      // 切换任务状态
      $(".task").click(function(){
        $(this).toggleClass("done");
      });

      // 删除任务
      $(".delete").click(function(){
        $(this).parent().remove();
      });

      // 添加任务
      $("#addBtn").click(function(){
        var txt = $("#newTask").val();
        if(txt !== ''){
          var newTask = "<li class='task'>" + txt + "<button class='delete'>删除</button></li>";
          $("#taskList").append(newTask);
          $("#newTask").val('');
        }
      });
    });
  </script>
</head>
<body>
  <h1>任务列表</h1>
  <form>
    <input id="newTask" type="text">
    <button type="button" id="addBtn">添加</button>
  </form>
  <ul id="taskList">
    <li class="task">学习JqueryUI-切换<button class="delete">删除</button></li>
    <li class="task">写JqueryUI-切换的介绍<button class="delete">删除</button></li>
    <li class="task">完成JqueryUI-切换的实例<button class="delete">删除</button></li>
  </ul>
</body>
</html>

效果如下：

JqueryUI-切换实例

可参考：https://www.w3school.com.cn/jqueryui/jqueryui_toggle.asp