jQuery Visualize Plugin: Accessible Charts & Graphs from Table E
Posted by Maggie on 03/12/2010 Topics: accessibility dwpe book jQuery progressive enhancement A while ago, we came up with a technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. We've updated the Visualize plugin — adding ARIA attributes to clarify the chart's role to screen reader users, so they're better informed about which elements contain useful data; and providing two style variations to demonstrate how you can use CSS to customize the charts' appearance. Visualize is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement. How the Visualize plugin works The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization.
jquery-in-place-editor - Project Hosting on Google Code
Dave Hauenstein's Homepage Another In-Place Editor is a jQuery plugin that turns any element or group of elements into an Ajax in-place editor using only one line of code. It’s written using the jQuery Library, which is available free at I saw this on Flickr a while back and I thought it was really great how you can update the title and description of a photo without having to go to an admin page. Esc key will cancel an active editor On blur will by default cause the editor to submit the value to the server. This can be overridden to cancel the submission. It’s extremely easy to implment! Once the in-place editor form is submitted, it sends a POST request to the URL that is specified in the editor’s parameters along with three form fields:
Dynamisez vos tableaux avec jqGrid
Dans un article du blog officiel, j’ai présenté rapidement JQuery comme une librairie facilitant grandement l’utilisation du javascript dans les interfaces html. Cependant, l’un des autres intérêts de JQuery se trouve dans la variété des plugins disponibles (après tout, nous ne sommes pas là pour réinventer la roue). Aujourd’hui, je vais vous présenter jqGrid. Ce plugin permet d’injecter des tableaux dynamiques dans votre page html. Parmi tous les avantages que propose ce plugin, je citerai: la possibilité de redimensionner les colonnes du tableau par drag-&-drople tri et le filtrage des données assurés au niveau du javascriptla pagination des données gérée par le javascriptla possibilité d’alimenter le tableau à partir de données xml ou Jsonles cellules du tableau pouvant basculer en mode “édition” afin d’en modifier le contenu Pour celà, il faut déclarer un élément html vide de type table (une convention de jqGrid). jQuery("#grid_id").jqGrid(options);
Simple CSS - HostM.com Web Hosting
Cascading Style Sheets (CSS) is a good way to specify the styles of fonts and other page elements on your sites. It makes it easier for you to update styles too, because when done right, you only need to make a single change to update the styles on multiple pages and elements. Another bonus is that your visitor's browser needs to load less data per page, helping you reduce your data transfer usage while serving the same information. That means you'll be able to accommodate more site visitors without having to spend more on data transfer. To help you work with CSS, we've created a free tool called Simple CSS, which runs on Mac OS X and Windows. With Simple CSS, you can manage multiple CSS projects and import your existing style sheets.
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.
jQuery: The Write Less, Do More, JavaScript Library
How to Mimic the iGoogle Interface
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. In this tutorial, I'll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications! First, let's list exactly what we'll be creating here and what features it'll have: This interface will contain several widgets.Each widget can be collapsed, removed and edited.The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).The user will be able to edit the color and title of each widget.Each widget can contain any amount of regular HTML content, text, images, flash etc. Please note that we will only be covering the front-end aspect of the project in this tutorial. Since it's all about the user and because the idea was influenced by iGoogle we're going to be calling this project 'iNettuts'. First column: inettuts.js:
Sky CSS Tool
