jquery-ui 相关问题

拖动时 jQuery UI 排序不准确

我在使用 jQuery UI Sortable Widget 时遇到问题，它对元素放置位置有点不准确。 例子： HTML： <... 我在使用 jQuery UI Sortable Widget 时遇到问题，它对于元素的放置位置有点不准确。 示例： HTML： <div class="Container"> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> </div> CSS： div.Container { clear: both; } div.Container div.Item { float: left; display: block; padding: 5px 5px 2px 5px; background-color: #ccc; border: solid 1px #aaa; border-radius: 5px; margin: 0 10px 10px 0; } div.Container div.Item img { width: 30px; height: auto; border: solid 1px #888; } JS： $(document).ready(function() { $('div.Container').sortable({ revert: true, cursor: 'move' }); }); JSFiddle：http://jsfiddle.net/ghdbxj7t/ 尝试直接向下拖动一个元素（在其他元素下方），然后向右拖动经过最后一个元素，然后向上拖动以再次与元素对齐。 这会导致原始元素占位符卡在其位置，并且不会移动任何其他元素。 如果您将元素与最后一个元素完全对齐（水平）拖动，您几乎可以在最后一个元素切换之前到达它的顶部（有时我什至可以走得更远）。 此示例与我在自己的网站上遇到的情况类似，但行为更为极端。我可以将第一个元素水平拖动到所有其他元素上，它们排序得很好除了最后一个元素对于何时允许自己进行排序非常敏感。 我网站上的 HTML 和 CSS 与 JSFiddle 中的几乎完全相同。 我该怎么做才能使拖动更加准确，以便拖动到最后一个项目之后的元素立即排序，而不必在最后一个项目上多次拖动它才能让它明白我想将其放置在那里？ 此行为已在 Chrome 中测试。 我正在使用 jQuery 1.11.2 和 jQuery UI 1.11.4（JSFiddle 似乎不支持这些，但 1.9.1 中的行为接近我所经历的） 7岁了，但我想我可以帮忙。但讽刺的是，我也来寻找答案，并且碰巧在弄乱你的 jsfiddle 时修复了它。从那时起您可能已经修复了它，因此这可以为其他遇到问题的人提供参考。 您可以通过添加选项 tolerance 并向其添加值 pointer 来帮助使其更加准确。 示例代码： $(document).ready(function() { $('div.Container').sortable({ revert: true, cursor: 'move', tolerance: "pointer" }); }); 这是做什么的，当您的光标与其他项目重叠时，它就会开始对其进行排序。默认情况下，它是 intersect，对我来说这似乎有问题，尽管它没有问题。当项目与其他元素重叠时，Intersect几乎可以做到这一点，它会对其进行排序。当不同的项目可能具有不同的尺寸时，这看起来会非常有问题，并且边缘项目（例如右、左、上或下）也可能看起来有问题。 由于您有一个水平可排序列表，因此您可以使用 axis 选项来限制项目的拖动移动，如下所示 $(document).ready(function() { $('div.Container').sortable({ revert: true, cursor: 'move', axis: "x" }); }); http://api.jqueryui.com/sortable/#option-axis 有一个类似的问题，当我将一个项目拖到应该可放置的区域上时，当前元素没有移到一边以为其放置腾出空间）。 花了 2 天时间浏览各种 Stackoverflow 帖子和其他在线信息源后，乔纳森的答案是解决我的可排序敏感度问题的唯一答案。谢谢乔纳森！

当用户单击 Telerik Masked TextBox 时如何通过 Jquery 清除 Telerik Masked TextBox 的值

我正在制作一个模块，其中人的姓名和手机号码保存在数据库中。 Telerik Masked TextBox 被用作获取输入电话号码的方法。 $(".mainContainer").fin...

如果服务器端更新不起作用，则恢复到可排序的原始位置

我的问题是这个问题的重复，但接受的答案包含一个不再有效的小提琴。所以我需要再问一遍。 我正在使用 jquery Sortable 将 elems 从一个列表移动到 ano...

jQuery 选项卡中的相同 ID

我在一个小型应用程序中使用 jQuery Tabs 库。该页面有 5 个选项卡，每个页面的内容都是使用 Ajax 加载的。问题是，一旦我加载了一个选项卡，它就会保留在浏览器备忘录中......

如何使用自定义按钮实现 jQuery UI Datepicker 以增强用户交互和功能？

如何实现带有自定义按钮的 jQuery UI Datepicker 以增强用户交互？我想包含“下一步”、“下一步

标题的 jQuery ui 对话框图像

指定 jQuery UI 对话框时是否可以为我的标题放置图像而不仅仅是纯文本？ 谢谢

为什么我的 jQueryUI 模态对话框不起作用？

我有一个简单的任务却让我抓狂。 我的 jQuery 代码： $(文档).ready(函数() { $("#dialog_open").button().click(function () { $("#dialog_f...

使用 jQuery UI sortable 对多个表行进行排序

我正在使用 jQuery UI 附带的可排序函数来对表行重新排序。它工作正常，这里是一个 JSFiddle，下面是我的 HTML 和 JS ... 我正在使用 jQuery UI 附带的可排序函数来对表行重新排序。它工作正常，这里是一个 JSFiddle，下面是我的 HTML 和 JS <table style="width: 100%;"> <thead> <tr> <th>ID</th> <th>Fruit</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple</td> </tr> <tr> <td>2</td> <td>Pear</td> </tr> <tr class="sticky"> <td>3</td> <td>Banana</td> </tr> <tr> <td>4</td> <td>Raspberry</td> </tr> <tr> <td>5</td> <td>Mango</td> </tr> </tbody> </table> $(function(){ $("table tbody").sortable(); }); 但是我希望能够同时拖动多行。基本上，当您拖动 tr 时，如果其正下方的 tr 具有 sticky 类，则需要将 tr 与其一起拖动。因此，在我的示例中，任何时候您想要拖动并重新排序“Pear”行，下面的“Banana”行都会随之移动。 我认为可以使用辅助函数来做到这一点，但我真的不知道从哪里开始。如果有人可以建议我最好的方法并为我指明正确的方向，那就太好了。 您可以使用 start 事件检查下一个 tr 的 class 是否为 sticky 并将其插入到 stop 事件上拖动的项目之后。我正在使用 css 方法来为“粘性”项目设置动画。 $(function() { var $draggedItem, $stickyItem, itemWidth, itemHeight; $("table tbody").sortable({ start: function(event, ui) { $draggedItem = $(ui.item[0]); //Store the constant width and height values in variables. itemWidth = $draggedItem.width(); itemHeight = $draggedItem.height(); //next is called twice because a hidden "tr" is added when sorting. var $nextChild = $(ui.item[0]).next().next(); if ($nextChild.hasClass('sticky')) { $stickyItem = $nextChild; } else { $stickyItem = undefined; } }, sort: function() { if ($stickyItem != undefined) { //Set the css to match the dragged item's css, with the exception of "top", which includes an offset. $stickyItem.css({ "z-index": $draggedItem.css('z-index'), "position": "absolute", "width": itemWidth, "height": itemHeight, "left": $draggedItem.css('left'), "top": $draggedItem.position().top + itemHeight, }); } }, stop: function() { if ($stickyItem != undefined) { $stickyItem.insertAfter($draggedItem); //Remove the style attribute to reset to thed default style. $stickyItem.removeAttr('style'); } } }); }); 小提琴演示 注意： 如果存在粘性项目，您可以通过仅绑定 sort 和 stop 事件来进一步改进上述内容。 对于那些想要防止在粘性行与其上方的行之间插入行的人，这里是 Yass 解决方案的稍微修改版本： $(function () { let $draggedItem, $stickyItem, itemWidth, itemHeight, cancelSortable; $("table tbody").sortable({ start: function (event, ui) { $draggedItem = $(ui.item[0]); //Store the constant width and height values in variables. itemWidth = $draggedItem.width(); itemHeight = $draggedItem.height(); //next is called twice because a hidden "tr" is added when sorting. let $nextChild = $(ui.item[0]).next().next(); if ($nextChild.hasClass('sticky')) { $stickyItem = $nextChild; } else { $stickyItem = undefined; } }, sort: function (event, ui) { if ($stickyItem !== undefined) { //Set the css to match the dragged item's css, with the exception of "top", which includes an offset. $stickyItem.css({ "z-index": $draggedItem.css('z-index'), "position": "absolute", "width": itemWidth, "height": itemHeight, "left": $draggedItem.css('left'), "top": $draggedItem.position().top + itemHeight, }); } if (ui.placeholder.next() !== undefined && ui.placeholder.next().hasClass("sticky")) { ui.placeholder.hide(); cancelSortable = true; } else { ui.placeholder.show(); cancelSortable = false; } }, stop: function () { if (cancelSortable) { $(this).sortable("cancel"); } if ($stickyItem !== undefined) { $stickyItem.insertAfter($draggedItem); //Remove the style attribute to reset to the default style. $stickyItem.removeAttr('style'); } } }); }); 可对两行以上进行分组的可排序选项（编辑连续两次使用 next() 的“start”参数中的行）： let $nextChildren = $(ui.item[0]).nextAll(".sticky:visible").not(".ui-sortable-placeholder"); if ($(ui.item[0]).next().next().hasClass('sticky')) { $stickyItem = $nextChildren; } 此代码获取所有具有“粘性”类的下一行，即使它们之间存在没有该类的行。

Spring Boot 和 Thymeleaf 中的 DB 自动完成 JQuery

这是我的模板： <div> </div> <p>这是我的模板：</p> <pre><code> &lt;!-- JavaScript --&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css&#34;&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.7.1.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 src=&#34;https://code.jquery.com/jquery-3.7.1.slim.min.js&#34; integrity=&#34;sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; &gt; $( function() { $( &#34;#hint&#34; ).autocomplete({ source: &#34;https://api.nunyito.com/api/geoDetailsForWeb&#34;, minLength: 3, select: function( event, ui ) { this.value = ui.item.value; console.log( &#34;Selected: &#34; + ui.item.value + &#34; aka &#34; + ui.item.id ); return false; } }); } ); &lt;/script&gt; .. &lt;form th:action=&#34;@{/alarmNotification/save}&#34; th:object=&#34;${data}&#34; method=&#34;post&#34;&gt; &lt;p &gt; &lt;label for=&#34;title&#34;&gt; &lt;/label&gt;&lt;input id=&#34;title&#34; type=&#34;text&#34; th:field=&#34;*{email}&#34; placeholder=&#34;Title&#34;/&gt; &lt;label for=&#34;hint&#34;&gt;&lt;/label&gt;&lt;input type=&#34;text&#34; id=&#34;hint&#34; name=&#34;hint&#34; /&gt; &lt;/p&gt; &lt;/form&gt; .. </code></pre> <p>但是我有这个错误：</p> <p><a href="https://i.stack.imgur.com/rUVYM.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3JVVllNLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>更改此：</p> <pre><code>&lt;form th:action=&#34;@{/alarmNotification/save}&#34; th:object=&#34;${data}&#34; method=&#34;post&#34;&gt; &lt;p &gt; &lt;label for=&#34;title&#34;&gt; &lt;/label&gt;&lt;input id=&#34;title&#34; type=&#34;text&#34; th:field=&#34;*{email}&#34; placeholder=&#34;Title&#34;/&gt; &lt;label for=&#34;hint&#34;&gt;&lt;/label&gt;&lt;input type=&#34;text&#34; id=&#34;hint&#34; name=&#34;hint&#34; /&gt; &lt;/p&gt; &lt;/form&gt; </code></pre> <p>对此：</p> <pre><code>&lt;form th:action=&#34;@{/alarmNotification/save}&#34; th:object=&#34;${data}&#34; method=&#34;post&#34;&gt; &lt;div&gt; &lt;label for=&#34;title&#34;&gt;Title&lt;/label&gt; &lt;input id=&#34;title&#34; name=&#34;title&#34; th:field=&#34;*{email}&#34; placeholder=&#34;Title&#34; autocomplete=&#34;email&#34; /&gt; &lt;label for=&#34;hint&#34;&gt;Hint&lt;/label&gt; &lt;input id=&#34;hint&#34; name=&#34;hint&#34; /&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>如果您希望自动完成功能不自动填充，请改为 <pre><code>autocomplete=&#34;off&#34;</code></pre>。</p> <p>如果您不希望表单有标签，请完全删除标签并为每个标签添加一个 aria-label <pre><code>&lt;input&gt;</code></pre>:</p> <pre><code>&lt;input aria-label=&#34;Title&#34; ... /&gt; </code></pre> </answer> </body></html>

在 jquery ui 自动完成中选择时获取输入中的 HTML

我正在使用 jquery ui 自动完成从我的数据库中获取汽车、零件和服务，我通过在最后添加跨度来区分两个或三个记录类型。但是当我选择任何值时，它会显示...

使用 jQuery UI 出现“类型错误：$(...).autocomplete 不是函数”错误

我陷入了 jQuery ui 问题。我已经完成了一个表单，我需要根据客户端 ID 自动完成所有字段。就像如果我输入现有客户的 ID，所有字段都应该是

如何将进度条放置在触发任务的元素周围？

我正在使用 jQuery 开发一个动态网站，该网站严重依赖 AJAX 操作。每当 AJAX 操作开始时，我都会弹出一个进度条，我将其放置在网页中间......

更改最小值后 jQuerty UI 范围滑块错误

我的页面中有一个滑块，带有以下代码 我的页面中有一个滑块，带有以下代码 <div id="sale-price-range" class="price-range" data-min="200000" data-max="2000000" data-unit="R$" data-min-field="precoMinVenda" data-max-field="precoMaxVenda" data-increment="100000"></div> 我的js代码是： // Price Range $(".price-range").each(function() { var dataMin = $(this).attr('data-min'); var dataMax = $(this).attr('data-max'); var dataUnit = $(this).attr('data-unit'); var minField = $(this).attr('data-min-field'); var maxField = $(this).attr('data-max-field'); var increment = $(this).attr('data-increment'); $(this).append( "<input type='text' class='first-slider-value' name='"+minField+"' val=''/><input type='text' class='second-slider-value' name='"+maxField+"'/>" ); $(this).slider({ range: true, min: 0, max: dataMax, step: increment, values: [ dataMin, dataMax ], slide: function( event, ui ) { event = event; if(ui.value < dataMin) { return false; } $(this).find( ".first-slider-value" ).val( dataUnit + " " + ui.values[ 0 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); $(this).find( ".second-slider-value" ).val( dataUnit + " " + ui.values[ 1 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); }, stop: function(event,ui) { if(ui.value >= dataMin) { postAjaxSearch(); } } }); $(this).find( ".first-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 0 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); $(this).find( ".second-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 1 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); }); 效果很好，但如果我尝试改变 分钟：0， 到 分钟：数据分钟， 我的滑块停止工作（我无法拖动它）。它继续调用 postAjaxSearch();，但它不会更改最大/最小值，也不会移动滑块手柄。 为什么需要将 min 更改为 dataMin？ 因为我的滑块从 0 开始，但是滑块手柄从 dataMin 移动到 dataMax。 dataMin 和 0 之间的范围位于页面上，但无法移动到那里。我不想要这个，滑块应该从 dataMin 开始。 我遇到了同样的问题，我通过在最小值上使用 parseInt() 解决了它 $("#price-slider").slider({ range: true, min: parseInt(price_min), max: price_max, values: [price_min, price_max], slide: function (event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); 我不知道为什么会这样，这似乎是合乎逻辑的，两个极端都会起到同样的作用，但显然事实并非如此。 还有一个解决方案 我在 1.13.2 版本中遇到了同样的错误。然而，parseInt的解决方案对我没有帮助； 有什么帮助，乘以 1000 进行调整，然后除以 1000。 还是不明白问题出在哪里... 在 INIT 滑块传入参数之前是： step = 1000 min = 33900 max = 1100000 selected_min = 33900 selected_max = 1100000 初始化后，没有 * 1000 和 / 1000 滑块给了我 max_stop = 1099900 对我来说正确的是 $(element).slider({ range: true, min: min * 1000, max: max * 1000, step, values: [selected_min * 1000, selected_max * 1000], slide: function (event, ui) { const min_stop = ui.values[0] / 1000; const max_stop = ui.values[1] / 1000; $(`#${attribute}-min`).val(min_stop); $(`#${attribute}-max`).val(max_stop); }, stop: function (event, ui) { const min_stop = ui.values[0] / 1000; const max_stop = ui.values[1] / 1000; queryParams[attribute] = `${min_stop}-${max_stop}`; applyFilter(); } });

按钮禁用，除非两个输入字段都有值

我的页面上有一个带有两个输入字段和一个提交按钮的表单，我希望具有禁用“提交”按钮的功能，直到两个输入字段上都有值。这就是

使 jquery ui 手风琴水平

我正在使用 jquery ui 手风琴向用户查看不同的数据，它按照 jquery ui/demos 中所述完美工作，但是我想要实现的是更改滑动效果的效果...

使用 jQuery 更改悬停时的背景位置

我的页面上有如下div： <... 我的页面上有如下 div： <div id="switch"> <div id="b1"></div> <div id="b2"></div> <div id="b3"></div> </div> 样式为： #switch{ background-position: 0px 0px; width: 300px; height: 100px; background-image: url(test.png); background-repeat: no-repeat; } #b1{ width: 100px; height: 100px; } #b2{ width: 100px; height: 100px; margin-left: 100px; margin-top: -100px; } #b3{ width: 100px; height: 100px; margin-left: 200px; margin-top: -100px; } 当用户将鼠标悬停在 background-position、background-position: 0px -100px; 和 background-position: 0px -200px; 上时，我想将 background-position: 0px -300px; 分别更改为 b1、b2 和 b3。 你可以在这里看到我的小提琴。 我怎样才能做到这一点？ var $switch = $('#switch'); $('#b1').hover(function() { $switch.css({ backgroundPosition: '0px -100px' }) }, function() { $switch.css({ backgroundPosition: '0 0' }) } ) 这是为#b1完成的，您可以为其他人做同样的事情。 查看工作示例http://jsfiddle.net/MFJDE/3/ $(函数(){ $("#b1").hover(函数(){ $("#switch").css('背景位置','0px 10px'); }); $("#b2").hover(函数(){ $("#switch").css('背景位置','0px 20px'); }); $("#b3").hover(函数(){ $("#switch").css('背景位置','0px 30px'); }); });

使用 jQuery 动画 addClass/removeClass

我正在使用 jQuery 和 jQuery-ui，想要为各种对象上的各种属性设置动画。 为了在这里解释这个问题，我将其简化为一个 div，当用户移动时该 div 会从蓝色变为红色......

如何使用 jQuery UI 使 SVG 标签图像可调整大小？

我有 SVG 图像，如 div 中下面的标签 我有 SVG 图像，如 div 中的下面的标签 <div id="MainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0"/> </svg> </div> </div> 我正在制作可拖动且可调整大小的。 Draggable 正在研究如何使其可调整大小，我尝试过，但它不起作用。 makeDragableCircle('#annotationText',jQuery('#MainDiv')); function makeDragableCircle(selector,obj){ var height=obj.height(); var width=obj.width(); var objdiv=jQuery( selector ); jQuery( selector ).draggable({ containment: obj, drag: function( event, ui ) { var cleft=ui.position.left*100/width; var top=ui.position.top*100/height; jQuery(event.target).attr('data-offsetx',cleft); jQuery(event.target).attr('data-offsety',top); } }).resizable({ alsoResize: "#"+circle, aspectRatio: 1.0 }); } 正如我在评论中提到的，可调整大小是为像 <div> 或 <span> 这样的盒子模型设计的。您可以在 <svg> 元素上使用它，但它会将其视为 HTML 元素。 如果你想利用它来操作 SVG 对象的结构，你需要自己动手。 $(function() { function makeDragableCircle(selector, obj) { var height = obj.height(); var width = obj.width(); var objdiv = $(selector); var circle = $("#circle", objdiv); $(selector).draggable({ containment: obj, drag: function(event, ui) { var cleft = ui.position.left * 100 / width; var top = ui.position.top * 100 / height; $(event.target).attr('data-offsetx', cleft); $(event.target).attr('data-offsety', top); } }).resizable({ aspectRatio: 1.0, containment: obj, minWidth: 40, minHeight: 40, resize: function(e, ui) { circle.attr({ width: ui.size.width, height: ui.size.height }); $("circle", circle).attr({ cx: Math.round(ui.size.width / 2) - 2, cy: Math.round(ui.size.height / 2) - 2, r: Math.round(ui.size.width / 2) - 4 }); } }); } makeDragableCircle('#annotationText', $('#mainDiv')); }); #mainDiv { width: 400px; height: 200px; border: 1px dashed #eee; } <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="mainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0" /> </svg> </div> </div> 如您所见，当您拖动时，所有东西都会移动。当您调整大小时，我们会调整 SVG 大小并调整 <circle> 的属性。 希望有帮助。

尝试删除动态添加的现有选项卡

在这里，我试图将动态选项卡添加到现有选项卡中，但如果再次打开该链接或弹出窗口，我试图确保它不会重复选项卡，我的c.. .

未捕获类型错误：无法读取未定义的属性“区域”？

我正在使用 jQuery UI Calender 来处理法语。 但不幸的是我看到下面的错误，不确定我是否遗漏了一些东西。 请指教。 未捕获的类型错误：无法读取属性“区域”...