Tuesday, May 28, 2013

สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI

สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI

source : http://www.ninenik.com/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87_%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B9%81%E0%B8%97%E0%B9%87%E0%B8%9A_Tabs_%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2_%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2_jQuery_UI-215.html

jQuery UI: Tabs Widget

jQuery UI Tabs Widget Tutorial. Tabs is popular technique to show many content in limited area. The UI tabs widget is used to toggle visibility across a set of different elements. Each element containing content that can be accessed by clicking on its heading with appears as an individual tab.
The tabs are structured so that they line up next to each other, whereas the content sections are layered on top of each other, with only the top one visible. Clicking a tab will highlight the tab and bring its associated content panel to the top of the stack. Only one content panel can be open at a time
jQuery UI Tabs Widget Structure Tutorial
The tabs must be created from a list element (ordered or unordered) and each list item must contain an element. Each link will need to have a corresponding element with a specified id that it is associated with the link's href attribute.
01<div id="myTabs">
02    <ul>
03    <li><a href="#a">Tab 1</a></li>
04    <li><a href="#b">Tab 2</a></li>
05    </ul>
06    <div id="a">This is the content panel linked to the first tab,
07    it is shown by default.</div>
08    <div id="b">This content is linked to the second tab and will
09    be shown when its tab is clicked.</div>
10</div>
The following script and CSS resources are needed for the default tab widget instantiation
  • ui.all.css
  • jquery-1.4.2.js
  • jquery.widget.js
  • jquery.tabs.js
Complete code:
01<html>
02<head>
03<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
04<title>jQuery UI Tabs Example 1</title>
05<link rel="stylesheet" type="text/css" href="development-bundle/themes/base/jquery.ui.all.css" />
06<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
07<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
08<script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script>
09<script type="text/javascript">
10    $(function(){
11        $("#myTabs").tabs();       
12    });
13</script>
14</head>
15<body>
16<div id="myTabs">
17    <ul>
18    <li><a href="#a">Tab 1</a></li>
19    <li><a href="#b">Tab 2</a></li>
20    </ul>
21    <div id="a">This is the content panel linked to the first tab,
22    it is shown by default.</div>
23    <div id="b">This content is linked to the second tab and will
24    be shown when its tab is clicked.</div>
25</div>
26</body>
27</html>
jQuery UI Creating Tabs Widget Tutorial       

source : http://www.phpeveryday.com/articles/jQuery-UI-Tabs-Widget-P988.html

Tuesday, May 14, 2013

CSSTableGenerator

http://www.csstablegenerator.com/

50 Useful Tools and Generators for Easy CSS Development


The tools have been sorteds into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms.

Grid and Layout Tools and Generators

The 1KB CSS Grid

This is a fresh take on the CSS grid. It can be used to streamline page templates for content management systems, its mission is to be lightweight.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

Grid Designer 2

Design By Grid PNG Grid Generator

Complete the form, and a PNG image for the grid will be generated, that can be easily used as a background in your PSD or HTML/CSS.

nP: Grid Generator

Use this generator to design a layout structure, specifying column, margin and gutter sizes, all referencing a core unit (in pixels). The resulting css is then ready for use in your next html layout.

YAML Builder

GRIDINATOR

With the gridinator you can generate grids for the 960.gs, Golden Grid, 1KB Grid and you can also generate a basic generic grid.

Grid System Generator

With the Grid System Generator you can generate grids for the 960.gs, Golden Grid, 1KB Grid and you can also generate a basic generic grid.

YUI: CSS Grid Builder

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files.

CSS Grid Calculator

Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets.

Layout generators – www.pagecolumn.com

Generating 1-5 column grid layouts with CSS 2.0 techniques using %, px, or em.

Dynamic 4 Column Layout Generator

CSS Layout Generator – CSS Portal

This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.

templatr

templatr is a Template Generator, with which you can create an individual design for your Blog online. No knowledge of HTML or CSS is required.

CSS Source Ordered 1-3 Columned Page Maker

CSS Creator

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

CSS Optimiser and Styles Generators

Online CSS Optimiser/Optimizer

This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go.

Free CSS Template Code Generator

This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

CSS Builder – Generate Styles on the Fly

This generators intention is to easily generate styles for CSS selectors on the fly. Simply fill in the data form, click build, and copy the code into your stylesheets.

Firdamatic: the Design Tool for the Uninspired Webloggers

Firdamati is an online tableless layout generator that allows you to create and customise layouts easily by completing a simple form, making creating skins for your Firdamatic-based layout a breeze.

WordPress Theme Generator

This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.
Change the colors, settings, layout, preview live, click "save" and download your unique WordPress theme zip-file. Extract, upload, set, and you are done!

CSS Formatter and Optimiser/Optimizer

XHTML/CSS Markup Generator

Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It's main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

CSS Menu Tools and Generators

13 Styles – CSS Menu Generator

CSS Menu Builder

Choose from 30+ horizontal menus, over 700 vertical menus combinations or a breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

Pure CSS Menu.com

CSS Menu Generator

My CSS Menu Generator – Horizontal, Vertical, Drop Down, DHTML CSS Menu

MyCSSMenu provides the average webmaster with tools to create custom, cross browser compatible css menu. The generator makes it easy to create custom web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS.

CSS Menu Generator – Webmaster Toolkit

The CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links.

CSS Menu Generator – CSS Portal

List-O-Matic

The famous and cool List-O-Matic lets you choose the content, layout and presentation of your list-based navigation menus.

CSS Button Tools and Generators

CSS Button and Field Tool

Navigation Tab Menu Generator

CSS Rounded Corners

RoundedCornr: Rounded Corner and Gradient Generator

This generates a basic box with rounded corners. It will create four image files and the necessary HTML and CSS code for you to put rounded corners around your content.

Spiffy Corners – Purely CSS Rounded Corners

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Spiffy Box – Simple Rounded Corner CSS Boxes

Cornershop – Rounded Graphics for CSS Box Corners

CSS Frame Generators

CSS Frame Generator

CSS Table Tools and Generators

CSS Table Generator 0.1

HTML and CSS Table Border Style Wizard

HTML Table Style Generator

CSS Sprite Generators

CSS Sprite Generator

CSSSprites.com

CSS Text and Font Tools and Generators

CSS Type Set

Typetester – Compare fonts for the screen

CSSTXT – Create a style to your text

Css – Text Generator – Insert your style

CSS Forms Tools and Generators

Quick Form Builder

Form Style Web 2.0 Generator


reference : http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/