zoukankan      html  css  js  c++  java
  • 一、touch.js与点击复制

    一、touch.js

    1、引用链接:

        <script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"></script>

    2、使用方式:

    //加载事件
    $(function () {
        touch.on('.flows', 'hold tap doubletap', function (ev) { 
            alert("单击tap,双击doubletap,长按hold"); 
        });
    });

    3、绑定多个并且参数传递:

    //加载事件
    $(function () {
        touch.on('.flows', 'hold', function (ev) {
            alert("uid:" + $(this).data("uid"));//获取data-属性  data-uid="<%#Eval("ID")%>"
        });
    });

    处理情景:

    PC端有点击和双击事件,为兼容手机端不支持双击,采用长按事件代替。 

    二、点击复制

    <!DOCTYPE html>    
    <html lang="en">    
    <head>    
        <meta charset="UTF-8">    
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
       <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>
    
        <title>复制按钮</title>    
    </head>    
    <body>    
    微信号:<span id="target">XXXXX</span>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
        点击复制    
    </button>      
    </body>    
    <script>    
        $(document).ready(function(){      
            var clipboard = new Clipboard('#copy_btn');    
            clipboard.on('success', function(e) {    
                alert("微信号复制成功",1500);
                e.clearSelection();    
                console.log(e.clearSelection);    
            });
            clipboard.on('error', function(e){
                    alert("复制失败");
                    console.log(e);//这里是你可以输入的内容样式
            });    
        });    
    </script>    
    </html>

     单个元素

    <!DOCTYPE html>    
    <html lang="en">    
    <head>    
        <meta charset="UTF-8">    
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
        <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>
        <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
       
    
        <title>复制按钮</title>    
    </head>    
    <body>    
    <button class="btn" id="copy_btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> 复制 </button>   
    </body>    
    <script>    
        $(document).ready(function(){      
            var clipboard = new Clipboard('#copy_btn');    
            clipboard.on('success', function(e) {    
                layer.msg( '复制成功',{  time:1500, shade: 0.3  });
                //取消所有选择的节点
                e.clearSelection();
                // 释放内存 //不刷新的情况下,只可以点击复制一次
                //clipboard.destroy()   
            });
            clipboard.on('error', function(e){
                layer.msg( '浏览器不支持复制功能,请手动复制',{  time:1500, shade: 0.3  });
                //取消所有选择的节点
                e.clearSelection();
                // 释放内存 //不刷新的情况下,只可以点击复制一次
                //clipboard.destroy()   
            });    
        });    
    </script>    
    </html>
  • 相关阅读:
    忽然背后冒冷汗
    随机获取中国境内ip地址的php代码
    复制粘贴的句子
    Winform使用BackGroundWorker代替线程执行后台代码
    在IE中测试调用Web Service
    在存储过程中编写正确的事务处理代码
    【转】使用HttpWebRequest POST图片等文件,带参数
    LINQ to Entities 不识别方法"System.String ToString()"
    Asp.net 出现:HTTP 错误 404.0 Not Found
    C# 用内存映射文件读取大日志文件(.log)
  • 原文地址:https://www.cnblogs.com/fger/p/11352444.html
Copyright © 2011-2022 走看看