防止jQuery UI菜单焦点 [英] Prevent jQuery UI menu focus

问题描述

如何在单击项目时防止jQuery UI菜单集中在菜单上.

How do I prevent a jQuery UI menu from focusing on the menu when an item is clicked.

我有一个选择菜单，当单击一个项目时，它立即执行操作，然后菜单关闭.

I have a select menu which when an item is clicked it applies an action straight away, then the menu closes.

因为jQuery UI触发了点击事件( http://code.jquery.com/ui/1.9.2/jquery-ui.js )，它在Chrome中丢失了选择(Firefox似乎可以使用).

Because jQuery UI is triggering the focus event on click (line 10956 of http://code.jquery.com/ui/1.9.2/jquery-ui.js), it loses the selection in Chrome (Firefox seems to work).

...
} else if ( !this.element.is( ":focus" ) ) {
    // Redirect focus to the menu
    this.element.trigger( "focus", [ true ] ); // <----- this line
    ...
}
...

推荐答案

您可以采用的一种方法是使用需要实现的特定方法/属性的自定义值扩展jquery.ui.menu原型.您可以在jquery中制作一个使用$ .extend的新小部件.这是扩展菜单小部件以使其使用表单输入(由Kris Borchers创作)的一个很好的示例:

One approach you can take is to extend the jquery.ui.menu prototype with custom values for specific methods/properties you need to implement. You can make a new widget that uses $.extend to do this in jquery. Here's a nice example of extending the menu widget to have it use form inputs (authored by Kris Borchers):

1. 演示页面在这里: http://kborchers.github.com/jquery-ui-extensions/menu /inputmenu.html

1. the demo page is here: http://kborchers.github.com/jquery-ui-extensions/menu/inputmenu.html

脚本的定义如下:

//这是核心的jQuery UI库 <脚本src ="http://code.jquery.com/ui/jquery-ui-git.js">< /脚本> //这是自定义输入菜单小部件，用于扩展默认菜单小部件 <脚本类型="text/javascript" src ="jquery.ui.menu.inputmenu.js">

//this is the core jquery ui library < script src="http://code.jquery.com/ui/jquery-ui-git.js" >< /script > //this is the custom input menu widget that extends the default menu widget < script type="text/javascript" src="jquery.ui.menu.inputmenu.js" >

3. 评估此模式以扩展默认菜单小部件:

3. evaluate this pattern for extending the default menu widget:

    /*
 * jQuery UI Input Menu Extension
 *
 * Copyright 2010, Kris Borchers
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/kborchers/jquery-ui-extensions
 */
(function( $ ) {

**var proto = $.ui.menu.prototype,
    originalRefresh = proto.refresh;

$.extend( proto, {**
    refresh: function() {
        originalRefresh.call( this );
        var that = this;
......
...
..
.

在此处查看github来源: https://github.com /kborchers/jquery-ui-extensions/blob/master/menu/jquery.ui.menu.inputmenu.js

see github source here: https://github.com/kborchers/jquery-ui-extensions/blob/master/menu/jquery.ui.menu.inputmenu.js

如果遵循此模式，则可以自定义任何小部件以满足您的需求.

If you follow this pattern, you can customize any widget to meet your needs.

希望这会有所帮助.

克里斯

这篇关于防止jQuery UI菜单焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！