使用书签创建弹出菜单

Question

这是我的第一个问题，所以请给我任何有关如何提出更好建议的建议。无论如何，我将如何制作一个显示链接的可切换菜单。我试图找到答案，但是都没有结果。我需要为此创建一个新元素吗？

Answer 1

您将需要使用香草JS创建弹出菜单。

以下是最重要的元素和样式。

<div style="position:absolute; z-index:2147483647">
  <div style="position: relative">
    <div style="position:relative; display:inline-block; left:0">Bookmarklet Links</div>
    <div style="position:relative; float:right">×</div>
  </div>
  <div>
    <p>Click the links to open a new tab!</p>
    <ul>
      <li>
        <a href="https://www.google.com" target="_blank">Google</a>
      </li>
      <li>
        <a href="https://www.bing.com" target="_blank">Bing</a>
      </li>
      <li>
        <a href="https://duckduckgo.com" target="_blank">DuckDuckGO</a>
      </li>
    </ul>
  </div>
</div>

您可以保存以下书签：

javascript:var c=[{'name':'Google','url':'https://www.google.com'},{'name':'Bing','url':'https://www.bing.com'},{'name':'DuckDuckGO','url':'https://duckduckgo.com'}],d={'width':0x1f4,'height':0x12c,'background':'#AAA','borderThickness':0x1,'headerHeight':0x20,'headerBackground':'#444','headerTitleColor':'#FFF','windowTitle':'Bookmarklet\x20Links'},e={'left':~~(document['documentElement']['clientWidth']/0x2-d['width']/0x2),'top':~~(document['documentElement']['clientHeight']/0x2-d['height']/0x2)},f=~~(0.8*d['headerHeight']),g=document['createElement']('DIV');Object['assign'](g['style'],{'position':'absolute','left':e['left']+'px','top':e['top']+'px','zIndex':Number['MAX_SAFE_INTEGER'],'width':d['width']+'px','height':d['height']+'px','background':d['background'],'border':d['borderThickness']+'px\x20solid\x20black'});var h=document['createElement']('DIV');Object['assign'](h['style'],{'position':'relative','width':d['width']+'px','height':d['headerHeight']+'px','background':d['headerBackground'],'borderBottom':d['borderThickness']+'px\x20solid\x20black'});var i=document['createElement']('DIV');Object['assign'](i['style'],{'position':'relative','display':'inline-block','left':0x0,'width':~~(d['width']-0x2*f)+'px','lineHeight':d['headerHeight']+'px','color':d['headerTitleColor'],'fontSize':~~(0.667*d['headerHeight'])+'px','marginLeft':~~(f/0x3)+'px'}),i['textContent']=d['windowTitle'];var j=document['createElement']('DIV'),k=~~((d['headerHeight']-f)/0x2);Object['assign'](j['style'],{'position':'relative','float':'right','right':k+'px','top':k+'px','width':f+'px','height':f+'px','background':'#F00','border':d['borderThickness']+'px\x20solid\x20black','color':'#FFF','lineHeight':f+'px','textAlign':'center','fontSize':f+'px','marginLeft':'auto','marginRight':0x0});var l=document['createElement']('DIV');Object['assign'](l['style'],{'padding':'1em'});var m=document['createElement']('P');m['textContent']='Click\x20the\x20links\x20to\x20open\x20a\x20new\x20tab!',l['appendChild'](m);var n=document['createElement']('UL');function o(p){j['removeEventListener']('click',o,!0x1),h['removeChild'](j),g['removeChild'](h),g['removeChild'](l),document['body']['removeChild'](g);}function q(r){var s=r['getBoundingClientRect'](),t=window['pageXOffset']||document['documentElement']['scrollLeft'],u=window['pageYOffset']||document['documentElement']['scrollTop'];return{'top':s['top']+u,'left':s['left']+t};}function v(w){var x=q(w['parentElement']),y=!0x1,z={'x':0x0,'y':0x0},m={'x':x['left'],'y':x['top']};w['parentElement']['addEventListener']('mousedown',function(w){y=!0x0,z['x']=w['clientX'],z['y']=w['clientY'];}),w['parentElement']['addEventListener']('mouseup',function(x){y=!0x1,m['x']=parseInt(w['parentElement']['style']['left'])||0x0,m['y']=parseInt(w['parentElement']['style']['top'])||0x0;}),document['addEventListener']('mousemove',function(x){if(!y)return;var E={'x':x['clientX']-z['x'],'y':x['clientY']-z['y']},F={'x':m['x']+E['x'],'y':m['y']+E['y']};F['x']<0x0?F['x']=0x0:F['x']+w['parentElement']['offsetWidth']>document['documentElement']['clientWidth']&&(F['x']=document['documentElement']['clientWidth']-w['parentElement']['offsetWidth']);F['y']<0x0?F['y']=0x0:F['y']+w['parentElement']['offsetHeight']>document['documentElement']['clientHeight']&&(F['y']=document['documentElement']['clientHeight']-w['parentElement']['offsetHeight']);w['parentElement']['style']['left']=F['x']+'px',w['parentElement']['style']['top']=F['y']+'px';});}c['forEach'](G=>{var H=document['createElement']('LI'),I=document['createElement']('A');I['setAttribute']('href',G['url']),I['setAttribute']('target','_blank'),I['textContent']=G['name'],H['appendChild'](I),n['appendChild'](H);}),l['appendChild'](n),j['addEventListener']('click',o,!0x1),j['textContent']='×',h['appendChild'](i),h['appendChild'](j),g['appendChild'](h),g['appendChild'](l),document['body']['appendChild'](g),v(h);

粉碎和混淆方法

• 我使用以下代码缩小了以下代码：https://javascript-minifier.com/
• 我使用[https://obfuscator.io/]混淆了产生的压缩代码>

对于混淆器，我将“标识符名称生成器”设置为“混杂”，并选中了“重命名全局名称”。

重要：

取消选择“字符串数组”，否则您将无法添加新的链接条目。

源代码

var links = [{
  name: 'Google',
  url: 'https://www.google.com'
}, {
  name: 'Bing',
  url: 'https://www.bing.com'
}, {
  name: 'DuckDuckGO',
  url: 'https://duckduckgo.com'
}];
var props = {
  width: 500,
  height: 300,
  background: '#AAA',
  borderThickness: 1,
  headerHeight: 32,
  headerBackground: '#444',
  headerTitleColor: '#FFF',
  windowTitle: 'Bookmarklet Links'
};
var windowPosition = {
  left: ~~((document.documentElement.clientWidth / 2) - (props.width / 2)),
  top: ~~((document.documentElement.clientHeight / 2) - (props.height / 2)),
}
var btnSize = ~~(props.headerHeight * 0.8);
var popupEl = document.createElement('DIV');
Object.assign(popupEl.style, {
  position: 'absolute',
  left: windowPosition.left + 'px',
  top: windowPosition.top + 'px',
  zIndex: Number.MAX_SAFE_INTEGER,
  width: props.width + 'px',
  height: props.height + 'px',
  background: props.background,
  border: props.borderThickness + 'px solid black'
});
var popupHeader = document.createElement('DIV');
Object.assign(popupHeader.style, {
  position: 'relative',
  width: (props.width) + 'px',
  height: props.headerHeight + 'px',
  background: props.headerBackground,
  borderBottom: props.borderThickness + 'px solid black'
});
var popupHeaderTitle = document.createElement('DIV');
Object.assign(popupHeaderTitle.style, {
  position: 'relative',
  display: 'inline-block',
  left: 0,
  width: ~~(props.width - btnSize * 2) + 'px',
  lineHeight: props.headerHeight + 'px',
  color: props.headerTitleColor,
  fontSize: ~~(props.headerHeight * 0.667) + 'px',
  marginLeft: ~~(btnSize / 3) + 'px'
});
popupHeaderTitle.textContent = props.windowTitle;
var closeButton = document.createElement('DIV');
var margin = ~~((props.headerHeight - btnSize) / 2);
Object.assign(closeButton.style, {
  position: 'relative',
  float: 'right',
  right: margin + 'px',
  top: margin + 'px',
  width: btnSize + 'px',
  height: btnSize + 'px',
  background: '#F00',
  border: props.borderThickness + 'px solid black',
  color: '#FFF',
  lineHeight: btnSize + 'px',
  textAlign: 'center',
  fontSize: btnSize + 'px',
  marginLeft: 'auto',
  marginRight: 0
});
var popupBody = document.createElement('DIV');
Object.assign(popupBody.style, {
  padding: '1em'
});
var p = document.createElement('P');
p.textContent = 'Click the links to open a new tab!';
popupBody.appendChild(p);
var listEl = document.createElement('UL');
links.forEach(link => {
  var itemEl = document.createElement('LI');
  var anchorEl = document.createElement('A');
  anchorEl.setAttribute('href', link.url);
  anchorEl.setAttribute('target', '_blank');
  anchorEl.textContent = link.name;
  itemEl.appendChild(anchorEl);
  listEl.appendChild(itemEl);
});
popupBody.appendChild(listEl);
closeButton.addEventListener('click', destroyWindow, false);
closeButton.textContent = '×';
popupHeader.appendChild(popupHeaderTitle);
popupHeader.appendChild(closeButton);
popupEl.appendChild(popupHeader);
popupEl.appendChild(popupBody);
document.body.appendChild(popupEl);
draggable(popupHeader);
function destroyWindow(e) {
  closeButton.removeEventListener('click', destroyWindow, false);
  popupHeader.removeChild(closeButton);
  popupEl.removeChild(popupHeader);
  popupEl.removeChild(popupBody);
  document.body.removeChild(popupEl);
}
function offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
function draggable(el) {
  var initialOffset = offset(el.parentElement);
  var isMouseDown = false;
  var currPos = { x : 0, y : 0 };
  var elPos = { x : initialOffset.left, y : initialOffset.top };
  el.parentElement.addEventListener('mousedown', onMouseDown);
  function onMouseDown(event) {
    isMouseDown = true;
    currPos.x = event.clientX;
    currPos.y = event.clientY;
  }
  el.parentElement.addEventListener('mouseup', onMouseUp);
  function onMouseUp(event) {
    isMouseDown = false;
    elPos.x = parseInt(el.parentElement.style.left) || 0;
    elPos.y = parseInt(el.parentElement.style.top) || 0;
  }
  document.addEventListener('mousemove', onMouseMove);
  function onMouseMove(event) {
    if (!isMouseDown) return;
    var delta = { x : event.clientX - currPos.x, y: event.clientY - currPos.y };
    var pos = { x : elPos.x + delta.x, y : elPos.y + delta.y };
    if (pos.x < 0) {
      pos.x = 0;
    } else if (pos.x + el.parentElement.offsetWidth > document.documentElement.clientWidth) {
      pos.x = document.documentElement.clientWidth - el.parentElement.offsetWidth;
    }
    if (pos.y < 0) {
      pos.y = 0;
    } else if (pos.y + el.parentElement.offsetHeight > document.documentElement.clientHeight) {
      pos.y = document.documentElement.clientHeight - el.parentElement.offsetHeight;
    }
    el.parentElement.style.left = pos.x + 'px';
    el.parentElement.style.top = pos.y + 'px';
  }
}