jQuery插件创建答案

【问题标题】：jQuery plugin creationjQuery插件创建
【发布时间】：2024-04-26 00:10:02
【问题描述】：

我用 jQuery 创建了一个滑块组件。现在我想实施它作为一个插件，所以我可以在多个项目中使用它。

但是当我的滑块中有多个实例时我遇到了问题 HTML 表单。如何检测用户正在使用哪个滑块实例？

我已阅读这些内容，但不知道该怎么做：

https://learn.jquery.com/plugins/basic-plugin-creation/

https://learn.jquery.com/plugins/advanced-plugin-concepts/

HTML：

<body>
    <div id="myslider" style="position: absolute; top:20px; left:20px;"></div>
    <div id="myslider2" style="position: absolute; top:200px; left:200px;"></div>
<script>
    $("#myslider").vslider();
    $("#myslider2").vslider();
</script>

CSS：

.slider_holder{
        height: 3px;
        width: 300px;
        position: absolute;
        float: left;
        left: 0px;
        top: 0px;
        background-color: #C2C2C2;
        border-radius: 3px;
}
.slider_holder span{
        height: 5px;
        position: absolute;
        width: 100%;
        top: -1px;
        background-color: #FF5A5F;
        left: 0px;
}
.slider_holder div{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: solid 1px #333;
        background-color: #fff;
        position: absolute;
        top: -8px;
        cursor: pointer;
}
.slider_holder #fpoint{
        left: 0px;
}
.slider_holder_right_slider{
        right: 0px;
}

jQuery 插件文件：

(function( $ ){

$.fn.vslider = function() {

var el = "";
var timer_handle;
var currentMousePos = { x: -1, y: -1 };
var min_val = 50000;
var max_val = 1000000;
var from_val = 0;
var to_val = 0;
var container;

    container = "#" + this.prop("id");
    this.html('<div class="slider_holder">'+
                '<span></span>'+
                '<div id="fpoint" ondragstart="return false;" title="" data-value=""></div>'+
                '<div id="tpoint" ondragstart="return false;" title="" data-value="" class="slider_holder_right_slider"></div>'+
                '</div>');

$(".slider_holder div").on( "mousedown", function( event ) {
    el = $(this).prop("id");
    timer_handle = setInterval(function(){slider_timer();}, 50);
});

$( document ).on( "mouseup", function( event ) {
    el = "";
    clearInterval(timer_handle);
});


$( document ).on( "mousemove", function( event ) {
  currentMousePos.x = event.pageX;
  currentMousePos.y = event.pageY;
});



function slider_timer() {
    if (el != ""){

        $("#" + el).css("left", currentMousePos.x - $(".slider_holder").offset().left - 10 + "px");

        if ($("#fpoint").position().left + $("#fpoint").width() > $("#tpoint").position().left){
            if (el == "fpoint")
                $("#fpoint").css("left", $("#tpoint").position().left - $("#tpoint").width() - 2 + "px"); else
                $("#tpoint").css("left", $("#fpoint").position().left + $("#fpoint").width() + 2 + "px");               
        }


        if ($("#" + el).position().left < 0) $("#" + el).css("left", "0px");

        if ($("#" + el).position().left + $("#" + el).width() > $(".slider_holder").width()) 
            $("#" + el).css("left", $(".slider_holder").width() - $("#" + el).width() + "px");
console.log(container);
        $(container + " .slider_holder span").css("visibility", "visible");
        $(container + " .slider_holder span").css("left", $("#fpoint").position().left + "px");
        $(container + " .slider_holder span").css("width", $("#tpoint").position().left - $("#fpoint").position().left + "px");         


        from_val = parseInt((($("#fpoint").position().left / $(".slider_holder").width()) * max_val) + min_val);
        to_val = parseInt(((($("#tpoint").position().left + $("#tpoint").width()) / $(".slider_holder").width()) * max_val) + min_val);
        if (to_val > max_val) to_val = max_val;
        if (from_val < min_val) from_val = min_val;

        console.log(from_val + ', ' + to_val);

        //$("#fpoint").prop("title", from_val);
        //$("#tpoint").prop("title", to_val);

    }

}   


  return this;
   }; 


})( jQuery );

【问题讨论】：

插件应该绑定到元素上。您应该根据上下文访问/构建它。问题是您在插件中使用选择器，而不是存储变量来包含绑定元素。您应该使用a boilerplate 来构造您的插件，然后使用$element 等访问绑定的元素。
@Liam 感谢您的解决方案。太棒了。我设法创建了插件。请提交您的评论作为答案，我会接受它作为“最佳答案”。

标签： jquery html css jquery-plugins

【解决方案1】：

如何检测用户正在使用哪个滑块实例？

插件应该是上下文相关的。我的意思是他们知道他们绑定到什么元素并在他们身上工作。您上面的问题是您仍然通过选择器访问元素（好像它不是插件一样）：

$(".slider_holder div")

这会将你的插件变成一个通用的或花园的 jquery 函数。

您需要更改插件以使用绑定元素。最好的方法是使用样板代码编写插件（例如 one 或 one）。

这应该像这样构建你的插件：

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos

// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {

    // here we go!
    $.pluginName = function(element, options) {

        // plugin's default options
        // this is private property and is  accessible only from inside the plugin
        var defaults = {

            foo: 'bar',

            // if your plugin is event-driven, you may provide callback capabilities
            // for its events. execute these functions before or after events of your 
            // plugin, so that users may customize those particular events without 
            // changing the plugin's code
            onFoo: function() {}

        }

        // to avoid confusions, use "plugin" to reference the 
        // current instance of the object
        var plugin = this;

        // this will hold the merged default, and user-provided options
        // plugin's properties will be available through this object like:
        // plugin.settings.propertyName from inside the plugin or
        // element.data('pluginName').settings.propertyName from outside the plugin, 
        // where "element" is the element the plugin is attached to;
        plugin.settings = {}

        var $element = $(element), // reference to the jQuery version of DOM element
             element = element;    // reference to the actual DOM element

        // the "constructor" method that gets called when the object is created
        plugin.init = function() {

            // the plugin's final properties are the merged default and 
            // user-provided options (if any)
            plugin.settings = $.extend({}, defaults, options);

            // code goes here

        }

        // public methods
        // these methods can be called like:
        // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
        // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside 
        // the plugin, where "element" is the element the plugin is attached to;

        // a public method. for demonstration purposes only - remove it!
        plugin.foo_public_method = function() {

            // code goes here

        }

        // private methods
        // these methods can be called only from inside the plugin like:
        // methodName(arg1, arg2, ... argn)

        // a private method. for demonstration purposes only - remove it!
        var foo_private_method = function() {

            // code goes here

        }

        // fire up the plugin!
        // call the "constructor" method
        plugin.init();

    }

    // add the plugin to the jQuery.fn object
    $.fn.pluginName = function(options) {

        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

            // if plugin has not already been attached to the element
            if (undefined == $(this).data('pluginName')) {

                // create a new instance of the plugin
                // pass the DOM element and the user-provided options as arguments
                var plugin = new $.pluginName(this, options);

                // in the jQuery version of the element
                // store a reference to the plugin object
                // you can later access the plugin and its methods and properties like
                // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
                // element.data('pluginName').settings.propertyName
                $(this).data('pluginName', plugin);

            }

        });

    }

})(jQuery);

Source

您现在应该（取决于您使用的样板）有一段代码，例如：

var $element = $(element), // reference to the jQuery version of DOM element
    element = element;    // reference to the actual DOM element

所以现在你知道你的插件绑定到哪个元素了，它是$element！

【讨论】：