当前位置：文江博客话题详情

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

发布于 2024-08-06 10:22:44 字数 196 浏览 11 评论 0原文

我有一个网络应用程序，它允许使用 ZeroClipboard、使用 Dijit.Menu、通过右键单击来复制文本。问题是 Flash 10 需要用户单击实际的 Flash 小程序才能允许这种情况发生。

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

留蓝 2024-08-13 10:22:44

我找到了一个解决方案，虽然不太漂亮，因为当鼠标悬停在菜单标题上方时，菜单标题会消失，但至少它有效。我还没有进行广泛的测试，但我希望它不会泄漏闪存对象。

    <!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>

I figured out a solution, not pretty as the menu title will disappear when the mouse hover above it but at least it works. I haven't tested extensively but I am hoping it does not leak flash objects.

    <!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>

回复收藏 0 原文

~没有更多了~