长按弹出菜单

来源:互联网 发布:php api接口开发 编辑:程序博客网 时间:2024/05/18 21:43
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />    <title>linhongyong</title>    <script src="../base/style/js/jquery.min.js"></script>    <style>        .actionSelect{            width: 50px;            border:1px solid #ccc;        }        .actionSelect{            width: 80px;            border:1px solid #ccc;            position: absolute;            display: none;            background-color: #fff;            z-index: 999;        }        .actionSelect ul{            margin: 0px;            padding: 0px;        }        .actionSelect li{            width: 100%;            height: 30px;            line-height: 30px;            text-align: center;            list-style: none;        }        .item{            height: 50px;            background-color: #67b168;            margin-top: 10px;        }    </style></head><body><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><!--操作选项框--><div class="actionSelect">    <ul>        <li class="delete">删除</li>        <li class="more">更多</li>    </ul></div></body><script>    feedbackAction();    function feedbackAction(){        var timeOutEvent = 0;        $(".item").each(function (index, elem) {            $(elem).bind({                touchstart: function (e) {                    e.preventDefault();                    var touchX = e.originalEvent.targetTouches[0].pageX;                    var touchY = e.originalEvent.targetTouches[0].pageY;                    timeOutEvent = setTimeout('' +                        '$(".actionSelect").css("top",'+touchY+').css("left",'+touchX+').css("display","block");' +                        '$(".myFeedback--says").each(function (index, elem) {' +                        '$(elem).unbind();' +                        '});' +                        '',500);                    targetId = $(elem).find(".feedback__id").val();                },                touchmove: function () {                    clearTimeout(timeOutEvent);                    timeOutEvent = 0;                },                touchend: function () {                    clearTimeout(timeOutEvent);                    return false;                }            });        });    }    /*操作选择点击事件*/    $(".actionSelect").click(function () {        $(".actionSelect").css("display","none");        event.stopPropagation();    });    $("html").click(function () {        if($(".actionSelect").css("display") == "block"){            $(".actionSelect").css("display","none");            feedbackAction();        }    });    $(".actionSelect .delete").click(function () {        delete(targetId);        $(".checkbox").css("display","none");        feedbackAction();    });    $(".actionSelect .more").click(function () {        $(" .checkbox").css("display","inline");    });</script></body></html>
原创粉丝点击