IT北瓜

      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框架，做得很漂亮，请看下图：

（PS：还是来自于Neo翻译的HTML Dog CSS Tutorials的中文版的内容，假如你有兴趣你可以阅读不良标签和标准要点两篇文章…一口气看完了Neo翻译的HTML Dog CSS Tutorials的中文版HTML和CSS网页标准指南，真的不错，建议各位可以抽空看看~~~）

用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。

你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。

定位

定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。

static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。

relative很像static，但可用top、right、bottom和left属性来偏移原始位置。

absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。

fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。

用绝对定位布局

你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则：

<div id="navigation">
    <ul>
        <li><a href="this.html">This</a></li>
        <li><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
    </ul>
</div>
<div id="content">
    <h1>Ra ra banjo banjo</h1>
    <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
    <p>(Ra ra banjo banjo)</p>
</div>

并且应用如下的CSS：

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
}
#content {
    margin-left: 10em;
}

你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。

实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，你可以为HTML增加“navigation2”块并且应用如下CSS：

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
}
#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 10em;
}
#content {
    margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对定位它们，不如浮动它们。

浮动

浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。

浮动经常用在定位一个页面内的小型的元素（在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参阅伪元素中的:first-letter例子），但同样可以用在更大的块中，比如导航列。

拿下面的HTML例子，你可以应用随后的CSS：

#navigation {
    float: left;
    width: 10em;
}
#navigation2 {
    float: right;
    width: 10em;
}
#content {
    margin: 0 10em;
}

如果你不希望下一个元素环绕浮动对象，你可以使用clear（清除）属性。clear: left将清除左边元素，clear: right将清除右边元素，而clear: both会清除左边和右边。所以，举个例子，你需要一个页面脚注，你可以用id“footer”为HTML增加一个块，然后使用如下的CSS:

#footer {clear: both;}

嗯，你已经搞定了。一个脚注会出现在所有列的下边，不管任何一个列有多长。

/*
注意
我们已经大体上介绍了地位和浮动，着重强调了页面的“大”块，但请记住，这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界、补白和边框，你可以再现任何的版式设计，在布局方面，没有CSS完成不了表格所能完成的的事情。

使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上，高易用性的页面只相当基于表格的页面的一小部分。
*/

      自从Firefox 3.1发布之后，4大浏览器中已有3个支持CSS的text-shadow属性，唯独IE浏览器尚不支持。利用text-shadow可以轻而易举的实现文字的阴影从而产生立体效果。例如：IT北瓜博客的text-shadow为：

h1, h2, h3, h4, h5, h6 {

    font-weight:bold;

    letter-spacing:-0.05em;

    font-family:"微软雅黑",Arial;

    text-shadow: 1px 1px 2px #999;/*这里就是阴影效果*/

}

具体效果见本博客。

      由于IE不支持text-shadow属性，所以这里顺便介绍一款可以在IE下实现阴影效果的jQuery插件Text-shadow in IE with jQuery，但插件的作者也提到了该插件还有一些bug。

      以前做后台管理框架基本都是采用iframe来布局，即便是现在这种布局还有着广泛的应用。众所周知现在不管是前台还是后台都提倡采用DIV+CSS布局，至于这样左右什么好处这里不做阐述，Google一下就能找到一大堆资料。Leeo本人也比较喜欢DIV布局，并且一直在各个项目中努力由表格布局转向DIV+CSS布局。

      我们知道用iframe框架做后台基本上都不用考虑什么高度自适应问题，因为iframe自动会自适应浏览器高度。但是用DIV+CSS来做布局，自适应浏览器高度就成了令人头疼的问题，因为即使你给DIV加上了height: 100%结果你还是发现根本不起作用，DIV依然只显示了其包含的内容的高度。难道是DIV对这样的高度设置根本就不认帐吗？其实不是的，只是因为DIV的高度属性跟它的父元素的高度属性是有关系的，前面说到的高度设置不起作用，其实是因为它的父元素的高度没有做相应设置造成的。

      下面是Leeo我写的一个完美DIV+CSS自适应高度后台框架，这里我之所以给它加上“完美”这两个字，是因为这个布局框架在IE5.5、IE6、IE7、IE8、Firefox、Chrome、Safari各浏览器下均表现完美，直接看代码吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV布局——IT北瓜原创</title>
<style type="text/css">
html,body{
    font: 100% 微软雅黑, 宋体, 新宋体;
    margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
    padding: 0;
    text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
    color: #FFF;
    height: 100%; /*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
    background-color: #000;
}
#layout {
    width: 100%;
    height: 100%;
    margin: 0px auto;
}
#header {
    height: 13%;
    background-color: #09F;
}
#container {
    height: 82%;
   background-color: #CC3;
}
#container #sidebar {
    height: 100%;
    width: 20%;
    background-color: #C03;
    float: left;
}
#container #main {
   height: 100%;
    width: 80%;
    background-color: #CFC;
    float: left;
}
#footer {
    height: 5%;
    background-color: #930;
}
.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
</style>
</head>

<body>
    <div id="layout">
        <div id="header">

        </div>
        <div id="container">
            <div id="sidebar">
            </div>
            <div id="main">
            </div>
            <br class="clearfloat" />
        </div>
        <div id="footer">

        </div>
    </div>
</body>
</html>

实际效果请看这里DEMO

其实W3C很早就制订了实现了CSS圆角的CSS3属性：border-radius，可恨的是现在依旧占据浏览器市场主导地位的IE系列浏览器（甚至最新的IE8）仍然不支持该属性，IE浏览器方方面面的“独树一帜”简直可以让程序员们（尤其是搞前端开发的）痛心疾首。但说到底“存在就有其合理性”，那我们也只有想办法去特殊照顾一下IE们了。

首先，我们简单了解一下CSS3的圆角属性border-radius，主要分为两大系列：Firefox和基于webkit内核的浏览器（Safari、Chrome等）

/*for Firefox*/
-moz-border-radius-topleft;
-moz-border-radius-topright;
-moz-border-radius-bottomleft;
-moz-border-radius-bottomright;

/*for webkit(Safari,Chrome...)*/

-webkit-border-top-left-radius;
-webkit-border-top-right-radius;
-webkit-border-bottom-left-radius;
-webkit-border-bottom-right-radius;

接下来我们来看一个实例在不同浏览器下的实际效果,源码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IT北瓜——纯CSS实现圆角框</title>
<style type="text/css">
    .rounded-box {
        margin: 50px auto;
        background: #000;
        padding: 10px;
        width: 160px;
        height: 50px;
        border: 1px solid #F00;
        -moz-border-radius: 8px;/*简写方式，圆角半径为8px*/
        -webkit-border-radius: 8px;
    }
</style>
</head>

<body>
    <div class="rounded-box"><img src="images/logo.png" /></div>
</body>
</html>

不同浏览器下的实际效果如下，顺序为Firefox、Chrome、IE7

从以上效果图，我们可以清楚的看出，在Firefox下实现的圆角效果是最完美的，圆角很圆滑，而在Chrome下则会产生锯齿，IE下就跟不用说了，根本没有圆角效果。实际页面效果请在不同浏览器下浏览该页面：CSS Rounded Box Demo

那么，现在我们就利用CSS来模拟一下兼容各浏览器的圆角效果（当然这是为了兼容IE浏览器），源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IT北瓜——纯CSS实现圆角框For IE</title>
<style type="text/css">
    .rounded-box {
        margin: 50px auto;
        padding: 10px;
        width: 160px;
        height: 50px;
    }
    .rounded-box .r1,.rounded-box .r2,.rounded-box .r3,.rounded-box .r4 {
        background-color: #000;
        display: block;
        height: 1px;
        overflow: hidden;
        font-size: 1px;
    }
    .rounded-box .r2,.rounded-box .r3,.rounded-box .r4 {
        border-width: 0 1px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
    }
    .rounded-box .r1 {
        margin: 0 6px;
    }
    .rounded-box .r2 {
        margin: 0 3px;
    }
    .rounded-box .r3 {
        margin: 0 2px;
    }
    .rounded-box .r4 {
        margin: 0 1px;
        height: 2px;
    }
    .rounded-box .rounded-box-ie {
        background: #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        padding: 0 5px;
    }
</style>
</head>

<body>
    <div class="rounded-box">
       <span>
           <span class="r1"></span>
           <span class="r2"></span>
           <span class="r3"></span>
           <span class="r4"></span>
       </span>
       <div class="rounded-box-ie"><img src="images/logo.png" /></div>
       <span>
           <span class="r4"></span>
           <span class="r3"></span>
           <span class="r2"></span>
           <span class="r1"></span>
       </span>
    </div>
</body>
</html>

效果如下，各浏览器效果一致：CSS Rounded Box In IE

OK，就这样，欢迎给我留言，( ^_^ )/~~拜拜

忙碌的一天就这么过了，但睡觉前还是要把北瓜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文件”)} 一句插入里面即可。