使用ZeroClipboard和Dijit.Menu提供复制功能

时间:2009-10-05 05:45:27

标签: flash copy dojo zeroclipboard

我有一个webapp,(确实)允许使用ZeroClipboard复制文本,使用Dijit.Menu,右键单击。问题是Flash 10需要用户点击实际的Flash小程序以允许现在发生这种情况。

我试图使用ZeroClipboard.glue()方法将swf“粘合”到菜单项但是没有成功。我只是想知道是否有人必须处理这个问题。

感谢。

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案,不是很漂亮,因为当鼠标悬停在它上面时,菜单标题会消失,但至少它可以正常工作。我没有进行过广泛的测试,但我希望它不会泄漏闪光对象。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ZeroClipboard Menu Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="js/dojo/dojo.js"
            djConfig="parseOnLoad:true, isDebug:false, preventBackButtonFix: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.Menu");
        ZeroClipboard.setMoviePath('flash/ZeroClipboard.swf');
    </script>
</head>
<body class="tundra">


<div id="MenuTarget">Right Click Here</div>

<script type="text/javascript">
    var menu = new dijit.Menu();

    var menuItem1 = new dijit.MenuItem({
        id: "tester",
        label: "This Does Nothing",
        parentMenu: menu
    });

    menu.addChild(menuItem1);
    menu.bindDomNode(dojo.byId("MenuTarget"));

    var menuItem2 = new dijit.MenuItem({
        id: "tester2",
        label: "Copy Some Text",
        parentMenu: menu
    });

    attachCopyEvent(menuItem2, "Some Text");
    menu.addChild(menuItem2);

    /*
     attaches ZeroClipboard object to specified menu item
     menuItem: diji.menuItem to attach to
     copyText: text to copy to clipboard
     */
    function attachCopyEvent(menuItem, copyText) {
        var myId = menuItem.domNode.id;
        var origText = menuItem.label;    //Grab the original menu caption
        var clip;  //keep the clip object external/public to the connecdt functions

        //Replace the text of the menuItem with the flash object when the mouse hovers over it
        //We use the connect method of the menuitem so that the connects are destroyed when the object is destroyed
        menuItem.connect(menuItem, "_onHover", function() {
            var myLabelDiv = dojo.byId(myId + "_text"); //The label for menuItems is always the id of the menu item with '_text' appended
            clip = new ZeroClipboard.Client();
            //Destroy the flash object when copy is complted to save RAM
            clip.addEventListener('onComplete', function() {
                clip.destroy();
            });
            //Grab the size of the div and tell zeroclipboard to generate embed html of neccesary size
            clip.setText(copyText);
            myLabelDiv.innerHTML = clip.getHTML(myLabelDiv.clientWidth - 5, myLabelDiv.clientHeight - 6);
        });

        menuItem.connect(menuItem, "_onUnhover", function() {
            var myLabelDiv = dojo.byId(myId + "_text"); //The label for menuItems is always the id of the menu item with '_text' appended
            myLabelDiv.innerHTML = origText;
            clip.destroy();
        });
    }

</script>

</body>
</html>