从Silverlight到HTML5
大纲{A}
概述
本文介绍我的经验写在Silverlight为Windows Phone 7控制和重新实现它使用JavaScript和HTML5的跨平台。我在写这篇文章的目的不是要比较的HTML5 / CSS3 / JavaScript和Silverlight的功能特性，如果你眯着眼睛有点，你可以映射从一个最具特色。相反，我想捕捉方法和一般"的感觉的区别？？与这两种截然不同的技术的发展。
，你可以看到在这里iPod Touch的行动完成HTML5的控制:你也可以看到它在运行。
介绍（和Windows 8）
我写了我原来的。有趣的是，虽然有一些技术可能被用于跨平台的Web应用程序开发，为移动，，但只是其中的一个，HTML5的。幸运的是，移动浏览器未来的桌面采用HTML5的，这就是为什么我决定这将是一个有趣的练习，才能有它运行在iPhone，Android的，我曾写信给HTML5的一些Windows Phone 7的代码移植，并黑莓手机。
最近的新闻，关于Windows 8的发布引起了很大{A20}我认为当前的形势提供了一个务实和测量总结。
除了最近发生的事件，它是明确的，背后HTML5的势头越来越大。我认为这是一个明智之举任何开发尝试他们的手，在发展"的JavaScript方式？？{A21} Silverlight的跳转表控制
的Windows Phone 7跳转表解决了一个有趣的问题，面临着移动应用的开发。虽然在桌面上，可用于精确的鼠标移动抢，拖动滚动条，导航信息的大名单。移动的用户界面通常放弃可见的滚动，轻扫手势取代，从而节省了宝贵的屏幕空间。不过，如果你正面临着一长串的信息，刷卡多次到达列表的底部附近的位置变得相当苦差事！
英寸跳转表列表中的数据进行分类排列，每一个"跳"按钮？？在顶部。点击跳转按钮，显示了一个类，在这里您可以按一下"跳？？列表到所需的位置。按日期或字母顺序排列的数据，这工作得很好。
下面的屏幕截图显示了控制，我在行动:
{S0}
您可以阅读有关的发展，这在我以前CodeProject上文章中的控制所有。{A22}一个JavaScript进修
我已经没有很大的JavaScript经验，所以才开始这方面的发展，我想我应该打的书籍。一些同事的Douglas Crockford的"JavaScript的:好的部分复制？？所以，不希望了解不好的事情，我认为这是一个良好的开端。
"好的部分？？是一个有趣的阅读。笔者采用JavaScript语言的令人耳目一新的诚实。它始终是一件有趣的比较"权威指南"这本书的侧端的大小？？这可能不是一个准确的JavaScript究竟如何是"好反映吗？？然而，它让你觉得 - 究竟这是什么样的语言，它需要一本书，精心指导，从"坏零件你走？？你肯定不会发现类似的"好的部分？？为Java，C＃或任何其他的主流编程语言的书籍。
在熟悉面向对象的构造缺乏，缺乏块的范围，一个"这个呢？？？关键字，有一个非常{A23}给定的语言，特别是通过C谁已来为JavaScript开发一个坏名声，＃或Java的。
的JavaScript语言的宽容性质意味着，你可以使事情工作相当马虎代码。然而，为增加对HTML5的普及，我们发现自己建设越来越复杂的应用程序使用JavaScript语言，一个更深的理解的语言变得更加重要。并为此目的，"好的部分？？是一个有益的指导。{A24}入门
武装"好的部分？？我开始思考的JavaScript继承模式，我将使用创建跳转表的控制; {A25}？然后我的头开始疼了，我开始思考整个构思困扰两次！直到我意识到，不像的WinForms，Silverlight和WPF的Swing（Java）的，和几乎所有其他的UI框架，，你不必从现有类继承以创建一个控件。
这使我考虑Silverlight和HTML / JavaScript的根本区别。使用Silverlight的UI（用户界面）是定义在XAML，XML文件，然后分析，以创建内存中的表示的UI（可视化树）。必须继承自DependencyObject的一个共同的基类，在树中的所有元素。基本上，XAML是比创建一个对象图的一个方便的语法。另一方面，HTML是不创建JavaScript对象，远离它的语法！ HTML描述了一个页面，这是由浏览器解析，以创建一个文档对象模型（DOM）的结构。浏览器公开的API操纵这些DOM使用JavaScript语言。两相当"松耦合？？，每个人都可以存在（而且经常）没有其他。鉴于XAML是"紧耦合？？与Silverlight框架，其唯一的目的是创建框架中包含的类的实例。
HTML和JavaScript的独立性，我摆脱棘手的决定，有关继承模式，你可以简单地创建您的标记和操纵它。我还发现，这种独立性当您尝试执行更复杂的互动，但在此之后更多的优势... ...
JavaScript开发人员很少直接对由DOM公开的API程序，而不是有利于抽象API的使用。其次，有几个原因抽象API，JavaScript开发意识，首先，DOM API的各种浏览器外露不同，抽象API往往比DOM的API，它们抽象提供更强大的功能。
有不少抽象API可供选择，因此，而不是审查每个反过来，我决定选择最流行的一种，{A26}。{A27}渲染一个简单的列表
时间停止担心以正确的方式做的事情，并写一些代码！
我的测试页有以下简单的标记:<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="jumpList.js"></script>
<link rel="stylesheet" type="text/css" href="jumpList.css" />
</head>
<body>
<div class="jumpList" style="width:200px; height:300px"/>
</body>
</html>
类跳转表的div的DOM元素，在这里我想创造我的控制。
顺便说一下，我做了错误的自闭的脚本标记元素，即，LT;脚本/ GT，其中{A28}。我浪费了相当多的时间，恼人的小新手错误！
我第一次切跳转表的JavaScript代码创建了一个人对象的数组（使用{A29}我发现一些代码在互联网上），这是按姓氏排序。然后，该代码遍历这个数组，添加一个新的李在父类ITEMLIST UL每个元素。{C}
看到这个代码创建的结构，最好的办法是通过浏览器如Firefox的Firebug的或内置的浏览器开发工具的开发工具:
{S2}
以上的JavaScript代码的大部分是按照C＃开发人员可能比较容易，但是美元的函数$（）可能是不值一提。 jQuery的定义一个全局函数的名字??????这是用来创建一个jQuery对象，通过提供一个CSS选择器或HTML片段，。 jQuery是众所周知其流畅的界面，它允许你连锁函数调用:$("div.test").add("p.quote").addClass("blue").slideDown("slow");
这流利的风格，熟悉C＃开发人员使用LINQ语法（扩展方法）。然而，方式是完全不同的两个工作的。良好的C＃LINQ的API依靠IEnumerable接口的定义，其中每个方法返回一个IEnumerable的扩展方法。使用jQuery，jQuery对象（这是由美元的函数返回的对象）包装DOM节点的集合，每个功能操作这些节点，并返回一个jQuery对象。
一个全球性的功能??????的使用，使jQuery的相当简洁。然而，其他库就可以了，这样做，定义此相同的全局函数。例如，微软的ASP.NET AJAX库提供一元函数，作为一个由ID获取一个DOM元素的简写。幸运的是，jQuery有一个{A30}省略了全球美元功能。
在上面的代码，我有前缀，与美元的jQuery对象的所有变量。这是一种流行的公约，但没有执行本身的效果。
到目前为止，上面的代码创建一个嵌套的UL其中包含的元素的列表。我复制的Windows Phone 7控制允许您滚动一长串的数据，因此嵌套UL需要裁剪到其母公司的高度，让您滚动其内容。 CSS溢出属性使这个功能:.itemList
{
overflow-y: auto;
}
ul和li元素也自称删除子弹点，并应用标准，这些元素的填充:ul.itemList
{
padding: 0;
}
ul.itemlist li
{
list-style-type: none;
}
对于这个工作，ITEMLIST格需要有相同的高度作为其母公司。不幸的是，这是仅使用CSS不是那么容易取得。 Silverlight的跳转表控制项目清单和分类列表中的份额的内容相同的面积，以便使用网格布局。然而，有没有这样相当于直接在HTML。为什么有这么多的黑客攻击方法创造经典的网页布局，如三列和页脚布局（这是为什么我仍然很高兴地使用表！），缺乏体面的网格支持。未来的CSS像{A31}的一些功能看起来非常有前途，但也似乎已经练到即使是在浏览器中的初步实施阶段。
目前，这个问题最好的解决办法是使用JavaScript:// set the height of the itemList to that of the container
$itemList.height($jumpList.height());
$itemList.width($jumpList.width());
这给了预期的效果:
{S3}
虽然缺乏一个像样的网格布局是令人沮丧的的，这是值得注意的HTML的首要重点是流布局，页面变化的高度上在它的内容为基础。垂直滚动的内容与HTML是相当自然。然而，Silverlight应用程序通常是约束到一个固定的屏幕尺寸，在桌面应用程序通常会以同样的方式。在此背景下，开发商通常安排UI控件填充可用空间。 HTML5可能不会有一个体面的网格布局，但相反的Silverlight没有一个体面的流布局，可以混合文本，图像，以及其他内容。
到目前为止，事情还没有过分！我花了太多时间超过继承模式强调，成为卡住我的脚本标记，并需要JavaScript代码来实现我需要的布局受挫。我有一种感觉，许多C＃开发人员达到这个阶段，只是解雇的JavaScript。幸运的是，它得到更好的！{A32}创建jQueryUI部件
到目前为止，我的代码是不可怕的可重复使用的，位于硬编码控制与div元素。 jQuery有其自己的UI框架，名为{A33}。
重新编写上面的代码，作为一个jQueryUI部件是一个简单的过程，以下引用的博客文章中描述的简单模式。选项属性，它允许变量在创建一个部件时，通过创建一个对象。的_init函数是用来建立所需的UI小部件，使用上述相同的代码。唯一的区别是，Widget框架，而不是硬编码的CSS选择器在测试的HTML文档的div，设置this.element属性部件是要构建的DOM元素。var JumpList = {
// initial values are stored in the widget's prototype
options: {
items: []
},
// jQuery-UI initialization method
_init: function () {
var $jumpList = $(this.element),
$itemList = $("<ul class='itemList'>");
for (var i = 0; i < this.options.items.length; i++) {
// add an item to the list
var person = this.options.items[i];
var $jumpListItem = $("<li class='jumpListItem'>").text(
person.surname + ", " + person.forename);
$itemList.append($jumpListItem);
}
// add the item list
$jumpList.append($itemList);
// set the height of the itemList to that of the container
$itemList.height($jumpList.height());
$itemList.width($jumpList.width());
}
};
最后，我们才可以使用这个小工具，我们必须登记如下:
在测试的HTML文件中使用的是下面一样简单:
最终的结果是，我们现在有一个可重复使用的部件，上面的语法给我们的潜力，创造多个构件实例，通过简单地使用CSS选择器匹配多个DOM元素。
别的颇为有趣的是通过注册的跳转表上述jQueryUI Widget框架中定义的对象，在这里，这导致在一个新的功能除了呢？？代码>跳转表？？ jQuery对象。这个工作究竟如何呢？
虽然你可以"假的？？的方法除了现有各类在C＃扩展方法的使用，使用JavaScript，，你可以加入一个函数对象的原型添加功能到现有的对象。这允许您添加新功能到现有对象（即中，{A34}），没有被传统的继承层次结构的制约。再次，这是经典的面向对象的继承是少到JavaScript相关的另一个原因。{A35}整理代码？？JSLint
到目前为止，我还没有讨论工具和IDE。事实上，在发展的最初几个小时，我用记事本，记事本语法高亮，功能强大的搜索功能，插件，更开发。在我处理的JavaScript的IDE，我想看看在代码质量第一。
宽容的JavaScript语言和它的众多陷阱（或的性质的"坏零件？？手段，这是很容易写很差构造难以维护的代码。道格拉斯Crockford的，作者的"好的部分的？ ？写入和积极维护，提高JavaScript代码质量的静态分析工具JSLint。记事本{A36}上安装和运行此时，它发现了我的代码的问题，到目前为止，缺少分号除其他事项不一致的缩进，你会发现，JSLint往往拿起简单的拼写错误和语法错误以及文体的问题，所以每次运行JSLint之前刷新浏览器窗口，将节省您的时间。
一个特别有趣的问题，这JSLint拿起我的代码与下面的代码片段:var $jumpList = $(this.element),
$itemList = $("<ul class='itemList'>");
for (var i = 0; i < this.options.items.length; i++) {
// add an item to the list
var person = this.options.items[i];
var $jumpListItem = $("<li class='jumpListItem'>").text(
person.surname + ", " + person.forename);
$itemList.append($jumpListItem);
}
上面的代码，JSLint的意见，我应该"移动VAR声明的功能？？这突出的JavaScript语言，C＃开发的斗争的又一特色。首先，如果你省略了var关键字，则不会创建一个局部变量，而不是您将创建什么是一个有效的全局变量。其次，JavaScript并没有块级的范围，因此在上面的代码中定义的变量$ jumpListItem范围将包含它的功能。 JSLint鼓励你组对每个函数的开始所有变量声明，以避免混乱:var $jumpList = $(this.element),
$itemList = $("<ul class='itemList'>"),
$jumpListItem,
person,
i;
for (i = 0; i < this.options.items.length; i++) {
// add an item to the list
person = this.options.items[i];
$jumpListItem = $("<li class='jumpListItem'>").text(
person.surname + ", " + person.forename);
$itemList.append($jumpListItem);
}
有一些Silverlight开发人员转移到HTML5意味着开沟赞成在记事本的Visual Studio中开了个玩笑。虽然IDE为JavaScript的支持并不好，因为它是C＃和Java，那肯定是很多比使用记事本！
在Eclipse IDE中具有良好的JavaScript支持，您的代码和重构工具的结构提供意见。自动完成功能也明白JSDoc给你的功能编辑总结。 Eclipse还拥有一批建在代码质量检查，反映了很多的问题，JSLint识别。
Visual Studio中也大大提高了它的JavaScript支持;同时也不是那么良好的JavaScript文件作为Eclipse的结构，智能感知（自动完成）支持已大为改善。 IDE的伪执行为您的JavaScript代码，使其能够作出一个非常准确的的"猜测？？在运行时可用的功能。例如，跳转表功能，其中的widget框架添加到jQuery的原型是可见的:
然而，这种方法有一定的局限性，例如，它没有确定如何你的JavaScript文件在运行时组装的方式，因此，你没有的jQuery API的IntelliSense，当编辑的jumpList.js文件！有办法，提供所需要的信息的IDE，但这些都不是有据可查的。有关详情，请参阅我的朋友{A38}。
Visual Studio中也缺乏体面的JavaScript代码的质量检查，但是卢克还开发了一个{A39}已开始成为开发商之间很受欢迎。
无论如何，足够的了解工具，让我们回到跳转表控制...{A40} jQuery的模板
随着当前正在进行的工作，姓和用的名字属性是硬编码到代码的部件，这大大降低了它的多功能性。为了解决这个问题，我们需要某种方式使开发人员可以指定一个模板，如何呈现他们的每一个项目的细节，例如，像Silverlight的DataTemplate的概念。无论的JavaScript也不HTML5有一个类似的概念，所以我们打算到别处寻找。这是一个共同的问题，如预期，也有无数的框架，提供了一个潜在的解决方案。混合在一起，而不是不同的JavaScript框架，我决定放弃{A41}（顺便说一句这是微软的书面！）尝试。
为模板，插件的API很简单，只是一个函数的jQuery对象。要使用此功能，我添加了一个ItemTemplate属性widget的选项。控件初始化时，此模板使用$编译每个项目模板功能，提供使用这个模板通过$ TMPL功能。// 'compile' the template
$.template("itemTemplate", this.options.itemTemplate);
// add each item to the list
for (i = 0; i < this.options.items.length; i++) {
item = this.options.items[i];
// create the div that contains the item
$jumpListItem = $("<li class='jumpListItem'>");
// render the item using the named template
$.tmpl("itemTemplate", item).appendTo($jumpListItem);
// add the the jumplist
$itemList.append($jumpListItem);
}
部件是现在完全脱钩，从对象的数组，它呈现，模板通过对实例的部件如下:$(".jumpList").jumpList({
items: people,
itemTemplate : "<b>${surname}</b>, ${forename}"
});
上面的模板呈现在大胆的姓氏如下所示:
{五}{A42}添加跳转按钮
为了转成一个跳转列表中的项目清单，我们需要一种方法，给每个项目一个类别，并呈现这个类别，每个类别内的项目组以上。这是按钮，点击它时，显示类视图，因此被称为一个"跳跃键？？
另一个选项属性添加到小部件？？代码> categoryFunction？？每个项目对应一个类别。在这里，我们采取的姓的首字母:$(".jumpList").jumpList({
items: people,
itemTemplate: "${surname}, ${forename}",
categoryFunction: function (person) {
return person.surname.substring(0,1).toUpperCase();
}
});
循环，建立项目清单，现在增加了跳跃按钮:this._$itemList = $("<div class='itemList'/>");
// create the item list with jump buttons
for (i = 0; i < this.options.items.length; i++) {
item = this.options.items[i];
category = this.options.categoryFunction(item);
if (category !== previousCategory) {
previousCategory = category;
// create a jump button and add to the list
$jumpButton = $("<a class='jumpButton'/>").text(category);
$jumpButton.attr("id", category.toString());
$categoryItem = $("<li class='category'/>");
$categoryItem.append($jumpButton);
this._$itemList.append($categoryItem);
// store a reference to the button for this category
jumpButtons[category] = $jumpButton;
}
// create an item
$itemMarkup = $("<div class='jumpListItem'/>");
$.tmpl("itemTemplate", item).appendTo($itemMarkup);
// associate the underlying object with this node
$itemMarkup.data("dataContext", item);
// add the item to the list
$categoryItem.append($itemMarkup);
}
以上使用jQuery的data（）函数的公告，这是一个伟大的小功能，可让您与DOM元素关联的任意数据。我在这里创建一个跳转列表和代表他们的DOM元素提供的项目之间的关系。我有所谓的DataContext点头到Silverlight功能这个模仿！
提供一些合适的CSS:a.jumpButton
{
background: #55FF55;
margin: 7px;
padding: 5px;
width: 30px;
height: 30px;
display: block;
}
.jumpListItem
{
margin: 10px;
}
跳转列表开始初具规模:
{中六}
注意的风格造成相当大的按钮，每个项目大约有大幅度的。这是因为它是在移动设备上，字体大小和命中区需要大于桌面上使用的。
添加单击事件处理程序，可以通过jQuery的点击（）函数，和我第一次尝试在处理看着这样的跳转按钮的点击:// create the item list with jump buttons
for (i = 0; i < this.options.items.length; i++) {
...
if (category !== previousCategory) {
...
// create a jump button and add to the list
$jumpButton = $("<a class='jumpButton'/>").text(category);
$jumpButton.click(function () {
alert("category clicked: " + category);
});
}
...
}
然而，这并不功能相当的方式，你可能期望！点击任何跳跃按钮报告:
{七}
虽然在第一混乱，这样做的原因其实很简单。以前我们已经看到如何块级的范围，手段缺乏，JSLint鼓励你的变量声明移到函数的开始。因此，无论哪一个按钮被按下时，我们看到类的最终值。
这个问题可以通过一个非常有趣的语言功能，如没有发现在C＃/ Java的解决。在单击处理程序所需的行为结果作以下修改:$jumpButton.click(function (cat) {
return function () {
alert("category clicked: " + cat);
};
} (category));
因此，这里发生了什么事情？这是两个有趣的概念在JavaScript的混合物。首先是即时的功能，这是其创作立即执行的功能。在这种情况下，我们正在创建一个函数，并立即调用它传递的类别。二是封闭，功能范围内的变量的引用"俘获？？
使用闭包解决了这个问题，但实际上是有一个简单的方法，使用每类创建一个新的功能，而不是单一的功能，所以消耗内存少一些（考虑到内的变量的引用封函数的范围，他们可以是相当内存饥饿）。
鼠标事件冒泡的DOM在完全相同的方式，在Silverlight可视化树的事件冒泡。因此，一个简单的解决方案是将名单上的一个单一的点击事件处理程序，而不是在每个元素之一。
我想移动以外的初始化代码的事件处理程序，，以避免腹胀的功能，但是，这提出了另一个挑战。这个变量的一个函数内的值是依赖于在该函数调用方式。对于从DOM元素，如单击事件，引发的事件，这是一个事件源元素的引用。移动的事件处理程序的跳转表对象的属性，意味着我们不再通过这个跳转表对象的引用。
为了解决这个问题，各种jQuery的"包装？？部件零部件拉出初始化函数跳转表对象的属性的对象。父div包含的项目和跳跃按钮的Click事件处理程序注册使用bind（）函数，它允许你添加，将被传递给事件处理函数的数据。在这里，跳转列表的引用传递。事件处理程序可以再获得通过event.data财产，和源元素通过event.target属性（即，跳跃键或项目）的跳转列表的引用:var JumpList = {
// jQuery-UI initialization method
_init: function () {
...
// create the item list with jump buttons
for (i = 0; i < this.options.items.length; i++) {
...
}
// add a click handler to the itemList
this._$itemList.bind("click", { jumpList: this },
this._itemListClickHandler);
...
},
// Handles click on the itemlist, this is either a jump list item or
// jump button click
_itemListClickHandler: function (event) {
var jumpList = event.data.jumpList,
$sourceElement = $(event.srcElement);
// handler jump list item clicks - resulting in selection changes
if ($sourceElement.hasClass("jumpListItem")) {
if (!$sourceElement.hasClass("selected")) {
// remove any previous selection
jumpList._$itemList.find(".selected").removeClass("selected");
// select the clicked element
$sourceElement.addClass("selected");
// fire the event
jumpList._trigger('selectionChanged', 0,
$sourceElement.data("dataContext"));
}
}
// handle jump button clicks
if ($sourceElement.hasClass("jumpButton") === true) {
// fade out the itemlist and show the categories
jumpList._$itemList.addClass('faded');
jumpList._$categoryList.addClass('visible');
});
}
},
_$itemList: undefined,
_$categoryList: undefined,
...
};
上面的事件处理程序的分类视图显示，如果一个跳跃按钮被点击（更多关于这个版本），并实现一个非常简单的选拔机制，选定类中添加点击项目和提高SelectionChanged事件。在这里你可以看到使用了jQuery的data（）函数来提取"的约束？？项目，DOM元素的代表，模拟Silverlight的DataContext的概念。
我们可以添加此事件的处理程序的部件构造时:
如何选择，可短短5行代码实现自动创建的事件，这是令人印象深刻。{A43}动画"类别"按钮（您好CSS3的！）
的代码创建的类别按钮创建跳转列表按钮和项目的代码非常相似，所以我不会在这里重现。如果你有兴趣，可以挖周围的代码。
跳转列表的结果初始化以下结构创建的DOM元素:<div class="jumpList">
<ul class="itemList">
<li class="category">
<a class="jumpButton" id="A">A</a>
<li class="jumpListItem">Afufylug, Efotda</li>
</li>
<li class="category">
<a class="jumpButton" id="B">B</a>
<li class="jumpListItem">Bastajcyr, Laej</li>
<li class="jumpListItem">Bexgamila, Ryjl</li>
</li>
...
</ul>
<div class="categoryList" >
<a class="categoryButton">A</a>
<a class="categoryButton">B</a>
<a class="categoryButton">C</a>
<a class="categoryButton">D</a>
...
</div>
</div>
categoryList格样式在CSS中，使其覆盖ITEMLIST最初是隐藏的。
的Windows Phone 7跳转列表的版本有一个时髦的每个类别按钮，旋转和尺度进入视野揭示动画。
{S8}
让我们来看看它是多么容易重现使用CSS / HTML / JavaScript的？/ P>
CSS3规范增加了转型的支持，让您缩放，旋转和倾斜元素。这提供了非常相似的功能，Silverlight的的RenderTransform。我们可以定义为如下categoryButton国家的样式:a.categoryButton
{
opacity: 0;
-webkit-transform: scale(0,0) rotate(-180deg);
}
a.categoryButton.show
{
opacity: 1;
-webkit-transform: scale(1.0, 1.0) rotate(0deg);
}
一类按钮的初始状态是透明的，与规模的零和旋转-180度。显示类是添加时，该按钮将变为可见，缩放/旋转到其原来的立场。
显示类应用将立即更改这些属性。为了顺利的旋转，缩放和透明度变化的动画，我们可以使用新的CSS3的过渡功能:a.categoryButton
{
-webkit-transition-property: -webkit-transform , opacity;
-webkit-transition-duration: 0.3s;
}
最后，以火为序列中的每个元素的动画，点点代码是必需的吗？？/ P>
下面的函数遍历一个元素的jQuery项目，对每个元素发射的一些行动（即函数）之间的一个短暂的延迟。一个布尔值，也传递给函数来表示时已经达成的最后一个元素:// A function that invokes the given function for each of the elements in
// the passed jQuery node-set, with a small delay between each invocation
_fireAnimations: function ($elements, func) {
var $lastElement = $elements.last();
$elements.each(function (index) {
var $element = $(this);
setTimeout(function () {
func($element, $lastElement.is($element));
}, index * 20);
});
},
我们可以使用此功能，以动画隐藏的类别按钮，如下哪里了？？代码>的说明了什么？？类是从每个元素中删除，这将导致一个CSS3转换回原来的状态。当最后一个元素是，父div隐藏删除类别列表:// hide the category buttons
jumpList._fireAnimations(jumpList._$categoryList.children(),
function ($element, isLast) {
$element.removeClass('show');
if (isLast) {
jumpList._$categoryList.removeClass('visible');
}
});
最终结果是，这是惊人的相似，我原来的Windows Phone 7实施的东西:
{S9}
这种效果的实现是相当简单，比我写的Windows Phone 7控制的等效代码更简洁。见以前的文章{A44}。
在这一点上，它是值得一说的关于供应商的特定CSS属性的东西。目前，因为过渡和转换的CSS规范尚未敲定，支持他们的浏览器使用每个属性的名称前的供应商特定的前缀。不幸的是，这意味着，如果你要使用这些最近的一些CSS特性，你面临着很多的重复。例如，我想禁用跳转列表中的文本选择。这就要求下面的CSS，以确保跨平台支持:.jumpList
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
这些前缀可以是非常令人沮丧和一个维护的问题东西。然而，他们是一个必要的邪恶。过去的经验表明，允许厂商实现CSS特性太早可能造成大规模的问题，因为在他的文章"前缀或Posthack Eric Meyer的介绍？？/ A>。
因为我的主要目的是创建一个用于移动设备的的跨平台的跳转列表，我可以愉快地限制自己只使用WebKit的前缀，因为iPhone，Android和黑莓都使用WebKit的浏览器。{A45}滚动列表
循环，产生的类别按钮使用jQuery的data（）函数创建一个每个类别按钮和它对应的跳跃键之间的关系。点击处理程序添加到categoryList格，其中包含每个类别按钮。同样，在此之前，我们已经涵盖在本文前面的模式。如果您感兴趣的细节，查看相关的源代码。
最后的任务，使跳转列表功能齐全的类别按钮被点击时，滚动列表，以正确的位置。使用jQuery的scrollTop功能，这样就可以实现。我们只需添加跳转按钮的位置到当前滚动位置如下:jumpList._$itemListContainer.scrollTop(
$jumpButton.position().top + jumpList._$itemListContainer.scrollTop());
再次，实施滚动功能已被证明很简单，在比较Silverlight的跳转列表。{A46}在移动滚动
一个全功能的跳转列表控制，我决定了它的时间来测试它在移动。载入一个网页，其中包含一个跳在我的Windows Phone 7的列表控件，我惊讶地发现，它表现不俗。目前版本的IE WP7的使用不支持HTML5 / CSS3的，但是CSS缓慢下降，所以控制仍然是功能齐全。烦人，我的HTML跳转列表比较顺利滚动？？啊哈（如果你不是一个WP7的开发，你想知道为什么这很烦人，检查{A47公路}???.
然后我借朋友的Android手机，配备了WebKit浏览器之一。在这一点上，我马上打了一个问题。跳转列表中拒绝滚动，无论哪种方式，我刷卡的屏幕。刮后多少头，事实证明，这是一个移动的WebKit浏览器的限制，有没有办法与一个"溢出滚动一个块级元素的内容？？风格。正如你能想象，这是一个相当大的问题，已收到{A48}。
是我所有的徒劳的工作？幸运的是，这是一个开发HTML5的移动应用程序的人的共同问题，也有在互联网上提供的各种解决方案。我发现，第一个{A49}（如此命名，因为iPhone也有Webkit浏览器，所以出现此相同的错误），做的伎俩。它采取了JavaScript和跳转列表标记使用iScroll再造位，但它没有解决的问题。
最终的结果是非常密切的模仿我写在Silverlight中的跳转列表的，但附加了一个优点，它在iPhone上运行，iTouch的，Android，黑莓，并与即将到来的芒果释放（增加了HTML5的有点讽刺，支持），Windows Phone 7的。
控制在地铁风格是非常多，所以可能看出来移动设备上的一个Windows Phone以外的地方，但是，它一直试图跨平台的HTML移动开发的有用工具。{A50}结论
我有一个写HTML5跳转列表控制的乐趣很多，但这篇文章不是为了好玩刚（好吧，我想除非CodeProject上开始支付作者，主要是它！）。很显然HTML5的，引人注目的是上升的，而且，CSS3和过程中的JavaScript。我想看看HTML5的发展经验比较的Silverlight，并且要完全诚实... ...我很惊讶！
，真的让我吃惊的事情之一是我用JavaScript的生产力水平。我不是这种语言，但我肯定远不及作为精通用JavaScript（和相关技术），因为我与Silverlight。不过，我是能够创造出一个大致相当于跳跃列表控件的Silverlight一次在类似的时间量。
这可以归结到了一些东西，首先，也许是最明显的一个是JavaScript和CSS的简洁性质。比较端侧般的效果，实现纺丝瓷砖揭示？？表明CSS3的是远远超过Silverlight的故事板简洁。此外，对CSS3转换不强迫你担心类型，你可以过渡的颜色和方式完全相同的立场。
然而，有另一个不太明显的原因，为什么我用JavaScript的生产力相对较高。与Silverlight（或WPF的WinForms，等等），当您创建一个新的控制，延长或修改现有的控制，你很远在现有框架控件公开的API的摆布。如果你发现自己需要做一些事情，原有的控制作者已决定并不重要，所以还没有暴露的API，你都面临着一个困难的技术挑战。例如，找到的项目，目前在Silverlight的ListBox控件可见涉及比较深的Silverlight框架的运作的知识。 JavaScript和HTML之间的关系感觉比C＃和XAML之间的关系完全不同。由于存在的JavaScript，HTML，也CSS中，在自己的权利的技术，他们变得更松散的耦合比C＃和XAML。出于这个原因，没有什么是"隐藏？？，因此很容易延长现有的行为。
（作为不谈，我知道Silverlight可视化树，给出了一个类似DOM的接口，你可以浏览和修改将我写的{A51}正是为此目的;但是，它仍然不觉得松散耦合的JavaScript / HTML。
虽然我留下深刻印象的JavaScript / HTML的生产力，这是值得注意的，这已经从别人写一个新的控制的角度。我认为我的观点可能已略有不同，如果我把自己的位置在控制消费。历史感谢分享。科林埃伯哈特
科林埃伯哈特
科林埃伯哈特
科林埃伯哈特
科林埃伯哈特
谢谢！
科林埃伯哈特
科林埃伯哈特
科林埃伯哈特
科林埃伯哈特
科林埃伯哈特