DailyJS

jQuery Roundup: 1.7 RC2, jQote2, jquery.factory, Native Fullscreen

01 Nov 2011 | By Alex Young | Tags jquery plugins fullscreen templating

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.7 RC2

jQuery 1.7 RC2 is out, with a Halloween-themed announcement:

In RC2, we fixed a tricky problem that sometimes caused Internet Explorer 8 to go full-zombie when jQuery was loaded. Appropriately enough, the crash was related to creating a detached <body> element that we were using to perform feature detection. IE8 seems frightened to a crashy death when it sees a detached body. If you still see any problems with IE8 crashes, please let us know.

It sounds like IE8 is the new IE7 (which was the new IE6)!

jQote2

jQote2 (GitHub: aefxx / jQote2, License: MIT) by aefxx is a template plugin that works a little bit like .tmpl.

The author has written jQote2 API documentation. I picked out the Fibonacci example because it demonstrates some interesting features of this plugin. Given this HTML:

<ul id="fibonacci">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<script type="text/x-jqote-template" id="template">
    <![CDATA[
    <%= ( ( this.n == 0 ) ?
            0 : ( this.n == 1 || this.n == 2 ) ?
                1 : parseInt($.jqote(fn, {n: this.n-1})) +
                        parseInt($.jqote(fn, {n: this.n-2})) ) %>
    ]]>
</script>

… and this JavaScript:

$(function() {
  var lambda = $.jqotec('#template');

  $('#fibonacci li').each(function(i) {
    $(this).text($.jqote(lambda, {n: i}));
  });
});

then an unordered list displaying the Fibonacci sequence will be displayed for the number of list elements in the template.

Despite having some advanced features, this plugin performs well when compared to other templating plugins. The benchmarks compare Srender, mustache.js, Underscore, jQote2, Tempest, and nano, with Underscore and jQote2 coming out on top.

jquery.factory

jquery.factory by iwyg is a class constructor library. Objects can be created using the factory function that has the following signature:

var MyClass = $.factory(ParentClass, constructorFunction, prototypeObject);

It comes with documentation and unit tests. It doesn’t yet offer much that goes beyond prototypal inheritance, but the author only published it two days ago so perhaps there’s more to come.

Native Fullscreen

In Native Fullscreen JavaScript API, John Dyer writes about the history and current state of browser full screen support, complete with a demo and jQuery plugin.

The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement FullScreen in MediaElement.js HTML5 video player, and it’s working great in Safari 5.1+, Chrome 15+, or Firefox Nightly.

The resulting code can be used like this:

if (fullScreenApi.supportsFullScreen) {
  myButton.addEventListener('click', function() {
    fullScreenApi.requestFullScreen(someElement);
  }, true);
}

blog comments powered by Disqus