Including an Individual jQuery UI Plugin or Two - J Query

Problem
You only want to use one or two jQuery UI widgets. You don’t want to import the whole library and an entire theme’s CSS. You just want the minimum required to use the plugins you need.

Solution

So, you only want Sort able and Tabs. You have two options for including individual jQuery UI components rather than the entire suite:

  • Use the jQuery UI Download Builder to create a custom build of jQuery UI containing only those plugins you are interested in. For this example, select Sortable and Tabs. The Download Builder will automatically select any dependencies, in this case, UI Core. The ZIP you download includes a single .js file with UI Core,Sortable, and Tabs:

    Include this file on your page after the jQuery script, which is provided in the same folder:

  • Download the jQuery UI development bundle, reference the development-bundle folder in a custom Download Builder ZIP, or use SVN. Each individual plugin file is in the ui sub folder. Reference each file individually:

    The CSS for each individual plugin is also available in separate files, if you go with the second option(development-bundle). You’ll need to include the core CSS, each pluginspecific
    CSS, and the theme CSS:

    In this case, one of the plugins we’ve selected, Sortable, doesn’t have any pluginspecific CSS.

Discussion

Whether using JavaScript or CSS, there are trade-offs between using a single large include and multiple smaller (overall) includes. It’s not always clear-cut, like “Use individual plugin files in development. Use one large file in production.” For example, it may be simpler in development to point to the whole suite, where performance testing isn’t a big consideration. But then in production you might need to include only the files for the plugins used on each page to minimize load.
On the other hand, for debugging purposes, it may be beneficial to have a script and CSS reference to each plugin file during development, and in production you may use the Google AJAX Libraries API and the visitor’s cache to make up for the file size, even if the file includes functions that are not ever used. The ideal setup will depend on your architecture, how many and which of the plugins you use, and the specific needs of your development and production environments.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics