jQuery 实现带手柄自由调整页面大小的功能

2023-12-24 12:20:58

? ? ? ? 在https://blog.csdn.net/qq_44327851/article/details/135006421文章中提到了用纯JavaScript实现自由调整页面大小的功能，其中有基础版和优化版，优化版通过添加手柄解决了基础版在调整页面大小的时候不够灵活的问题，其实解决不够灵活的问题还有其它办法——jQuery和 jQuery UI。
? ? ? ? 下面演示如何通过 jQuery实现可控制的调整大小功能：首先确保在您的 HTML 页面中引入 jQuery 和 jQuery UI 的库文件：

<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>Resizable Element</title>
? <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
? <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
? <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
? <style>
? ? .resizable {
? ? ? width: 200px;
? ? ? height: 200px;
? ? ? background-color: lightgray;
? ? ? border: 1px solid #ccc;
? ? ? overflow: auto;
? ? }
? </style>
</head>
<body>
? <div class="resizable">
? ? <!-- 这里放置需要调整大小的内容 -->
? </div>

? <script>
? ? $(function() {
? ? ? $(".resizable").resizable({
? ? ? ? aspectRatio: false, // 是否保持宽高比
? ? ? ? minWidth: 100, ? ? ? // 最小宽度
? ? ? ? minHeight: 100, ? ? ?// 最小高度
? ? ? ? maxWidth: 400, ? ? ? // 最大宽度
? ? ? ? maxHeight: 400 ? ? ? ?// 最大高度
? ? ? });
? ? });
? </script>
</body>
</html>

????????在这个示例中，我们使用了 jQuery 和 jQuery UI 库，通过调用?.resizable()?方法来使具有?resizable?类名的元素可调整大小。同时还提供了一些配置选项，例如是否保持宽高比、最小宽度和高度、最大宽度和高度等。这样就能够更灵活地控制调整大小的行为和效果。

文章来源:https://blog.csdn.net/qq_44327851/article/details/135006654
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。