gpt4 book ai didi

javascript - 客户 JQuery 插件

转载 作者:行者123 更新时间:2023-12-02 19:50:30 26 4
gpt4 key购买 nike

我正在学习 JQuery。我需要创建一个自定义控件。该控件基本上将呈现一些 HTML。有时,我只想获取 HTML。我希望使用以下语法:

// Put generated html inside of "myElement". "myElement" is a div element.
$("#myElement").myPlugin({ value: 10 });

// Retrieve the html that myPlugin would place of a div element.
// Basically, I want the javascript equivalent of a C# static function here.
// But I think the following approach is wrong:
var html = myPlugin().getHtml(10);
alert(html);

为了实现这一目标,我使用以下方法:

(function ($) {
$.fn.myPlugin = function (element, options) {
var defaults = { theValue: 0 }

var plugin = this;
plugin.settings = {};

var $element = $(element),
element = element;

plugin.init = function () {
plugin.settings = $.extend({}, defaults, options);
var html = createHtml(defaults.theValue);
$(element).html(html);
}

plugin.getHtml = function (v) {
return createHtml(v);
}

var createHtml(v) {
return "<span>" + v + "</span>";
}
})(jQuery);

我有两个问题:1)我可以看到 HTML 正在生成,但它似乎没有添加到 DOM 中。 2)我无法静态调用该函数。如何使我的函数静态可见?

谢谢!

最佳答案

您需要进行一些调整:

(function($) {
$.fn.myPlugin = function(options) {
var defaults = {
theValue: 0
},
settings = $.extend({}, defaults, options);

this.html($.myPlugin.getHtml(settings.theValue));
};

$.myPlugin = {
getHtml: function(value) {
return "<span>" + value + "</span>";
}
};

})(jQuery);

用法:

$("#foo").myPlugin({ theValue: 10 });
var html = $.myPlugin.getHtml(10);
  • 首先,您从未调用过 init 方法,因此没有任何效果。它不会被自动调用。也许您正在考虑jQueryUI widget factory
  • 此外,element 不会传递给插件,this 指的是调用插件的元素。您只会获得选项
  • 最后,要创建静态 jQuery 方法,只需将其附加到 $ 即可。

示例: http://jsfiddle.net/xF2S6/

关于javascript - 客户 JQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9369108/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com