Fdream's Blog
专注于WEB前端开发
Powered by Google
15 6 7 8 9 10 11 12 1319

先说句题外话,昨天Silverlight 2.0发布了RTW(很多人都以为是RTM,这里的RTW是针对互联网版本的一个说法:Release to Web)版本。今天一大早的打开Google Reader,发现Flash Player 10和Flash CS4的文档已经发布了,中午吃完饭回来惊奇地发现Flash Player 10也跟着发布了。Flash Player和Silverlight的竞争是越来越白热化了,至少在新版本的发布上已经有这个意思了。

===========严肃的分割线============

好了,言归正传,回到我们的标题上来。UL的预设标记就是每个项目之前的那个原点或者方块或者数字之类的标记,就像我的blog侧栏里面“最新评论”或者“最新文章”那个地方的小原点一样。

很多时候,很多人不喜欢这个玩意儿,于是就想把它藏起来,这个也很好办,这么一行就搞定了:

参考代码: [复制代码] [保存代码]

ul{
    list-style-type:none; 
}

但是还是有一个问题,前面有好多空格好难看……

如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。

今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。

基本的方法

$();

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

参考代码: [复制代码] [保存代码]

// 选择ID为”body_wrap“的元素
$('body_wrap');

参考代码: [复制代码] [保存代码]

<div id="body_wrap">
</div>

有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。

MooTools 1.2 JavaScript库介绍

MooTools 1.2是个强大的轻量级的JavaScript库,专门为减轻Web中交互性JavaScript开发。在某种程度上,你可以认为MooTools是CSS的扩展。例如,CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间(点击事件、鼠标悬停事件、键盘事件……),MooTools让这一切变得非常容易。

另外,MooTools还有各种各样的非常好的扩展,可以让你不只是改变一个元素的属性,还可以让你有”morph“(变形)或者”tween“(补间动画)属性,让你有能力去创建动画效果,就像你在我的导航菜单上看到的一样(Fdream注:原作者的,我的首页也有)。

这只是一个例子,MooTools可以让你做更多的事情。在接下来的30天里,我们将深入MooTools库,探索从数组(Array)和函数(Function)到Fx.Slide,以及其他捆绑插件的每一个东西。

引用MooTools 1.2

首先,下载并引用MooTools 1.2核心库。

  • 下载MooTools 1.2核心库
  • 把MooTools 1.2核心库上传到你的服务器或者工作区
  • 在你的HTML文档头部head标记之内链接MooTools 1.2核心库

Optimizing Ajax Based Applications

优化基于Ajax的应用程序

Ajax is all about speed and interactivity. Without these features, using Ajax for building a specific application or website is just useless.

Ajax完全在于速度和交互性。如果没有这些特性,用Ajax来构建特定的应用或者网站是毫无用处的。

Developers have to ensure that they build applications that will cater to the immediate need of their users. They have to optimize their application before releasing them even for beta testing.

开发这应该确保他们的应用程序能够迎合用户的直接需求。他们必须在发布之前优化他们的应用程序,甚至只是发布Beta测试。

Optimizing the Application Prematurely

过早地优化应用程序

Premature optimization may seem to be a safe practice in ensuring that the application will work as expected. But this, however, is the cause of almost any problem in an Ajax based applications when it comes to optimization.

过早的优化似乎四个安全的做法,可以确保应用程序如期工作。但是,当开始优化基于Ajax的应用程序时,这几乎是所有问题的起因...

Updates for AJAX in IE8 Beta 2

IE 8 Beta 2中的AJAX新功能

Sunava Dutta here, a program manager focused on improving AJAX in the browser! Now that Internet Explorer 8 Beta 2 is out, I want to write about some of the latest rounds of enhancements we’ve made. As many of you may recall, back in March we discussed a set of developer experiences in AJAX across scenarios such as client-side cross-domain data access, local storage, and navigation state management among many others. The good news is our team has been working since Beta 1 to tweak and update our implementations based on feedback from developers (thanks for your contributions!) and ongoing updates to the W3C standards drafts on which most of these implementations are based or have been submitted for consideration. Not content with doing just that, we also added a few new features for developers. More on that later…

我是Sunava Dutta,一个致力于改进浏览器里AJAX的项目经理。现在Internet Explorer 8 Beta 2已经出来了,我想写一些关于我们最近做的一些改进。可能许多人都还记得,早在三月份的时候,我们讨论了一些列关于在各种场景下的AJAX开发经验,例如客户端跨域读取数据、本地存储以及导航状态管理等等。好消息是我们的团队从Beta 1开始,就一直根据开发者的反馈(谢谢你们的贡献!)来调整和更新我们的实现,也一直在更新W3C标准草案,在这其中的许多实现都是基于这个草案或者已经提交这个草案审议的。除此之外,我们也为开发者增加了一些新的特性,这个以后再详细说...

写了个在页面中点击小图查看大图的功能,应用到了我的blog上,效果可以点一下我前一篇日志中的图。本来在Firefox和IE下都跑得挺好的,可惜我也比较喜欢用Chrome,于是用Chrome看了一下,结果却发现很奇怪的现象:先是两个不同对象的动画效果会混乱,好不容易调好了结果却发现大图的尺寸也乱了……

先是动画效果的问题,两个不同的Element,均使用MooTools封装后的Element对象的morph方法,代码如下:

参考代码: [复制代码] [保存代码]

// 背景层的动画
this._overlayer.morph({ 'opacity': [0, 0.8] });
// 图片的动画
this._imagelayer.morph({
    'left': ex, 
    'top': ey, 
    'width': size.width, 
    'height': size.height, 
    'padding': 8 
});

代码中并没有想要改变this._overlayer宽和高,结果却是this._imagelayer出不来了,this._overlayer的宽和高却变成了图片的宽和高,想想应该是把morph对象弄混了。于是试试给this._imagelayer新new了一个Fx.Morph对象...

.net平台上本来有一套Microsoft自己的Ajax开发框架,不过貌似反应不怎么好,现在终于有个好的消息了:非常火热的jQuery框架已经被Microsoft纳入了ASP.NET AJAX开发框架中,ScottGu已在其BLOG中对其做了较为具体的介绍:

原文地址:jQuery and Microsoft

从图上可以看出,在Visual Studio中,其智能提示还是相当不错的。另外,Microsoft将会另外开发一些基于jQuery的控件(controls)和小插件(widgets),而jQuery的帮助文档也将加入官方的帮助文档中。据其介绍,此功能不久后即将发布...

今天在玩JavaScript的语法高亮,弄得差不多了在Firefox 3和IE 7下都正常了,最后想看看Chrome下是不是正常,结果打开我的测试页面,除了在前面的一部分文字显示出来以外,页面剩余部分居然是一片空白!

很诡异的用chrome打开源代码看(因为有语法高亮,很容易知道问题出在哪),结果很明显,我的js中有这么一句:

参考代码: [复制代码] [保存代码]

this.ignore = '<!--';

在源代码查看器中显示,Chrome从这个注释字符串开始,把后面的都当成注释了,偏偏我后面的js里面还有这么一行:

参考代码: [复制代码] [保存代码]

this.commentOff = '-->';

由于这一段js被chrome认为是注释,以致页面不能正常解析,所以这个字符串前面的HTML代码能够正常工作,而这个后面的就不行了……

不过有一个解决办法,就是把这段js写在外部文件中就没这个问题了^_^

15 6 7 8 9 10 11 12 1319
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 0.5156382 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号