代码如下：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

新加了禁止选择文本的功能。其中，前二句对WebKit内核浏览器(Safari、Chrome、iPhone、iPad、Android等)有效，后二句对Gecko内核的浏览器(Firefox等)有效。

看来真该花些时间学学CSS3了。

点击此处查看本实例的效果。是不是和http://www.riafan.com/default.asp?id=224很相似呀？

是的，连算法都很相似。这里的所有日期标签是用axis.ticks数组来管理的，同样在一种日期格式下，当前标签与下一日期标签和上一标签的文本不相同时才显示出来。请参考下面代码：

else if (o.mode == 'timeEx') {
  var data = hitData;
  var tu = Flotr.Date.timeUnits,
  span = data[axis.max][0] - data[axis.min][0];
  $H(tu).each(function(pair) { 
    var v = Math.floor(span/pair.value);
    // less than 3 times
    if(0 < v && v < 72){
      t = Flotr.Date.timeUnits[pair.key];
      axis.tickUnit = pair.key;
    }
  });  
  tick_dateFormat = Flotr.Date.getFormat(t, span); 
  // store all possible ticks.
  var preLabel;
  var nextLabel;
  var r = axis.max - axis.min; 
  for(i = 0; i < r; ++i){
    preLabel = o.tickFormatter(i);
    nextLabel = o.tickFormatter(i + 1);
    if(nextLabel != preLabel)
      axis.ticks.push({ v: i + 1, label: nextLabel });
  }
}

当两个日期标签间隔太近容易重叠时，我们也用了类似方法来移除，只不过在Flex中参照间距是相对的，而此处是绝对的。如下面代码：

//filter the labels
var len = axis.ticks.length;
if(len > 4){
  var preTick;
  var nextTick;
  for (i = len - 1; i > 0; i--) {
    preTick = axis.ticks[i - 1];
    nextTick = axis.ticks[i];
    //remove the middle label
    if(nextTick){
      if(axis.d2p(nextTick.v) - axis.d2p(preTick.v) < 8 * preTick.label.length){
	axis.ticks.splice(i - 1, 1);
      }
    }
  }
}

使用方法很简单，将xaxis的mode指定为自定义的线性轴就行了。另外，本实例中不得不命名两个全局的变量hitData和tick_dateFormat，为了简单我们在flotr.js中引用了它们。当然，你可以将它 们封闭到flotr.js中。

点击此处查看本实例的效果。以Yahoo股票为例，页面加载完成后会绘制当天的收盘价格图。切换到不同的时间范围会重新绘制相应的图表。下面说一下基本流程。

一、知识准备

• 对Flotr有所了解，可以参看我上一篇文章：Flotr快速入门指南；
• 对prototype框架有所了解，尤其是Ajax和事件部分。Flotr整个库就是基于prototype框架的，本实例也会用到它。

二、数据准备

本实例是使用Ajax从http://chartapi.finance.yahoo.com/instrument/1.0/抓取的Json数据，数据格式如下：

{"data":[":[[1324287010000,14.9300],[1324287119000,14.9500]...]}

本实例只绘制一个数据系列，组成数据系列每个数据点对应一个x和y坐标的数组。其中，x坐标表示自1970年1月1日午夜（通用时间）以来的毫秒数，y坐标表示该时间的收盘价。

三、绘制图表

使用document的observe()方法侦听“dom:loaded”事件，以便加载完dom后调用updateChart方法绘制当天的收盘价格图。代码好下：

var f = null; 
document.observe('dom:loaded', function(){
    updateChart("1d", 10);
});

updateChart有两个参数。第一个参数表示当前的时间范围，如“id”、“5d”、“1y”等。另一个参数表示刻度线数量。

function updateChart(range, noTicks){
    new Ajax.Request('stock.aspx?symbol=YHOO&range=' + range, {
        method:'get',
        onSuccess: function(transport){
            var json = transport.responseText.evalJSON();
            if(json.data){
                ...
	        f = Flotr.draw($('container'), [json.data], options);
            }else{
	        $('container').update('The data could not be retrieved.')
            }
        }
    });
}

代码中选项设置比较多，如设置折线图填充为渐变色['#618192', '#749AAF']，其实这就和Flex Chart组件的区域图差不多。

四、更新图表

最后我们在时间范围按钮的onclick事件中调用updateChart()方法，通过Ajax重新获取数据，重绘相应的图表。其实，也可以使用按钮的observe()方法，在侦听click事件中回调updateChart()方法来实现图表更新。

注意事项：

• 本实例中x轴使用了时间轴，从而简化了应用。但是当时间范围为五天时，会在当天与下一天之间绘制一大段多余的连接线。这不是什么Bug，与时间轴的算法有关。Flex Chart组件的时间轴也有这个问题。可以用线性轴或通过后台计算显示设置刻度线来修正这个问题，下次再聊这个话题吧。
• 在显示数据点提示时，时间应该是本地时间。

更多了解Html5 JavaScript图表库：

• amCharts
• Jqchart
• Flot
• Rgraph
• Zingchart

准备HTML

要使用Flotr，你得在header标签中包含如下脚本：

<!--[if IE]><script language="javascript" type="text/javascript" src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="path/to/prototype-x.x.x.x.js"></script>
<script language="javascript" type="text/javascript" src="path/to/flotr.js"></script>

第一个script标签包含了一个html条件语句， 这样可以确保只有在用户使用IE时才包含excanvas javascript文件。Firefox、Safari和Opera 9 支持canvas标签来绘制2d图形。IE有一些类似于canvas标签的东西，叫VML。Excanvas为IE增加了canvas功能，但其它浏览器不需要它。

现在我们已经包含了javascript文件，还需要一个div元素来显示图表。Flotr在绘制时插入两个canvas标签到此div中。第一个canvas标签用来绘制背景网格、轴和图表，第二个canvas标签用作重叠显示用户交互。

设置容器div的宽高是非常重要的，可以使用内联的样式属性，或者css规则来实现。一个容器div的实例：

<div id="container" style="width:600px;height:300px;"></div>

所有需要的html就这些。当然，你可以为各种各样用Flotr创建的图表设置样式。详见CSS章节。

准备Javascript

与Plotr不同，Flotr的语法极其简单。绘制图表仅需调用Flotr.draw(element, series, options)就行了， 其参数为：

• element: 容器元素
• series: 系列数组
• options: 可选的选择对象

Flotr (数据)系列

Flotr可接受的数据由系列数组组成，如：

[ serie1, serie2, ... ]

系列可以是原生数据或属性对象。原生数据的格式为x和y坐标的数组：

[ [x1, y1], [x2, y2], ... ]

通过传递一个对象，你也可以传递系列为指定选项：

{
    color: 颜色或数字,
    data: 原生数据,
    label: 字符,
    lines: 特定的lines选项,
    bars: 特定的bars选项,
    points: 特定的points选项,
    mouse:  鼠标追踪选项,
    shadowSize: 数字
}

这样的系列对象可能是：

{
    data: [ [1, 2], [2, 4], [3, 6] ],
    label: "y = 2x",
    lines: {fill: true},
    points: {show: true}
}

下面实例实现了javascript怎样绘制两个系列，代码可能如下：

// Execute this when the page's finished loading
var f = Flotr.draw(
	$('container'), [
	{ // first series
	    data: [ [0, 0], [1, 2], [2, 4], [3, 6], [4, 8] ],
	    label: "y = 2x",
	    lines: {show: true, fill: true},
	    points: {show: true}
	},
	{ // second series
	    data: [ [0, 2.5], [1, 5.5], [2, 8.5], [3, 11.5], [4, 14.5] ],
	    label: "y = 2.5 + 3x"
	}]
);

图表将会插入到id为'container'的元素中。第一个系列由一条带有特定坐标（数据属性）点的线组成。当指定系列标签时，会为图表自动添加图例。第二个系列中是一条功能为'y = 2.5 + 3'的直线。了解更多数据系列，参看'传递数据给Flotr'。

效果图表

选项对象

Flotr.draw()的第三个参数为一个可选的属性对象，该属性可以覆盖图例、网格、线、轴等的默认属性：

{
    colors: 颜色或数字数组,
    legend: 特定的图例,
    xaxis: 特定的xaxis选项,
    yaxis: 特定的yaxis选项,
    grid: 特定的grid选项,
    lines: 特定的lines选项,
    bars: 特定的bars选项,
    points: 特定的points选项,
    selection: 鼠标选择选项,
    mouse: 鼠标追踪选项,
    shadowSize: 数字
}

所以说选项对象会覆盖默认属性，但轮到那些选项时，却被系列对象定义的选项所覆盖。

更多资源：

• 官网：http://solutoire.com/flotr/
• 帮助文档：http://solutoire.com/flotr/docs/
• 示例：http://phenxdesign.net/flotr/examples/prototype/
• 案例：http://www.humblesoftware.com/finance/index

下面是我们简单绘制图表的步骤：

• 创建2D画布context对象
• 绘制X轴
• 绘制Y轴
• 基于数据绘制路径

我们需要理解如何在画布上元素绘制多个点。在X轴从左边0开始，向右移值增加，y轴从0开始的顶部，向向下移值增加。如下图：

让我们将画布放置在页面上。

<canvas id="canvas" width="180" height="105">
  Your browser does not support the canvas element.
</canvas>

要在画布上绘图，我们需要使用JavaScript引用canvas元素。我们用init（）函数实现这一功能并在初始化时调用它。

function init() {
    canvas = document.getElementById("canvas");
    if(canvas.getContext)
    {
      ctx = canvas.getContext("2d");
      draw();
    }
}

首先，我们通过canvas的id搜索DOM元素得到画布元素，然后新建了一个画布context对象，该对象可以在JavaScript内部完成绘制工作。 context对象包含在画布上绘图的基本方法，比如arc(), lineto() 和stroke()。

然后调用draw()函数来绘制图表。

function draw() {
    clear();
    drawaxes();
    plotdata();  
}

我们调用clear()函数，该函数使用clearRect()方法来清除一个与画布同样大小矩形。清除的矩形的两个对角设置为（0,0）和（宽，高）。宽度和高度与画布上的宽度高度相同。你可以很容易部分清除画布，但我们想要的是清空画布。

function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

接下来，使用drawaxes()函数在画布左侧和底部绘制X轴和Y轴。

function drawaxes(){
    ctx.strokeStyle = "black";
    ctx.beginPath();
    /* y axis along the left edge of the canvas*/  
    ctx.moveTo(0,0);  
    ctx.lineTo(0,105);
    ctx.stroke();  
    /* x axis along the bottom edge of the canvas*/  
    ctx.moveTo(0,105);  
    ctx.lineTo(180,105);
    ctx.stroke();  
}

context对象的strokestyle属性设置成想要的笔触颜色，在使用stroke()方法绘制路径时会用到它。

ctx.strokeStyle = "black";

然后我们从新建的路径开始绘制。

ctx.beginPath();

现在，我们利用创建的新路径，使用stroke方法绘制Y轴。

/* y axis along the left edge of the canvas*/  
ctx.moveTo(0,0);  
ctx.lineTo(0,105);
ctx.stroke();

同样的方法绘制X轴。

/* x axis along the bottom edge of the canvas*/  
ctx.moveTo(0,105);  
ctx.lineTo(180,105);
ctx.stroke();

下一步，在draw()方法中调用plotdata()方法。

function plotdata() {
    ctx.strokeStyle = "rgb(0,0,165)";
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.lineJoin = "miter";
    ctx.moveTo(0, HEIGHT - (temps[0]));
    j = 1;
    for (var i in temps) {
        ctx.lineTo(j * 30, HEIGHT - (temps[j]));
        ctx.stroke();
        j++;
    }
}

同样，设置context对象的strokestyle属性，从新建路径开始绘制。

ctx.strokeStyle = "black";
ctx.beginPath();  

移至坐标原点。从顶部至底部Y轴值下降，但打算我们顶端表示数据的最小值，底端表示数据的最大值，因此我们使用如下公式：

ctx.moveTo(0,HEIGHT-(temps[0]));

这个公式有效地反转温度值，因此距离底部80像素，而不是距离顶部80像素。现在，我们遍历其它的温度值并在每个相邻值之间画一条线。

j = 1;
for (var i in temps) {
    ctx.lineTo(j * 30, HEIGHT - (temps[j]));
    ctx.stroke();
    j++;
}

我们使用j * 30，每个数据点间距为30像素，而不是7像素，这样才有足够的空间。

点击此处查看本实例的效果。

进入每个视图都会弹出一个Alert窗口，点击Open按钮也会弹出Alert窗口。该组件是用PopUpManager来实现Alert窗口打开和关闭的，因为本人更喜欢Flex Web中的Alert组件的静态方法，比用new关键字来创建简捷一点。

这是在HTC上运行效果图：

可以看到，横向旋转手机时，Alert窗口依然是居中的。

感兴趣的话，点击此处下载源码。

代码不难，有几点要指出一下：

1. 用resize事件实现了Alert窗口重新居中显示，不知道为何用orientationChange事件来实现不会成功。
2. show()方法有四个参数，分别表示Alert窗口的标题、消息、容器对象和是否为模态窗口。
3. 考虑到切换主视图时要清除前一个视图中所有的Alert窗口，因此加了一个removeAll()方法，对每个视图viewDeactivate事件不得不调用该方法，这点比较麻烦。
4. 该组件由AlertForm.mxml实现界面，很轻量，在窗口关闭时没有回调方法也不能返回函数。需要更高级的功能可以自行扩展。

@media规则是 CSS 规范的一部分；Flex 扩展了此规则，将额外的属性application-dpi和os-platform包括进来。通过这些属性，可以根据应用程序DPI和运行应用程序的平台来选择性地应用样式。

Flex支持两种CSS选择器。第一种针对操作平台。下面的代码演示了在不同平台下为标签选择不同的字体颜色。

@namespace s "library://ns.adobe.com/flex/spark"; 
@media (os-platform: "IOS") { 
  s|Label 
  { 
    color: red; 
  } 
} 
@media (os-platform: "Android") { 
  s|Label { 
    color: blue; 
  } 
}

第二种针对DPI。下面的代码演示了在不同DPI下为按钮选择不同的字体大小。

@namespace s "library://ns.adobe.com/flex/spark"; 
@media (application-dpi: 160) { 
  s|Button { 
    fontSize: 10; 
  } 
} 
@media (application-dpi: 240){ 
  s|Button { 
    fontSize: 11; 
  } 
} 
@media (application-dpi: 320){ 
  s|Button { 
    fontSize: 12; 
  } 
}

另外，@media规则还支持运算符and和not。同时还支持以逗号分隔的列表。如果以逗号分隔表达式，意味着各项之间是or的关系。

移动触摸屏设备的应用程序与桌面和浏览器应用程序有以下不同之处：

为了通过触控输入实现简便的操作，手机组件通常具有比桌面或浏览器应用程序中更大的点击区域。

• 在触摸屏设备上，滚动等操作的交互模式不同。
• 由于屏幕区域有限，因此手机应用程序通常设计为在屏幕上同时只显示少量的用户界面。
• 用户界面的设计必须考虑不同设备之间屏幕分辨率的差异。
• 相较于桌面设备，手机和平板电脑的CPU和GPU性能更为有限。
• 由于移动设备上可用内存有限，因此应用程序必须注意节约内存。
• 手机应用程序可以随时（例如在接听电话或短信时）退出和重新启动。

自定义Javascript对象最简单的办法就是创建一个Object的实例，然后为它添加属性方法。看下面代码：

var person = new Object();
person.name = 'Jim';
person.age = 30;
person.job = 'IT';
person.sayName = function(){
	alert(this.name);
};

显然，这种方式会产生大量重复代码。为解决这一问题，通常可以用工厂模式。

一、工厂模式

这种模式采用了软件工程中的工厂设计模式的思想。看下面代码：

function createPerson(name, age, job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	};
	return o;
}
var person1 = createPerson('Jim', 30, 'IT');
var person2 = createPerson('Tom', 27, 'Doctor');

工厂模式虽然解决了重复代码的问题，但与创建Object实例方式一样，没解决对象类型的问题。于是，构造函数模式出现了。

二、构造函数模式

Javascript中有一个很重要的概念：函数是对象，函数名实际上是一个函数对象指针。创建算自定义函数，从而添加自定义的属性方法。改写前面的代码：

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = function(){
		alert(this.name);
	};
}

var person1 = new Person('Jim', 30, 'IT');
var person2 = new Person('Tom', 27, 'Doctor');
alert(person1 instanceof Person); //true

创建自定义函数意味着可以将函数名作为自定义对象类型，这也是构造函数模式优越于工厂模式之处。然而这种模式也缺点。因为函数是对象，因此自定义函数是的方法也应该是对象，对象属于引用类型，因此：

alert(person1.sayName == person2.sayName); //false

我们在一个构造函数中用两个方法去完成相同的任务，显然会带来内存的额外开销。

三、原型模式

为了共享自定义对象的属性方法，引入了原型模式。看下面的代码：

function Person(){
}
Person.prototype = {
	constructor: Person,
	name : 'Jim',
	age : 30,
	job : 'IT',
	friends : ['Kite'],
	sayName : function () {
		alert(this.name);
	}
};
var person1 = new Person();
person1.sayName(); // Jim
var person2 = new Person();
person2.name = 'Tom';
person2.sayName(); // Tom
person1.friends.push('Mike');
alert(person1.friends); // Kite,Mike
alert(person2.friends); // Kite,Mike
alert(person1.friends === person2.friends); //true

原型模式是所有的属性方法都是共享的，与其它语言中的静态类相似。虽然解决了原型模式中对象方法的重复使用问题，但如果属性是引用类型就有问题了。Person.prototype对象中有一个名为friends属性，该属性包含一个字符串数组。然后新建了两个Person实例，接着向person1.friends属性引用的数组新增了一个字符串。由于friends数组存在于Person.prototype而非person1中，所以对person1的修改也会在person2中反映出来。因此实际应用中很少单独用这种方法。

四、构造函数/原型混合模式

创建自定义Javascript类型的最常见方式就是构造函数/原型混合模式，构造函数用于定义非共享的属性，原型模式用来定义方法和共享的属性。取两者之长，发挥各自优势。下面重写了前面的代码：

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ['Kite'];
}
Person.prototype = {
	constructor: Person,
	sayName : function () {
		alert(this.name);
	}
};
var person1 = new Person('Jim', 30, 'IT');
var person2 = new Person('Tom', 27, 'Doctor');
person1.friends.push('Mike');
alert(person1.friends); // Kite,Mike
alert(person2.friends); // Kite
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

这种混合模式目前也是ECMAScript中使用最广、认同度最高的自定义Javascript类型的方法。

试了很多方法，打SP3补丁，新建用户访问，采用Windows身份验证，错误日志还是不断增多。上网Google有人说用防火墙封IP，可是IP不是固定的，根本封不了。

不过这启发了我，我想是不是可以通过SQL Server来限制IP呢？打开配置工具〉SQL Server配置管理器〉MSSQLSERVER的协议〉TCP/IP地址〉IP地址，在IPAll中将TCP动态端口设置为空。Ok，整个世界清静了！