一张html标签嵌套规范的图表

joel — Tue, 13 Oct 2009 01:09:18 +0000

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在里面再嵌入一个这样的约定。

说明：

为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如而不应是）
小写的单词表明一组或一系列 HTML 标签
每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。
#PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 ä和 ä）
CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
excluding … 意即不得直接或者间接的包含所列的元素

html标签嵌套规范

注. 对于 XHTML 1.0，基本上一致，不同点如下：

在 XHTML 中，

标签后可以紧跟一个，而在 HTML 4.01 里，不允许这样，不过标签又是可以省略的。意思就是说，如果代码中的

后紧跟，对于 HTML 4.01，会隐性的生成一个标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。

via:this

Flex DataGrid 分页（服务器端分页版）

warmC — Wed, 09 Sep 2009 13:51:57 +0000

之前写过DataGrid的分页控件，但是针对的数据类型是客户端型的，也就是说数据必须全部读取到客户端，对于小型数据类的分页比较适合。想了解的同学可以到这里看看
Flex DataGrid 分页排序箭头指示
这一篇主要介绍的是我刚刚整出来的针对服务器端数据分页的控件，表达能力不是很好。就叫DataGrid分页2吧。
老样子，在文章的最后附上了包含源码的一个小Demo。下面讲讲主要思路。
>>> SPageController.mxml
用法类似之前的PageController.mxml
只是因为数据来源未知，所以无法直接赋值数据源；
介绍一下较重要的属性：
1.callBackFunc，用于客户端内存数据不足时进行数据补充通知；
2.AppandData方法用于在接受到数据补充通知后进行数据追加；
因为数据源未知的原因，将无法使用全部数据的排序，而只能对当前显示数据排序（未解）。
另外介绍一下以下属性以及作用：
1.通过useCache可设置是否进行客户端本地缓存数据，通过sharedObject缓存
2.通过Versioning可设置是否进行版本统一控制，需外部传当前版本号
3.通过ClientPages可设置客户端内存中缓存的数据页数，例如每页显示5条数据，
但是ClientPages设置为3的话，其实每次请求的数据时15条，将在客户端内存
缓存多2(3-1)页的数据
源码里面有注释以及解释，自己去看。有疑问的童鞋留言。
Flex DataGrid 分页（服务器端分页版）

图文混排 RichTextField 组件

warmC — Mon, 31 Aug 2009 05:10:28 +0000

今天在Google code上看到一个很好用的图文混排组件，名字叫做 RichTextField。地址在这里http://code.google.com/p/riaidea/wiki/RichTextField

作者的想法很好。但他所说 “RichTextField是一个实现图文混编的AS3组件，特别适合像QQ那样的聊天组件需要。”。如果要像QQ一样的聊天功能，则需要将前台的内容传送到后台，再由后台服务器端进行传播，传送前必须进行打包，至于将表情如何打包，也有多种做法。

但是我找了半天没找到一个方法，可以将该组件的内容转换成可以进行传输的数据。于是动手修改了一下，将表情转换成特殊字符串，再进行传输，我比较喜欢这种做法，可以让传输的数据变得更小一点。想看原版的就上Google code，需要到转换功能的就下文章最后的Demo。↓ 解释一下，我新加进去的几个方法：

1.添加了converRichToString方法，将RichTextField控件的内容，包括表情，转换成字符串，可供Socket或者其他方式传输。

2.添加了converStringToRich方法，将converRichToString转换成的字符串再转换成能使RichTextField控件识别的对象。

3.重写了set visible方法。我发现如果需要再某个情况下，将RichTextField隐藏起来的话，RichTextField机制里面的表情容器不会隐藏。

顺便说一下，Demo里面只是模拟了一下服务器广播，并没有真正使用到服务器端。为了运行起来更方便。
RichTextField可转换版Demo下载

<-----------华丽的分割线------------>
有童鞋提及到能不能实现类似QQ聊天，自动识别URL转换成超链接。刚好今天有空，我又修改了一下,通过正则表达式判断超类接，再进行转换。
正则可能并不能符合某些特殊要求童鞋的胃口，见机行事咯。
Demo在这里图文混排 – 自识别超链接版

flex 客户端缓存 module swf

warmC — Sat, 22 Aug 2009 07:35:25 +0000

flex或者flash客户端的缓存，并不是指浏览器的缓存，浏览器的缓存在一定时间后会过期，先作此声明。
使用flex或者flash开发出来的网站最大的问题就是swf文件过大，国内网速有限，导致加载时间过长，这样会丢失很多潜在的客户。
flex使用RSL技术，可以解决框架的缓存与共享，很大程度的解决了加载问题。但是如果项目过大，还是会导致加载时间很长这个问题。我使用了SharedObject进行客户端的SWF与Module的缓存，并进行版本控制。在服务器端做一个配置文件，客户端若有缓存过数据，则进行版本控制，达到客户端数据与服务器端数据保持一样。
例子:
假设现在有个Application的项目，生成的Application.swf文件是2028K，客户端的下载速度是100k/s，则差不多需要使用20秒的时间。现在将Application中的部分源码抽出来，使用Module机制，变成Application.swf 428K，Module1.swf 1000K，Module2.swf 600K。不使用缓存的话，完整的加载完Application还是需要差不多20秒时间，若使用缓存，将Module1.swf与Module2.swf缓存在客户端，则只需要加载Application.swf的428K，差不多4秒时间，加上Moduel的读取2秒时间，最多也就6-7秒时间。效率很明显。而且还可以缓存其他的乱七八糟的东西，例如皮肤.swf，图片资源.swf等等.如果有跳转页面的话，还可以将Application.swf也进行缓存。
问题：
如果遇到客户端不允许缓存，则跳过缓存，无碍程序的加载和运行。
如果一个用户，多次的打开本网站，说明对本网站有了一定的兴趣，在多次被询问是否允许缓存后，点击允许的可能性也加大。
当用户能够清楚的了解到缓存的好处时，允许缓存，一.可以加速用户体验，二.可以降低服务器压力，三.可以降低服务器带宽的使用。
文章最后有一个Demo供下载测试使用，源代码暂时打包成SWC，未开放出来。
下面将解释一下如何使用WarmC.swc：
配置文件’Cache_config.xml’

        "moduleOne" version="beta01"/>
	"moduleTwo" version="beta01"/>
	"mySwf" version="beta01"/>

*当然，配置文件的路径，和名字可以由你任取，但需要在版本控制时指定路径，下面将介绍如何启动版本控制
*id属性，标记这个缓存的名字，将会在全局使用，包括缓存的SharedObject名称，以及版本控制,下面读取缓存时将会使用到这个id
*version版本控制，随你起名称。但是为了确保不会与以前的版本混淆，推荐最好还是使用递增的版本名称
首先必须在缓存的使用之前先启动版本控制，需要导入以下包：

import WarmC.Cache.LocationDataProxy;

然后启动版本控制：

LocationDataProxy.getInstance().CacheReBuild(0.5);

CacheReBuild(size:int,configUrl:String)方法使用说明:
* size参数,指定缓存的总大小，单位为兆（M），不填则默认为1M即运行到这个地方时，就会判断客户端的SharedObject 允许缓存大小，再提示用户修改缓存最大值设置如果你需要缓存的数据较大，则可对应取下面的值
size<=0 不提示，或者默认客户端的100Kb
0 1<=size<10 缓存10Mb以内的数据
10<=size 缓存无限大的数据
例如：你需要缓存的文件总大小为700K，你可以设置size=0.7,这样子，就会在启动版本控制的是很对用户进行询问，而且保证用户同意缓存以后不会再次询问
* configUrl,是指配置文件XML地址，默认是在根目录'Cache_config.xml'，必须指定，并且配置文件格式必须与Demo格式一致
* 当配置文件正确无误时，版本控制启动成功，会读取服务器端配置，与客户端缓存进行版本比较。版本不同的话，将客户端缓存删除。如果版本控制启动失败，会导致客户端的缓存与服务器端的缓存无法同步。
设置缓存人性化功能

LocationDataProxy.getInstance().Warm_Human(true);

Warm_Human（bool:Boolean）说明:
* FlashPlayer的SharedObject，在使用超过客户端的设置大小后，就会提示用户，并征求其意见，是否同意网站的缓存
* 如果，在系统需要缓存多个数据时，而且用户拒绝了缓存，系统将会在每次需要写入SharedObject时，都进行询问是否允许缓存，这样的用户体验十分糟糕。
*当设置Warm_Huma为true时，在第一次提示用户是否允许程序缓存改大小后，如果用户拒绝了，以后的缓存将不会再提示，也不会再在客户端缓存，直到用户再次运行此程序（，虽然是有点烦人，但嫌麻烦，多数人不会在意那几M的空间，而点了允许）
* false，不管用户是否拒绝，每次需要增大缓存区大小时，都会提示用户
* 不使用该方法，默认为true。所以这个方法很少用到。
确保版本控制启动成功后，可以进行module加载，先导入以下包：

import WarmC.Cache.ModuleCacheProxy;

加载module

ModuleCacheProxy.getInstance().load("moduleOne","ModuleOne.swf",onProgress,onReady);
function onProgress(bytesLoaded:uint,bytesTotal:uint):void{
	trace(">加载ModuleOne:"+bytesLoaded+"/"+bytesTotal);
}
function onReady(data:Object):void{
	trace(">ModuleOne 加载完成!");
	Application.application.addChild(data as UIComponent);
}

* load(name:String,url:String,onProgress:Function,onReady:Function)说明:
* name,指的是Module在配置文件Cache_config文件中的ID，此处必须与配置文件一致。用于版本控制，以及
客户端的缓存文件名，通过name获取SharedObject
* url,指的是Module的Swf文件路径，Demo的Module文件均在根目录，所以直接指定名称
* onProgress,指加载Module时的进度回调方法，传回两个参数，bytesLoaded与bytesTotal，若需要显示进度条，则这个方法是必备的。如果缓存不存在，则bytesLoaded与bytesTotal会是从服务器端加载数据的值；
如果缓存已经存在，则该方法只调用一次，而且两个回传参数均是100
* onReady,指加载完成后的回调方法，传回一个UIComponent类型的参数data
* 代理器使用了饿汉单例模式，检测module是否已经缓存在客户端。
* 如果已经缓存在客户端，则直接读取
* 否则，从服务器端加载，显示，再缓存到客户端，打上版本。
加载SWF（非module），需导入以下包：

import WarmC.Cache.SwfCacheProxy;

加载SWF:

SwfCacheProxy.getInstance().load("mySwf","test.swf",onProgress,onReady);
function onProgress(bytesLoaded:uint,bytesTotal:uint):void{
	trace(">加载SWF:"+bytesLoaded+"/"+bytesTotal);
}
function onReady(data:Object):void{
	trace(">SWF 加载完成!");
	var load:Loader = new Loader()
	load.loadBytes( data as ByteArray );
	var uic:UIComponent=new UIComponent();
	uic.addChild(load); 
	Application.application.addChild(uic);
}

* load(name:String,url:String,onProgress:Function,onReady:Function)说明:
*属性作用与ModuleCacheProxy一样
*唯一不同点，onReady方法的回传参数为一个ByteArray，需要自己进行包装目前使用起来就是这样。你可以使用SwfCacheProxy来缓存皮肤Style.swf，游戏插件，图片资源等等Swf数据。
在例子中，有个“加载Module 2”:

private function loadModule2():void{
	ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);
	ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady);
	function onProgress(bytesLoaded:uint,bytesTotal:uint):void{
		trace(">加载ModuleTwo:"+bytesLoaded+"/"+bytesTotal);
	}
	function onReady(data:Object):void{
		trace(">ModuleTwo 加载完成!");
        	Application.application.addChild(data as UIComponent);
	}
}

细心点，你就会发现，moduleTwo.swf使用ModuleCacheProxy加载了两次。嗯，这是为了演示一下，如果在一个swf还未加载完毕，再将他加载一遍，就会被拒绝。如果你想一次性将一个SWF加载多次（也可以说Copy多个Swf），将会遭到拒绝，你可以一个一个慢慢加载，在onReady方法里面加载。或者根本可以不用使用加载，直接使用复制，如何复制，自己去google啦。
这样可以避免一点，加载缓存时很卡。
另外，做人得厚道点。别什么东西都往人家C盘上面塞。
罗嗦了这么多，看Demo吧。flex 客户端缓存 module swf 如果发现什么Bug的话，欢迎留言…

flex可多选的ComboBox

warmC — Tue, 18 Aug 2009 09:27:47 +0000

今天在一Flex群上看到有童鞋需要用到可多选的ComboBox，而且内嵌CheckBox。
下午有空动了动手，做了以下的一个插件(文章最后又下载地址)。

WarmC:MyComboBox,继承自ComboBox,所以用法差不多。如果使用XML数据源的话，得自己手动进行修改。

重写了prompt的set方法，因为自带的prompt set方法会导致dropdown的MouseEvent.ROLL_OUT与MouseEvent.ROLL_OVER监听丢失，可能是因为dropdown被重新构造了的原因。

支持直接在数据源里面指定CheckBox的selected与enabled属性，这两个属性比较常用。下面的Demo里面有详细的内容。

Demo: flex可多选的ComboBox 下载地址1
flex可多选的ComboBox 下载地址2
有问题或者更好的解决办法的请不吝留言。呵呵。

jQuery插件:fancybox

joel — Mon, 10 Aug 2009 02:38:23 +0000

它是什么?

fancybox 是一个 MAC 风格的用来在 web 页面显示图片, html 内容和多媒体的 “lightbox(灯箱)” 工具,是一个比较轻量的 jQuery 插件,所以使用 jQuery library ,遵守 MIT License.

特点:

增加了一个漂亮的阴影背景
增加了一个相关列表的导航功能,也就是可以展示一组图片或 html 内容
可以显示图片, 内嵌多媒体, AJAX 以及 iframe 内容
通过设置 CSS 样式实现可定制化
支持使用这个 easing plugin 插件

下载

当前版本: v.1.2.1

地址: Google code

在 FireFox, Safari, Opera, IE6 & IE7 浏览器上测试成功通过.

效果

点击查看

使用方法

首先,要确保你添加了 DOCTYPE, 这是用来确保CSS样式可以正常显示.

1. 包含需要的 JS 文件

选择性的添加 easing 插件所需的 js 文件, 如果不使用该插件就不添加.

2. 添加 FancyBox CSS 文件
如果 FancyBox CSS 文件没有和 images 目录在同一目录内, 应该改变图片路径

3. 创建一个链接
加载图片使用:

加载同一页面中的 element:

This shows content of element who has id="data"

Iframe方式:

This goes to iframe
 or
This goes to iframe

Ajax:

This takes content using ajax

可选参数:使用title属性可以增加图片说明文字.
注意:你或许想要删除点击图片关闭展示这个功能,此时你必须使用 Iframe 或者 inline 方式去加载.

4. 使用 jQuery 选择器, 让插件炫起来

$(document).ready(function() { 
    /* This is basic - uses default settings */ 
 
    $("a#single_image").fancybox(); 
 
    /* Using custom settings */ 
 
    $("a#inline").fancybox({ 
        'hideOnContentClick': true 
    }); 
 
    $("a.group").fancybox({ 
        'zoomSpeedIn': 300, 
        'zoomSpeedOut': 300, 
        'overlayShow': false 
    }); 
});

1Kb CSS Grid:像玩拼图一样进行布局

joel — Mon, 03 Aug 2009 01:08:56 +0000

其实我们在写css的时候,最开始的问题就是进行布局,普通的企业站好像还好一点,挺常规化的布局就可以搞定,但是稍稍遇到点复杂的就会显得很麻烦,因为要为这一块单独的去进行布局修改等重复性工作.做这一行的最烦的事就是重复性的造轮子,不过现在好了,一切都可以很轻松的搞定了,因为有了一个现成的1Kb CSS Grid,这是一个CSS框架,但是它非常的轻量级,就像名字一样,只有1kb.所以,我们很容易把它拿出来集成到我们自己的Framework中,毕竟通用性的CSS Framework不是适合每个人或TEAM的,适合的才是最好的.

1Kb CSS Grid的特别不只是在于它的小巧而具备良好的可移植性,我的理解它的强大之处更在于它的高度自定义.这里的高度不是说的height,而是level.上到了这个1Kb CSS Grid网站,你就可以看到样式按钮,按照自己所需进行设置一下,然后down下来,即可,真的是非常之强大与方便.

完美的IE6 position:fixed

joel — Mon, 20 Jul 2009 06:52:39 +0000

这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不完美.那么如何解决这一问题呢?

造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里).
知道了原因,我们就大概知道如何解决了:

没错,就是加上这样的一段code,现在看看完整的页面code:


"http://www.w3.org/1999/xhtml">
>
"Content-Type" content="text/html; charset=utf-8" />
>IE6 position:fixed>
>
* {
	padding:0;
	margin:0;
}
 
#fixed {
	background-color:#ddd;
	border:1px solid #aaa;
	position:fixed;
	right:0;
	top:0;
}
>

>
>
"height:2000px">>
"fixed">
  FIXED
>
>
>

from: 随网之舞

Flex Home

模仿新浪邮箱登陆提示

本站更换新域名

一张html标签嵌套规范的图表

Flex DataGrid 分页（服务器端分页版）

图文混排 RichTextField 组件

flex 客户端缓存 module swf

flex可多选的ComboBox

jQuery插件:fancybox

它是什么?

下载

效果

使用方法

1Kb CSS Grid:像玩拼图一样进行布局

完美的IE6 position:fixed

Flex Home

模仿新浪邮箱登陆提示

本站更换新域名

一张html标签嵌套规范的图表

Flex DataGrid 分页 （服务器端分页版）

图文混排 RichTextField 组件

flex 客户端缓存 module swf

flex可多选的ComboBox

jQuery插件:fancybox

它是什么?

下载

效果

使用方法

1Kb CSS Grid:像玩拼图一样进行布局

完美的IE6 position:fixed

Flex DataGrid 分页（服务器端分页版）