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

      

      

  • 相关阅读:
    菜单、toast、对话框的使用
    对话框应用反射销毁
    java随机汉字生成
    Android从主界面退出
    Android获取网络状态
    ssh secure shell 乱码问题
    MongDB安装使用
    安装scrapy
    列表查找以及二分查找
    Tuple、list的区别以及dict和set
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6801670.html
Copyright © 2020-2023  润新知