IT北瓜

目前比较流行的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框架，做得很漂亮，请看下图：

      kindeditor一款我很喜欢的国产轻量级富文本编辑器，但在结合jQuery UI Dialog组件使用时却发现一种奇怪的现象——利用表单中的按钮可以正确提交编辑器中输入的数据，但是通过Dialog组件的按钮事件却得不到编辑器中输入的数据，具体情况阐述如下：

      第一步：配置kindeditor和创建Dialog

      1.主页面中引入kindeditor.js并做初始化工作（PS：这里leeo使用的是jQuery的load()方法来载入放置编辑器的页面kindeditorTest.html的，因此不能直接利用KE.show()方法创建编辑器），代码如下：

<script type="text/javascript" charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script type="text/javascript">
  KE.init({
      id : 'content',
      cssPath : 'kindeditor/customer.css'
  });
</script>

      2.制作kindeditorTest.html页面，（PS：这里kindeditorTest.html只是作为一个html片段载入到主页面中，所以省去了不必要的html标签）代码如下：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" rel="stylesheet">
  form {
      margin: 5px;
  }
  .editor {
      margin-top: 5px;
      margin-bottom: 5px;
  }
</style>
<form id="kindeditorTest" name="kindeditorTest" method="post" action="">
  <div>
      <label>标题：</label><input name="title" value="" />
  </div>
  <div>
      <textarea name="test" style="width:650px;height:50px;"></textarea>
  </div>
  <div class="editor">
     <textarea id="content" name="content" style="width:650px;height:200px;"></textarea>
  </div>
  <input type="submit" id="submitBtn" name="button" value="提交内容" />
</form>

      3.javascript代码：

function kindeditorFun(){
	$('#dialogTest').dialog({
		title: 'kindeditor测试窗口',
		bgiframe: true,
		width: 680,
		heighe: 440,
		modal: true,
		autoOpen: false,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'关 闭': function(){
				hideDialog();
			},
			'提 交': function(){
				$('#kindeditorTest').submit();
			}
		},
		open: function(){
			$('#dialog-content').html('<div id=\"loading-msg\"><img src=\"images/ajax-loader.gif\" />加载中...</div>')
								.load('kindeditorTest.html', function(){
									KE.create('content');
									ajaxForm('kindeditorTest');
								});
		}
    });
	$('#dialogTest').dialog('open');
}
function ajaxForm(_formid){
	var options = {
    		url: 'jsonFilm!kindeditorTest.action',
		    dataType: 'json'//,
		    //beforeSubmit: validateAddFilm,
		    //success: showResponseAddFilm
	    };
    $('#' + _formid).submit(function() {
	    $(this).ajaxSubmit(options);
	    return false;
	});
}

      4.java代码：

private transient String title;
private transient String test;
private transient String content;

public String kindeditorTest() throws Exception{
	System.out.println("标题: " + title);
	System.out.println("无编辑器textarea: " + test);
	System.out.println("有编辑器textarea: " + content);
	return SUCCESS;
}

public String getTitle() {
	return title;
}

public void setTitle(String title) {
	this.title = title;
}

public String getTest() {
	return test;
}

public void setTest(String test) {
	this.test = test;
}

public String getContent() {
	return content;
}

public void setContent(String content) {
	this.content = content;
}

      5.Dialog窗口如下图：

      第二步:开始测试

      1.点击“提交”按钮，控制台输出结果如下：

      2.点击“提交内容”按钮，控制台输出结果如下：

    3.比较以上两个结果，发现利用表单中的按钮可以正确提交编辑器中输入的数据，但是通过Dialog组件的按钮事件却得不到编辑器中输入的数据。从以上所有实现代码来看这两个按钮的功能是一样的，但怎么会出现不同的结果呢？很让leeo我无法理解。于是便又到kindeditor网站看相关文档和实例，这回实例5——手动添加Onsubmit事件，引起了我的注意，难道是手动加载和自动加载导致出现以上不同的结果？

      第三步：开始测试“手动添加Onsubmit事件”

      1.修改相应代码：

      1）第一步1.中的KE.init()设置autoOnsubmitMode : false

      2）第一步3.中的$(’#’ + _formid).submit添加编辑器赋值方法KE.util.setData(’content’)

      2.再次测试结果，发现这回第二步中的2种方式都能正确获得相关数据。问题总算得以解决，这个问题真的困扰了我许久，花了不少时间去调式。在这里记录下来希望对遇到同样问题的coder们有所帮助。。。

在很多情况下，比如：做产品展示，我们都会显示一张产品的图片，但某个产品暂时没有图片时就显示一张预设好的默认图片。以前的做法通常是默认图片也跟产品的图片一样保存在数据库的表字段中作为该字段的默认值。但假如某一产品本来有产品图片的（默认值已经改变了），只不过由于什么原因该产品对应的图片被删除了，但数据库表字段依然保存着它的产品图片路径，这时候显示的时候找不到相应的图片文件，图片就会显示成一个“X”，这样很影响视觉效果。这种情况下我们就可以利用js来显示一张默认图片替换掉这个“X”，代码很简单：

<img src="pro-pic/123.gif" onerror="javascript:this.src='pro-pic/default.gif'" />

忙碌的一天就这么过了，但睡觉前还是要把北瓜Update一下的，另外，今晚收到一个喜讯，至于喜讯的内容嘛，这里就不公布啦！Ok，进入正题。

如果你自己做过网页，那么我想你一定知道当点击一个超链接的时候会出现一个矩形虚线框，个人觉得那样看着心里挺别扭的，也有些影响美观，以下就总结一下去掉虚线框的几种方法：

方法一：利用javascript的onfocus事件：

<a href="#" onfocus="this.blur();">链接</a>

假如你的页面引入了jQuery框架（PS：我最喜欢的js框架）则可以利用它的事件绑定机制：

$('a').bind('focus', function(){
    if(this.blur){ //如果支持this.blur
        this.blur();
    }
});

方法二：利用css样式：

a{
    blr: expression(this.onFocus=this.close());
} /* 只支持IE，过多使用效率低 */
a{
    blr: expression(this.onFocus=this.blur());
} /* 只支持IE，过多使用效率低 */
a:focus {
    -moz-outline-style: none;
} /* IE不支持 */
:focus {
    outline: none;
} /* for Firefox */

方法三：利用标签属性，仅支持IE：

<a href="#" hidefocus="true">链接</a>

方法四：利用Web行为

IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX控件）来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里提供了几个定制的Web行为：WebService行为。

将以下代码保存为.htc后缀的文件：

<public:attach event="onfocus" onevent="quit()" />
<script language="javascript">
    function quit(){
        this.blur();
    }
</script>

然后，在需要去除超链虚框的页面的<head>和</head>之间加入：

<style type="text/css">
    a {behavior:url("htc文件")}
</style>

如果页面已经有了style标签，则只需要将 a {behavior:url(”htc文件”)} 一句插入里面即可。