Programatori.info

web programming blog

Archive for category jQuery

jQuery Mobile Alpha 3 released

Mar 5

Posted by Web Design CLuj in Front Page, jQuery, Mobile, WEB 2.0 | No Comments

jQuery Mobile Alpha 3 increases browser support to include Firefox Mobile, Opera Mobile / Mini. Improvements reported on support for iOS, Android, BlackBerry 6, and Palm WebOS. Moreover, the Ajax navigation system has been …

deeply re-factored to improve performance and handle more edge cases. This includes event handling for click, submit, and hashchange, all of the base tag management, path management, active link class handling, etc. and better support for dialogs.

Individuals have noted some breaking changes  relative to early revs.

jQuery Mobile Alpha 3 released

Mar 5

Posted by Web Design CLuj in Front Page, jQuery, Mobile, WEB 2.0 | No Comments

jQuery Mobile Alpha 3 increases browser support to include Firefox Mobile, Opera Mobile / Mini. Improvements reported on support for iOS, Android, BlackBerry 6, and Palm WebOS. Moreover, the Ajax navigation system has been …

deeply re-factored to improve performance and handle more edge cases. This includes event handling for click, submit, and hashchange, all of the base tag management, path management, active link class handling, etc. and better support for dialogs.

Individuals have noted some breaking changes  relative to early revs.

jQuery Data Binding, Templates, and Mobile: John Resig at FOWA

Oct 5

Posted by Web Design CLuj in Front Page, JavaScript, jQuery, WEB 2.0 | No Comments

Here's a live blog from jQuery creator John Resig's talk at FOWA, where he's giving us an update on the new toys from the jQuery team.

Data Link

jQuery already supports a data API:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $("div").data("test", 5);
  3. $("div").data("test")===5;
  4. $("div").removeData();
  5.  

This is better than attaching data directly to data nodes for various reasons, e.g. storing non-string data and improving performance. And it also avoids memory leaks - when you remove an element, jQuery removes everything. Looking towards jQuery 1.4.3, the project had to decide if they want to remove data events, and they decided to keep them and make them more useful.

The new data linking plugin, developed in conjunction with Microsoft and released yesterday, supports binding between DOM objects and elements. Binding from an object to a form element looks like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var user = new User();
  3. $("form").link(user, {
  4.   firstName: "first-name",
  5.   lastName: "last-name",
  6. });
  7.  

Whenever "first-name" or "last-name" elements are updated, the form element is updated. You can also bind in the opposite direction, so that a form element changes when you change an object.

More info on GitHub.

Templating

Templating has become a big deal in Javascript, and there's now an official jQuery templating plugin, also released yesterday, which John tells me has a good chance of being integrated into the core at some point. John told me his original Micro-Templating library was considered at one point, but the new templating is more refined.

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $("#test").append("<li><em>${name}</em></li>", "john");
  3.  

Pre-compiling template strings is possible too:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var data = { firstName: "John" };
  3. $("#item").tmp(data).appendTo("ul");
  4. <script id="item" type="text/html">
  5.   <li>$(firstName}</li>
  6. </script>
  7.  

The most interesting feature is that elements retain the data that made them - you can ask an element "what data did you come from"?

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var lastTemplateItem = $(".movieName:last").tmplItem();
  3. var movie = lastTemplateItem.data;
  4. var htmlNodes = lastTemplateItem.nodes;
  5.  

John argues that developers try to create too much abstraction between HTML and the data model. At least in the client, the DOM "is everywhere" and you should be okay with storing your data against it.

More info on GitHub.

jQuery Mobile

jQuery Mobile, under development, aims for broad mobile browser support, which also means a high regard for progressive enhancement. John explains the need to target multiple mobile browsers by focusing on BlackBerry. Why support BlackBerry? Among other things, BlackBerry mobile traffic is rising (he shows this stat of 10% growth in the past 12 months), your boss probably views your apps in it, and targeting one mobile browser is like targeting one desktop browser. (i.e. wrong.)

With most mobile browsers, there's a big problem: You can't do fixed positioning - John says it's just been added in Android 2.2, but not there in earlier Android, iPhone, etc. Some frameworks have done the complete simulation of scrolling to get around this, but it leads to massive amounts of code and doesn't work right - the subtle UI issues it causes are very noticeable.

Considering it unacceptable to simulate scrolling, jQuery Mboile always uses native scrolling. e.g. to show a select menu, it simply hides the rest of the page and makes the select list occupy the entire page.

There are toolbars available - user clicks to show and hide them, and it works nicely because it supports native scrolling. While you're scrolling, the toolbars are hidden, and they show again when the scroll action is complete (if they were cvisible before the scroll action began).

Developers can detect the various touch events:

taphold
tap
swipeleft
swiperight
swipe

Web Roundup

John finishes off with some highlights on the web in general: