冠军

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

jBox 弹出窗口中焦点设置问题

jBox  是一个不错的组件库,可以用来比较简单地弹出窗口。

我希望在 jBox 弹出窗口之后,自动将焦点设置到子窗口的某个输入框中,可是发现并不容易。  

在 jBox 2.3 中,提供了如下的增强。

[调整] loaded 选项增加了个参数h,参数h表示窗口内容的jQuery对象,方便用户在窗口加载后对内容进行初始化处理。

示例中并没有说明 h 的使用方式。

那么,这个 h 是什么呢?

在使用 jBox 的时候,每个弹出的窗口,会创建一个 id 为 jbox-content 的 div 元素包裹所有的窗口内容。在 loaded 中,jBox 传递给函数的参数就是这个元素。这个元素的结构如下:

<div style="height: auto; overflow-x: hidden; overflow-y: auto; position: static; left: -10000px;" class="jbox-content" id="jbox-content">
  <iframe scrolling="auto" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" id="jbox-iframe" name="jbox-iframe" src="iframe2.html?___t0.9552568292007391"></iframe>
</div>


注意这个元素唯一的子元素为一个 iframe 元素,隔断了 jQuery 的查找。使得我们不能直接找到子窗口中的元素进行处理。

我们可以先找到这个元素的第一个孩子,就是这个 iframe,然后,取出它的名字,通过这个名字找到这个 iframe 对应的窗口,然后,在这个子窗口中查找我们的内容。

代码如下所示:

复制代码
$.jBox("iframe:iframe2.html", {

    loaded: function (h) {
        var iframeName = h.children(0).attr("name");
        var container = window.frames[iframeName].document
        var elem = $("#username", container);
        elem.focus();
    }
});
复制代码

 



posted on   冠军  阅读(5457)  评论(1编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示