约束Dojo FloatingPane的位置

发布时间：2020-12-16 22:03:18 所属栏目：百科来源：网络整理

导读：我有一个dojox.layout.FloatingPane(作为自定义dijit),它可以放置在其封闭div中的任何位置.我的问题是用户可能会将FloatingPane完全拖到其容器之外并且无法检索它.有没有简单的方法可以强制FloatingPane始终保持完全可见？这是我的代码： dojo.provide("ne.

我有一个dojox.layout.FloatingPane(作为自定义dijit),它可以放置在其封闭div中的任何位置.我的问题是用户可能会将FloatingPane完全拖到其容器之外并且无法检索它.有没有简单的方法可以强制FloatingPane始终保持完全可见？

这是我的代码：

dojo.provide("ne.trim.dijits.SearchDialog");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.layout.FloatingPane");

dojo.declare("ne.trim.dijits.SearchDialog",[dijit._Widget,dijit._Templated],{

templateString: dojo.cache("ne.trim.dijits","templates/SearchDialog.html"),initialised:false,floatingPane: null,postCreate: function() {
    this.init();
},init: function() {
    console.debug("SearchDialog.init()","start");
    if ( this.initialised === false ) {
        this.createSearchDialog();
    }
    //ne.trim.AppGlobals.searchDialog = this;
    console.debug("SearchDialog.init()","end");        
},createSearchDialog: function() {
    var node = dojo.byId('searchbox');  
    floatingPane = new dojox.layout.FloatingPane({
         title: "A floating pane",resizable: true,dockable: true,constrainToContainer: true,style:   "position:absolute;top:100;right:100;width:400px;height:300px;z-index:100",},node );

    this.initialised=true;

    floatingPane.startup();
}

});

首先,请参阅jsFiddle的工作示例： http://jsfiddle.net/phusick/3vTXW/

现在有一些解释;)FloatingPane的DnD功能是通过在窗格的postCreate方法中实例化的dojo.dnd.Moveable类实现的.要限制FloatingPane的移动,您应该使用其中一个moveable：

> dojo.dnd.parentConstainedMoveable – 由DOM节点约束
> dojo.dnd.boxConstrainedMoveable – 通过坐标约束：{l：10,t：10,w：100,h：100}
> dojo.dnd.constrainedMoveable – 通过在提供的函数中计算的坐标来约束

有关详细信息,请参阅上述jsFiddle.

根据文档,您应该在Moveable实例上调用destroy()来删除它,但由于FloatingPane的原始Moveable未分配给任何对象属性,我不会销毁它,我只是在同一个DOM节点上实例化这三个移动中的一个子类：

var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane,{

    postCreate: function() {
        this.inherited(arguments);
        this.moveable = new dojo.dnd.move.constrainedMoveable(this.domNode,{
            handle: this.focusNode,constraints: function() {
                return dojo.coords(dojo.body());
            }
        });
    }

});

现在您可以使用ConstainedFloatingPane而不是dojox.layout.FloatingPane：

var floatingPane = new ConstrainedFloatingPane({
    title: "A Constrained Floating Pane",resizable: true
},searchboxNode);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!