使用 jQuery 和 jdMenu 插件创建多级可滚动菜单

发布于 2024-08-03 02:04:09 字数 872 浏览 2 评论 0原文

在我们的应用程序中,我们使用 jdMenu 插件 从嵌套无序列表创建分层菜单。

example

这很有效,直到菜单中的项目太多而被迫离开屏幕。

它太大了!

为了解决这个问题,我更新了插件(实际上是positionBy插件是 jdMenu 的要求),以便当发现长菜单时,插件会降低菜单的高度(ul),应用溢出:隐藏并尝试再次放置它。然后,它将 mousemove 事件附加到菜单,以便当用户上下移动鼠标时,菜单滚动,允许他们看到隐藏的项目。像这样:

alt text

(打印屏幕不会捕获指针,但在左侧屏幕上它位于 当它是层次结构中的最后一个菜单且如上所示

太长时,此方法有效,但是如果层次结构中更靠上的菜单太长,则它的子菜单不会由于已应用溢出:隐藏而显示。

所以,我的问题是......是否有另一种方法可以在不使用溢出:隐藏的情况下实现这种效果(或者我可以以更好的方式使用它)?

或者,是否有更合适的 jQuery 插件可以让我做类似的事情?

如果您需要任何进一步说明,请告诉我。谢谢负载。

In our application we're using jdMenu plugin to create a hierarchical menu from nested unordered lists.

example

This works well until there are so many items in a menu that it is forced off the screen.

it's too big!

In an attempt to fix this I've updated the plugin (actually the positionBy plugin that is a requirement of jdMenu) so that when a long menu is discovered the plugin reduces the height of the menu (ul), applies overflow:hidden and attempts to place it again. It then attaches a mousemove event to the menu so that when the users moves their mouse up and down the menu scrolls allowing them to see the hidden items. Like so:

alt text

(print screen doesn't capture pointer but on the left screen it's at the top of the menu, on the right it's at the bottom)

This works when it is the last menu in the hierarchy that is too long as above, however if a menu further up the hierarchy is too long then it's sub-menus are not displayed because of the overflow:hidden which has been applied.

So, my question is... is there another way to achieve this effect without using overflow:hidden (or can I use it in a better way)?

Alternatively, is there a more suitable jQuery plugin which will allow me to do something similar?

Let me know if you need any further clarification. Thanks loads.

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

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

发布评论

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

评论(3

所有深爱都是秘密 2024-08-10 02:04:09

其他人已经回答了类似的问题

这种类型的控件也很常见
经常在企业应用中:
下拉控件并列出
包含数千个条目。

“有些程序员只是用锤子拧螺丝。”"
(来源:mac.com

错误使用它的程序员
通常会得到一个提示,它可能是
当他们发现不合适时
这需要非常长的时间
加载表格。

以下内容
消息,以 Visual Basic 形式发布
12月11日程序员论坛,
1996年,典型:

我想填写一个
包含 2000 个项目的列表框...这
需要非常长的时间...超过 20
分钟。有什么想法吗?

还有一个帖子
1996年12月16日,有点
不太典型:

我正在寻找列表
可以......容纳大的盒子控件
条目数量(20,000+)

这种笨拙控制的借口
往往是一种错误的解释
全能的武装号召:“我们必须
确保数据完整性。”
程序员想要确保
用户指定有效条目;在他们的
视图,最好的方法是
强制用户从列表中进行选择。
如果你有 20 个就好了
60 件,甚至 100 件
列表。除了这个数字之外,事实
用户只能滚动
一次少量的物品会导致
控制变得笨重。

实际上你做得还不错,但是我可以建议使用其他方法来做到这一点吗?更多菜单?多步骤动作?


编辑

您现在有这样的结构:

Clients -> 
    Letters of alphabet [A-Z] -> 
        Clients beginning with selected letter -> 
            Contracts belonging to selected client

如果我必须使用下拉菜单,我会做同样的事情。

但是您可以使用“客户端”文本框/下拉框(仅适用于少量客户端)制作一个弹出窗口,并具有自动完成功能。

选择客户后,您将有一个搜索功能列表框(适用于小额),用于搜索属于该客户的所有合同。您甚至可以按名称、日期、号码等进行搜索。

选择并检查该合同是否是您要查找的合同后,按确定将导致与您执行的操作相同的操作。

当然,这在下拉菜单旁边似乎有点麻烦,但考虑到有了这么多的嵌套,“搜索”速度更快。


还有一件事:不要变成这样! :)

窗口疯狂!
(来源:mac.com

Someone else already answered something like this:

This type of control is seen all too
often in corporate applications:
drop-down controls and lists that
contain thousands of entries.

Some programmers just use a hammer for screws.
(source: mac.com)

Programmers who mistakenly use it
generally get a hint that it might be
inappropriate when they find out that
it takes an extraordinarily long time
to load the form.

The following
message, posted in a Visual Basic
programmers forum on December 11,
1996, is typical:

I want to fill a
list box with 2000 items ... This
takes incredibly long ... over 20
minutes. Any ideas?

And another posted
on December 16th, 1996, is somewhat
less typical:

I'm looking for a list
box control that can ... hold large
numbers of entries (20,000+)

The excuse for such unwieldy controls
is often a misguided interpretation of
the almighty call to arms, "We must
ensure data integrity." The
programmers want to make sure that the
user specifies a valid entry; in their
view, the best way to do this is to
force the user to select from a list.
That would be fine if you had, say 20,
60, or maybe even 100 items in the
list. Beyond that number, the fact
that the user can only scroll a
handful of items at a time causes the
control to become unwieldy.

You are actually doing it not so bad, but can I suggest using some other way to do this? More menues? A multi step action?


Edit

You have this structure now:

Clients -> 
    Letters of alphabet [A-Z] -> 
        Clients beginning with selected letter -> 
            Contracts belonging to selected client

If I had to use drop down menus, I'd do the same thing.

But you could make a popup with a "Client" textbox/dropdownbox (only for a small ammount of clients), with autocomplete.

Once you've got the client selected, you'd have a listbox (for small ammounts) of a search feature for searching all the contracts belonging to the client. You could even search by name, date, number, etc.

Once you've selected and checked the contract is the one you are looking for, pressing OK would result in the same action you had.

Of course this seems a bit cumbersome next to dropdown menus, but consider that with that ammount of nesting, "search" is faster.


One more thing: Don't end up like this! :)

Window madness!
(source: mac.com)

夜深人未静 2024-08-10 02:04:09

除了使用自动完成功能之外,为什么不列出最近选择的 5 个客户呢?因此,如果您在应用程序周围的项目之间切换,您始终可以找到您选择的最新客户端。

使用不同的解决方案来解决这个问题会很有趣,使用一些屏幕录制软件并看看你能如何改善用户体验。

As well as using Autocomplete, why not also list the 5 most recent selected Clients. So if your switching between items around the application, you can always find the most recent client you selected.

It would be interesting to do some user testing with different solutions to this problem, use some screen recording software and see how you could improve the user-experience.

只是偏爱你 2024-08-10 02:04:09

这个 jQuery ListMenu 可能适合您。它不是一个多级菜单系统,但使用字母表组织列表可能会更清晰。

This jQuery ListMenu might be an idea for you.. it's not a multi-level menu system, but it might be cleaner to organize your list using the alphabet.

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