devdays/jQueryPlugInSample.html

## jquery-footnoter.0.0.3.js
(function ($) {
    $.fn.footnote = function (options) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "blue",
            referencesLocation: "#references"
        }, options);

        var footnotes = this.find("span.footnote");
        footnotes.each(function (key, value) {
            //console.log("footnote" + key + " : " + $(value).contents().text());
            var footnoteContentsNode = $(value).clone();
            var footnoteNumberTextNode = document.createTextNode("[" + key + "] ");

            // The default value for referencesLocation gets overridden by $.extend().
            $(settings.referencesLocation).append(footnoteNumberTextNode).append(footnoteContentsNode)
                .css("color", settings.color).append("<br />");
            // The default value for color gets overridden by $.extend().
            $(value).text("[" + key + "] ").css("color", settings.color)
                .css("vertical-align", "super");
        });
        return footnotes;
    };
}(jQuery));

## jQueryPlugInSample.html
<!DOCTYPE html>
<html>
<head>
    <title>Footnoter</title>
</head>
<body>
    <p id="myParagraph">
        In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted
        insensible as. Oh up unsatiable <span class="footnote">Unpacked reserved sir.</span> interested.
        Present suppose in esteems indemesne colonel it to. End horrible she landlord screened stanhill.
        Repeated offended <span class="footnote">you opinions off</span> dissuade ask packages screened.
        She alteration everything sympathize impossible his get compliment. Collected few extremity
        suffering met had sportsman.
    </p>

    <h2>References</h2>
    <div id="references"></div>
    <div id="theReferences"></div>

    <script src="Scripts/jquery-2.1.3.js"></script>
    <script src="Scripts/footnoter/jquery-footnoter-0.0.3.js"></script>

    <script>
        $("#myParagraph").footnote({
            color: "orange",
            referencesLocation: "#theReferences"
        });
    </script>
</body>
</html>
	(function ($) {
	$.fn.footnote = function (options) {

	// This is the easiest way to have default options.
	var settings = $.extend({
	// These are the defaults.
	color: "blue",
	referencesLocation: "#references"
	}, options);

	var footnotes = this.find("span.footnote");
	footnotes.each(function (key, value) {
	//console.log("footnote" + key + " : " + $(value).contents().text());
	var footnoteContentsNode = $(value).clone();
	var footnoteNumberTextNode = document.createTextNode("[" + key + "] ");

	// The default value for referencesLocation gets overridden by $.extend().
	$(settings.referencesLocation).append(footnoteNumberTextNode).append(footnoteContentsNode)
	.css("color", settings.color).append("<br />");
	// The default value for color gets overridden by $.extend().
	$(value).text("[" + key + "] ").css("color", settings.color)
	.css("vertical-align", "super");
	});
	return footnotes;
	};
	}(jQuery));
	<!DOCTYPE html>
	<html>
	<head>
	<title>Footnoter</title>
	</head>
	<body>
	<p id="myParagraph">
	In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted
	insensible as. Oh up unsatiable <span class="footnote">Unpacked reserved sir.</span> interested.
	Present suppose in esteems indemesne colonel it to. End horrible she landlord screened stanhill.
	Repeated offended <span class="footnote">you opinions off</span> dissuade ask packages screened.
	She alteration everything sympathize impossible his get compliment. Collected few extremity
	suffering met had sportsman.
	</p>

	<h2>References</h2>
	<div id="references"></div>
	<div id="theReferences"></div>

	<script src="Scripts/jquery-2.1.3.js"></script>
	<script src="Scripts/footnoter/jquery-footnoter-0.0.3.js"></script>

	<script>
	$("#myParagraph").footnote({
	color: "orange",
	referencesLocation: "#theReferences"
	});
	</script>
	</body>
	</html>