将我的头缠在jQuery插件上

Question

I'm attempting my first jQuery plugin.

(YAY... about time!)

I am having a hard time wrapping my head around how I can get a publicly accessible function to fire properly.

Code

(function($, doc, win){
    "use strict";

    // Our main function
    $.fn.ajaxian = function(options){
        // Our Settings
        var $setts = $.extend({
                CallBack:         null,
                LoadInto:         'body',
                LoadSection:       null,
                LoadingContent: null,
                LoadInEffect:     'fade'
            }, options);

        console.log('Plugin Initialized');

        var elements = this;

        return {
            ManualLoad: function(){
                console.log('Manual Fired');
            },
            elements: function(){
                $(this).on('click', function(e){
                    e.preventDefault();
                    return $.fn.ajaxian.LoadPage;
                }); 
            }
        };  

    };

    // Load in a page
    $.fn.ajaxian.LoadPage = function(){
        console.log('Internal Page Load Initialized');  
    };

}(jQuery, document, window));

UPDATED CODE

(function($, doc, win){
    "use strict";

    // Our main function
    $.fn.ajaxian = function(options){
        // Our Settings
        var $setts = $.extend({
                CallBack:         null,
                LoadInto:         'body',
                LoadSection:       null,
                LoadingContent: null,
                LoadInEffect:     'fade'
            }, options);

        console.log('Plugin Initialized');

        return this.each(function(){
            var $this = $(this);
            $this.on('click', function(e){
                e.preventDefault();
                $.fn.ajaxian.LoadPage();
            });
        });

    };

    // Load in a page
    $.fn.ajaxian.LoadPage = function(){
        console.log('Internal Page Load Initialized');  
    };

    // Manual load in a page
    $.fn.ManualLoad = function(){
        console.log('Manual Page Load Initialized');
        $.fn.ajaxian.LoadPage();
    };

}(jQuery, document, window));

Usage

jQuery(window).on('load', function(){
    // Initialize everything
    Initialize(jQuery);
});

var Initialize = function($){
    var options = {
        CallBack:         function(){console.log('Callback Fired')},
        LoadInto:         '#container',
        LoadSection:       '#content',
        LoaderContent:   null,
        LoadInEffect:     'fade'
    };
    $('a:not(.external), button:not(.external), .internal').ajaxian(options);

    $('body').ajaxian(options).ManualLoad();

    if(location.pathname == '/'){
        $('body').ajaxian('init', options);
    }
};

Now, while I am getting the Plugin Initialized in my firebug console, I am getting an error attempting the ManualLoad .

It states: TypeError: $(...).ajaxian(...) is undefined

What am I doing wrong?

Answer 1

Your ajaxian method should return an object that has ManualLoad as a function:

$.fn.ajaxian = function() {
    // Our Settings
    var elements = this;
    var $setts = $.extend({}, $.fn.ajaxian.defaults, options);
    console.log('Plugin Initialized');

    elements.on('click', function(e){
        var $clickedElement = $(this);
        e.preventDefault();
        // do something with clicked element here
    }); 

    return {
         ManualLoad: function(){
             console.log('Manual Fired');
             // use elements here
         }
    }
};

Answer 2

Your ajaxian function is not returning any value!

    $.fn.ajaxian = function(options){
        // Our Settings
        var $setts = $.extend({}, $.fn.ajaxian.defaults, options);
        console.log('Plugin Initialized');
        //should return some value.
    };