本文以作者实际应用开发过程中遇到的一个例子说明“什么时候用jQuery的自定义事件以及怎么用”，希望可以抛砖引玉，对广大JavaScript开发者有所帮助。

AD：

对于jQuery自定义事件，很多JavaScript开发者都会有所疑惑：在日常开发过程中会不会用到呢？而本文将结合一个开发案例，其中的一些地方应用到了jQuery的自定义事件，而且达到了很好的效果-精简代码的同时充分利用了OO的原则。

51CTO推荐专题： jQuery从入门到精通

问题

一个复选框X，你如何便捷地触发它的click事件的处理逻辑，但是又不改变它当前的选中状态？

答案

其实没有什么标准答案，用传统的方式，写一个函数：

var onClick=function(dom){//复选框x的Click事件的处理逻辑}; 
 

当仅仅需要执行处理逻辑而不改变复选框的状态时：

onClick(X);//X引用复选框 
 

为了响应用户直接点击复选框，你还需要为复选框X添加相应的Click处理函数：

$(X).click(function(evt){  //执行处理逻辑  onClick(this);});
 

但是，我要说的是，这里可以利用自定义事件处理函数封装复选框Click事件的处理逻辑！然后触发该自定义事件。而且个人觉得具有必要性和优点：

1，onClick的逻辑是属于复选框自身的，没有必要用一个全局方法来定义并剥离复选框对象。

从面向对象的角度说，对象由属性和行为（方法）构成，所以onClick的逻辑可以封装在复选框的作用域（context）内。

2，充分利用匿名函数，减少全局变量或者函数的数量，有利于提高脚本的执行效率。

代码示例

1，首先定义一个变量$x引用缓存我们的复选框对象。这点非常重要但很多js开发员没有意识到：每调用一次jQuery的$方法选中某个元素＝遍历一次html dom树。所以要学会利用JavaScript变量缓存对象。

var $x=$(X); 
 

2，定义一个自定义事件evtClick，封装处理逻辑。

$x.bind("evtClick",function(evt){    //onClick的处理逻辑}); 
 

3，当要执行处理逻辑又不想改变复选框的选中状态时，利用trigger方法触发evtClick事件。

$x.trigger("evtClick"); 
 

4，click事件。

$x.click(function(evt){  $x.trigger("evtClick");});
 

jQuery触发自定义事件并传参

$("input").bind("myevent",function(event,msg1,msg2){     
            alert("msg1:"+msg1);     
        })     
    
    
        $("input").click(function(){     
                $("input").trigger("myevent",["avalue","bvalue"])     
            });    
 
$("input").bind("myevent",function(event,msg1,msg2){  
   alert("msg1:"+msg1);  
  })  
 
 
  $("input").click(function(){  
    $("input").trigger("myevent",["avalue","bvalue"])  
   });    
 

自定义事件：

var Common = {};         
    Common.Dialog = function(config){};     
    Common.Dialog.prototype = {     
        height:310,     
        init: function(){     
            jQuery.event.trigger("submit");     
        }     
    };     
    
    
var dlg = new Common.Dialog({height:200});     
        $(dlg).bind("submit",function(){alert("submit event")});     
        dlg.init();  

Html代码  

1. <style type="text/css">    
2.         
3.     @keyframes myfirst {    
4.         from {background: red;}    
5.         to {background: yellow;}    
6.     }    
7.     
8.     @-moz-keyframes myfirst /* Firefox */ {    
9.         from {background: red;}    
10.         to {background: yellow;}    
11.     }    
12.     
13.     @-webkit-keyframes myfirst /* Safari and Chrome */ {    
14.         from {background: red;}    
15.         to {background: yellow;}    
16.     }    
17.         
18. </style>    

点击此处查看Demo

以下为Demo的代码：

Effect 1: Fade Block

html：

<div id="fade">Place mouse on  me i will fade!</div>

CSS：

#fade{opacity: 1;-webkit-transition: opacity 1s linear;} #fade:hover{opacity: 0;}

.效果2: Pulsate Block

html：

<div id="pulsate">Place mouse on  me i will pulsate!</div>

CSS：

#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}

 @-webkit-keyframes pulsate {  0% { width:140px; }  5% { width:190px; left:-25px; }  10% { width:140px; left:0px; }  15% { width:190px; left:-25px; }  20% { width:140px; left:0px; }   40% { width:140px; }  45% { width:190px; left:-25px; }  50% { width:140px; left:0px;}  55% { width:190px; left:-25px;}  60% { width:140px; left:0px;}  80% { width:140px; }  100% { width:140px;  }  }

.效果3: Nudge

html：

<div id="nudge">Place mouse on  me my text will shift!</div>

CSS：

#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms} #nudge:hover{background-color:#efefef;color:#333;padding-left:50px}

.效果4: Expand Block

html：

<div id="expand">Place mouse on  me my border will expand</div>

CSS：

#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black} #expand:hover{border:30px solid #800}

.效果5: Bounce Block

html：

<div id="bounce">Place mouse on  me i will bounce!</div>

CSS：

#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}  @-webkit-keyframes bounce{from{margin-left:0px;}   to{margin-left:250px;}   }

.效果6: Spin Block

<div id="spin">Place mouse on  me i will spin</div>

CSS：

#spin{-webkit-transition: -webkit-transform 3s ease-in;} #spin:hover{-webkit-transform:rotate(360deg)}

.效果7: Accordion

html：

<div id="accordion" class="accordion">   <a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>   <a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>   <a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>  </div> 

CSS：

.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none} .accordion a:hover{background-color:#999} .accordion div{background-color:#ccc;color:#222;} .accordion div p{padding:20px}   #accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease} #accordion div:target{height:110px}

1、表单应用

　　WebKit同样提供一些可用于你的页面全新的控制。下面的例子演示一个水平滑动条、一些新样式的按钮以及一个很像Safari工具栏的搜索框，代码如下：

<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input>

预览效果：

二、圆角

　　圆角可能会给页面的实现带来一些难度，比如，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的问题（比如不同的浏览器可能表现上会有细微的差别）。在WebKit中被支持的CSS3的”border-radius”属性让实现圆角变得非常简单，它只需要几行简单的CSS代码。如下所示：

#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }
<div id="boxes">
    <div style="-webkit-border-radius:15px;">
        All sides
    </div>
    <div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
        Opposite corners
    </div>
    <div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
        Top
    </div>
    <div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
        Side
    </div>
</div>

　　这段样式代码定义所有的在boxes里面的DIV都要有一个比较大的border（边框）、边距、宽度、背景等。然后每个div标签的border-radius被设置为不同的方式。你可以在下面看到运行结果：

三、简单的阴影

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
　　<div style="height:100px; width:200px; background-color:#414247;-webkit-transform:rotate(5deg);-webkit-box-shadow:3px 3px 3px #888;" ></div>
</body>
</html>

预览效果：

四、翻转与弹出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    img { -webkit-transform: scale(0.5); }
    img:hover { -webkit-transform: scale(1); -webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 50px #888;}
</style>
</head>
<body>
<img src="http://images.cnblogs.com/cnblogs_com/aspirant1314/279062/r_94dd4.png" />
</body>
</html>

拷贝代码运行可观看效果

五、纯CSS的渐变效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
    img.img1, div.swapper:hover img.img2 { opacity: 1.0;}
    div.swapper:hover img.img1, img.img2 { opacity: 0;}
</style>
</head>
<body>
<div class="swapper">
    <img class="img1" style="position: absolute;" src="http://images.cnblogs.com/cnblogs_com/aspirant1314/279062/r_94dd4.png">
    <img src="http://images.cnblogs.com/cnblogs_com/aspirant1314/279062/t_944.png" width="574" class="img2">
</div>
</body>
</html> 

拷贝代码运行可观看效果

使用说明：

transition:当一个元素的状态改变时，将一个元素的表现样式动态的进行过渡转换。
当一个元素的状态改变时，将一个元素的表现样式动态的进行过渡转换。个人认为是一个里程碑了。在未来，js就不必再去设定网页的表现，而专注于网页的行为了。
使用时，仍需带前缀：-webkit-transition,-moz-transition,-o-transition.目前，webkit内核浏览器支持的最全面，请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现
transition:transition-property transition-duration transition-timing-function transition-delay
transition-property:要实现动态转换的css属性名。可以设定为all,则动态转换所有改变的属性值，包括transform
transition-duration:设定转换的时间，单位s(秒)
transition-timing-function:过渡时的效果，可以想象下幻灯片切换时的效果。常用值：ease | linear | ease-in | ease-out | ease-in-out
transition-delay:动态转换产生的延迟时间。不常用

附可以转换的CSS属性列表：

CSS属性 改变的对象
background-color 色彩
background-image 只是渐变
background-position 百分比，长度
border-bottom-color 色彩
border-bottom-width 长度
border-color 色彩
border-left-color 色彩
border-left-width 长度
border-right-color 色彩
border-right-width 长度
border-spacing 长度
border-top-color 色彩
border-top-width 长度
border-width 长度
bottom 百分比，长度
color 色彩
crop 百分比
font-size 百分比，长度
font-weight 数字
grid-* 数量
height 百分比，长度
left 百分比，长度
letter-spacing 长度
line-height 百分比，长度，数字
margin-bottom 长度
margin-left 长度
margin-right 长度
margin-top 长度
max-height 百分比，长度
max-width 百分比，长度
min-height 百分比，长度
min-width 百分比，长度
opacity 数字
outline-color 色彩
outline-offset 整数
outline-width 长度
padding-bottom 长度
padding-left 长度
padding-right 长度
padding-top 长度
right 百分比，长度
text-indent 百分比，长度
text-shadow 阴影
top 百分比，长度
vertical-align 百分比，长度，关键词
visibility 可见性
width 百分比，长度
word-spacing 百分比，长度
z-index 正整数
zoom 数字

六、CSS 多卷布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#columns {
text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 1.5em;
    -moz-column-rule: 1px solid #dedede;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.5em;
    -webkit-column-rule: 1px solid #dedede;
}
</style>
</head>
<body>
使用纯CSS，而不用HTML的table来实现多卷是件相当棘手的事情。但是，由于CSS3用于多卷布局的属性在WebKit中已经被支持，你可以通过明确的定义卷数，正确实现你所想要的效果。先看一下下面的CSS和HTML代码：<br />
<br />
<div id="columns">
    <div>Column A</div>
    <div>Column B</div>
    <div>ColumnC</div>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column3</div>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column3</div>
</div>
</body>
</html>

预览效果：

七、一个简单的Pop-Out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box1 {
    z-index: 100;
    position:absolute;
    top:5px; left:5px;
    width:100px;
    height:250px;
    padding:5px;
    -webkit-border-radius:10px;
    border: 2px solid black;
    background: #dddddd;
    z-index: 200;
}
#slider {
    z-index: 100;
    position:absolute;
    top:30px; left:5px;
    height:200px;
    width:90px;
    padding-top:10px;
    padding-left:15px;
    -webkit-border-radius:10px;
    border: 1px solid black;
    background: #eeeeee;
    -webkit-transition: -webkit-transform 0.5s ease-in;
}
</style>
<script>
function popout() {
    document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>
</head>
<body>
<div id="slider">Slider<br/>Content</div>
<div id="box1"><a href="javascript:popout();">Popout</a></div>
</body>
</html>

 预览效果：

八、CSS3线性渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)实际用法... */
.back{background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); width:300px; height:200px;}
.back1{
    background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
    background: -moz-linear-gradient(top, #dedede, white 8%);
    background: -webkit-gradient(linear, 0 0, 0 20%, from(#dedede), to(white));
    border: 1px solid #dedede;
    width:300px;
    height:200px;}
.back2{
    background: white; /* 备用属性 */
    background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff6e02), color-stop(30%, #ffff00), color-stop(60%, #ce5100),color-stop(100%, #fff));
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:18px;
    border:1px solid #ff6e02;
    width:300px;
    height:200px
}
.bord{    
    width:107px;
    height:33px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border:1px inset #8f2e09;
    border-bottom:none;
    }
.back3{
    background: white; /* 备用属性 */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#35353b), color-stop(65%, #45454a), color-stop(100%, #050505));
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border:1px inset #d87d39;
    width:105px;
    height:32px;
    border-bottom:none;
    color:#f09341;
    line-height:32px;
    text-align:center;
}
</style>
</head>
<body>

双色渐变
<div class="back"></div><br />

双色控制高度渐变
<div class="back1"></div><br />

圆角多色渐变
<div class="back2"></div><br />

<div>
    ff下面渐变设置语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);
background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;
</div>
</body>
</html>

预览效果：

九、再谈清楚浮动

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。
这个方法来源于positioniseverything ，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */

刚刚看到一篇日志说这个问题，受到了点启发：

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

这个是优化版的清除浮动的样式，很值得推荐。

另外，我见到了一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

html body div.clear,
html body span.clear
{
     background: none;
     border: 0;
     clear: both;
     display: block;
     float: none;
     font-size: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。

十、960网格技术

http://960.gs/

十一、文字阴影

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    h1,h2,h3,h4,h5,h6{
    text-shadow: 1px 1px 3px rgba(20, 20, 20, 0.5);
    font-family:"微软雅黑",Arial,verdana;
    font-weight:normal;
    }
</style>
</head>
<body>
    <h1>文字阴影</h1>
    <h2>文字阴影</h2>
    <h3>文字阴影</h3>
    <h4>文字阴影</h4>
    <h5>文字阴影</h5>
    <h6>文字阴影</h6>
</body>
</html>

预览效果：

十二、滚动条

IE下的滚动条样式
IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。

这些样式规则很简单：

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。

webkit的自定义滚动条样式
yes，这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。

不过，webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素：

::-webkit-scrollbar /*滚动条整体部分*/
::-webkit-scrollbar-button /*滚动条两端的按钮*/
::-webkit-scrollbar-track /*外层轨道*/
::-webkit-scrollbar-track-piece /*内层轨道，滚动条中间部分（除去）*/
::-webkit-scrollbar-thumb /*（拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）*/
::-webkit-scrollbar-corner /*边角*/
::-webkit-resizer/* 定义右下角拖动块的样式*/

通过这些伪元素，可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

:horizontal – horizontal伪类应用于水平方向的滚动条

:vertical – vertical伪类应用于竖直方向的滚动条

:decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment – increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end – 类似于start伪类，标识对象是否放到滑块的后面。

:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button – 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button – 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present – 用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive – 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。

现在大多数使用Extjs的程序都使用Java来编写后台服务器程序,下面简单介绍一下如何使用Asp.net来编写后台服务器程序.

使用Asp.net编写Extjs的后台服务器程序大概有下面几种方式:

1.使用 .net Framework 3.5中的WCF来实现,因为.net 3.5 中的WCF 中新增加了一个Attributes来支持这种方式,但是具体没有使用过,有兴趣的朋友可以关注一下.

2.在Asp.net中定义一个.aspx页面,然后在aspx.cs中文件中添加一个方法来相应Extjs的web 请求,具体方式如下:

     2.1:

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ExtJsRequest();
            }
        }

        public string ExtJsRequest()
        {
            
            string sRtn = string.Empty;
            string sReq = Request["req"].ToString();

            sRtn = "{'success':true,'Message':" + sReq + "}";
            
            return sRtn;            
        }
    }

     这种方法使用起来比较简单,但是会在Server 端生成很多不需要的aspx页面,基本上每定义一个方法就需要在服务端定义一个页面,不利于代码的维护.

 3:借鉴Java 中的Servlet原理,将Extjs的请求分流到Server端具体的类中去,避免了不需要的aspx页面的生成,具体的实现如下:

     3.1:在Server端实现一个继承IHttpHandler接口的类,在其中实现对Extjs请求的分流.

     public class Servlet : System.Web.IHttpHandler
    {
        public DataSet ds;
        public Servlet()
        {
            ds = new DataSet();
            string path = HttpContext.Current.Server.MapPath("../Config.xml");           
            ds.ReadXml(path);
        }

        public void ProcessRequest(HttpContext ctx)
        {
            try
            {                
                string name = ctx.Request.Url.AbsolutePath;
                name = name.Substring(0, name.IndexOf('.'));

                DataRow[] dc = ds.Tables[0].Select("url ='" + name + "'");
                if (dc.Length > 0)
                {
                    Type ht = Type.GetType(dc[0]["Class"].ToString());
                    object obj = Activator.CreateInstance(ht);
                    MethodInfo mi = ht.GetMethod(dc[0]["function"].ToString());
                    object objRtn = mi.Invoke(obj, new object[] { ctx.Request });
                    ctx.Response.Write(objRtn as string);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }

     代码中标记为黄色的部分是一个自定义的配置文件格式.

     3.2 :自定义配置文件

     <?xml version="1.0" encoding="utf-8" ?>
     <ConfigNode>

          <Mapping url="/YouProject/User/List" Class="WebUI.Bll.User" Function="List"></Mapping>

     </ConfigNode>
     配置文件中相关属性介绍:

     URL:请求ExtJs的请求地址;

     Class:该请求分流到的Server端具体的类;

     Function:Server具体类中的对应Extjs请求的方法;

     标记为红色的代码是使用反射来定位到Server端具体类的具体方法;

     3.3:定义相关实体类

     WebUI.Bll.User 定义如下:

     namespace WebUI.Bll
     {
         public class User
         {

             public string List(HttpRequest request)
             {

                    ...具体逻辑
             }

          }

     }

     需要注意的是:

     1.WebUI.Bll.User 的方法必须定义为public;

     2.List 方法必须带一个HttpRequest的参数,因为要获取相应的Extjs的请求参数;

     3.4:在WebConfig 进行配置

     <httpHandlers>
             <remove verb="*" path="*.asmx"/>
             <add verb="*" path="/YouProject/login.aspx" type="System.Web.UI.PageHandlerFactory"/> ---不拦截
             <add verb="*" path="*.aspx" type="Servlet"/>   ---使用自定义的Httphander 来进行处理
             <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
             <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
             <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
       </httpHandlers>

      因为Asp.net会对.aspx页面使用默认的HttpHandler来进行拦截:System.Web.UI.PageHandlerFactory,所以如果在你的程序中你有的页面不想拦截比如:login.aspx,logout.aspx,Index.aspx ,那你可以在<httpHandler>配置节中进行配置。

     通过第3种方法,在Server 端可以很好的组织代码,并且无需增加不必要的.aspx页面,可以将实体类定义到 Bussiness Layer 中,符合三层架构.

2.配件

主要配件基本是一样的都是充电器 数据线 和 分体式的耳机。

美版全套

两个版本最大的不同就是充电器了。

下图是美版的充电器，是普通三项的。

这个就是英版充电器了，是三项的。

还有一个细节值得大家注意，G1原带的数据线是和G1机器上的接口一致的，只有一个边是倾斜的，而不是普通的梯形的MINI-USB。

关于其它附件，英版白色G1还是给了我一个小惊喜的，附件里有两张T-MOBILE贴纸，很漂亮。不过白色版的G1要比其他颜色贵上一些。

3.主机版本区分

现在G1有4种配色，分别是黑色 棕色 英版白色 美版白色。

下图就是白色的美版G1 和英版最大的区别就是按键和后盖颜色不一样，美版按键是银灰色的，后盖也是银灰色的。

建议最好不要购买银色键盘的棕色和美版G1，因为按下键盘后会亮起白色的键盘灯，灯颜色和按键颜色差不多，很影响输入。

5.22日更新 英版机器辨别小方法

最近在论坛看到hellopang的帖子——大家看看我买的G1是不是翻新机?

其实帖子里的机器并不是翻新机，而是一台英版 黑色 G1,这台机器有以下几个特征。

英版机器（包括白色）在T-Mobile 这个LOGO之前是三个点，而美版只有一个点

英版机器的功能按钮都只有一个颜色，接听挂断按键都是白色的，而美版接听按键为绿色，挂断按键为红色

机器侧面没有 HTC 标识，看来英版还是相当 “T-Mobile”的，连HTC的标志都没有

另外黑色英版 G1 的键盘区域材质也和美版黑色G1的材质不同，英版是光滑的，而不是美版那种磨砂的。

4.验机

再来说验机，滑开机器看屏幕后部是否贴膜，全新的机器一般都有贴膜的，如果没有贴膜也要仔细查看是否有划痕。

大家同时也要注意后盖的摄像头位置有没有贴膜。

下图是我自己的机器，如果使用过的话，屏幕后面的面板就会有划痕的，建议大家屏幕后部贴上保护贴。

还有大家要注意凹槽的边缘是否有掉漆的现象出现。

屏幕和键盘之间的接缝越小越好，而且接缝要均匀，有机会的话多挑几台，来回多滑动几次屏幕，感觉一下是否顺畅，有无异响，屏幕滑出后是否稳固。

G1自带的贴膜感觉还是挺好用的，买的时候注意看有没有气泡，原装的机器应该是没有气泡的，而且贴膜顶端是会突出一些的（如图）。

5.电池

现在市面上已经有假电池出现，但还谈不上高仿，很容易分辨。

以下图中左为真电池 右为假电池。

假电池和原厂电池其实差别还是比较大的，纸张比较粗糙，字体也差很多，只要仔细一点查看还是很好分辨的。

纸质有很大不同，假的明显粗糙，没有真品光滑

假的字迹模糊

触点旁边贴纸也有所差别。

现在随着G1上市时间的增长，原厂电池根据批次也有所不同，不过做工都是很细致的，只要仔细一些都可以比较轻松的鉴别出电池的真伪。

一般我们刚拿到的机器电池触点也会有轻微的痕迹，是因为商家需要刷机或破解，所以会用到电池。起码我见过的三台机器电池触点都是有轻微痕迹的，如果痕迹很重的话大家就要注意了。

6.价格

关于价格现在差不多在2700左右，物以稀为贵所以白色的机器会比较贵，大概会比普通机器贵150～200元，不过我还是很口水白色继起的，现在大家能买到最多的就是黑色版本的。

I expected to find a simple way of defining what happens when the canvas container is resized. Something similar to the Loaded attribute. But it’s a little more complicated than that. We need to handle the event in JavaScript and call our managed code to do the actual resizing from there.

First we set up the managed code to make it callable from JavaScript. To do this you need include to add the [Scriptable] tag to your class and all methods that will be called from JavaScript ([Scriptable] is in System.Windows.Browser). Then, in the page loaded method, register the scriptable methods using WebApplication.Current.RegisterScriptableObject.

Now we can call Resize from JavaScript. All we have to do is set up the event handler. But you can’t declare the event handler in the events section of Silverlight.createObjectEx. I decided to use an old-fashioned JavaScript event handler:

This works when the window is resized, but it won’t work if the canvas container is resized for some other reason. I’ll get to a better solution in a minute, but first let’s look at how it works, because we’re going to keep the contents of the function.

SilverlightControl is the id of the Silverlight object, as defined in the createObjectEx call. Content.basic.Resize is created in the C# code above. “basic” could be anything, but I stuck with what I saw in the tutorial I read.

This almost gets the job done, but it’s better to use the Silverlight resize event. The only way I could find to do this is to set it up in JavaScript after the Silverlight object is created.

onLoad is the function called when the object is created, as specified in the createObjectEx call. And Content.onResize is the resize handler, which unfortunately isn’t in Intellisense, but is in the MSDN article on Silverlight resizing, which appears to be very incomplete and incorrect.

Now just create another JavaScript function with the same code as the resize handler above, and we’re good to go. All that’s left is to actually resize the canvas and the objects. If you just want everything to scale with the canvas, you can use a ScaleTransform and set ScaleX and ScaleY in the C#. The XAML:

And the C#:

In this case, the canvas starts at 640×480, so our scale factors are based on those numbers.

That’s all there is to it. Here is the project I made, which includes a slightly more complex Resize method.