网站中增加链接暂存箱的功能
一个可以实现把自已经常访问或者稍候要访问的页面放到一个暂存箱，然后可以方便的访问
使用方法：
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 **/