zoukankan      html  css  js  c++  java
  • jquery-zclip复制链接----小功能实现

    github项目:https://github.com/patricklodder/jquery-zclip

    但是项目是很早以前的,有一些star,因为功能很小,可以接受

    支持的钩子函数,够我用的了

    复制链接

    实现上面这个效果,这个没有引入js复制效果没能出来,但是我把代码放在下面

     css

    .copyinput {
      width: 350px;
      height: 36px;
      line-height: 36px;
      background: #F5F7FA;
      border: 1px solid #AAB8D4;
      border-radius: 4px;
      font-size: 0;
      overflow: hidden;
      margin: 0 auto;
    }
    .copyinput input {
      display: inline-block;
      width: 77%;
      height: 34px;
      border: 0;
      font-size: 14px;
      color: #42455F;
      text-indent: 5px;
      background: #F5F6FA;
    }
    .copyinput span {
      display: inline-block;
      width: 23%;
      color: #4A5FE2;
      background: #CFDEFC;
      border-radius: 0 4px 4px 0;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
    }
    View Code

    html

    <div class="copyinput">
    <input type="text" value="http://www.baidu.com" readonly="readonly" />
    <span>复制链接</span>
    </div>

    js

    <script src="default/js/global/jquery.js"></script>
    <script src="default/js/global/jquery.zclip.js"></script>
    <script>
    $(function(){
    $('.copyinput span').zclip({
      //记得把这个文件引入
        path: 'default/js/global/ZeroClipboard.swf',
        copy: function () {//复制内容
            return $(this).siblings('input').val();
        },
        afterCopy: function () {//复制成功
            alert("复制成功")
        }
    });
    })
    </script>

      

      

  • 相关阅读:
    数据挖掘、数据分析的书籍推荐
    跳槽时间如何选择
    求职网站总结
    Eclipse中Applet程序运行时Applet小程序大小的设置
    统计学习导论:基于R应用——第五章习题
    统计学习导论:基于R应用——第四章习题
    统计学习导论:基于R应用——第三章习题
    Windows环境下安装IPython NoteBook
    centos7上mysql无法启动也没有日志
    CentOS 6.4下Squid代理服务器的安装与配置
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6801670.html
Copyright © 2011-2022 走看看