Version 1.2.0. April 30, 2010 A huge upgrade + the FORM tools
This library is constantly improving. New tools are introduced and old tools are rewritten or even dropped. New configuration variables are introduced and old ones are removed. Radical changes keep this library on the cutting edge. The downside is that when you do upgrade, things may not always work as expected. It happens in this version and it will happen in future versions too.
The previous version had the handy configuration variable api for accessing the Tools programming API. Many people liked it but not all. After serious consideration I decided to drop it and go with the jQuery "community". Now you'll have to access the api with jQuery's data method. For example:The api configuration variable is still working but is now deprecated. Another common practice for jQuery users is to use the bind method to assign callback methods. For example:
This is now supported. You can also assign callback methods from the programming API just like before. For example:
Read about events in jQuery Tools to learn more details.
A brand new Scrollable
Scrollable has undergone the largest change of all tools. The new scrollable is more than 50% smaller than the previous version! This was possible by changing the whole logic of the tool. The new logic has been greatly simplified. Every time you want to scroll you are advancing one step. There are no pages at all. If you want pages you need to design them with HTML. Here is an example layout for scrollable that has three pages and each page has four items:
And the scrollable is initalized with this call:
The size configuration variable is no longer needed. Now you are free to design your pages and each page can have any amount of items or HTML.
Due to the lack of pages, the following configuration variables were removed: size, keyboardSteps, nextPage and prevPage and the following methods were removed: getPageAmount, getPageIndex, movePage, nextPage, prevPage and setPage.
In the new scrollable, infinite looping is built inside the tool and you enable it with the circular configuration property as follows:
The new circular feature is more solid and is no longer considered as beta.
The new scrollable does not support moving forward or backward if you click on the items. If you want to implement clicking, you need to do it yourself. For example:
Adding new items
Previously, you added items directly with jQuery's append method and called scrollable's reload method. Now there is a new addItem method that you use to add items to the scrollable. It can now be used even with circular scrollables. Examples:
When an item is added the new onAddItem event is fired.
Support for back button
If you use the navigator plugin you have the ability to browse through scrollable items with the browser's back (and forward) buttons. For example:
This feature is added with the history configuration option. It works even for dynamically added items.
The new scrollable is good at guessing whether it is oriented vertically or horizontally by investigating its dimensions. If the height is larger than the width then the scrollable is vertical. You can override this automatic determination with the vertical configuration option.
The item and globalNav configuration variables and onStart event were removed because they were so rarely used and too complex to explain. Such features should not even exist.
The hoverClass option was removed because this feature can easily be added with external scripting as follows:
The reload method was removed. There is no need to reload again. The tool looks for the configuration changes automatically.
The new Tooltip does not require that you create the tooltip element manually. You can simply supply the tooltip in the title attribute and call $(".tooltip_triggers").tooltip();. The tooltips are automatically generated and by default they are assigned the CSS class name tooltip. You can change the default class name with the new configuration option tipClass. You can also supply the whole HTML layout for the generated tooltips by using the new layout configuration option.
If you had previously used the tip: '.tooltip' configuration, simply remove that.
The tip configuration option is only used when you want to use a single tooltip element for multiple triggers.
In previous version you were able to supply the tip and onBeforeShow configuration options as the only argument for the tooltip. This is no longer supported for the sake of simplicity.
The oneInstance and lazy configuration options were removed to make the source code cleaner.
The biggest change in the new overlay is that the overlay positioning is fixed by default. This means that overlay stays still while the screen is scrolled. You can disable this by setting the fixed configuration property to false then the overlay is positioned relative to the document so that when the screen is scrolled then the overlay moves along with the document.
Here is a list of small changes for overlay in 1.2.0:
- Added a new load option. If it is enabled then the overlay loads immediately after it has been initialized.
- Removed the deprecated getContent method. Use getOverlay instead.
- Removed onStart event. use onBeforeLoad instead.
- Removed absolute configuration option. it was rarely needed.
- The expose configuration option is now deprecated in favor of the mask option.
The custom effects load method receives the position as its first argument. For example:
No more Overlay Gallery plugin
The previous jQuery Tools version had an Overlay Gallery plugin for making a "lightbox" type of slideshow. It didn't fit with the rest of the library mainly because of its hard-coded logic. So it was dropped! Something similar can be achieved with the the Slideshow plugin and placing it on Overlay.
The history feature is now enabled with a history configuration option instead of a plugin. For example:
This requires that the history tool is included on the page. The new History tool can be utilized by other tools as well. Now the new scrollable also can take advantage of the browser's back button.
In this version there is no need to initially set a pane visible with CSS using display: block. The tabs automatically clicks on the first pane if all panes are hidden. When using the "fade" effect, if a pane is already visible it is not "clicked" in vain.
Slideshow plugin for Tabs
The new expose is more straightforward. There is no ability to have multiple masks simultaneously making the logic much simpler and the file size smaller. There are two terms being used: mask is a large element that is being placed on top of the document. In the new version this mask is a singleton that you can access with the static variable $.mask. expose is a verb that means placing selected elements on top of the mask. Here is how you work with the new Expose tool:
There are two different calls: mask and expose. The mask method is only available for the document object and you cannot use any other selector. The expose() method can take any jQuery selector and all elements returned by the selector are placed on top of the mask.
The mask is loaded immediately after the expose or mask call. You can supply a different configuration on each call and the latest call is remembered. A subsequent expose call for example will use the previously used configuration if no arguments are given.
You can also use an existing element as a mask. By default the tool uses an element whose id is exposeMask and if it does not exist, then it is created automatically.
The new configuration variable startOpacity defines the initial transparency level of the mask before it starts fading in to the desired opacity as specified by the opacity option. You can, for example, start with full opacity and gradually fade to a semi-transparent mask.
On some occasions the mask did not fill the whole space of the document. Now these rare occasions have been eliminated. When the mask closes, all document listeners are removed making the page one thousand millisecond more responsive.
In the new version you need to move the script below the container:
Upon initialization you can prefix the ID name with #- character. For example #mydiv simulating the syntax of jQuery selectors. For example:
Generated OBJECT code now contains a name attribute along with id attribute. This makes it possible to use ExternalInterface on some older browsers.
The tool no longer checks for Flash versions 6 and below. By the time of writing only 0.08 percent of users on Flowplayer website were using Flash 6 or below. No need to make complex logic for such minority.
Flashembed API changes
- removed flashembed.domReady static function
- removed getHTML API method
- renamed getFlashvars API method to getConf so that it follows the naming of other tools
- renamed getConf API method to getOptions. This returns the embedding options for the Flash object and is much more descriptive name.
- renamed getContainer API method to getRoot
In general Flashembed feels much more similar to other tools in the library. In previous versions it has been more of a black sheep.
- Christopher Vrooman for proof reading my not too perfect English.
- Christian Ebert for trimming the documentation and helping with Github. A special thank you for slice()!
- Stefan Penner for helping out with setting up the Github repositories
- Marko Dumic for helping with a bug in scrollable.