-1

Greasemonkey を使用してページに新しいアンカー リンクを追加したいと考えています。[img]具体的には、カスタムのスマイリーを追加して、毎回スマイリーの画像を見つけてリンクをコピーしてタグに貼り付ける必要がないようにしたいと考えています。

追加したいコードはこれです

<a href="#" onclick="insert_text(':D', true); return false;">
    <img src="./images/smilies/icon_e_biggrin.gif" alt=":D" title="Very Happy" height="17" width="15">
</a>

しかし、img srcの場所とonclickを次のように変更したい

insert_text('[img]imagesourcelocation[/img]' ,true) return false;

ソースは画像の[img]URL と同じになります。
時間の経過とともに多くのスマイリーを追加できるようにしたいと考えています。属性altとtitle属性を変更することも素晴らしいことですが、主に他の 2 つが必要です。

どうすればいいですか？
これまでのところ、私が持っているのはこれだけです:

var para=document.createElement("a");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("smiley-box");
element.appendChild(para);

ご覧のとおり、この新しいスマイリーを<div>id でに追加する必要がありsmiley-boxます。

誰かが私がこれを行うのを手伝ってくれるなら、私はとても幸せです.

4

4 に答える 4

1

href を設定するなど、属性にアクセスすることで、DOM 要素オブジェクトのプロパティを設定できます。

para.href = "#";

onclick の設定は少し異なります。Javascript の文字列を指定する代わりに、関数を指定します。

para.onclick = function() {
    insert_text('[img]imagesourcelocation[/img]' ,true);
    return false;
}

リンクで画像を実現するには、テキスト ノードの代わりに img 要素を作成し、上記のように属性を設定して、リンクに追加します。

// create the img and set it's src
var node=document.createElement("img");
node.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Smiley.png/50px-Smiley.png"

// add the img to the anchor
para.appendChild(node);

ここでの実例: http://jsfiddle.net/d2gGR/

参考文献:

http://www.w3schools.com/jsref/dom_obj_anchor.asp
http://www.w3schools.com/jsref/dom_obj_image.asp
http://www.w3schools.com/jsref/dom_obj_event.asp

于 2013-11-05T07:28:39.993 に答える
0

jQueryの素晴らしい機能を使用してカスタム スマイリーを追加する完全なスクリプトを次に示します。スクリプト作成の 3 つの致命的な罪を回避することに注意してください。

  1. 「カットアンドペースト（そして泣く）」コーディングを回避します。
  2. 堅牢な Web 2.0 の方法でイベント ハンドラーを使用します。(絶対に使用しないでくださいonclick。)
  3. innerHTML既存の要素を破棄しません。

さらに、このコードは、必要に応じてwaitForKeyElements()を使用して、AJAX 対応にするのが非常に簡単です。


// ==UserScript==
// @name     _Add custom smilies
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
$("#smiley-box").append ('<p>Custom smileys.</p>');

addNewSmiley ("http://sguwars.com/forum/images/smilies/icon_cool.gif");

function addNewSmiley (imageURL) {
    $("#smiley-box").append (
        '<a href="#" class="gmCustomSmilies">'
        + '<img src="' + imageURL + '"></a>'
    );
}

//-- Activate click handlers for any and all of our custom smilies
$(document.body).on ("click", "a.gmCustomSmilies", insertSmilie);

function insertSmilie (evnt) {
    var jThis   = $(evnt.target);
    var imgURL  = jThis.find ("img").attr ("src");

    unsafeWindow.insert_text ('[img]' + imgURL + '[/img]', true);
    return false;
}
于 2013-11-05T08:38:50.117 に答える
0

これがグリースマネーの方法であるかどうかはわかりませんが、スマイリーボックスの innerHTML を直接更新することもできます

function add(url, alt, title)
{
    var box=document.getElementById("smiley-box");
    box.innerHTML += "<a href=\"#\" onclick=\"insert_text('[img]" + url + 
                     "[/img]', true); return false;\"><img src=\"" + url + 
                     "\" alt=\"" + alt + "\" title=\"" + title + "\" height=\"17\" width=\"15\"></a>";
}

次に、次のようにスマイリーをボックスに追加できます (リンク、代替テキスト、およびタイトル テキスト)。

add("http://bit.ly/1a4xaTX",":D","Big grin");
add("http://bit.ly/HDGdlw",":(","Sad");
add("http://bit.ly/175LywW",":O","Surprised");

ただし、jingtaoのソリューションは素晴らしいものです。

于 2013-11-05T07:49:38.547 に答える
-1 
var para=document.createElement("p");
var node=document.createTextNode("custom smileys.");
para.appendChild(node);
links = document.createElement('a');
links.setAttribute('href','#');
links.setAttribute('onclick','insert_text(\'[img]http://sguwars.com/forum/images/smilies/icon_cool.gif[/img]\', true); return false;');
links.innerHTML ='<a href="we.html"><img src="http://sguwars.com/forum/images/smilies/icon_cool.gif" /></a>';
var element=document.getElementById("smiley-box");

element.appendChild(para);
element.appendChild(links);

これはこれまでの私の解決策ですありがとう

于 2013-11-05T07:38:08.173 に答える