javascript - what these notation signifies in jquery plugin -
could please me understand following (numbered listing) notation/syntax/meaning in javascript/jquery plugin. tried googling didn't got right direction.
- $.fn["printelement"] = function (options) {
- $.fn["printelement"]["defaults"] = {
/* * print jsp in popup * iframe printing not supported in opera , chrome 3.0, popup window shown instead */ (function (window, undefined) { var t = window["document"]; var $ = window["jquery"]; $.fn["printelement"] = function (options) { var mainoptions = $.extend({}, $.fn["printelement"]["defaults"], options); //iframe mode not supported opera , chrome 3.0 (it prints entire page). //http://www.google.com/support/forum/p/webmasters/thread?tid=2cb0f08dce8821c3&hl=en if (mainoptions["printmode"] == 'iframe') { if (/chrome/.test(navigator.useragent.tolowercase())) mainoptions["printmode"] = 'popup'; } //remove printed iframe if exists $("[id^='printelement_']").remove(); return this.each(function () { //support metadata plug-in if available var opts = $.meta ? $.extend({}, mainoptions, $(this).data()) : mainoptions; _printelement($(this), opts); }); }; $.fn["printelement"]["defaults"] = { "printmode": 'iframe', //usage : iframe / popup "pagetitle": '', //print page title "overrideelementcss": ['./print.css'], /* can 1 of following 3 options: * 1 : boolean (pass true stripping css linked) * 2 : array of $.fn.printelement.csselement (s) * 3 : array of strings paths alternate css files (optimized print) */ "printbodyoptions": { "styletoadd": 'padding:10px;margin:10px;', //style attributes add body of print document "classnametoadd": 'h5' //css class add body of print document }, "leaveopen": false, // in case of popup, leave print page open or not "iframeelementoptions": { "styletoadd": 'border:none;position:absolute;width:0px;height:0px;bottom:0px;left:0px;', //style attributes add iframe element "classnametoadd": 'h5' //css class add iframe element } }; $.fn["printelement"]["csselement"] = { "href": '', "media": 'print' }; function _printelement(element, opts) { //create markup printed var html = _getmarkup(element, opts); var popuporiframe = null; var documenttowriteto = null; if (opts["printmode"].tolowercase() == 'popup') { popuporiframe = window.open('', 'printelementwindow', 'width=650,height=440,scrollbars=yes'); documenttowriteto = popuporiframe.document; } else { //the random id overcome safari bug http://www.cjboco.com.sharedcopy.com/post.cfm/442dc92cd1c0ca10a5c35210b8166882.html var printelementid = "printelement_" + (math.round(math.random() * 99999)).tostring(); //native creation of element faster.. var iframe = document.createelement('iframe'); $(iframe).attr({ style: opts["iframeelementoptions"]["styletoadd"], id: printelementid, classname: opts["iframeelementoptions"]["classnametoadd"], frameborder: 0, scrolling: 'no', src: 'print preview' }); document.body.appendchild(iframe); documenttowriteto = (iframe.contentwindow || iframe.contentdocument); if (documenttowriteto.document) documenttowriteto = documenttowriteto.document; iframe = document.frames ? document.frames[printelementid] : document.getelementbyid(printelementid); popuporiframe = iframe.contentwindow || iframe; } focus(); documenttowriteto.open(); documenttowriteto.write(html); documenttowriteto.close(); _callprint(popuporiframe); }; function _callprint(element) { if (element && element["printpage"]) element["printpage"](); else settimeout(function () { _callprint(element); }, 50); } function _getelementhtmlincludingformelements(element) { var $element = $(element); //radiobuttons , checkboxes $(":checked", $element).each(function () { this.setattribute('checked', 'checked'); }); //simple text inputs $("input[type='text']", $element).each(function () { this.setattribute('value', $(this).val()); }); $("select", $element).each(function () { var $select = $(this); $("option", $select).each(function () { if ($select.val() == $(this).val()) this.setattribute('selected', 'selected'); }); }); $("textarea", $element).each(function () { //thanks http://blog.ekini.net/2009/02/24/jquery-getting-the-latest-textvalue-inside-a-textarea/ var value = $(this).attr('value'); //fix issue 7 (http://plugins.jquery.com/node/13503 , http://github.com/erikzaadi/jqueryplugins/issues#issue/7) if ($.browser.mozilla && this.firstchild) this.firstchild.textcontent = value; else this.innerhtml = value; }); //http://dbj.org/dbj/?p=91 var elementhtml = $('<div></div>').append($element.clone()).html(); return elementhtml; } function _getbasehref() { var port = (window.location.port) ? ':' + window.location.port : ''; return window.location.protocol + '//' + window.location.hostname + port + window.location.pathname; } function _getmarkup(element, opts) { var $element = $(element); var elementhtml = _getelementhtmlincludingformelements(element); var html = new array(); html.push('<html><head><title>' + opts["pagetitle"] + '</title>'); if (opts["overrideelementcss"]) { if (opts["overrideelementcss"].length > 0) { (var x = 0; x < opts["overrideelementcss"].length; x++) { var current = opts["overrideelementcss"][x]; if (typeof (current) == 'string') html.push('<link type="text/css" rel="stylesheet" href="' + current + '" >'); else html.push('<link type="text/css" rel="stylesheet" href="' + current["href"] + '" media="' + current["media"] + '" >'); } } } else { $("link", document).filter(function () { return $(this).attr("rel").tolowercase() == "stylesheet"; }).each(function () { html.push('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" media="' + $(this).attr('media') + '" >'); }); } //ensure relative links work html.push('<base href="' + _getbasehref() + '" />'); html.push('</head><body style="' + opts["printbodyoptions"]["styletoadd"] + '" class="' + opts["printbodyoptions"]["classnametoadd"] + '">'); html.push('<div class="' + $element.attr('class') + '">' + elementhtml + '</div>'); html.push('<script type="text/javascript">function printpage(){focus();print();' + ((!opts["leaveopen"] && opts["printmode"].tolowercase() == 'popup') ? 'close();' : '') + '}</script>'); html.push('</body></html>'); return html.join(''); }; })(window);
that 1 way define new function default values:
first line creates new "plugin", second line declares default settings new plugin used if no other values have been passed along.
minimized example:
(function (window, undefined) { $.fn['printelement']= function(options) { }; $.fn['printelement']['defaults']= { greeting1: 'hello ', greeting2: 'world' }; $.fn['printelement']['testfunc']= function(target, options){ var opt = $.extend({}, $.fn["printelement"]["defaults"], options); $(target).html(opt.greeting1 + opt.greeting2); }; })(window); $().ready(function() { $().printelement.testfunc('#test', { 'greeting2': 'plugin' }); }); here's jsfiddle code, play around it.
if want read more ways define functions in jquery, read this post
Comments
Post a Comment