从jQuery select访问插件方法

Accessing a plugin method from a jQuery select

本文关键字：插件 方法 访问 select jQuery      更新时间：2024-01-07

背景

我创建了一个jQuery插件，该插件获取页面上的所有表，并通过远程请求加载行。

代码示例

这是一个简单的例子，它提升了插件使用的结构。在实际的示例中，load函数发出AJAX请求并处理结果，将行添加到表中。

JavaScript

(function($) {
    $.table = function(el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        base.load = function() {
            base.$el.find('tbody:last').append("<tr><td>...</td><td>...</td></tr>");
        };
        base.load();
    };
    $.fn.table = function(options) {
        options = options || {};
        return this.find(options.selector)
            .each(function(index) {
                new $.table(this, options);
        })
    };
})(jQuery);;

HTML

<table id="table1" data-role="table">
    <thead id="tour-table">
        <tr>
            <th data-id="id" width="20px">col1</th>
            <th data-id="given_name">col2</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<table id="table2" data-role="table">
    <thead id="tour-table">
        <tr>
            <th data-id="id" width="20px">col1</th>
            <th data-id="given_name">col2</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我在这样的页面上初始化所有的表格。

$('body').table({selector:'[data-role="table"]'});

jsfiddle

你可以看到一个实际的例子http://jsfiddle.net/RWy5r/1/

问题

有没有可能将load函数公开给dom，这样我就可以对对象调用它，比如这样？

$("#table1").load();

或

$("#table1").table.load();

使用上面的简单示例，结果将是ID为"0"的表；表1"；将附加CCD_ 1和包括ID为"1"的表在内的所有其它表；表2"；将保持不变。

这花了我一点时间，但解决方案非常简单。我们所需要做的就是将插件创建的对象添加到dom中，这样我们就可以在以后访问它，jQuery已经通过.data（）函数提供了一种方法。

解决方案

(function($) {
    $.table = function(el, options) {
        var id = $(el).attr("id");
        $.data($(el).get(0), "table", this);//add the new object to the dom so we can access it later
        
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.load = function() {
            
            base.$el.find('tbody:last').append("<tr><td>...</td><td>...</td></tr>");
        };
        base.load();
    };
    $.fn.table = function(options) {
        options = options || {};
        return this.find(options.selector).each(function(index) {
                new $.table(this, options);
        })
    };
        
    //public method to provide access to the plugin object from the dom
    $.fn.table.load = function(selection) {
        $.data($(selection).get(0), "table").load();
    } 
        
    $('body').table({selector:'[data-role="table"]'});
        
    $('#btn1').click(function(){
        $.data($("#table1").get(0), "table").load();
    });
        
 
    $('#btn2').click(function(){
        $("#table2").table.load("#table2");
    });
})(jQuery);​

看一个工作示例http://jsfiddle.net/leviputna/RWy5r/5/

解释

当插件初始化时，我会存储针对dom对象创建的对象，以便以后可以访问它。$.data($(el).get(0), "table", this);

然后，我将公开一个公共函数，该函数将根据选择查找对象并调用load方法。

$.fn.table.load = function(selection) {
    $.data($(selection).get(0), "table").load();
}

最后，我添加了两个点击功能来说明操作过程。

$('#btn1').click(function(){
    $.data($("#table1").get(0), "table").load();
});

我希望这个解决方案对将来的某个人有所帮助。

相关文章：