如何使jquery插件在用户定义的元素上工作

How to make a jquery plugin work on user defined elements

本文关键字：元素 工作 定义 用户 何使 jquery 插件      更新时间：2023-09-26

我正在制作一个基本的jQuery插件，用户可以使用它更改Bg颜色、字体颜色等。

我希望插件的用户能够定义这些更改激活的元素。

我知道我必须使用"这个"，但我不知道怎么做。

这是插件的代码

(function($, window, document, undefined){
//Define your own variables first
var wrapper = $('.wrapper');
var p = $('p');
//Define the default settings here
var settings = {
    textColor: 'red'
};

//Write your methods here
var methods = {
    //Call this method to initialize the plugin
    init: function(){
        console.log("Initialize the plugin");
        $('input').on('change', methods.changeColor);
        $('select').on('change', methods.changeFont);
        $('.slider').on('change', methods.changeWidth);
    },
    changeColor: function(){
        console.log("This will change the background and/or font color");
        var userBackgroundColor = $("#userBackgroundColor").val();
        var userTextColor = $("#userTextColor").val().toLocaleLowerCase();
        wrapper.css({
            backgroundColor: userBackgroundColor,
            color: userTextColor
        });
    },
    changeFont: function(){
        console.log("This will change the font");
        var userFontSize = $("option:selected").val();
        console.log(userFontSize);
        p.css({
            fontSize: userFontSize + 'em'
        })
    },
    changeWidth: function(){
        var p = $('p');
        var userWidth = $(".slider").val();
        var widthFontChange = userWidth / 20;
        if (widthFontChange == 1) {
            p.css({
                width: userWidth + '%',
                fontSize: widthFontChange + 'em'
            });
        }

        else {
            widthFontChange = userWidth / 2;
            p.css({
                width: userWidth + '%',
                fontSize: widthFontChange + 'px'
            })
        }
    }
};

//Actual plugin call
$.fn.pluginName = function(options){
    //If the user overrides defaults by setting his own options
    if(options){
        settings = $.extend(settings, options);
    }
    //Put any eventHandlers here, like this:
    this.on('change', methods.changeColor);
    this.on('change', methods.changeFont);
    this.on('change', methods.changeWidth);
    //Init the plugin with the $selector
    methods.init(this);
    //Return this for jQuery chaining
    return this;
};
}(jQuery, window, document));

这是一个文件，用户可以在其中定义插件必须在其上工作的对象

$(document).ready(function(){
$('body').pluginName();
});

我的问题是，我如何让它按照我想要的方式工作？

如果我正确理解您的问题，您需要提供设置来选择要侦听更改的各种组件。如果是…

将jQuery this和options传递给init方法，这样它就具备了将事件连接到特定子元素所需的一切。

我转而使用on的委派版本，因为它可以经受住动态变化。

JSFiddle：http://jsfiddle.net/CgGjq/6/

关键部分是

init: function ($element, options) {
            console.log("Initialize the plugin");
            $element.on('change', options.input || 'input', methods.changeColor);
            $element.on('change', options.select || 'select', methods.changeFont);
            $element.on('change', options.slider || '.slider', methods.changeWidth);
        },

它使用选项中的属性来覆盖选择器（如果没有提供，则默认为插件默认设置）。

然后，您可以将其与以下选项一起使用：

$(document).ready(function () {
    $('body').pluginName({
        select: '#userFontSize', // Override the selectors etc
        slider: "#userWidth.slider"
    });
});
相关文章：