16 popular javascript frameworks

Presenting 16 of the most popular JavaScript frameworks in use today.  In this list contains the usual suspects including jQuery and Mootools. With new additions including Zepo the mobile Javascript Framework which looks  promising as it supports touch features specifically for javascript based smartphone touch interaction. If you’d like to add any additional frameworks to the list, please do so in the comments section below.

jQuery Framework 1. jQuery – Javascript Framework – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Dojo Javascript Framework2. Dojo Javascript Framework –  Dojo’s powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.

3. Sencha Ext JS4 Javascript Framework – A Drawing & Charting engine, Drawing & Charts using DOM-accessible JavaScript charts and vector drawing. CSS3 Animated components in every browser. DOM reduction, speed gains and Grids with Infinity Scroll.

Prototype Javascript framework4. Prototype javascript Framwork -Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

uize javascript Framwork5. Uize Javascript Framework – UIZE is free to use,  supports mobile devices,  skinnable with your own CSS. UIZE is server agnostic – use it with any choice of server language and platform, Java (Apache TomCat), C# (IIS / ASP.NET), Visual Basic (IIS / ASP), C/C++, Perl (Perl / Apache), PHP, Ruby (Ruby on Rails), Python, etc. Includes widgets, slideshow, calendar, date picker, slider, marquee, dialog, menu, mag view, etc. Other powerful features-JavaScript Animation, JavaScript Inheritance, JavaScript Events, JavaScript Modules, JavaScript Libraries, JavaScript Templates, JavaScript Widgets, JavaScript Localization, JavaScript Documentation, JavaScript Code Compression, JavaScript Build Scripts.

qooxdoo javascript framwork

6. Qooxdoo Javascript Framework – – qooxdoo is a comprehensive and innovative framework for creating rich internet applications (RIAs). Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed. It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer. It is open source under an LGPL/EPL dual license. Learn more ..

zepto Javascript framework7. Zepo Javascript Framework – Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. The goal: a 2-5k library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done.

DHTMLX Touch javascript framework8. DHTMLX Touch Javascript Framework – JavaScript Framework for Mobile and Touch Devices. DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices. The framework is compatible with the major web browsers for mobile platforms. Applications built with DHTMLX Touch will run smoothly on iPad, iPhone, Android-based smartphones, and other popular devices. Download the beta and start playing with DHTMLX Touch! More features are coming.

YUI library Javascript framework 9. YUI library Javascript Framework – The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses. YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it’s an industrial-strength JavaScript library for professionals who love JavaScript.

Archetype Javascript framework10. Archetype Javascript Framework – Archetype takes care of loading everything needed by your application, using a transitive dependency loading system, and starts it when everything needed is available. No more error due to code unavailable at the good time, Archetype loads files dependency by dependency, in an efficient way. A file can have several kind of dependencies ( css, templates, javascript ), and you can at any moment alias any dependency to another URL without any needs for a code refactoring, just with one line of configuration : this is perfect for production purpose (static domains, etc.).


11. Rico Javascript Framework – Rico 2.0 extends the component set from the previous versions. The LiveGrid has been expanded to include filtering, column resizing, and many more features. The core of Rico 2.0 has been designed to enable custom components to be more easily built. Take some raw HTML and sprinkle in some behaviors and what do you get? Well in Rico you can easily build an Accordion component like those found in Macromedia Flex and Laszlo. Rico provides several cinematic effects as well as some simple visual style effects in a very simple interface. Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.


Script.aculo Javascript Framwork
12. Script.aculo Javascript Framework – script.aculo.us provides you witheasy-to-use, cross-browser userinterface JavaScript libraries to makeyour web sites and web applications fly.

Javascript MVC Framework13. Javascript MVC Framework – JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

Spry Javascript Framework
14. Spry Javascript Framework – Spry is a JavaScript-based framework that enables the rapid development of Ajax-powered web pages. Not a JavaScript guru? No problem. Spry was designed to feel like an extension of HTML and CSS, so anyone with basic web-production skills can create next-generation web experiences by adding the power of Ajax to their pages. Spry can be used with any server-side technology (ColdFusion, PHP, ASP.Net etc.). By building the front-end of your web application with Spry you enable a more efficient designer-developer workflow by keeping UI separated from back-end application logic.

MooTools Javascript Framework
15. MooTools Javascript Framework – MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. MooTools code respects strict standards and doesn’t throw any warnings. It’s extensively documented and has meaningful variable names: a joy to browse and a snap to understand.

Sproutcore Javascript Framework
16. Sproutcore Javascript Framework – SproutCore is an HTML5 application framework for building responsive, desktop caliber applications in any modern browser, without having to rely on plugins.
Advertisements

DIV Table

先看看xhtml的结构:

<div>
<div class=”row”>
<div></div>
<div></div>
<div class=”three”></div>
</div>
</div>

很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

下来是css:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {

}

解释:

1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格
2.border- collapse:separate;边框独立,就像表格没有合并单元格以前
3.display:table-row;将.row作为表格行tr 显示
4.display:table-cell;将.row的下级div作为表格单元格td显示
5.然后定义宽度

Centering (horizontally and vertically) an image in a box

The code

Putting all together, and naming “wraptocenter” the class of the container, that’s the relevant CSS. Code for IE/Mac is wrapped in a suitable filter. Code for IE7-/Win is put in conditional comments.

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>

.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

And that’s the relevant HTML

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
http://www.brunildo.org/test/img_center.html