jquery-ui 相关问题

如何获取最新版本的jquery ui？

这段代码调用了最新版本的jquery： 现在我想要最新版本的 jquery ui： <p>此代码调用最新版本的<pre><code>jquery</code></pre>：</p> <pre><code>&lt;script src=&#39;https://code.jquery.com/jquery-latest.min.js&#39;&gt;&lt;/script&gt; </code></pre> <p>现在我想要最新版本的<pre><code>jquery ui</code></pre>:</p> <pre><code>&lt;script src=&#34;https://code.jquery.com/ui/jquery-ui-latest.min.js&#34;&gt;&lt;/script&gt; </code></pre> <p>不起作用 - 网络选项卡上的状态代码 <pre><code>404</code></pre> </p>有办法吗？<p> </p> </question> <answer tick="false" vote="0">您可以为此使用 jQuery UI 的 <p>内容分发网络 (CDN)<a href="https://releases.jquery.com/ui/" rel="nofollow noreferrer">。</a> </p>或者，更好的是，使用 <p>cdnjs.cloudflare.com<a href="https://cdnjs.com/libraries/jqueryui" rel="nofollow noreferrer">。它为我们提供了 </a><code>&lt;script&gt;</code><pre> 标签，可以放入我们的 html 中，其中包括 </pre>子资源 <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity" rel="nofollow noreferrer"><code>integrity</code><pre> 哈希值 </pre>。这些哈希值可以保护我们免受网络犯罪分子的侵害，他们可能会通过更改 Javascript 来攻击我们。最新版本的 jQuery UI 的标签是这样的。</a> </p><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js&#34; integrity=&#34;sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==&#34; crossorigin=&#34;anonymous&#34; referrerpolicy=&#34;no-referrer&#34;&gt; &lt;/script&gt; </code><pre> 出于同样的原因，使用 jQuery 本身的 CDN 是个好主意。它就是 Cloudflare；他们以在全球范围内的广泛影响力和出色的网络流量工程技能而闻名。</pre> <p>但是您应该知道，jQuery UI 是作为“自定义下载”分发给我们用户的。我们可以选择我们需要的小部件和其他功能，下载页面会为我们创建一个 .js 和一个 .min.js 文件。自定义下载生成器省略了我们不需要的小部件和功能。对于不使用 jQueryUI 许多不同部分的应用程序来说，这可以节省大量的下载“足迹”。使用子集通常比使用最快的 CDN 更快。<a href="https://cdnjs.com/libraries/jquery" rel="nofollow noreferrer"> </a></p>专业提示<p>。不要在生产网页中使用来自第三方 CDN 源的 <a href="https://jqueryui.com/download/" rel="nofollow noreferrer"><code>/latest/</code></a> 之类的内容。使用 CDN 时始终指定准确的版本。您不希望随机迟到的最新版本更新破坏您经过严格测试的网络应用程序。按照</p>您的<p>时间表更新您的版本，而不是库出版商的时间表。<strong> </strong> <pre> </pre>您可能必须指定确切的版本。请前往<em>JQuery UI 发布页面</em>并选择要使用的正确版本。每个页面可以使用以下脚本标记将最新代码的缩小版本添加到您的页面上。</p> </answer><code>&lt;script src=&#34;https://code.jquery.com/ui/1.13.2/jquery-ui.min.js&#34; integrity=&#34;sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; </code><answer tick="false" vote="0"> <p> <a href="https://releases.jquery.com/ui/" rel="nofollow noreferrer"></a>

如何实现嵌套 ul li 标签的 jquery 手风琴...？

我正在尝试为我的嵌套 标签显示 jQuery 手风琴... 我发现这个网站可以显示手风琴：http://jqueryui.com/demos/accordion/ 但不幸的是，它使用的是 &l... 我正在尝试为我的嵌套 <ul> <li> 标签显示 jQuery 手风琴... 我发现这个网站可以显示手风琴：http://jqueryui.com/demos/accordion/ 但不幸的是，它使用 <h3> 标签作为标题。 在我的实际代码中，我只有 <ul> 和 <li> 标签，我尝试过，但我无法理解要编写什么函数来实现它。 我的代码风格类似于： <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> 据我所知，您必须像示例中那样构建文档。 jQuery 正在搜索带有锚点的标头，后跟 div 块，依此类推... 示例： <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> 所以，你必须使用jQuery的标记，否则jQuery将无法识别你的内容。 您的 <ul> 列表的另一个问题是，jQuery 不知道哪一部分是标题，哪一部分是内容。 此时您有多种选择： 你可以在jQuery中找到相应的代码行并编辑它们（不推荐） 你可以写自己的手风琴（基于原文） （如果您确实想要 <ul> 列表）您可以在运行时将 <ul> 和 <ul> 标签与相应的“jQuery 标签”交换 使用jQuery的标记（推荐） 致以诚挚的问候

如何在 jQueryUI 中手动触发自动完成“选择”事件？

我正在使用 jQueryUI 自动完成，并且我有一个映射到选择事件的函数，例如： $("#someId").autocomplete({ 来源：一些数据， 选择：函数（事件，ui）{...}， 重点：功能...

新创建的 WordPress 网站上的小组件错误

美好的一天，我有一个新安装的 WordPress 网站。没有安装任何插件或第 3 方主题，只有 WordPress 的库存版本。然而，在我还没来得及之前，似乎就出现了问题

存在隐藏元素时 jQuery 可排序滞后

我有一个问题，如果存在隐藏元素，jQuery 可排序项目将很难在可排序元素中找到它们的位置。在下面的jsfiddle中，有2个例子。在...

区分键盘/鼠标触发的焦点事件

我正在使用 jquery ui 自动完成功能，想要破译由键盘交互和鼠标交互触发的焦点事件。我该怎么办呢？ $('输入').autocomplete({ 来源：

排序时是否可以“暂停”放置事件以询问用户问题（jquery-ui 可排序）？

我正在开发一个使用 jquery-ui 可排序小部件的项目。 在某些情况下，我需要问用户一个与排序相关的问题，然后更新回调就会起作用

JQuery Date.parse函数实现

我正在使用jquery的daterangepicker组件。当我将日期传递为“Jan 2011”时，jquery 的 Date.parse() 函数会给出一些奇怪的输出。以下是不同用例的示例输出：...

Jquery 对话框：隐藏按钮

我正在使用Jquery的dialog()方法来创建对话框。 我在创建对话框时在对话框上创建按钮，使用 $("#divName").dialog({ 纽扣： { ...

jQuery UI Slider - 如何在页面中使用多个滑块

我正在尝试使用 jquery ui 滑块创建多个滑动条。问题是只有当在其他条上滑动时，最后一个条中的值才会发生变化。 当在另一个滑动条上滑动时，值会发生变化...

JavaScript 拖放 - 拖动副本

我正在尝试创建一个强大的拖放事件调度程序。我几乎已经完成了所有内容，但仍停留在一个元素上：如何拖动项目的副本。 您可以看到当前版本正在运行

jQuery 自动完成源为空

用户选择州和城市后，将触发 Ajax 以从服务器检索数据。只有这样，我才允许他们使用 jQuery UI 自动完成功能搜索结果。 我填充一个名为

jQuery 日期选择器月份选择框在 Bootstrap 模式中立即打开和关闭

我遇到了 Bootstrap 模式和 jQuery UI 日期选择器之间的冲突，我无法使用月份选择框，因为某些东西在打开后立即将其关闭。 重现步骤： ...

添加 jquery ui css

我想使用jquery ui，但我缺少以下环境中的css： $.ajax({ url: '//code.jquery.com/ui/1.12.1/jquery-ui.js', 数据类型：'脚本'， 缓存：真， 成功：函数（）{ ...

如何在 jQuery 中使用工具提示？

我有一个简单的工具提示，其中的 div 中有很长的 JavaScript 代码。我想让它尽可能简单。 这是我的代码： 我有一个简单的工具提示，div 中有很长的 JavaScript 代码。我想让它尽可能简单。 这是我的代码： <div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool <div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;"> <div class="tool_wrapper"> <div class="tooltip_top_new"></div> <div class="tooltip_middle_new"> <div class="content"> <p>Please holder actuall text</p> <p>Please holder actuall text</p> </div> </div> <div class="tooltip_bot_new2"></div> </div> </div> </div> CSS .tooltip_top_new{ background:url(../images/n_tooltip_top.png) no-repeat; height:9px; width:212px; } .tooltip_middle_new{ background:url(../images/n_tooltip_middle.png) no-repeat; width:212px; } .tooltip_middle_new .content{ padding:2px 13px 1px; } .tooltip_middle_new .content p{ line-height: 1.3; margin-bottom: 1em; text-align: left; } .tooltip_bot_new2{ background:url(../images/n_tooltip_bot2.png) no-repeat; height:21px; width:212px; } .Question_di{ position:relative; } .pbc11_ttpos1_1Q_di { border: 0 solid #FF0000; } .toolTip_new { background: none repeat scroll 0 0 transparent; color: #5C5C5C; display: none; font: 10px/12px Tahoma,Geneva,sans-serif; left: -173px; top: -90px; position: absolute; z-index: 1000; } 问题是我必须复制和粘贴onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'"无论我在哪里使用工具提示，我都想避免它。 JQueryTools 包含一个工具提示模块，它将消除您的大部分代码。 http://jquerytools.org/demos/tooltip/index.html 也可以完全不使用 JavaScript，使用 HTML 和 CSS 创建工具提示： <div class="has-tooltip"> <button class="huge red">You Know You Wanna...</button> <div class="tooltip">Do NOT Press This Button.</div> </div> 在 CSS 中： .has-tooltip .tooltip { position: absolute; display: none; <style code to position (with margin-left and margin-top) and make the tooltip box look how you want> } .has-tooltip:hover .tooltip { display: block; } Google“CSS Tooltips”查看大量示例。

移动设备上的 jQuery UI 滑块触摸和拖放支持

我已经在项目中设计并实现了 jQuery UI 滑块。尽管它具有响应性，但滑块不会响应触摸和拖动。相反，您必须触摸您想要的位置

jQuery 手动设置按钮集收音机

我正在尝试手动将单选按钮设置为选中状态，但出现问题。代码运行得很好： $('#'+align+'Text').attr("选中","选中"); 但是当我将 jQuery UI 付诸实践时......

使用表单输入和滑块旋转/旋转对象

我有一个名为 #person 的对象，我需要使用滑块的输入将其从 -180 度旋转到 180 度。我让滑块与输入框同步以显示当前角度值和

jquery-ui设置居中对齐元素可拖动时如何修复偏移？

这是垂直居中对齐元素可拖动的示例： #draggablediv { 宽度：100px； 高度：100px； 回来...</desc> <question vote="0"> <p>这是可拖动的垂直居中对齐元素<a href="https://codepen.io/tp1415926535/pen/oNaOePX" rel="nofollow noreferrer">示例</a>：</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; #draggablediv { width: 100px; height: 100px; background-color: yellow; position: absolute; margin: auto 0; top: 0; bottom: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;draggablediv&#34;&gt;&lt;/div&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.6.0.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://code.jquery.com/ui/1.13.2/jquery-ui.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(function () { $(&#34;#draggablediv&#34;).draggable(); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>由于“margin: auto”，可拖动元素将不再准确设置顶部值。有没有办法让它正常工作？</p> </question> <answer tick="true" vote="0"> <p>这个问题可以分为两步解决：</p> <ul> <li>为了最初将元素垂直居中，我建议以这种方式使用 FlexBox：</li> </ul> <pre><code>/* to make sure that both document root &amp; body take the whole vertical space */ html,body { height: 100%; display: flex; align-items: center; } </code></pre> <ul> <li>要修复顶部/底部错误的偏移，您应该删除</li> </ul> <pre><code>#draggablediv { ... ... /* remove these 2 lines:*/ top: 0; /* &lt;--- this */ bottom: 0; /* &lt;--- this */ ... } </code></pre> <p>这是<strong>众多建议之一</strong>，另一个建议（如果您不想触及正文和文档根目录），您可以使用另一个父 div 容器来应用相同的先前规则或也使用 JQuery 将元素居中。</p> </answer> </body></html>

在 PDF 到 JPG 转换网页中设置 GlobalWorkerOptions.workerSrc 和加载 jsPDF 库的问题

我正在尝试创建一个 HTML 网页，可以将 PDF 文件转换为 JPG 图像，然后将重新排列的页面导出为新的 PDF 文件。 代码如下： 我正在尝试创建一个 HTML 网页，可以将 PDF 文件转换为 JPG 图像，然后将重新排列的页面导出为新的 PDF 文件。 代码如下： <!DOCTYPE html> <html> <head> <title>PDF pages rearranger</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script> <style> /* Define the style for the container element */ #container { width: 600px; height: 400px; border: 1px solid black; margin: 20px auto; overflow: auto; } /* Define the style for the image elements */ img { width: 100px; height: 100px; margin: 10px; cursor: move; /* Change the cursor to indicate that the images are draggable */ } </style> <!-- Load the jQuery library from a CDN --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Load the jQuery UI library from a CDN --> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <!-- Load the jsPDF library from a CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> </head> <body> <input type="file" id="fileInput" accept=".pdf" /> <button id="convertButton">Convert to JPG</button> <!-- Create a div element to hold the images --> <div id="container"></div> <!-- Create a button to export the rearranged pages as a new PDF file --> <button id="exportButton">Export as PDF</button> <script> // Set the GlobalWorkerOptions.workerSrc property window.GlobalWorkerOptions = { workerSrc: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js' }; const fileInput = document.getElementById('fileInput'); const convertButton = document.getElementById('convertButton'); const container = document.getElementById('container'); const exportButton = document.getElementById('exportButton'); convertButton.addEventListener('click', async () => { const file = fileInput.files[0]; if (!file) { alert('Please select a PDF file first'); return; } // Clear any existing images in the container container.innerHTML = ''; const reader = new FileReader(); reader.onload = async (event) => { const typedArray = new Uint8Array(event.target.result); const pdfDocument = await pdfjsLib.getDocument(typedArray).promise; const numPages = pdfDocument.numPages; for (let i = 1; i <= numPages; i++) { const page = await pdfDocument.getPage(i); const viewport = page.getViewport({ scale: 1.0 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const ctx = canvas.getContext('2d'); await page.render({ canvasContext: ctx, viewport }).promise; const dataUrl = canvas.toDataURL('image/jpeg'); download(dataUrl, `page${i}.jpg`); // Create an img element for each page and add it to the container const img = document.createElement('img'); img.src = dataUrl; img.alt = `Page ${i}`; container.appendChild(img); } // Make the image elements draggable and sortable using jQuery UI $("#container").sortable({ // Define a helper function to create a clone of the dragged image helper: function(e, ui) { return $(ui).clone().appendTo("#container").show(); } }); }; reader.readAsArrayBuffer(file); }); exportButton.addEventListener('click', () => { // Create a new jsPDF instance const doc = new jsPDF(); // Get all the img elements in the container const images = container.querySelectorAll('img'); // Add each image to the PDF document images.forEach((img, index) => { if (index > 0) { doc.addPage(); } doc.addImage(img.src, 'JPEG', 10, 10); }); // Save the PDF document doc.save('rearranged.pdf'); }); function download(dataUrl, filename) { const link = document.createElement('a'); link.href = dataUrl; link.download = filename; link.click(); } </script> </body> </html> 但是，当我尝试运行代码时，遇到了两个问题： 当我单击“转换为 JPG”按钮时，出现第一条警告消息，显示“已弃用的 API 使用：未指定 GlobalWorkerOptions.workerSrc”。我猜这是由于 GlobalWorkerOptions.workerSrc 属性设置不正确造成的。 当我单击“导出为 PDF”按钮时，出现第二条警告消息，显示“未捕获的引用错误：jsPDF 未定义”。看来 jsPDF 库没有正确加载。 任何人都可以帮助我了解可能导致这些问题的原因并提供如何解决这些问题的建议吗？ 您面临的问题确实与外部库的加载顺序和潜在的计时问题有关。让我们分别解决每个问题： 已弃用的 API 使用警告 (GlobalWorkerOptions.workerSrc)： 要修复“已弃用的 API 使用”警告，您需要在加载 GlobalWorkerOptions.workerSrc 库后设置 pdf.js 属性。您可以在初始化 workerSrc 对象时使用 pdfjsLib 选项来实现此目的。将以下代码放在脚本的开头： const workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'; const pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc; 然后，您可以像以前一样继续编写脚本的其余部分。 未捕获的引用错误：jsPDF 未定义： 发生此错误的原因是未加载或识别 jsPDF 库。在使用之前，您需要确保jsPDF库已完全加载。 要解决此问题，您可以将导出代码包含在 jsPDF 脚本的 load 事件的事件侦听器中。具体方法如下： const jsPDFScript = document.createElement('script'); jsPDFScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'; jsPDFScript.onload = () => { // Your export code here exportButton.addEventListener('click', () => { // ... (your existing export code) }); }; document.body.appendChild(jsPDFScript); 将此脚本放在定义 exportButton 和其他元素的部分之后。 通过解决这两个问题，您的代码应该按预期工作，不会出现警告和错误。关键是确保所需的库以正确的顺序加载和初始化。