Tag: jquery ui

JQuery UI选项卡 – “正在加载…”消息: 所有，我正在使用Jquery UI嵌套选项卡。我只是想知道是否有任何方法在选项卡文本旁边显示AJAX Spinner图像，同时加载选项卡。我不想将标签文本更改为“正在加载…”。考虑到当多个选项卡同时加载或一个接一个加载时，微调器图像应显示在每个加载选项卡旁边。有什么建议？谢谢

在调整浏览器大小时，不断地在video上移动可resize/可拖动的图像: 我正在研究这个小提琴，当浏览器resize时，我想在video上不断地移动/调整图像大小（它本身可resize/可拖动图像）。我使用的HTML / CSS / JS代码片段是： HTML： CSS： .overlay { position:absolute; width:100%; height:100%; background:red; opacity:.5; display:none; } JS： $(function() { $(‘#wrapper’).draggable(); $(‘#image’).resizable({ start: function( event, ui ) { $(‘#overlay’).show(); }, stop: function( event, ui ) { $(‘#overlay’).hide(); } } ); }); 问题陈述：我想知道我应该在上面的JS代码中做出哪些更改，以便每当我调整浏览器大小时，可拖动/可resize的图像也应该不断移动。例如：让我们假设我将谷歌图像放在一个人的鼻子上全屏幕，如果我调整浏览器窗口大小，谷歌图像似乎不会停留在鼻子上，如小提琴https：// jsfiddle所示达网络/ obn4yph0 /嵌入/结果

当拖动元素并将其捕捉到另一个容器时，如何强制jquery将元素居中？: 我想要一些方形的可拖动物体（在这种情况下只是带有数字的盒子）能够捕捉到一些空的表格单元并捕捉到那些单元格的中心（空的td框），而不是（外部））边缘那些细胞，这似乎是默认情况下做的。这是我的剧本： $(document).ready(function () { $(“.inputs div”).draggable( { snap: “.spaces” }); }); 编辑：这是整个文件 Draggable .block { z-index:9999; cursor:move; } li { list-style:none; } tr { border: 2px solid black; } table { border: 2px solid black; } .inputs div { float:left; background-color:#FFFFFF; color:#004E66; font-size:x-large; margin:2px; padding:20px; border:1px solid black; } .spaces td { […]

如何避免jQuery UI可拖动也触发点击事件: 有一个大的div（地图）可以通过jQuery UI draggable拖动。 div具有可点击的子div。我的问题是，如果你拖动地图，在鼠标向上，click事件将触发你开始拖动的任何子div。如果拖动部分（如果只是点击没有拖动，则需要点击事件），如何阻止鼠标触发点击事件。

如何使标题面板可排序: 报表设计器包含Bootstrap 3面板。面板包含div。我尝试使用panel-sortable排序的第1组和第2组标题面板（具有类panel-sortable ） $(“.panel-sortable”).sortable().disableSelection(); 面板顺序无法更改。将Group 2 header拖动到Group 1 header以更改其订单面板后，将恢复旧订单。如何使header1和2面板可排序，以便他们的订单可以更改？报告可以包含许多标题。如果还有其他方法可以对它们进行排序，那么代码可以重构以使用它。 $(function() { var startpos, selected = $([]), offset = { top: 0, left: 0 }; $(“.panel-sortable”).sortable().disableSelection(); $(“.designer-panel-body”).droppable({ accept: “.designer-field” }); $(“.designer-field”).draggable({ start: function(event, ui) { var $this = $(this); if ($this.hasClass(“ui-selected”)) { selected = $(“.ui-selected”).each(function() { var el = $(this); […]

将“st，nd，rd，th”添加到jquery datepicker: 如何添加st，nd，rd，th日期格式..即11月19日，或12月2日等。目前，我有以下代码 $( “#datepicker” ).datepicker({ altField: “#alternate”, altFormat: “DD, MM d “, minDate: +0 });

纯jQuery动画的特殊颜色过渡效果//没有ui或其他图书馆: 我试图创建没有任何外部插件的jQuery颜色动画。到目前为止，我可以设法用jQuery-ui做到这一点，但我想用pure jQuery animate()学习这种方式有没有可能用更少的代码和1.8上没有任何外部jQuery插件来做到这一点？这是使用jQuery 1.7.2和ui的 jsFiddle示例 jQuery的： var Text = $(‘h1’); var Box = $(‘.box’); Text.click(function() { Text.animate({‘color’:’#f00′},600) .delay(200).animate({‘color’:’#ff0′},600) .delay(200).animate({‘color’:’#000′},600); }); Box.click(function() { Box.animate({‘background-color’:’#f00′},600) .delay(200).animate({‘background-color’:’#ff0′},600) .delay(200).animate({‘background-color’:’#000′},600); });

jQuery UI：如何自己使用ui-widget-overlay？: 我正在尝试创建一个覆盖，类似于jQuery UI Dialog使用的覆盖。我可以像这样创建叠加层： var $overlay = $(”).hide().appendTo(‘body’); //…later in my script $overlay.fadeIn(); 但是当我向下滚动时，叠加会中断。我注意到jQuery UI动态地设置了该div的宽度和高度。所以我想重用这个function而不是重新发明轮子。如何创建这样的叠加层，或者在jQuery UI中重用它？解：将叠加层的宽度/高度设置为文档的宽度/高度，然后在窗口resize事件上绑定一个函数以调整叠加宽度/高度以匹配新文档的宽度/高度： $(document).ready(function(){ var $overlay = $(”).hide().appendTo(‘body’); $(‘.trigger’).click(function(){ $(‘div’).slideDown(); $(‘.ui-widget-overlay’).fadeIn(); setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change }); $(window).resize(function(){ setOverlayDimensionsToCurrentDocumentDimensions(); }); }); function setOverlayDimensionsToCurrentDocumentDimensions() { $(‘.ui-widget-overlay’).width($(document).width()); $(‘.ui-widget-overlay’).height($(document).height()); } 请注意，只要文档的高度发生变化（添加元素，向下滑动动画元素等），您就需要调整叠加层的大小。

jQuery：如何在代码中模拟拖放？: 编辑：这是一个链接，向您展示我的示例代码： http ： //www.singingeels.com/jqtest/ 我有一个非常简单的页面，它引用了jquery-1.3.2.js，ui.core.js（最新版本）和ui.draggable.js（也是最新版本）。我有一个div，我可以很容易地拖动（当然使用鼠标）： hello 然后在JavaScript中： $(“#myDiv”).draggable(); 这是完美的。但是，我需要能够仅使用代码来模拟“拖放”。我主要使用它，但问题是触发的事件是占位符事件。如果你打开“ui.core.js”并滚动到底部…你会看到： // These are placeholder methods, to be overriden by extending plugin _mouseStart: function(event) { }, _mouseDrag: function(event) { }, _mouseStop: function(event) { }, _mouseCapture: function(event) { return true; } 为什么在我的模拟中没有正确地扩展事件，但是当你用鼠标点击它们时，它们是？ – 关于如何强制_mouseDrag：属性服从“ui.draggable.js”中的覆盖扩展的任何想法？解决这个问题将是巨大的 – 我计划在以后显示主要的好处。谢谢，-Timothy 编辑：这是一个链接，向您展示我的示例代码： http ： //www.singingeels.com/jqtest/ 编辑2：点击上面的链接和查看源…你会看到我正在尝试做什么。 […]