经验分享 - 为FineUI添加复制按钮功能

swtseaman

今天项目里有一个涉及到用户信息显示，为方便用户查看信息后进行快速复制，所以用FineUI结合Js复制插件做了一个复制按钮功能！
1、添加一个Window，代码如下：

1. <x:Window runat="server" Title="用户信息" IsModal="true" Width="320" Height="200" BodyPadding="10px" Layout="Column" ID="window_UserMsg">
   
2.     <Items>
   
3.         <x:Label runat="server" Text="用户信息如下：" ColumnWidth="100%"></x:Label>
   
4.         <x:TextArea runat="server" ID="txt_UserMsg" ColumnWidth="100%"></x:TextArea>
   
5.         <x:Panel runat="server" ColumnWidth="100%" ShowBorder="false" ShowHeader="false">
   
6.             <Items>
   
7.                 <x:Button runat="server" ID="btn_Copy" Text="复制" Icon="PageCopy"></x:Button>
   
8.             </Items>
   
9.         </x:Panel>
   
10.     </Items>
    
11. </x:Window>

复制代码

2、引用复制插件

1. <script src="js/ZeroClipboard.js"></script>

复制代码

3、在</body>代码前加入如下脚本：

1. <script>
   
2.     var clip = null; //声明一个clip复制对象
   
3.     function $(id) { return document.getElementById(id); } //为方便查询，做了一个跟Jquery一样的选择功能
   
4.     function init() { //初始化代码
   
5.     if (clip == null) {
   
6.         ZeroClipboard.setMoviePath("/js/ZeroClipboard.swf"); //绑定flash文件
   
7.         clip = new ZeroClipboard.Client(); //声明clip复制对象
   
8.         clip.setHandCursor(true); //设置鼠标为手型
   
9.         clip.addEventListener('mouseOver', function (client) { //添加mouseOver事件，当鼠标移入时触发
   
10.         clip.setText($('window_UserMsg_txt_UserMsg-inputEl').value); //当鼠标移入时，将txt_UserMsg的最新内容赋值给clip复制对象
    
11.     });
    
12.     clip.addEventListener('complete', function () { //添加复制完成事件
    
13.         window.F.alert('复制成功！');
    
14.     });
    
15.     clip.glue("window_UserMsg_ctl01_btn_Copy", "window_UserMsg_ctl01"); //将clip复制对象绑定到btn_Copy按钮
    
16.         }
    
17.     }
    
18.     Ext.onReady(function () { init(); }) //Ext加载完毕，初始化复制插件
    
19. </script>

复制代码

到此，FinUI复制按钮功能就可以使用了，至于用到什么地方，大家就自由发挥吧！
附上JS复制插件文件：
运行效果截图：

shihahayue

谢谢，以后用的到

txw999

谢谢以后有用