CODEWITHSUNDEEP
jqueryjquery-ui
bozo
bozo

Reputation: 946

JQuery "widget" packaging

I have a JQuery dialog that, after a click on an image, opens a remote IFRAME which contains some server logic (we call this "widget" - unrelated to the same term used by JQuery for special kind of UI plugins). When the process inside IFRAME is done, dialog is closed and the client can continue using the parent page.

Now I need to package this (a few lines of HTML for the "button" image, DIV that initialized JQuery Dialog, JQuery lib and my widget initialization code), so that it can be distributed to many different websites in the simplest possible form. Some of these websites might use JQuery already, and also different versions of it.

My question is what are the best practices for doing this "packaging", and how to package what I wrote about into the simplest possible form (for webmaster, so that he/she can simply copy paste the HTML, and maybe put in a line in HTML page head). I am worried about breaking people's existing websites, and also I am not sure in which initialization block (document.ready, document.load etc.) to put my script.

Any suggestions and your personal experiences with distributing website "widgets"?

Thank you,

Bozo

Upvotes: 1

Views: 268

Answers (1)

Aneon
Aneon

Reputation: 826

If your goal is to make your widget easy to implement on other sites you should put all your javascript and css related to your widget in their own files. This is how most existing jQuery plugins are distributed, so users just have to include an extra javascript and css file in the head of their documents, and maybe add a few lines of HTML. All files used by the plugin (including images) are usually put into the same folder as well, so that it can easily be distributed and installed. Obviously, you also need to include well-written step-by-step instructions if you expect other people to install your widget.

You might want to take a look at some existing jQuery plugins for inspiration: http://plugins.jquery.com/

If you're using jQuery and need code to be run after the page is loaded, you should wrap it in:

$(window).load(function() {
    // Your code here
};

Upvotes: 1

Related Questions