当前代码附加一个按钮,可以快速选择<pre>标记中的某些代码.我想要添加的是能够将该内容复制到剪贴板并将按钮文本更改为"复制".
如何通过修改下面的当前工作代码来实现它？我不介意使用clipboard.js,jQuery位或者只是原生的JS支持,因为它是从Chrome 43开始引入的.我只是不知道如何继续添加我需要的东西.
function selectPre(e) {
if (window.getSelection) {
var s = window.getSelection();
if (s.setBaseAndExtent) {
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
else {
var r = document.createRange();
r.setStart(e.firstChild, 0);
r.setEnd(e.lastChild, e.lastChild.textContent.length);
s.removeAllRanges();
s.addRange(r);
}
}
else if (document.getSelection) {
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
else if (document.selection) {
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}
var diff = document.getElementById('diff_table').getElementsByTagName('tr');
var difflen = diff.length;
for(i=0; i<difflen; i++) {
var …我正在尝试改进CSS3动画,因为当前代码似乎导致一些过多的CPU负载,并且浏览器似乎有点滞后.
我能做什么？我有所有的供应商前缀等.我不确定我可以改进代码或重构它以使用它作为最佳代码实践.
.wrapper {
width: 960px;
height: 140px;
margin-top: 80px;
position: relative;
}
.content:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-origin: 50% 50% 0;
-ms-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
v -webkit-animation-name: sideupscroll;
animation-name: sideupscroll;
/*animation-duration*/
-webkit-animation-duration: 80s;
animation-duration: 80s;
/*animation-timing-function*/
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
/*animation-iteration-count*/
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background: url("http://i.imgur.com/wNna7D3.png") repeat fixed 0 0 indigo;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* Safari …我想在仅传递X个字符数量时,将"显示更多"链接(如果点击将显示已修剪/隐藏的内容)附加到我的段落.
例如,我将最小值设置为120个字符,而段落只有60个,因此我不需要附加"显示更多"链接.
我该如何解决？下面的代码效果很好但是会对我所拥有的任何段落应用"显示更多",即使它少于X量.我该怎么办？
https://jsfiddle.net/vm0uj7fc/1/
var charLimit = 122;
function truncate(el) {
var clone = el.children().first(),
originalContent = el.html(),
text = clone.text();
el.attr("data-originalContent", originalContent);
clone.text(text.substring(0, charLimit) + "...")
el.empty().append(clone);
}
function reveal(el) {
el.html(el.attr("data-originalContent"));
}
$("a").on("click", function (e) {
e.preventDefault();
var truncateElement = $(this).parent().prev().find(".truncate");
if ($(this).text() === "Read More") {
$(this).text("Read Less");
reveal(truncateElement);
} else {
$(this).text("Read More");
truncate(truncateElement);
}
});
$(".truncate").each(function () {
truncate($(this));
});
回顾一下:
我试图获得一个按钮来水平扩展/折叠其他元素(共享按钮)和内联使用引导框架
我失败了两件事:
我准备了一个小提琴:
这是我的HTML代码:
<button type="button" class="btn btn-primary btn-sm"
data-toggle="collapse" data-target="#demo">+</button>
<div id="demo" class="collapse in width" style="background-color:yellow;">
<div style="padding: 0; overflow:hidden;">
<button class="btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-star"></span> Star
</button>
<button class="btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-star"></span> Star
</button>
<button class="btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-star"></span> Star
</button>
<button class="btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-star"></span> Star
</button>
</div>
</div>
而我的css:
#demo.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: …我有一个自定义JS函数，可在加载时在页面中的所有元素中创建/注入自定义链接。
操作之前：
<div class="myimagediv">
<img class="img-tag" src="#" data-src="alternative content I need" alt="">
</div>
现在，此自定义函数可以操纵元素：
[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
old_html = elem.innerHTML;
new_html = '<a class="customlink" href="' + elem.querySelector('img').src + '">' + old_html + '</a>';
elem.innerHTML = new_html;
});
新操作的元素：
<div class="myimagediv">
<a class="customlink" href="this should be the content of my data-src" title="">
<img class="img-tag" src="#" data-src="alternative content I need" alt="">
</a>
</div>
如何从IMG标签获取data-src属性并将其注入到新创建的自定义链接函数中？
我应该使用var吗？然后调用它，但是我无法掌握如何读取data-src并重新使用它。
任何帮助将不胜感激。
我使用 Dragula JS 进行拖放功能，并且我还希望可以选择通过单击鼠标来来回移动列表中的元素，而不会失去拖放功能。我该如何实现这一点？
所以我单击元素 1，它将移动到列表中。我从该列表中将其单击回来，它就会向后移动。就是这个想法。
如果有帮助的话，我准备了一个基本的拖放小提琴。 http://jsfiddle.net/vf6dnwxj/10/
我在上面的小提琴中的结构：
<div class="wrapper panel panel-body">
<ul id="left1" class="cont-dragula">
</ul>
<ul id="right1" class="cont-dragula">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3.</li>
<li>Item 4.</li>
<li>Item 5.</li>
<li>Item 6.</li>
</ul>
</div>
JS：
dragula([left1, right1]);
我遇到了一个问题，我无法弄清楚为什么弹出窗口内的 HTML 标签不会被渲染。
JS小提琴在这里： http: //jsfiddle.net/792xcgju/
<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>
<hr>
<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>
<!-- Content for Popover #1 -->
<div id="a1" class="hidden">
<div class="popover-heading">This is the heading for #1</div>
<div class="popover-body">
<div class="pagination_content">
<div class="page-jump-form">
<div class="input-group input-group-sm">
<input type="number" class="inputbox form-control" min="1" max="999999" />
<div class="input-group-btn">
<input type="button" class="btn btn-default btn-sm" value="{L_GO}" />
</div>
</div>
</div>
</div>
</div> …javascript ×6
html5 ×4
jquery ×4
css3 ×2
clipboard.js ×1
css ×1
draggable ×1
dragula ×1
html ×1