Bootstrap, from Twitter. Inetapps. 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: UI.Layout - Créez des interfaces web avancées. Jeditable - Edit In Place Plugin For jQuery - Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable. For those in hurry download latest source or minified. For bleeding edge version check GitHub. How does in place editing work? Normal flow is this. Basic usage While reading you might also want to check live demo. <div class="edit" id="div_1">Dolor</div><div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
There is only one mandatory parameter. Code above does several things: Elements with class edit become editable. Not bad for oneliner, huh? Elements with class edit_area will use textarea as input. These two examples cover most of needs you usually have. What is sent to server? When submitting change following data will be POST:ed to server: But wait! Demo. 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);
JQuery and Javascript Coding Examples and Best Practices | JQuery and Javascript Coding Examples and Best Practices Online | Download JQuery and Javascript Coding Examples and Best Practices « Information Technology « Study Aids « Examville.