#javascript #jquery
#javascript #jquery
Вопрос:
http://bowser.effectgames.com /~jhuckaby/zeroclipboard/multiple.html
есть ли способ добавить подсказку при наведении курсора мыши на скопированный текст. в подсказке написано «текст скопирован» спасибо.
HTML: код
<body>
<div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
</div>
</body>
Комментарии:
1. Использование flash? вау, 1. Проблема с SEO, 2. Не дружелюбен на некоторых мобильных телефонах и других устройствах, таких как iPad и т.д., 3. Зачем делать умным то, что не нужно, люди знают, как копировать и вставлять это, как один из первых уроков на компьютерах.
2. по моему мнению, более 70% людей, которые занимаются серфингом в Интернете, не знают, как правильно копировать и вставлять 😉
Ответ №1:
да, это:
clip.addEventListener('complete', run_my_tipbox);
это вызовет функцию run_my_tipbox, когда текст будет скопирован в буфер обмена 🙂
итак, вы сделаете что-то вроде этого:
<script language="JavaScript">
var clip = null;
function run_my_tipbox(){ alert('Text has been copied to the clipboard!'); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', my_load);
clip.addEventListener('mouseOver', my_mouse_over);
clip.addEventListener('complete', run_my_tipbox);
clip.glue( 'd_clip_button' );
}
</script>
надеюсь, это делает его немного более понятным 😉
Комментарии:
1. извините, я новичок в js. как написать функцию run_my_tipbox. должен ли я поместить код в функцию init() {}. спасибо
2. отредактировал ответ, просто взгляните, если понимаете, что я имею в виду 😉
3. спасибо за ваш ответ. я пробовал ваш ответ, но он не работает, down123.xxmn.com/test1.html
Ответ №2:
это полностью рабочий HTML-файл.. вы можете посмотреть, что это делает, это довольно просто
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>h4kr.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<style type="text/css">
body {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.error-msg {
font-size: 12px;
margin: 10px;
padding: 10px;
color: #ffffff;
border: 1px solid #000000;
background-color: #990000;
font-weight: bold;
}
textarea {
width: 450px;
height: 200px;
border: 1px solid #669966;
padding: 5px;
}
#output {
height: 200px;
width: 99%;
border: 1px solid #669966;
padding: 5px;
overflow: auto;
}
#outputContent {
font-size: 13px;
}
button {
width: 450px;
height: 40px;
}
span.label {
width: 140px;
display: block;
float: left;
}
span.hidden {
display: none;
}
div#clipboardcontent{
display:none;
}
div#copyclipboardsuccess{
position: absolute;
top: 400px;
left: 20px;
border: 1px solid #000000;
background-color: #009900;
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 20px;
width: 300px;
height: 60px;
text-align: center;
opacity: 0.5;
z-index: 9999;
}
div#errormsg{
position: absolute;
top: 150px;
left: 20px;
border: 1px solid #000000;
background-color: #990000;
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 20px;
width: 300px;
height: 60px;
text-align: center;
opacity: 0.5;
z-index: 9999;
}
</style>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );
var clip = null;
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', function (client) {
});
clip.addEventListener('mouseOver', function (client) {
// update the text on mouse over
clip.setText( document.getElementById('clipboardcontent').innerHTML );
});
clip.addEventListener('onComplete', function (client) {
copyclipboardsuccess();
});
clip.glue( 'd_clip_button','d_clip_container');
}
function copyclipboardsuccess()
{
var o = document.getElementById('copyclipboardsuccess');
if(o.style.display == 'none')
{
o.style.display = 'block';
setTimeout(copyclipboardsuccess,1000);
}
else
{
o.style.display = 'none';
}
}
function errormsg()
{
var o = document.getElementById('errormsg');
if(o.style.display == 'none')
{
o.style.display = 'block';
setTimeout(errormsg,2500);
}
else
{
o.style.display = 'none';
}
}
</script>
</head>
<body onload="init();">
<h1>h4kr.com</h1><div id="errormsg" style="display:none">Error!</div><div id="copyclipboardsuccess" style="display:none">Copied to clipboard!</div><form id="form_cid" method="POST" target="output"><h2>Input</h2><textarea id="input_list" name="input_list"></textarea><br/><button type="submit" value="go">Go</button></form> <h2>Output</h2>
<iframe src="about:blank" name="output" id="output"></iframe>
<div id="d_clip_container" style="position:relative">
<button id="d_clip_button">Copy to clipboard</button>
</div>
<div id="clipboardcontent"></div>
</body>
Комментарии:
1. я хочу, чтобы при наведении курсора мыши на скопированный текст отображалась подсказка. вот так flowplayer.org/tools/tooltip/index.html . не могли бы вы использовать мою HTML-структуру для этого. большое спасибо. я поместил HTML-код на свой вопрос
2. в вашем коде я должен щелкнуть скопированный текст, затем отобразить панель инструментов
3. в моем коде не имеет значения, нажимаете вы на него или наводите курсор.. это всего лишь эта строка: clip.addEventListener(‘onComplete’, функция (клиент) { copyclipboardsuccess(); });
4. ваша html-структура сложная. если я хочу навести курсор, как это изменить. Спасибо
5. и я не знаю, какая польза от этой функции.clip.addEventListener(‘onComplete’, функция (клиент) { copyclipboardsuccess(); });