html – 如何应用圆角边框突出显示/选择
发布时间:2020-12-14 21:31:21 所属栏目:资源 来源:网络整理
导读:我已经使用了 Visual Studio Online一段时间的项目,他们在他们的在线代码查看器中选择圆形边框的方式非常有趣: 我已经尝试检查元素并寻找某种自定义CSS,但没有运气。 我有一种感觉,这需要一些复杂的“黑客”使其工作,但似乎非常有趣,因为我从来没有看
我已经使用了
Visual Studio Online一段时间的项目,他们在他们的在线代码查看器中选择圆形边框的方式非常有趣:
我已经尝试检查元素并寻找某种自定义CSS,但没有运气。 我有一种感觉,这需要一些复杂的“黑客”使其工作,但似乎非常有趣,因为我从来没有看过它。 他们如何能够将圆形边框应用于选择? 注意:正常选择完全隐藏在WHILE选择中,舍入选择就像常规选择一样跟随您的光标。没有选择任何东西后。 编辑:我有created a fork的@ Coma的答案应该在Firefox中工作,并选择鼠标如果移动使用: $(document).on('mousemove',function () { (某些情况下的边界仍然可以使用工作。) 解决方法
不完美,但它的工作:
http://jsfiddle.net/coma/9p2CT/ 删除真正的选择 ::selection { background-color: transparent; } 添加一些样式 span.highlight { background: #ADD6FF; } span.begin { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } span.end { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } pre.merge-end > span:last-child { border-bottom-right-radius: 0; } pre.merge-end + pre > span:last-child { border-top-right-radius: 0; } pre.merge-begin > span:first-child { border-bottom-left-radius: 0; } pre.merge-begin + pre > span:first-child { border-top-left-radius: 0; } 将节点元素中的每个字符包起来 var format = function () { var before = -1; var html = $.trim(editor.text()) .split("n") .reverse() .map(function (line) { var a = line.length === before ? 'merge-end' : ''; before = line.length; return '<pre class="' + a + '"><span>' + line.split('').join('</span><span>') + '</span></pre>'; }) .reverse() .join(''); editor.html(html); }; 获取选定的节点并突出显示,照顾他们的父母 var getSelectedNodes = function () { var i; var nodes = []; var selection = rangy.getSelection(); for (i = 0; i < selection.rangeCount; ++i) { selection .getRangeAt(i) .getNodes() .forEach(function (node) { if ($(node).is('span')) { nodes.push(node); } }); } return nodes; }; var highlight = function (nodes,beforeNode) { var currentNode = $(nodes.shift()).addClass('highlight'); var currentParent = currentNode.parent(); if (beforeNode) { var beforeParent = beforeNode.parent(); if (currentParent.get(0) !== beforeParent.get(0)) { currentNode.addClass('begin'); beforeNode.addClass('end'); beforeParent.addClass('merge-begin'); } } else { currentNode.addClass('begin'); } if (nodes.length) { highlight(nodes,currentNode); } else { currentNode.addClass('end'); } }; format(); $(document).on('mouseup',function () { $('.highlight').removeClass('highlight begin end'); highlight(getSelectedNodes()); }); 感谢Tim Down Rangy! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |