网站中增加链接暂存箱的功能

一个可以实现把自已经常访问或者稍候要访问的页面放到一个暂存箱，然后可以方便的访问

使用方法：
1、拖动网页中的目标链接（或者按shift和+键将当前页面）到一个浮动的框中进行保存
2、刷新页面或者访问其它页面时，可以移动鼠标到暂存框，显示已经存放的链接进行访问

function simpleDialog(diaObj) {
    if (typeof diaObj !== "object") {
        return false;
    }
    var c = diaObj.content;
    if (!c) {
        c = diaObj.msg;
    }
    var dom = $('#simpleDialog');
    if (dom.length == 0) {
        dom = $('<div class="simpleDialog" id="simpleDialog"></div>');
        $("body").append(dom);
    }
    dom.text(c)
    var w = dom.outerWidth();
    var h = dom.outerHeight();
    dom.css({
        'margin-left': -w / 2,
        'margin-top': -h / 2
    });
    dom.fadeIn(300);
    clearInterval(simpleDialogInterval);
    simpleDialogInterval = setTimeout(closeSimpleDialog, 2700);
}

        //链接暂存箱功能
        var $dragDom, dragTimer, storageKey = 'temporary-storage';
        function checkDragUrl (url) { return !url || /^javascript/i.test(url) || /^#/i.test(url); }
        // $('a:not([href^=javascript])').prop('draggable', true)
        $('a').on('dragstart', function (e) {
            var href = $(this).attr('href'), isAjax = $(this).hasClass('j-ajax-action') || $(this).is('[class*=ajax]')
            if (isAjax || checkDragUrl(href)) return;

            $dragDom = $(this);
            var offset = $dragDom.offset(), w = $dragDom.width() / 2, h = $dragDom.height() / 2, scrollTop = $('html,body').scrollTop(), scrollLeft = $('html,body').scrollLeft()
            var ww = $(window).innerWidth(), wh = $(window).innerHeight()
            var l = offset.left - scrollLeft, t = offset.top - scrollTop
            $('#temporary-storage').show().addClass('show-add')
            if (t > wh - 150) {
                //显示在上方
                $('#temporary-storage').css({left: l + w - 20, top: t - 100})
            } else if (l > ww - 150) {
                //显示在左方
                $('#temporary-storage').css({left: l + w - 100, top: t + h - 20})
            } else if (l < 150) {
                //显示在右方
                $('#temporary-storage').css({left: l + w + 100, top: t + h - 20})
            } else {
                //显示在下方
                $('#temporary-storage').css({left: l + w - 20, top: t + 100})
            }
            clearTimeout(dragTimer)
            $(document).unbind('mousemove', temporaryStorageEyeHandler)
        }).on('dragend', function (e) {
            if (!$dragDom) return;
            $dragDom = null;
            $('#temporary-storage').removeClass('show-add').css({left: -100, top: -100})
            clearTimeout(dragTimer)
            dragTimer = setTimeout(function () {
                $(document).bind('mousemove', temporaryStorageEyeHandler)
            }, 1000)
        })
        $("#temporary-storage .droppable").on('dragenter',function (e) {
            if (!$dragDom) return;
            var href = $dragDom.attr('href')
            if (checkDragUrl(href)) return;
            $('#temporary-storage').addClass('add')
        }).on('dragleave', function (e) {
            $('#temporary-storage').removeClass('add')
        }).on('drop', function (e) {
            $("#temporary-storage").hide().removeClass('show-add add').css({left: -100, top: -100})
            if (!$dragDom) return;
            var title = $dragDom.text() || $dragDom.attr('title') || '',
                href = $dragDom.attr('href')
            if (checkDragUrl(href)) return;
            var newLink = {title, href, ding: false}
            var storage = localStorage.getItem(storageKey)
            storage = storage && JSON.parse(storage) || []
            for (var i=storage.length-1; i>=0; i--) {
                if (storage[i].href == href) {
                    newLink.ding = storage[i].ding || false
                    storage.splice(i, 1)
                }
            }
            storage.unshift(newLink)
            storage.sort(function (v1,v2) {
                if (!v2.ding && !v1.ding) return 0;
                return v2.ding && !v1.ding ? 1 : -1;
            })
            localStorage.setItem(storageKey, JSON.stringify(storage))
            updateStorageLink()
        })
        $("#temporary-storage-list").mouseenter(function (e) {
            clearTimeout(dragTimer)
            $(document).unbind('mousemove',temporaryStorageEyeHandler)
        })
            .mouseleave(function (e) {
                $(this).removeClass('opened')
                dragTimer = setTimeout(function () {
                    $(document).bind('mousemove', temporaryStorageEyeHandler)
                }, 500)
            })
            .on('click', '.li-link', function (e) {
                var $li = $(this).parent(), d = $li.data()
                if ($li.hasClass('active')) return;
                var storage = localStorage.getItem(storageKey)
                storage = storage && JSON.parse(storage) || []
                storage.splice(d.idx, 1)
                localStorage.setItem(storageKey, JSON.stringify(storage))
                updateStorageLink()
            })
            .on('click', '.link-ding', function (e) {
                e.stopPropagation()
                var $li = $(this).parent(), d = $li.data()
                var storage = localStorage.getItem(storageKey)
                storage = storage && JSON.parse(storage) || []
                storage[d.idx].ding = !storage[d.idx].ding
                storage.sort(function (v1,v2) {
                    if (!v2.ding && !v1.ding) return 0;
                    return v2.ding && !v1.ding ? 1 : -1;
                })
                localStorage.setItem(storageKey, JSON.stringify(storage))
                updateStorageLink()
            })
            .on('click', '.storage-clean', function (e) {
                var storage = localStorage.getItem(storageKey)
                storage = storage && JSON.parse(storage) || []
                for(var i=storage.length-1; i>=0; i--) {
                    if (!storage[i].ding) storage.splice(i,1)
                }
                localStorage.setItem(storageKey, JSON.stringify(storage))
                updateStorageLink()
            })
            .on('click', '.storage-help', function (e) {
                dialog({title: '快捷访问暂存区功能', msg: '<div><p>暂存区数据被保存在浏览器中，并且跳转页面后也不会消失，可以把即将要使用的链接放入暂存区，以达到快捷来回访问的目的。</p><p>如果点击链接后不想让链接消失，可以点击旁边的“<i class="fa fa-gavel"></i>”按钮把链接固定。</p><p>固定的链接会以新窗口的形式打开，并且点击后不会消失。 </p><p>添加链接到暂存区方法：</p><p>1、可以从页面拖动链接，放入暂存区</p><p>2、可以按 <kbd>Shift 和 +(加号键)</kbd> 添加当前页面到暂存区</p><p>清空操作不会清理被固定的链接</p></div>'})
            })
        //更新链表显示列表
        function updateStorageLink() {
            var storage = localStorage.getItem(storageKey)
            storage = storage && JSON.parse(storage) || []
            $("#temporary-storage-list").empty()
            for (var i in storage) {
                $("#temporary-storage-list").append('<div class="li '+(storage[i].ding?'active':'')+'" data-idx="'+i+'"><a href="'+storage[i].href+'" class="li-link" target="'+(storage[i].ding?'_blank':'_self')+'">'+storage[i].title+'</a><div class="link-ding" title="固定"></div></div>')
            }
            var $btns = $('<div class="actions text-center"><div class="btn btn-xs btn-text storage-help pull-right" style="margin-top: 4px;"><i class="fa fa-question-circle-o"></i></div></div>')
            if (storage.length>0) {
                $btns.append('<div class="btn btn-xs btn-text storage-clean" title="固定链接不会被清理"><i class="fa fa-trash-o"></i> 清空</div>')
            }
            $("#temporary-storage-list").append($btns)
        }
        function showStorageLinks() {
            $("#temporary-storage-list").addClass('opened')
        }
        function temporaryStorageEyeHandler(e) {
            if (e.clientX < 80 && e.clientY<50) {
                showStorageLinks()
            } else if ($("#temporary-storage-list").hasClass('opened') && (e.clientX > 80 || e.clientY>50)) {
                $("#temporary-storage-list").removeClass('opened')
            }
        }
        $(document).mousemove(temporaryStorageEyeHandler)
        $('body').keypress(function (e) {
            if (e.key != '+' || !e.shiftKey || e.target.tagName != 'BODY') return;

            var title = document.title, href = location.href
            var newLink = {title, href, ding: false}
            var storage = localStorage.getItem(storageKey)
            storage = storage && JSON.parse(storage) || []
            for (var i=storage.length-1; i>=0; i--) {
                if (storage[i].href == href) {
                    newLink.ding = storage[i].ding || false
                    storage.splice(i, 1)
                }
            }
            storage.unshift(newLink)
            storage.sort(function (v1,v2) {
                if (!v2.ding && !v1.ding) return 0;
                return v2.ding && !v1.ding ? 1 : -1;
            })
            localStorage.setItem(storageKey, JSON.stringify(storage))
            updateStorageLink()
            simpleDialog({msg: '当前页面已添加到快速访问区'})
        })
        updateStorageLink()
        //链接暂存箱功能,END

/** temporary-storage **/
.temporary-storage-box{
    position: fixed;
    left: -100px;
    top: -100px;
    z-index: 100;
    box-sizing: border-box;
    background: rgba(250, 80, 137, 0.5);
    border-radius:4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(1);
    transition: transform,background,opacity .3s;
    overflow: hidden;
}
.temporary-storage-box.show-add{
    left: 0;
    top: 0;
    opacity: 1;
}
.temporary-storage-box.add{
    transform: scale(1.2);
    background: rgb(250, 80, 137);
}
.temporary-storage-box:before{
    font-family: FontAwesome;
    font-size: 24px;
    content: "\f196";
    display: inline;
    color: #fff;
}
.temporary-storage-box.eye:before{
    content: "\f06e";
}
.temporary-storage-box .droppable{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    left: 0;
    top: 0;
}
.temporary-storage-box .droppable.debug{
    background-color: rgba(255,255,255,.5); opacity: 1
}
.temporary-storage-list {
    position: fixed;
    left: -100%;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
    background: rgb(250, 80, 137);
    width: 140px;
    overflow: hidden;
    transition: all .3s;
    line-height: 30px;
}
.temporary-storage-list.opened {
    left: 0;
}
.temporary-storage-list .actions {
    color: #fff;
    border-top: 1px solid #ff84ad;
}
.temporary-storage-list .li{
    padding-left: 10px;
    text-decoration: none;
    color: #fff;
    display: flex;
    width: 100%;
    height: 30px;
    overflow: hidden;
}
.temporary-storage-list .li+.li{
    border-top: 1px dashed #ff84ad;
}
.temporary-storage-list .li:hover{background-color: #ff709f}
.temporary-storage-list .li .li-link{
    width: calc(100% - 30px); color: #fff; display: block; text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.temporary-storage-list .li .link-ding{
    width: 30px;
    text-align: center;
    color: #fd95b7;
    cursor: pointer;
}
.temporary-storage-list .li.active .link-ding{
    color: #fff;
}
.temporary-storage-list .li .link-ding:before{
    display: inline;
    font-family: FontAwesome;
    content: "\f0e3";
}
/** temporary-storage end **/

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/780.html

转载时须注明出处及本声明