background preloader

How to build a web widget (using jQuery) - Alex Marandon

How to build a web widget (using jQuery) - Alex Marandon
Published on 15 June 2010, updated on 10 February 2015, 110 Comments Introduction I created some web widgets for the London’s Design Museum and learned a few useful things in the process. Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily. The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP. Don’t worry if all this doesn’t make sense to you yet, we’ll see in details what these techniques are used for in the context of building web widgets. That’s really all that a web site owner would need to include our widget on her pages. Can’t it be even simpler? Related:  jQuery

Mon Cahier d'exercices sur jQuery : contenu. 3 reasons why you should let Google host jQuery for you - Encosia All too often, I find code similar to this when inspecting the source for public websites that use jQuery: If you’re doing this on a public facing website, you are doing it wrong. Instead, I urge you to use the Google Hosted Libraries content delivery network to serve jQuery to your users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching. In this post, I will expand upon those three benefits of Google’s CDN and show you a couple examples of how you can make use of the service. Just here for the links? If you’ve already read this post and are just here for the links, you’re in the right place! If you care about older browsers, primarily versions of IE prior to IE9, this is the most widely compatible jQuery version: jQuery 1.x (OldIE support) If you don’t care about oldIE, this one is smaller and faster: jQuery 2.x (smaller, faster, and no OldIE support) Better caching

Things You Might Not Know About jQuery jQuery provides an alternative to the traditional DOM createElement. You get to just write straight up HTML. $("<li/>"); If you wish to modify the element or bind events to it, just use jQuery methods. $("<li/>") .click(function(){}) .attr("id", "test") .addClass("clickable"); In jQuery 1.4 we provided a new way to create an element and then modify it. $("<li><a></a></li>") // li .find("a") // a .attr("href", " // a .html("John Resig") // a .end() // li .appendTo("ul"); Every traversal method creates a new jQuery set and builds a stack. $("<li><a></a></li>"); It can be expensive converting that HTML into DOM nodes. var div = document.createElement("div"); div.innerHTML = "<li><a></a></li>"; var fragment = document.createDocumentFragment(); while ( div.firstChild ) { fragment.appendChild( div.firstChild ); } A document fragment is just a lightweight container that can hold some DOM nodes. someDiv.appendChild( fragment ); // one operation! Item 1Item 2 Item 1Item 2

start jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. jqGrid uses a jQuery Java Script Library and is written as plugin for that package. For more information on jQuery, please refer to the jQuery web site. jqGrid's Home page can be found here. Working examples of jqGrid, with explanations, can be found here. The last development version can be obtained from GitHub JqGrid was developed by Tony Tomov at Trirand Inc., a software development firm based in Sofia. Tony got the idea for jqGrid when he needed an easy way to represent database information in a project. Tony developed jqGrid and made it available for free as a way of making a contribution to the open-source community.

Flexigrid jQuery Grid Plugin jqPlot Charts and Graphs for jQuery Home jQuery: The Write Less, Do More, JavaScript Library