-1

提案ボックスを作成しました。それを推定して再利用可能なコード（プラグイン）に変換し、ページや場所で複数回使用できるようにします。問題は、どうすればいいのかわからないということです。

私のコードを表示するのではなく、非常に大きいので、私が見たいのは、マウスがオブジェクトの上にあるときにオブジェクト上にポップアップdivを作成でき、そのように作成されたプラグインのサンプルコードです。 1つのページで複数回使用できるようにします（IDを使用しません）。

コードを再利用可能なプラグインにする方法を教えてくれるので、これを非常に高く評価します。

4

2 に答える 2

1

これがあなたが始めるべき1つの可能性です：

(function(w, d) {
    function createPopup(el, options) {
        // Create popup from DOM elements, a string, or read from a template
        var popup = d.createElement('div');
        popup.className = options.className;
        popup.innerText = 'Foobar!';
        // Possibly insert popup into DOM, depending on how you've implemented it
        el.parentNode.insertAfter(popup, el);
    }

    var defaultOptions = {
        className: 'popup'
    };

    var MyPlugin = function(el, options) {
        this.element = el;
        this.options = options || defaultOptions;
        this.popup = createPopup(el, this.options);

        var self = this;

        // Ignoring IE for now
        el.addEventListener('click', function() {
            self.popup.style.display = 'block';
            // Possibly want to set position of popup, depending on how you've implemented it
        });

        self.popup.addEventListener('mouseout', function() {
            self.popup.style.display = 'none';
        });
    };

    MyPlugin.prototype = {
        // Other methods you want an instance of MyPlugin to have, for example:
        setText: function(text) {
            this.popup.innerText = text;
        }
    };

    // Static methods
    MyPlugin.setDefaults = function(options) {
        defaultOptions = options;
    };

    w.MyPlugin = MyPlugin;
})(window, document);

使用法：

<script>
var popup1 = new window.MyPlugin(document.getElementById('#foo'));
var popup2 = new window.MyPlugin(document.getElementById('#bar'));
popup2.setText = "I'm another popup!";

MyPlugin.setDefaults({
    className: 'foobar'
});
</script>
于 2013-01-10T15:29:53.750 に答える
0

私はRoryfのコードを取り、いくつかのバグを解決しました。（@Roryfあなたのコードがうまく機能し始めたら、私は何か間違ったことをしているに違いありません：S）

私はそれが私のために働くようにいくつかのコードを変更しました。よく書かれた答えをくれたRoryfに感謝します。これが私のような出発点を探している他の人に役立つことを願っています。

私はフィドルを置いたので、コンピュータにコピーして貼り付ける必要はありません。

http://jsfiddle.net/crislivinitup/rdqcf/1/

(function(w, d) {
function createPopup(el, options) {
    // Create popup from DOM elements, a string, or read from a template
    var popup = d.createElement('div');

    //*** I haven't been able to get className to work, so I commented it out
    // popup.className = options.className;

    //***popup.innerText = 'Foobar!';
    popup.insertAdjacentHTML("afterBegin",'Foobar!');
    // Possibly insert popup into DOM, depending on how you've implemented it
    //***el.parentNode.insertAfter(popup, el);
    el.appendChild(popup);

    //**** added to hide div by default
    popup.style.display = 'none';

    //*** added to connect this.popup (from MyPlugin function) to the reference of the created div
    return popup;
}

var defaultOptions = {
    //*** I haven't got className to work, so I just took out the related functions
    className: 'popup'
};

var MyPlugin = function(el, options) {
    this.element = el;
    this.options = options || defaultOptions;
    this.popup = createPopup(el, this.options);

    var self = this;



    // Ignoring IE for now
    el.addEventListener('mouseover', function() {
        //alert("clicked");
        self.popup.style.display = 'block';
        // Possibly want to set position of popup, depending on how you've implemented it
    });

    el.addEventListener('mouseout', function() {
        self.popup.style.display = 'none';
    });


};

MyPlugin.prototype = {
    // Other methods you want an instance of MyPlugin to have, for example:
    setText: function(text) {

        //***I didn't get the innerText to work, so I changed it with synonymous code
        //***this.popup.innerText = text;
        this.popup.insertAdjacentHTML("beforeEnd",text);
    }
};

// Static methods
MyPlugin.setDefaults = function(options) {
    defaultOptions = options;
};

w.MyPlugin = MyPlugin;
})(window, document);

実装：*divなどのchildrenNodesを持つことができる要素で使用する必要があります

var popup1 = new window.MyPlugin(document.getElementById("foo"));
var popup2 = new window.MyPlugin(document.getElementById("bar"));
popup1.setText("I'm another popup!");
popup1.setText("keep going");
于 2013-01-11T00:51:54.140 に答える