0

上下文：我对 Xpages (8.5.3)、Dojo 和 JS 还很陌生，我想创建一个所见即所得的模板编辑器：用户可以将项目（表示字段的图像、日期选择器等）拖放到页面，当他们点击保存按钮时，这些项目的位置被保存。

下面的简单页面显示了我如何使面板可移动。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view id="xp01" xmlns:xp="http://www.ibm.com/xsp/core"
    dojoTheme="true" dojoParseOnLoad="true"
    xmlns:xc="http://www.ibm.com/xsp/custom" styleClass="claro">
    <xp:this.resources>
        <xp:dojoModule name="dojo.dojo"></xp:dojoModule>
        <xp:dojoModule name="dojo.dnd.Source"></xp:dojoModule>
        <xp:dojoModule name="dojo.dnd.Moveable"></xp:dojoModule>
    </xp:this.resources>

    <xp:table id="dndSourceTable" border="1">
        <xp:tr>
            <xp:td id="ds1" dojoType="dojo.dnd.Source"
                style="color:red;"> THIS IS THE BOX
                <xp:panel id="mov1"
                    style="height:32.0px;width:160.0px; margin:0px;background-color:rgb(192,192,192)"
                    dojoType="dojo.dnd.Moveable">THIS IS MOVEABLE 
                </xp:panel>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:view>

上面的代码有效，但我想让面板对齐网格。我在 dojo 文档中找到了这个页面，它解释了如何使用 Snap to Grid 选项制作自定义 Mover，但我无法弄清楚如何在 Xpages 中实现它。

你能帮助我吗 ？

4

3 回答 3

1

这是我自己的解决方案，基于 Naveen 使用 jQuery 的建议。

问题：Dojo 没有真正的对齐网格功能，或者没有正确记录。使用 jQuery 要容易得多。这里有一个非常简单的例子。

对于像我这样的初学者：Domino 不提供 jQuery / jQuery UI，但是将它们添加到 Notes 数据库 (*.nfs) 中非常简单。这意味着如果您移动它，它们将与您的数据库一起移动。

  1. 从http://jqueryui.com/下载 jQuery UI（包括 jQuery）。我选择了整个包，但我认为您可以只选择“Core”和“Interactions”。您最终会得到一个 zip 文件。

  2. 在您的数据库中包含 jQUery/jQueryUI：

    • 在 Domino Designer 中，单击“Window - Open Perspective> - Xpages”。此透视图（=workspace）在 Designer 的左侧有“包资源管理器”选项卡。
    • 使用包资源管理器导航到数据库的“WebContent”文件夹。
    • 将 zip 文件中的“css”文件夹和“js”文件夹放入“WebContent”中。

  3. 在 Xpage 中包含 jQuery/jQueryUI。只需在您的源代码中添加此代码（您的 jQuery/jQueryUI 文件的名称可能不同）

<xp:this.resources>
<xp:script src="js/jquery-1.9.1.js" clientSide="true"></xp:script>
<xp:script src="js/jquery-ui-1.10.3.custom.js" clientSide="true">
</xp:script>
</xp:this.resources>
<script> XSP.addOnLoad(function(){ $("[id='view:_id1:MyPan01']").draggable({ grid: [ 80, 80 ] });
})
</script>

这使得名为“MyPan01”的面板可拖动并贴靠在 80*80 网格上。

这是我的页面的完整代码。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">
        <xp:this.resources>
    <xp:script src="js/jquery-1.9.1.js" clientSide="true"></xp:script>
    <xp:script src="js/jquery-ui-1.10.3.custom.js" clientSide="true">
    </xp:script>
</xp:this.resources>
    <xp:br></xp:br>
    Intro
    <xp:br></xp:br>
    <xp:panel id="MyPan01"
        style="height:120px;width:120px;background-color:rgb(255,128,192)">
    </xp:panel>
    <xp:br></xp:br>
    Outro
    <xp:br></xp:br>
    <script>
 XSP.addOnLoad(function(){
  $("[id='view:_id1:MyPan01']").draggable({ grid: [ 80, 80 ] });
  })
  </script>
    </xp:view>

从那里，您可以探索和适应。再次感谢 Naveen 的提示！

于 2013-11-26T15:48:19.343 回答
0

我建议你使用dojox.layout.GridContainerand dojox.widget.Portlet。他们为对齐网格提供了开箱即用的功能。

基本上，您在网格中添加dojox.widget.Portlet并dojox.layout.GridContainer指定需要多少个单元格，哪些 portlet 可以拖动，哪些不能，等等。

可以在此处找到 Grid Container 中的 Portlet 示例。

dojoType通过在资源中导入必要的 dojo 模块并使用属性（您已经在示例中完成），将其合并到 XPage 中应该不会那么困难。

于 2013-11-08T05:34:28.957 回答
0

dojo 可移动类支持多个事件（onMoveStart、onMoveStop、...），您可以在文档中查看。我使用“onMove”在移动操作中实现对齐网格。

如何 ？

下面的代码假设您已经有一个 dojo 类 Moveable 的 myMoveable 对象，假设 gridPattern 是一个 javascript 变量，其整数值对应于您想要的网格间距，还假设您使用的是 dojo "on" 模块而不是旧的“连接”模块（推荐用于 dojo 1.7 及更高版本）。请记住，使用新的“on”模块，事件名称会丢失“on”前缀（在 dojo 1.7 之前的版本中记录）：“onStart”变为“Start”等等。应用相同的规则，“onMove”变成“Move”（我们的移动处理程序中的第二个参数）。

myMoveHandler=on(myMoveable, "Move", function (mover,leftTop,e){//called at every move step
    this.onMoving(mover, leftTop);
    var s = mover.node.style;
    s.left = snapToGrid(leftTop.l,gridPattern) + "px";
    s.top  = snapToGrid(leftTop.t,gridPattern) + "px";
    this.onMoved(mover, leftTop);
});

snapToGrid 是一个简单的函数，它对于给定的坐标和 gridPattern 根据该网格模式返回相同的坐标。

snapToGrid=function(xVal,gridPattern){ 
    var xMod=xVal%gridPattern;
    if(xMod==0) //no transform
       return(xVal);
    if(xMod<gridPattern/2) //snap no number below
       return(xVal-xMod);
    return(xVal+(gridPattern-xMod));
};
于 2013-12-03T09:14:20.413 回答