javascript - 付箋のhtmlを含むjavascript

Question

(function ($) {

    $.fn.stickynote = function (options) {
        var opts = $.extend({}, $.fn.stickynote.defaults, options);
        return this.each(function () {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            switch (o.event) {
                /*case 'dblclick':
                    $this.dblclick(function(e){$.fn.stickynote.createNote(o);})
                    break;*/
                case 'click':
                    $this.click(function (e) {
                        $.fn.stickynote.createNote(o);
                    })

                    break;
            }
        });
    };
    $.fn.stickynote.defaults = {
        size: 'large',
        event: 'click',
        color: '#FF0000',


    };
    $.fn.stickynote.createNote = function (o) {
        //o.preventDefault();
        var _note_content = $(document.createElement('textarea'));
        var _div_note = $(document.createElement('div'))
            .addClass('jStickyNote')
            .css('cursor', 'move');
        if (!o.text) {

            _div_note.append(_note_content);
            var _div_create = $(document.createElement('div'))
                .addClass('jSticky-create');
            /*.attr('title','Create Sticky Note');*/

            _div_create.mouseup(function (e) {
                var _p_note_text = $(document.createElement('p'))
                    .css('color', o.color)
                    .html(
                $(this)
                    .parent()
                    .find('textarea')
                    .val());
                $(this)
                    .parent()
                    .find('textarea')
                    .before(_p_note_text)
                    .remove();

                $(this).remove();

            })

        } else _div_note.append('<p style="color:' + o.color + '">' + o.text + '</p>');

        var _div_delete = $(document.createElement('div'))
            .addClass('jSticky-delete');

        _div_delete.mouseup(function (e) {
            $(this).parent().remove();
        })

        var _div_wrap = $(document.createElement('div'))
            .css({
            'position': 'absolute',
            'top': '0',
            'right': '0'
        })
            .append(_div_note)
            .append(_div_delete)
            .append(_div_create);

        switch (o.size) {
            case 'large':
                _div_wrap.addClass('jSticky-large');
                break;
            case 'small':
                _div_wrap.addClass('jSticky-medium');
                break;
        }
        if (o.containment) {
            _div_wrap.draggable({
                containment: '#' + o.containment,
                scroll: false,
                start: function (event, ui) {
                    if (o.ontop) $(this).parent().append($(this));
                }
            });
        } else {
            _div_wrap.draggable({
                scroll: false,
                start: function (event, ui) {
                    if (o.ontop) $(this).parent().append($(this));
                }
            });
        }
        $('#content').append(_div_wrap);

    };
})(jQuery);

付箋プラグインを開発していますが、この付箋をサイズ変更可能なものにすることができませんでした。

サイズを変更できるようにするには、このコードで何ができますか?

CSS を適用しないと、このスティッキーのサイズが変更されますが、適用するとサイズが変更されません。

また、属性をどこにも使用せずにこの関数を呼び出すにはどうすればidよいですか。どこにもハードコーディングしたくありません。

たとえば、この例ではid testsmallを使用して呼び出しましたが、それはしたくなくonclick、HTML ボタンからのイベントとして呼び出したいと考えています。