jQWidgets jqxNavigationBar focus() 方法

jQWidgets是一个 JavaScript 框架，用于为 PC 和移动设备制作基于 Web 的应用程序。它是一个非常强大、经过优化、独立于平台且得到广泛支持的框架。 jqxNavigationBar用于表示具有标题和内容部分的 jQuery 小部件。单击标题时，内容将相应地展开或折叠。

focus()方法用于聚焦指定的 jqxNavigationBar。当 jqxNavigationBar 小部件获得焦点时，可以使用键盘进行导航。

以下是 jqxNavigationBar 支持的一些键及其功能：

• Enter/空格键：用于折叠或展开项目。
• 左/上箭头：如果当前关注的是第一个，则用于关注上一个项目标题或最后一个。
• 右/下箭头：如果当前关注的是最后一个，则用于关注下一个项目标题或第一个。
• 结束：这集中在最后一个项目标题上。
• 主页：这侧重于第一项标题。
• Tab：用于关注 DOM 中的第一个标题或下一个元素。
• Ctrl+向上箭头：如果焦点位于项目内容上，则将焦点放在其各自的标题上。
• Ctrl+向下箭头：如果焦点位于项目标题上，则关注其各自的内容。

句法：

$('Selector').jqxNavigationBar('focus');

参数：此方法不接受任何参数。

返回值：此方法不返回任何值。

链接文件：从给定链接下载 https://www.jqwidgets.com/download/。在 HTML 文件中，找到下载文件夹中的脚本文件。

type=”text/javascript” src=”jqwidgets/jqx-all.js”>

示例：下面的示例说明了 jQWidgets jqxNavigationBar focus()方法。在下面的示例中，使用focus()方法的帮助，导航栏已经获得焦点。然后使用“向下箭头”和“输入”按钮，第二项已展开。

HTML

  

    
    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            jQWidgets jqxNavigationBar focus() Method
        
        
  
            First Header
            
                Content for the first header
                
                    GFG
                    CSE
                
            
             Second Header
            
                Content for the second header
                
                    GeeksforGeeks
                    CSE
                
            
        
        
             
        
            $(document).ready(function () {
                $("#jqx_Navigation_Bar").
                    jqxNavigationBar({
                        width: 290,
                        height: 150,
                    });
                $("#jqxbutton_for_focus").
                    jqxButton({
                        width: 250,
                    });
                $('#jqxbutton_for_focus').
                    on('click', function () {
                        $('#jqx_Navigation_Bar').
                            jqxNavigationBar(
                                'focus');
                    });
            });
        
    

  

输出：

参考： https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxnavigationbar/jquery-navigationbar-api.htm?search=