jquery-ui 相关问题

jQuery UI是一组精心设计的用户界面交互,效果,小部件和构建在jQuery JavaScript库之上的主题。

使 jquery ui 手风琴水平

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

回答 2 投票 0

使用 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'); }); });

回答 2 投票 0

使用 jQuery 动画 addClass/removeClass

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

回答 6 投票 0

如何使用 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> 的属性。 希望有帮助。

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

标签不断添加

我正在使用 jquery UI 选项卡,当我在成功回调中调用它们时,如果来自服务器的 JSON 数据,它会创建两个额外的选项卡,它第一次运行良好并且发生在模式内,模式是

回答 1 投票 0

JQuery UI 删除成功输入时的工具提示

我正在处理带有自动完成功能的文本输入和输入失败时的工具提示,使用 JQuery UI 作为工具提示和自动完成功能。逻辑如下: 有一组可能的值...

回答 1 投票 0

如何在 JQuery UI 自动完成中使用 source: function()... 和 AJAX

我需要一些有关 JQuery UI 自动完成的帮助。我希望我的文本字段 input.suggest-user 显示来自 AJAX 请求的名称。这就是我所拥有的: jQuery("input.suggest-user").autocomp...

回答 8 投票 0

为什么我的图像会从 jQuery UI 弹跳效果中移动?

我只是希望主页上的 #bounce1,2,3... 图像的鼠标悬停时有反弹效果,但它似乎强制图像到下一行。 给什么?

回答 4 投票 0

关于 jQuery UI 传输的困惑

我想使用 jQuery UI Transfer() 方法来隐藏元素。 我有一个 div.click 和一个 span.target。我希望单击时将 div 移动到跨度。 我尝试了这段代码: $("div.click")....

回答 3 投票 0

如何在日期选择器中突出显示所选日期

首先有一种方法可以不突出显示当前日期。其次,有没有一种方法可以像突出显示当前日期一样突出显示特定的日子? 这是我的代码: 首先有一种方法可以不突出显示当前日期。其次,有没有一种方法可以像突出显示当前日期一样突出显示特定日期? 这是我的代码: <!DOCTYPE html> <html> <head> <link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"> var dates = [new Date(2011, 9 - 1, 19), new Date(2011, 9 - 1, 20), new Date(2011, 9 - 1, 20), new Date(2011, 9 - 1, 21), new Date(2011, 10 - 1, 31)]; $(function() { $('#datepicker').datepicker({ numberOfMonths: [1, 1], beforeShowDay: highlightDays, }); $('#datepicker').click(function() { // put your selected date into the data object var data = $('#datepicker').val(); $.get('getdata.php?date=' + data, function(data) { $('#events').html(data).show('slow'); }); }); function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (dates[i].getTime() == date.getTime()) { return [true, 'highlight']; } } return [true, '']; } }); </script> <style> #highlight, .highlight { background-color: #000000; } </style> </head> <body> <div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div> <div id="events" style="float:left;font-size: 10pt;"> <p>Select a date on the calendar to see events.</p> </div> <div style="clear:both"></div> </body> </html> 首先有一种方法可以不突出显示当前日期。 是的,您可以通过从锚元素中删除 .ui-state-highlight 和 .ui-state-hover 类来取消突出显示。 其次,有没有一种方法可以像突出显示当前日期那样突出显示特定日期? 是的,可以将用于突出显示当前日期的类添加到您想要突出显示的那些日子,或者使用 .ui-state-highlight 的样式覆盖 CSS。 对于第一种方法,这里有一个示例代码片段: $('#datepicker').datepicker({ numberOfMonths: [1, 1], beforeShowDay: highlightDays }).click(function() { // question 1 $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover'); // question 2 $('.highlight a', $(this).next()).addClass('ui-state-highlight'); }); 查看第一种方法的实际应用:http://jsfiddle.net/william/Aut9b。 请参阅第二种方法的实际应用:http://jsfiddle.net/william/Aut9b/1/. 使用 jQuery UI 日期选择器的 beforeShowDay 选项突出显示日期选择器中选定的日期。这是简单的代码: $( function() { // An array of dates var eventDates = {}; eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' ); eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' ); eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' ); // datepicker $('#datepicker').datepicker({ beforeShowDay: function( date ) { var highlight = eventDates[date]; if( highlight ) { return [true, "event", 'Tooltip text']; } else { return [true, '', '']; } } }); }); 上面的 JavaScript 将在选定的日期添加 event 类。现在您需要定义所选日期的样式。如需完整指南,您可以查看上面提到的源链接。 尝试使用此方法突出显示日期选择器中的日期 $( '#datepicker' ).datepicker( 'setDates', ['02-22-2024','02-23-2024','02-24-2024'] );

回答 3 投票 0

对焦被触发两次

我有一个文本框和一个 Jquery UI 对话框。当用户在文本框中输入完毕并按 Enter 后,我想显示该对话框。为了实现这一点,我使用以下代码: $(记录...

回答 4 投票 0

如何使用npm和requires来主题jquery-ui?

是否可以通过 npm 为 jquery-ui 主题化? 或者我们仍然需要通过下载构建器? jquery-ui 包的默认主题包含在: ./node_modules/jquery-ui/themes/base/*.c...

回答 2 投票 0

如何在C#应用程序中制作徽标设计器?

我的任务是制作一个徽标设计器 Web 应用程序,用户可以访问该应用程序,通过选择自定义字体、颜色、图像等来设计徽标,然后下载他的图像

回答 1 投票 0

jQuery 切换具有 3 个不同类的按钮

嗯,我正在尝试创建一个可以单击两次以上的按钮.. 这似乎有效,但只改变了两个类。 .box1 { 背景颜色:#000000; 积极...

回答 1 投票 0

如何让 jQuery UI Accordion 默认处于折叠状态?

我正在使用 jQuery UI Accordion,它工作得很好,但我想让手风琴保持关闭状态,除非我点击它。 我现在正在使用这段代码,它允许切换它...

回答 1 投票 0

TypeError:$(...).autocomplete不是一个函数

在 Drupal 模块中使用以下代码时,我收到错误 TypeError: $(...).autocomplete is not a function。 jQuery(文档).ready(函数($) { $("#search_text").

回答 7 投票 0

如何使用ES6/ES7语法导入jQuery UI?

我正在尝试在我的reactJS/Redux应用程序中使用一些jQuery UI功能。我使用以下方法导入了 jQuery 和 jQuery UI: npm 安装 jquery jquery-ui 然后我尝试过: 从 'j... 导入 $

回答 6 投票 0

如何在change事件上获取jQuery下拉值

我添加了两个 jQuery UI 下拉自动完成脚本。现在我想获取第二个下拉列表的更改值并希望单独存储在变量中。怎么可能呢? 有什么想法或建议吗?

回答 6 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.