jQWidgets jqxWindow focus()方法 - BBSMAP

jQWidgets jqxWindow focus()方法

Post published:2023年5月12日
Post category:jquery

jQWidgets jqxWindow focus()方法

focus() 方法用于将 jqxWindow 窗口置于窗口层级顶层，并将焦点设置在窗口上。该方法会触发 mousedown 和 focus 事件。

语法

$(windowSelector).jqxWindow('focus');

参数

该方法没有参数。

示例

示例一

以下示例演示点击按钮时将 jqxWindow 窗口置于顶层，并将焦点设置在窗口上。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQWidgets jqxWindow focus()方法示例</title>
  <!-- 引入 jQWidgets 样式文件 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/styles/jqx.base.css">
  <!-- 引入 jQWidgets Javascript 文件 -->
  <script src="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/jqxcore.js"></script>
  <script src="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/jqxbuttons.js"></script>
  <script src="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/jqxwindow.js"></script>
</head>
<body>
  <!-- 创建 jqxWindow 窗口 -->
  <div id="jqxWindow">
    <div>这是 jqxWindow 窗口内容。</div>
  </div>
  <!-- 创建按钮元素 -->
  <button id="btnFocus">设置焦点</button>
  <!-- 创建脚本标签 -->
  <script>
    $(document).ready(function () {
        // 初始化 jqxWindow 组件
        $('#jqxWindow').jqxWindow({
            width: 300,
            height: 200,
            autoOpen: false
        });
        // 初始化按钮组件
        $('#btnFocus').jqxButton();
        // 点击按钮时设置焦点
        $('#btnFocus').on('click', function () {
            $('#jqxWindow').jqxWindow('focus');
        });
    });
  </script>
</body>
</html>

示例二

以下示例演示当鼠标移动到窗口内容区域时设置焦点。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQWidgets jqxWindow focus()方法示例</title>
  <!-- 引入 jQWidgets 样式文件 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/styles/jqx.base.css">
  <!-- 引入 jQWidgets Javascript 文件 -->
  <script src="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/jqxcore.js"></script>
  <script src="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/jqxbuttons.js"></script>
  <script src="//cdn.jsdelivr.net/jqwidgets/1.6.0/jqwidgets/jqxwindow.js"></script>
</head>
<body>
  <!-- 创建 jqxWindow 窗口 -->
  <div id="jqxWindow">
    <div>这是 jqxWindow 窗口内容。</div>
  </div>
  <!-- 创建脚本标签 -->
  <script>
    $(document).ready(function () {
        // 初始化 jqxWindow 组件
        $('#jqxWindow').jqxWindow({
            width: 300,
            height: 200,
            autoOpen: false
        });
        // 当鼠标移动到窗口内容区域时设置焦点
        $('#jqxWindow').on('mouseover', function () {
            $(this).jqxWindow('focus');
        });
    });
  </script>
</body>
</html>

以上就是使用 focus() 方法将 jqxWindow 置于顶层并设置焦点的基本用法，可以根据实际需求进行相应的修改。

Tags: jquery