Question

我正在尝试将Jquery代码转换为插件。我在执行它时遇到了困难，因为它只能正常工作一半。所讨论的代码使textarea得到一个悬停菜单，使用户可以附加标记标记对于textarea的粗体，斜体，下划线和链接。我的转换只会使悬停菜单出现，但实际添加的标记标签不起作用。我试图转换的代码可以在这里找到：{{3} }

这是完整的通用代码：

$(document).ready(function() {

            var mouseX = 0;

            var mouseY = 0;



            $("#description").mousemove(function(e) {

                // track mouse position

                mouseX = e.pageX;

                mouseY = e.pageY;

            });



            $("#description").mousedown(function() {

                $("#menu").fadeOut("1000");

            });



            $("#description").select(function() {

                // get the mouse position an show the menu

                $("#menu").css("top", mouseY - 30).css("left", mouseX + 10).fadeIn("1000");

            });



            $("#bold").click(function() {

                wrapText("<b>", "</b>");

                $("#menu").fadeOut("1000");

            });



            $("#italic").click(function() {

                wrapText("<i>", "</i>");

                $("#menu").fadeOut("1000");

            });



            $("#underline").click(function() {

                wrapText("<u>", "</u>");

                $("#menu").fadeOut("1000");

            });



            $("#link").click(function() {

                var url = prompt("Enter URL", "http://");

                if (url != null)

                    wrapText("<a href='" + url + "'>", "</a>");

                $("#menu").fadeOut("1000");

            });



            function wrapText(startText, endText){

                // Get the text before the selection

                var before = $("#description").val().substring(0, $("#description").caret().start);



                // Get the text after the selection

                var after = $("#description").val().substring($("#description").caret().end, $("#description").val().length);



                // merge text before the selection, a selection wrapped with inserted text and a text after the selection

                $("#description").val(before + startText + $("#description").caret().text + endText + after);



                // Update the preview

                $("#preview").html($("#description").val());

            }

        });

这是我进入转换的地方：

//You need an anonymous function to wrap around your function to avoid conflict
(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        //This is where you write your plugin's name
        officebar: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                 var mouseX = 0;

            var mouseY = 0;



            $(this).mousemove(function(e) {

                // track mouse position

                mouseX = e.pageX;

                mouseY = e.pageY;

            });



            $(this).mousedown(function() {

                $("#menu").fadeOut("1000");

            });



            $(this).select(function() {

                // get the mouse position an show the menu

                $("#menu").css("top", mouseY - 30).css("left", mouseX + 10).fadeIn("1000");

            });



            $("#bold").click(function() {

                wrapText("<b>", "</b>");

                $("#menu").fadeOut("1000");

            });



            $("#italic").click(function() {

                wrapText("<i>", "</i>");

                $("#menu").fadeOut("1000");

            });



            $("#underline").click(function() {

                wrapText("<u>", "</u>");

                $("#menu").fadeOut("1000");

            });



            $("#link").click(function() {

                var url = prompt("Enter URL", "http://");

                if (url != null)

                    wrapText("<a href='" + url + "'>", "</a>");

                $("#menu").fadeOut("1000");

            });



            function wrapText(startText, endText){

                // Get the text before the selection

                var before = $(this).val().substring(0, $(this).caret().start);



                // Get the text after the selection

                var after = $(this).val().substring($(this).caret().end, $(this).val().length);



                // merge text before the selection, a selection wrapped with inserted text and a text after the selection

                $(this).val(before + startText + $(this).caret().text + endText + after);



                // Update the preview

                //$("#preview").html($(this).val());

            }

            });
        }
    });

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

菜单HTML代码：

<div id="menu">
    <a href="#" id="bold">b</a>
    <a href="#" id="italic">i</a>
    <a href="#" id="underline">u</a>
    <a href="#" id="link">Link</a>
</div>

菜单CSS：

#menu {padding:5px; background-color:#f5f5f5;
       background-color:rgba(245, 245, 245, 0.6);
       display:none; position:absolute; top:0px; left:0px; overflow:hidden;
       border:solid 1px #929292; border-radius:3px; -moz-border-radius:3px;
       -webit-border-radius:3px; box-shadow: 5px 5px 5px #888;
       -moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 5px 5px 5px #888;}
#menu:hover {background-color:rgba(245, 245, 245, 1);}

我不确定嵌套代码中嵌套的函数是否正常工作。知道为什么吗？

Answer 1

我认为问题是在“wrapText”函数中，this不会是你想象的那样。

尝试添加

var self = this;

“wrapText”函数的

外部，然后在“wrapText”中使用$(self)而不是$(this)。

当我在你的jsFiddle中这样做时，它似乎有效。在“.each（）”主体中定义“self”。

将Jquery代码转换为插件

1 个答案: