jquery 可调整大小的句柄 - 它们应该工作吗?

发布于 2024-12-11 19:08:17 字数 571 浏览 0 评论 0原文

好吧,所以我对此有点迷失。 jQuery UI 文档指出,在可调整大小时,我可以拥有可见的句柄,据我了解,这些句柄是可见的图标/图片(我理解正确吗?)

如果指定为字符串,则应为以下任意形式的逗号分隔列表:'n, e, s, w, >ne, se, sw, nw, all'。插件将自动生成必要的句柄。

那么如果我指定 'all' ,我应该在我的对象上有句柄吗?如果是这样,它似乎不起作用——我只有在“se”角上有可见的东西。

现在查看 jQuery UI 可调整大小源代码< /a>,似乎这是它应该工作的唯一方式:

if ('se' == handle) {
   axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
};

我错过了什么吗?我可以自己创建它们吗?

Ok, So I'm a bit lost on this. jQuery UI documentation states that on resizable i can have visible handles which as i understand are visible icons/pictures (do I understand this correctly?)

If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, >ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.

So I should have handles all over my object if I specify 'all' ? If so, it does not seem to work--I only have something visible on 'se' corner.

Now looking at jQuery UI resizable source code, it seems that this is the only way it is supossed to work :

if ('se' == handle) {
   axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
};

Am I missing something? Can I create them on my own?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

飘然心甜 2024-12-18 19:08:17

该代码告诉小部件只需为 SE 句柄设置一个漂亮的图标(如果它们是自动生成的)。它实际上仍然将句柄创建为每个角上的一个不可见的小框,可以拖动它,只是没有任何图标(jQuery UI 图标集实际上没有任何其他类似的句柄)。

请参阅API 文档了解如何将它们附加到您自己的 DOM 对象,您可以在可以轻松定制外观。简单示例:

$('#targetToMakeResizable').resizable({handles : { ne : ".jquerySelectorForNEHandle", sw: ".jquerySelectorForSWHandle" }, aspectRatio : true});

或者,您可以使用自己的设置覆盖 .ui-ressized-handle.ui-ressized-{direction} 的基本 css。

这是一个 jsfiddle 来演示这两种方法。请注意,按照我所做的方式旋转图标可能不适用于每个浏览器。

That code is telling the widget to only bother setting up a nice icon for the SE handle, if they're automatically generated. It's still actually creating the handles as a small, invisible box in each corner which can be dragged, just without any icon (the jQuery UI iconset actually doesn't have any other similar handles).

Refer to the API doc for how to attach them to your own DOM objects, which you can easily customise the appearance of. Quick example:

$('#targetToMakeResizable').resizable({handles : { ne : ".jquerySelectorForNEHandle", sw: ".jquerySelectorForSWHandle" }, aspectRatio : true});

Alternatively, you can just override the base css for .ui-resizable-handle.ui-resizable-{direction} with your own settings.

Here's a jsfiddle to demonstrate both methods. Note that rotating the icon in the way I've done it is probably not going to work in every browser.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文