IT北瓜

本文转自：前端观察，原文地址：http://www.qianduan.net/120-of-the-finest-design-navigation-menu.html

菜单是一个网站最重要的元素之一。菜单必须是用户友好的，而且要与网站设计风格保持一致，这样才能为用户提供简便的导航。

这里你将看到120个非常优秀的水平导航菜单。

目前比较流行的JavaScript框架/库有jQuery，MooTools，Prototype，和YUI。但是除了这些流行的框架，还有很多很好的框架也值得我们去关注。以下列出的是10种被认为很有前途的JavaScript框架。  

1. SproutCore

SproutCore强调自身的独特之处是，具有桌面应用程序的功能（bringing desktop application functionalities on the web.）。

SproutCore官网

SproutCore文档

SproutCore的Google Group

SproutCore 示例: Photos, Sample Controls

2. Spry

Spry是Adode的Ajax框架，Spry的其中一个最显著的特性是与Adobe的产品集成，如Dreamweaver，Flash和AIR。像其它的Adobe的产品一样，它已经有大量的文档。

Spry 示例: Photo Gallery, RSS Reader, Form Validation Widgets

3.  JavaScriptMVC

JavaScriptMVC应用了模型-视图-控制器架构模式，把业务逻辑和表示分离，使得代码更加模块化。

JavaScriptMVC 示例: Error Demo, History Demo, Todo Demo

4.  Qooxdoo

   Qooxdoo是一个面向对象的Ajax应用框架。它使你能够使用JavaScript来构建应用程序，而不用关心HTML，CSS和DOM。而且它是一个很好的图形用户界面的工具（有点像YUI），内建支持键盘，拖动等功能。

Qooxdoo 示例: demo browser, Feed Reader

5. midori

midori是一个轻量的JavaScript框架。即使没有压缩，它也只有45KB，而相比之下，jQuery压缩后也有54KB。不过它的轻量并不意味着它缺乏复杂的JavaScript功能。Midori提供了包括跨浏览器的Ajax功能，CSS选择器等等这些JavaScript框架一般都具有的功能。

midori 示例: drag and drop, popups, toggle

6. Archetype JavaScript Framework

Archetype JavaScript Framework与Prototype有很多共同点。它有一个独立的管理系统，能够只初始化页面需要的组件。而且Archetype强调代码易读性，和HTML/CSS/JavaScript分离的最优方法。

Archetype 示例: Slidy Presentation

7.  June Framework

June Framework从Core library中获取灵感，应用了模块设计模式。如果你使用MS Visual Studio 2008的话，你会爱上它提供的文档，因为它使用了Visual Studio的代码格式。

June Framework 示例: setOpacity, highlight, getKeyName

8. UIZE

UIZE（发音: you eyes）是另一个强调RIA的JavaScript框架。它提供了很多Widget，比如日期选择器，表格过滤器，进度条，颜色选择器等。

UIZE 示例: Slideshow With Wipes, Marquee and Image Port

9. SimpleJS

SimpleJS是一个简单，轻量的，但很特别的JavaScript框架。它提供了Ajax函数和动态效果。它使用一个很像jQuery和MooTools的插件系统，可以很容易地扩展这个框架。对只需要基本Ajax功能和动态效果的开发者来说，它是一个完美的解决方案。

SimpleJS 示例: 官网 http://simplejs.bleebot.com/  右边导航的Functions下

10.  Fleegix.js

Fleegix.js是一个很好的事件系统，使你能够很容易地监听，操作，触发DOM事件。它有一个功能，能够将JavaScript对象序列化为JSON格式(fleegix.jason.serialize)，也有一些丰富的动态效果。

总结：
      这么多的JavaScript框架，肯定有一款适合你或者你的项目的。

本文转自：OurJs

原文地址：http://www.ourjs.cn/show.php?id=465

      众所周知，万恶的IE浏览器向来对W3C标准的支持很让前端开发者头疼！

      ie7-js是一个JavaScript库，使Microsoft Internet Explorer也能表现得像一个符合标准的浏览器。 它修复了许多HTML和CSS问题，并且解决了在IE5和IE6下PNG图片的透明问题。

      项目地址: http://code.google.com/p/ie7-js/
      Demo地址: http://ie7-js.googlecode.com/svn/test/index.html

      使用方法：

      IE7.js——使得IE5-6与IE7兼容

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

      IE8.js——给IE5-7增加一些只有IE8才有的CSS特性

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]—>

      PNG——只会修正以 *-trans.png 命名的PNG图像。可惜,透明的背景图片像不能使用background-repeat平铺,也不可以用background-position定位。

      jQuery， MooTools， Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。

1. Flot

图1

      Flot 是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8， Firefox 2.x+， Safari 3.0+， Opera9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象，目前所有主流浏览器都支持该对象，除了 IE， 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例。

2. JS Charts

图2

      JS Charts 是一个免费的基于 JavaScript 的图表生成器，表格绘制非常简单，几乎不需要编码，也不需要插件和服务器模块，使用XML 或 JavaScript 数组缓存数据。

3. TableToChart

      TableToChart 是一个 MooTools 脚本，可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表，柱状图，曲线图，圆饼图等。

4. PlotKit

      PlotKit 是一个 JavaScript 绘图库，支持 HTML Canvas 标签，也支持 SVG。

5. Yahoo UI Charts Control

图3

      YUI Charts Control 可以在网页上将表格数据转换为图表，支持柱状图，曲线图以及圆饼图。支持 DataSource 工具，可设置的轴，鼠标盘旋提示，图表组合，以及皮肤等功能。

6. ProtoChart

图4

      ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库，这个库深受 Flot， Flotr， Plotkit 等启发，支持曲线图，柱状图，圆饼图等，可以在同一个图表上显示多套数据，支持可定制的图例，网格，边界以及背景图。支持 IE6/7， Firefox 2/3 以及 Safari，甚至支持iPhone.

7. EJSChart

      EJSChart 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制。

图5

8. fgCharting

      fgCharting 是一个很出色的 jQuery 插件，支持多种图形。

9. Pure Css Data Chart

图6

      以往的数据展示往往通过 flash 实现，现在，我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图，甚至不需要 JavaScript。

        本文转自：锐商企业 官方网站
      原文地址：http://www.comsharp.com/GetKnowledge.aspx?Culture=zh-CN&ActivePageMenuName=TeamBlogTimothyPage&KnowledgeID=751&PrintFriendly=true&Keyword=9+%E4%B8%AA%E5%9F%BA%E4%BA%8EJavaScript+%E5%92%8C+CSS+%E7%9A%84+Web+%E5%9B%BE%E8%A1%A8%E6%A1%86%E6%9E%B6

    今天无意中看到的一个JS UI框架，背光JS框架，做得很漂亮，请看下图：

1、Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

北瓜星级：★★★☆

推荐理由：兼容IE6、IE7、IE8、Firefox、Chrome、Safari等主流浏览器、使用简单、不依赖与其他框架、样式美观

存在不足：IE下select效果不起作用、只支持radio/checkbox/select

实例演示：Demo    More Demo

2、prettyCheckboxes, a solution to checkboxes

北瓜星级：★★★★☆

推荐理由：兼容IE6、IE7、IE8、Firefox、Chrome、Safari等主流浏览器、依赖于强大的jQuery、样式美观、有鼠标经过效果

存在不足：IE6、IE7鼠标经过无效果、只支持radio/checkbox

PS说明：与极其强大的prettyPhoto jQuery lightbox clone同于同一作者只手

实例演示：Demo

3、NiceForms

北瓜星级：★★★★☆

推荐理由：兼容IE7、IE8、Firefox、Chrome、Safari等主流浏览器、使用简单、不依赖与其他框架、样式美观、支持radio/checkbox/select/textarea/file/button/input

存在不足：不支持IE6、IE8下radio/checkbox文字有点偏位

实例演示：Demo

4、NiceJForms

北瓜星级：★★★☆

推荐理由：兼容IE6、IE7、IE8、Firefox、Chrome、Safari等主流浏览器、使用简单、依赖于强大的jQuery、样式美观、支持radio/checkbox/select/textarea/button/input

存在不足：Chrome、Safari下textarea/button/input无效果

PS说明：这个是NiceForms的jQuery版、据说与BlockUI插件有冲突

实例演示：Demo

 

***************其他说明***************

虽然还见过不少其他表单美化插件，但有些leeo感觉做得还不是很好，这里只推荐了leeo觉得做得很不错的几个。如果你发现其他优秀的表单美化插件，请你留言推荐！