jQuery UI可调整大小的处理程序
[英]Jquery UI resizable handlers
问题描述
I am using jQuery UI resizable and I want to have a title for each handler. 
我正在使用可调整大小的jQuery UI，并且我希望每个处理程序都有一个标题。
Like if I an hovering on 'east -handler' then a tooltip should appear saying 'that move to the right'. 就像如果我将鼠标悬停在“东部处理程序”上一样，那么应该出现一个工具提示，说“向右移动”。 I was trying to do with jQuery attr() but not able to do so. 我正在尝试使用jQuery attr()但无法这样做。 Any help is appreciated. 任何帮助表示赞赏。 And one more thing I am having more than one element on which I am applying resizable method so all should get the same "title". 我还有另外一件事，我要在上面应用可调整大小的方法，因此所有元素都应具有相同的“标题”。
$(document).ready(function() {
$('.ui-icon-gripsmall-diagonal-e').each(function() {
$(this).attr('title', 'hello');
});
});
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable functionality</title> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- CSS --> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $("#resizable").resizable(); }); </script> </head> <body> <!-- HTML --> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Pull my edges to resize me!!</h3> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-04-11 11:47:19
You need to run your code after you initialise the plugin. 初始化插件后，需要运行代码。 Like this: 像这样：
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable functionality</title> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- CSS --> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $("#resizable"). resizable(). find('.ui-resizable-se').attr('title', 'hello'); }); </script> </head> <body> <!-- HTML --> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Pull my edges to resize me!!</h3> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.