最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to include an external plugin inside of another jQuery plugin being authored - Stack Overflow

programmeradmin0浏览0评论

I am building a custom jQuery plugin for a project I am working on. I want to return an object that is custom to another jQuery plugin...rather than having to make sure that each page that uses my plugin also has this other plugin, is it possible to include it in the actual plugin itself?

Rather than type the following on each page that uses my plugin:

<script type="text/javascript" src="url_to_my_plugin" />
<script type="text/javascript" src="url_to_plugin" />

I wanted to see if there is an option that would allow something like:

(function($) {
          $.include('url_to_plugin');
          //code to implement my plugin
})(jQuery);

Thanks for the suggestion Marko... I may be doing something wrong because the plugin I am referencing is not being recognized. Below is my code:

(function($) {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = 'jquery.simplemodal.js'; //in same dir as my plugin
     //tried both
     document.body.appendChild(script);
     document.getElementsByTagName('head')[0].appendChild(script);

     $.fn.SUI_CheckProgress = function(options) {
          return this.each(function() {
               var obj = $(this);
               var nDiv = $('<div>');
               nDiv.modal(); //error nDiv.modal() is not a function
               $(obj).append(nDiv);
          }
     };
});

I tried declaring the script both inside and outside of the actual function call (the ideal is for it to happen globally). I verified the code executes correctly if I reference the script in the page I am calling from, however when I remove the reference it fails. Any additional info on programatically adding scripts to a page would be appreciated.

Fixed: My issue was that I was referencing the same directory as the js plugin, however when it's added to the page it's outside of that directory.

was

script.src = 'jquery.simplemodal.js';

fixed

script.src = 'js/jquery.simplemodal.js';

I am building a custom jQuery plugin for a project I am working on. I want to return an object that is custom to another jQuery plugin...rather than having to make sure that each page that uses my plugin also has this other plugin, is it possible to include it in the actual plugin itself?

Rather than type the following on each page that uses my plugin:

<script type="text/javascript" src="url_to_my_plugin" />
<script type="text/javascript" src="url_to_plugin" />

I wanted to see if there is an option that would allow something like:

(function($) {
          $.include('url_to_plugin');
          //code to implement my plugin
})(jQuery);

Thanks for the suggestion Marko... I may be doing something wrong because the plugin I am referencing is not being recognized. Below is my code:

(function($) {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = 'jquery.simplemodal.js'; //in same dir as my plugin
     //tried both
     document.body.appendChild(script);
     document.getElementsByTagName('head')[0].appendChild(script);

     $.fn.SUI_CheckProgress = function(options) {
          return this.each(function() {
               var obj = $(this);
               var nDiv = $('<div>');
               nDiv.modal(); //error nDiv.modal() is not a function
               $(obj).append(nDiv);
          }
     };
});

I tried declaring the script both inside and outside of the actual function call (the ideal is for it to happen globally). I verified the code executes correctly if I reference the script in the page I am calling from, however when I remove the reference it fails. Any additional info on programatically adding scripts to a page would be appreciated.

Fixed: My issue was that I was referencing the same directory as the js plugin, however when it's added to the page it's outside of that directory.

was

script.src = 'jquery.simplemodal.js';

fixed

script.src = 'js/jquery.simplemodal.js';
Share Improve this question edited Sep 17, 2010 at 2:33 jon3laze asked Sep 17, 2010 at 1:19 jon3lazejon3laze 3,1966 gold badges39 silver badges69 bronze badges 2
  • You don't need make obj into a jquery object twice... use obj.append(nDiv) – Mottie Commented Sep 17, 2010 at 2:29
  • that was actually because the call is embedded inside of an ajax call, I left the ajax stuff out tho to simplify. – jon3laze Commented Sep 17, 2010 at 2:31
Add a ment  | 

2 Answers 2

Reset to default 3

You can also use getScript function from jQuery.

It could be used with callbacks for success and/or failure like:

$.getScript("somejs.js", function(data, textStatus, jqxhr) {
    console.log("callback");    
}

$.getScript("somejs.js")
.done(function(script, textStatus) {
    console.log("done callback");
})
.fail(function(jqxhr, settings, exception) {
    console.log("fail callback");
});      

Or without assigning a callback like:

$.getScript("somejs.js");            

Sure - you can create a new script element and append it to the head.

var script = document.createElement('script');
script.src = 'url-to-plugin';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

If this doesn't work, maybe try the method on this page, it's a slightly different approach using setAttribute.

发布评论

评论列表(0)

  1. 暂无评论