Tag: jquery ui

jQuery UI滑块固定值

我试图让jQuery滑块设置要滑动的值，而不是最小和最大金额之间的每个数字。 我想要“0,25,50,100,250,500”作为人们可以滑动的唯一数量，但无法弄清楚它是如何完成的。 将它们放在“值”部分似乎没有做任何事情。 $(function() { $(“#slider-range”).slider({ range: true, min: 0, max: 500, values: [100, 250], slide: function(event, ui) { $(“#amount”).val(‘Miles: ‘ + ui.values[0] + ‘ – ‘ + ui.values[1]); } }); $(“#amount”).val(‘Miles: ‘ + $(“#slider-range”).slider(“values”, 0) + ‘ – ‘ + $(“#slider-range”).slider(“values”, 1)); });

使jQuery UI的自动完成小部件*实际上*自动完成

我需要在我正在使用的应用程序中自动完成，因为我已经在使用jQuery UI，我正在尝试使其自动完成小部件满足我的需求。 第一步是使搜索词仅在建议词的开头匹配。 我已经有了这个工作，你可以在下面的代码中看到。 第二步是让第一个建议实际上是自动完成的 。 这可能需要一些解释。 当我听到“自动完成”时，我设想键入“f”并将文本字段的内容更改为“foo”，并选择“oo”，以便在我键入另一个字符并在字段中保留时将其替换为我发布了它。 我通常会调用Autocomplete小部件建议的内容，而不是自动完成。 看看Autocomplete如何在内部工作，我认为autocompleteopen事件是正确的地方（每次更新建议列表时都会调用它），但我不知道如何从那里访问建议列表。 有什么想法吗？ $(“#field”).autocomplete({ delay: 0, source: function filter_realms(request, response) { var term = request.term.toLowerCase(); var length = term.length; response($.grep(candidates, function(candidate) { return candidate.substring(0, length).toLowerCase() === term; })); }, open: function(event, ui) { // magic happens here? } });

jQuery UI Droppable和Sortable – 放入正确的排序位置

我正在开发一个项目，我将元素从第三方jQuery控件拖动到jQuery可排序，使用droppable和sortable的组合。 这项工作完全正常，但添加的项目始终添加到可排序列表的底部，然后您必须将其作为单独的步骤移动到正确的位置。 是否可以将项目添加到您将其放入列表中的位置？ 您可以在此处的jQuery购物卡可放置演示中看到此行为。 这是一个相同代码的jsfiddle 。 当您将产品中的商品添加到底部的购物车时，它总是会添加到底部，即使您将其放在顶部附近也是如此。 这是jQuery代码： $(function () { $(“#catalog”).accordion(); $(“#catalog li”).draggable({ appendTo: “body”, helper: “clone” }); $(“#cart ol”).droppable({ activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, accept: “:not(.ui-sortable-helper)”, drop: function (event, ui) { $(this).find(“.placeholder”).remove(); $(“”).text(ui.draggable.text()).appendTo(this); } }).sortable({ items: “li:not(.placeholder)”, sort: function () { $(this).removeClass(“ui-state-default”); } }); });

如何使div宽度可拖动？

我有一个div嵌套在另一个div中，用于显示设置控制台。 嵌套div有一个固定位于父级内部，如下所示： 我想为子div的左边框添加一个可拖动的句柄，以便可以在宽度上调整子div的大小。 我是否需要添加另一个非常窄的div，左边框位于此处，以便可以拖动它并重新计算位置以动态调整子divs width属性的大小？ 如果可能的话，我宁愿坚持使用vanilla JQuery，而不是依赖于JQuery UI。

使用动态添加的元素在jQuery中自动完成

我的要求是当用户在一个输入字段中输入一些字符（最少3个）时可能会显示很少的选项，这也可能是动态添加的。 我无法在页面加载时加载数据，因为数据很大。 有一个ajax调用来获取过滤后的数据。 我得到的问题是在第2行的页面加载时出现Expected identifier错误。那么，您能否告诉我们下面的代码有什么问题？ $(document).on(‘keydown.autocomplete’, ‘input.searchInput’, function() { source: function (request, response) { // Line # 2 var id = this.element[0].id; var val = $(“#”+id).val(); $.ajax({ type : ‘Get’, url: ‘getNames.html?name=’ + val, success: function(data) { var id = $(this).attr(‘id’); $(this).removeClass(‘ui-autocomplete-loading’); response(data); },error: function(data) { $(‘#’+id).removeClass(‘ui-autocomplete-loading’); } }); }, minLength: 3 });

滚动鼠标位置

当我向下滚动或向上滚动时，如何获得鼠标位置 我试过这个 $(document).mousemove(function(event) { captureMousePosition(event); }).scroll(function(event) { xMousePos = event.pageX + $(document).scrollLeft(); yMousePos = event.pageY + $(document).scrollTop(); window.status = “x = ” + xMousePos + ” y = ” + yMousePos; }); function captureMousePosition(event){ xMousePos = event.pageX; yMousePos = event.pageY; window.status = “x = ” + xMousePos + ” y = ” + yMousePos; } […]

更改jQuery UI自动完成位置 – 弹出，而不是向下

我在页面底部放置了一个自动完成框，我希望结果在文本框中弹出，而不是在下面。 我怎样才能做到这一点？

如何以编程方式调用jQuery UI Draggable拖动启动？

我在鼠标处于向下位置之前和释放之前创建一个新的jQuery元素。 （在mousedown之后）。 我想以编程方式使用jQuery UI触发对新元素的dragging ，以便它将自动开始拖动我的鼠标移动。 我不想释放然后再次单击鼠标。 我试过以下…… var element = $(“”); element.appendTo(“body”).draggable().trigger(“mousedown”); ……但这不起作用。 有没有人对如何做到这一点有任何建议？ 更新：经过一番搜索， 这个问题的海报有同样的问题。 然而，建议的解决方案，归结为…… $(“body”).on(“mousedown”, function(e) { $(“”).draggable().appendTo(“body”).trigger(e); }); …不再适用于最新版本的jQuery和jQuery-UI，而是生成最大调用堆栈超出错误。

如果鼠标未超过目标或工具提示，则仅关闭工具提示

使用jQuery UI工具提示，如果我超过目标，或者如果我超过工具提示本身，我想保持工具提示处于打开状态。 我想我可以使用close回调来查看我是否超过工具提示或目标区域，尽管我必须再分配另一个mouseout函数。 这是我的jsfiddle： http ： //jsfiddle.net/Handyman/fNjFF/ $(function() { $(‘#target’).tooltip({ items: ‘a.target’, content: ‘just some text to browse around in’ }); }); Hover over me! Hover over me too! 我现在正在研究它，看看我能想出什么。

jQuery UI Tooltip Widget中的AJAX内容

jQuery UI 1.9中有一个新的Tooltip Widget，其API文档提示可以在其中显示AJAX内容，但没有任何进一步的细节。 我想我可以用同步和阻塞请求来完成类似的事情，但这不是我想要的。 如何使其显示使用异步AJAX请求检索的任何内容？