1. 程式人生 > >手機長按彈出刪除的功能,已實現

手機長按彈出刪除的功能,已實現

<input id="hidJudge" type="hidden" value="0" />
    <input id="chb" type="hidden" />
    <input id="chb_check" type="hidden" />

    <!--隱藏的刪除彈框 start-->
    <div class="deleteDiv">
        <div class="deleteDiv_tip">您確認要刪除嗎?</div>        
        <div class="deleteDiv_info">
            <span id="" class="deleteDiv_info_left">
                <input id="btnCancel" type="button" value="取 消"  class="btn-red radius" />
            </span>
            <span id="" class="deleteDiv_info_right">
                <input id="btnDelete" type="button" value="刪 除"  class="btn-green radius" />
                <input id="btnDelTrue" type="button" value="確 認"  class="btn-green radius hide" />
            </span>             
        </div>
    </div>
    <!--隱藏的刪除彈框 end-->

 <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "get",
                url: "meeting.txt",
                //data: { action: "fadetail", userid: userid, routeinfoid: routeinfoid },
                dataType: "json",
                success: function (BillObj) {
                    //遍歷                                  
                    $.each(BillObj.huiYi, function (index, item) {
                        $("#meeting_Div").append("<ul class=\"processrow\"><li><a href=\"" + item.href + "\"><div class=\"pc-line\"><span class=\"left\">" + item.title + "</span><span class=\"right\">" + item.time + "</span></div><div class=\"pc-line orange\">" + item.info + "</div><div class=\"chb\" id=\"chb_" + index + "\"></div></a></li></ul>");
                    });                    
                    //去掉最後一行下劃線
                    $('#meeting_Div .processrow:last li').css('border-bottom', 'none');


                    //新增touch事件 start
                    $('.chb').each(function () {
                        var len = $('.chb').length;
                        $('#chb').val(len);
                    });
                    $('#meeting_Div .processrow').each(function () {
                        var timeout;
                        var n = "";
                        //滑鼠按下 或 手指觸控式螢幕幕時觸發                                               
                        $(this).bind('touchstart', function (event) {
                            event.preventDefault();
                            $(this).addClass('bghover');
                            timeout = setTimeout(function () {
                                event.preventDefault();
                                $('#btnDelete').show(); $('#btnDelTrue').hide(); $('.deleteDiv_tip').hide();
                                $('#hidJudge').val("1");
                                if ($('#hidJudge').val() == "1") {
                                    $('.chb').show();
                                }
                            }, 800);//時間變成400ms如果太大,點選太快的時候系統跟不上.所有的問題都出現在這裡                            
                        });
                        //滑鼠鬆開 或 手指從螢幕上離開時觸發
                        $(this).bind('touchend', function () {
                            var getChb_ID = $(this).children('li').children('a').children('.chb').attr('id');//獲取圓形按鈕id 
                            var gethref = $(this).children('li').children('a').attr('href');//獲取href連結 
                            if ($('#hidJudge').val() == "1") {
                                $('.deleteDiv').show(); $('#newDiv').hide();
                                $('#' + getChb_ID).toggleClass('chb_checked');//切換選中
                                var n = $('.chb_checked').length;
                                $('#chb_check').val(n);
                                if (n == $('#chb').val()) {
                                    $('#selectDiv').hide(); $('#quanBuXuan').show();
                                } else {
                                    $('#selectDiv').show(); $('#quanBuXuan').hide(); $('#btnDelete').removeClass('disabled');
                                }
                                if (n == "0") {
                                    $('#btnDelete').addClass('disabled');
                                }
                            }
                            else if ($('#hidJudge').val() == "0" && $(".deleteDiv").is(":hidden")) {
                                event.preventDefault();
                                window.location.href = gethref;//頁面跳轉 
                            }
                            $(this).removeClass('bghover');
                            clearTimeout(timeout);//要記得清空時間函式timeout;


                        });


                    });
                    //新增touch事件 end


                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });


            //操作程式碼 start
            //全選 按鈕            
            $('#selectDiv').click(function () {
                $('.chb').addClass('chb_checked'); $('#btnDelete').removeClass('disabled');
                $('#selectDiv').hide(); $('#quanBuXuan').show();
            });
            //全不選按鈕
            $('#quanBuXuan').click(function () {
                $('.chb').removeClass('chb_checked'); $('#btnDelete').addClass('disabled');
                $('#quanBuXuan').hide(); $('#selectDiv').show();
            });
            //取消 按鈕
            $('#btnCancel').click(function () {
                $('.deleteDiv').hide(); $('#hidJudge').val("0"); $('#chb_check').val("0"); $('.chb').removeClass('chb_checked').hide();
                $('#selectDiv').hide(); $('#quanBuXuan').hide(); $('#newDiv').show(); $('#hidJudge').val('0'); //底部層、全選、圓形按鈕隱藏,新建出現 
                clearTimeout(timeout);
            });
            //刪除 按鈕
            $('#btnDelete').click(function (event) {
                if ($(this).hasClass('disabled')) { event.preventDefault(); event.stopPropagation(); }
                else {
                    $('.deleteDiv_tip').show(); $('#btnDelTrue').show(); $('#btnDelete').hide();
                }
            });
            //確認 按鈕
            $('#btnDelTrue').click(function () {
                //在這裡加上刪除程式碼
                var len = $('.chb').length;
                var n = $('.chb_checked').length;
                if (n == len) {
                    $('.chb').each(function () {
                        var geturlID = $(this).parent().attr('href');
                        geturlID = geturlID.substring(geturlID.lastIndexOf('id=') + 3);//擷取href連結中的id
                        alert(geturlID);
                        $(this).parent().parent().parent().remove();//隱藏,假刪除  
                    });
                    $('.chb').removeClass('chb_checked').hide();
                    $('#newDiv').show(); $('.deleteDiv').hide(); $('#hidJudge').val('0'); $('.xuan').hide();//確認刪除後,然後關掉彈出層                    
                }
                else {
                    $('.chb').each(function () {
                        if ($(this).hasClass('chb_checked')) {
                            var geturlID = $(this).parent().attr('href');
                            geturlID = geturlID.substring(geturlID.lastIndexOf('id=') + 3);//擷取href連結中的id
                            alert(geturlID);


                            $(this).removeClass('chb_checked').hide();
                            $(this).parent().parent().parent().remove();//隱藏,假刪除  
                        }
                    });
                    $('.deleteDiv_tip').hide(); $('#btnDelTrue').hide(); $('#btnDelete').show();
                }
                clearTimeout(timeout);
            });
            //操作程式碼 end
            
        });
    </script>