background preloader

Layouts

Facebook Twitter

All About Tables – jQuery Plugin. Yes HTML table tag is not recommended in designing your websites anymore but it is still very useful especially in displaying a tabular data.

All About Tables – jQuery Plugin

In this article I will be featuring a list of jQuery plugins that are utilizing the html table tag. 1. uiTableEdit A jQuery plugin for making tables editable by users. A user clicks on a cell, edits the value, then presses enter or clicks on any cell to save the new value. Sample Code var t = $('table') $.uiTableEdit( t ) // returns t 2. Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features: 3. Drag and drop table rows to reorganise data. onDragStart and onDrop config options allow you to integrate this with Ajax calls to update the server. 4. Usage. Web na ponta do lápis » Grid layout para formulários. Por RamonPage DURANTE ALGUNS DIAS e alguns projetos, estive pensando numa melhor forma de criar meus formulários.

Web na ponta do lápis » Grid layout para formulários

Como de costume, fiz alguns estudos e os coloquei em prática. No final das contas, acabei chegando numa solução que me satisfez e que devo manter como RC para meus formulários por algum tempo, até que novos estudos surjam para o aperfeiçoamento deste. A solução se trata de formulários baseados em grid layout. Usa solução simples, que usa um punhado de CSS e alguns conceitos de acessibilidade para formulários.

Princípios básicos de acessibilidade em formulários Utilizar <label> para o texto descritivo (título) de cada campo;Associar este <label> ao campo à que o título se refere (ex. A idéia veio das tabelas! A solução mais prática para criar formulários acessíveis, seria, então, colocar cada controle um abaixo do outro, formando, assim, um extenso formulário a ser navegado. Pois é, tabelas podem complicar a vida misturando a ordem dos controles na marcação. Criando o grid. CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com. Which Cascading Style Sheet (CSS) layout is best?

CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com

All have their quirks and their unique pros and cons. Is one more accessible than the other? More usable? What are the drawbacks and how are they dealt with? Is one easier to create than the other? Fixed Width Layouts A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution.

This blog is an example of a fixed width site, albeit one that could be easily made fluid or elastic without altering the existing imagery. The Fixed Width Pros The main readable content area is tightly controlled without having to set minimum-maximum width (which isn’t universally supported, anyway).Fixed width layouts are sometimes easier to style depending on the effect you’re after. The Fixed Width Cons Some Fixed Width Advice A Fixed Width Example This fixed-width div is 500 pixels wide. Fluid or Liquid Layouts GrayBit.com is an example of a fluid width site. The Fluid Layout Pros.