??xml version="1.0" encoding="utf-8" standalone="yes"?> OKQ让我们来看一下这些表? Tablecloth ?a onfocus="undefined" target="_blank">CSS Globe 开发,是一个轻巧易于用的表格Q简z的表格样式添加到你的HTML 表格元素中?/p>
Ask the CSS Guy Table教给我们要如何去创徏能够清晰昑և去资料之间的相关联系的表|例如:点击一个表格元素时Q将H了昄q个元素Qƈ且在U列和横列都昄出相关的cd关系?/p>
Veerle Duoh 为我们展CZ一个漂亮的表格设计Qƈ教我们如何用CSS来吸引用L眼球?/p>
Sortable Table 演示了如何按升序或降序排列以及如何过滤表g的数据?/p>
Css Guy再次对表g用了聚焦高亮的效果,除非用户再次点击Q否则表单数据将一直保持亮高?/p>
他还l了我们另一个示?another example to Lock rows with radios . 如果您有大量的表格数据,但却没有太大的空间来展示它,q可能是个比较好的方?一个纯CSS的表g固定的标题和脚Q以及滚动显C的内容?/p>
q是一个用HTML 和CSS 设计的树形状表格?/p>
8 ) Paginate, sort and search a table with Ajax and Rails q个表格提供了一个动态的界面Q而不需要重新刷新整个页面?/p>
9. Collapsible tables with DOM and CSS 此表格加上箭头Ş象的脚本提示Q用来控制表格的伸展和收~?/p>
它的主要Ҏ包括多列排序,支持<TH>的rowspan和colspan属性以及许多其他功能?/p>
使用了Javascript g的行q行颜色交替Qƈ且添加了onmouseover ?span class="code">onmouseout 事gQ当鼠标点击Ӟ切换背景颜色?/p>
ZMooTools 框架Q高亮显C鼠标悬停时的单元格所在的行和列?/p>
93 styled tables是一个专门收集表格样式的站点Q下面是来自一个表格样式的截图: 可以Ҏ据进行各U不同的排序、过滤?/p>
15. Sortable/Resizable/Editable TableKit TableKitZPrototype框架Q专门收集各UHTML表格Q可以利用Ajax实时的进行表格栏目大、排序等~辑?/p>
alistapart为我们提供了一个极好的例子Q如何用JavaScript和DOM的改变背景色风格Q以H出昄单元根{?/p>
Standardista Table Sorting 是一个Javascript模块Q让您可以对HTML数据表的M栏目q行排序?/p>
可能q会有一些你更想L的详l资料,下面是一些相关的资源链接: 如果你知道其它更强大的Ajax/CSS表格Q欢q在此留a?/p>
1. Tablecloth
2. Ask the CSS Guy Table
#3. A CSS styled table version 2
#4. Sortable Table
5. Row Locking with CSS and JavaScript
#6. Vertical scrolling tables
7. Replicating a Tree table
10. TableSorter plug-in for jQuery
11. Stripe your tables the OO way
12. MooTools Table Row & Column highlighting
13. CSS Table Gallery
14. jQuery Table Filter
16. Make all your tables sortable
17. Zebra Tables
18. Standardista Table Sorting
19. GridView3 Example
20. Mootable
21. Drag & Drop Sortable Lists with JavaScript and CSS
]]>
自以得Js对象是很好理解的东东Q然而真实践h却一片糊涂?br /> 通过查阅l典书籍《Professional JavaScript For Web Developers》稍微有些理解了
JavaScript的基本类?br />
原始cd? Undefined Null Boolean Number String {??typeofҎ能L别之
引用cd? Object Function Array Boolean Number String Date{,用insanceofҎ辨别?/span>
严格来讲QJavaScript没有对象(Object),但是׃和OO术语对应Q所以也UC为对象。所以Array,FunctionQ基本类型,引用cdQ函敎ͼ以及函数的属?{等q些都是对象?/span>
而对象分c,则可以分为内|对?Built-in Object) 和宿d?host object)?br /> 内置对象?Math,Data啊?br /> 宿主对象则如 BOM,DOM之类.
重新回顾了下q些基本概念之后Q在做简单实践就有些理解了?br /> 因此对象的用,创徏方式不尽相同Q最单的归类如下:
1 基本创徏方式
function Class() {
window.alert("Hello Class!");
}
var clz= new Class();
2 讉K对象成员
function Class(){
this.x = " this is x";
this.y = "this is y";
this.z = viewXY;
function viewXY(){
alert("x+","+y);
}
}
var clz= new Class();
clz.viewXY();
3 对象l承
function Parent() {
this.type= "human!";
}
function Child(){
this.age = "26";
this.sex ="male";
this.say= myInfo;
function myInfo(msg){
alert(msg+this.type+ ","+this.age+","+this.sex);
}
}
Child.prototype = new Parent();
var clild = new Child();
clild.say("I'm ");
4.重用原对?(书上的例子太好了Q搬来了)
Funcion.prototype.toString() = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString());
囑փ的预加蝲
览器通常的工作方式是Q只有当要求加蝲囑փ的HTTPh被发送的时候,囑փ才会被加载,而不论它是被动地通过<img>标记加蝲Q还是主动地通过Ҏ调用加蝲。所以,如果你有一DJavaScriptQ需要在鼠标悬停的时候切换图像,或者在时之后自动地更换图像,那么你就可能会在从服务器取回囑փ的时候随时碰到等待,旉会从数秒钟到几分钟不{。当你以较慢的速度q接到Internet上的时候,或者被取回的图像非常巨大的时候,q种状况其显著Q而这U数据gq通常都会毁掉你所期望的效果?/span>
有些览器会试图转嫁q一问题Q比如把囑փ保存在本地缓冲区里,q样以后对它的调用就能够很快q行了,但是需要第一ơ调用图像的时候仍然会产生延迟。预加蝲是一在需要图像之前就把它下蝲到缓冲区里的技术。通过q种方式Q当真的需要图像的时候,它可以被从缓冲区里取出来Qƈ立即昄出来?/span>
Image()对象
预加载图像最单的Ҏ用JavaScript一个新的Image()对象实例化,q把你想要预加蝲的图像的URL传递给它。假设我们有一个叫?/span>http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg的图像,我们希望Q当用户把鼠标放在一个已l显C的图像上的时Q系l能够显C出q个囑փ。ؓ了预加蝲q个囑փQ以便实现更快的响应旉Q我们只用创Z个新的Image()对象Q将其命名ؓheavyImageQƈ使用onLoad()事g处理E序把它同时加蝲到页面上?br />
要注意的是,囑փ标记自nq不会处理onMouseOver()和onMouseOut()事gQ这是Z么上面例子里?lt;img>标记被放在一?lt;a>标记里,后者的加入了对这些事件类型的支持?br /> 用数l加载多个图?/span>
在实际操作中Q你可能需要预加蝲一q以上的囑փQ例如,在包含有多个囑փLQrolloverQ的菜单条里Q或者如果你正在试创徏qx的动态效果。这q不困难Q你所需要做的就是用JavaScript的数l,像下面例子里的一P
在上面的例子里,你先定义变量i和叫做imageObj的Image()对象。然后定义一个叫做images[]的新数组Q在q个数组里,每个数组元素都保存着需要预加蝲的图像来源。最后,创徏一个for()循环Q让它在数组里@环,q将它们中的每一个都指派lImage()对象Q这样就能够把它预加载到~冲区里?br />
onLoad()事g处理E序
和JavaScript里的其它很多对象一PImage()对象也带有多个事件处理程序。这其中最有用的毫无疑问的是onLoad()处理E序了,它会在完成图像加载的时候被调用。这个处理程序可以与自定义的函数一起用,以便在完成图像加载之后进行特定的d。下面的例子通过在图像加载的时候显C?#8220;L待(please waitQ?#8221;提示信息来说明这个问题,然后在图像完成加载之后就向浏览器发送一个新的URL?/span>
当然Q你q可以创Z个图像数l,对它q行循环Q预加蝲每个囑փQƈ在每个阶D对已加载图像的数量保持跟踪。一旦加载了所有的囑փQ事件处理程序就能够按照讑֮把浏览器带到下一个页面(或者进行其他的dQ?/span>
预加载与多状态菜?br />
现在Q把你刚刚学到的理论付诸真正的实跉|么P下面一部分内容是我碰巧编写的一D代码——一个由多个按钮Q图像链接)l成的菜单条——其中每个按钮都可能处于三种状态中的一U:正常QnormalQ、hoverQ悬停)和点击(clickQ。由于所有的按钮都有多个状态,所以就有必要用图像预加蝲来确保菜单能够根据其切换到的状态进行快速的响应。列表A里的代码p了这一炏V?/span>
列表A里的HTML代码会徏立一个由四个按钮l成的菜单条Q每个按钮都有三U状态:正常、悬停和点击。其要求如下Q?/span>
但鼠标移动到处于正常状态的按钮上时Q按钮会变ؓ悬停状态。当鼠标Ud的时候,按钮又会恢复到正常状态。当鼠标点击按钮的时候,按钮׃变ؓ点击状态。它会一直保持这个状态,直到另外一个按钮被点击。如果有一个按钮被点击Q那么其他的按钮都不能处于点击状态。其他的按钮只能够处于悬停或者正常状态。一ơ只能有一个按钮可以被点击。一ơ只能有一个按钮处于悬停状态?
W一Q务是建立保存有菜单每个状态的囑փ的数l。与q些数组元素相对应的<img>元素也都在HTML文档的主体里被创建,q按序命名。要注意的是Q对数组值的索引是从0开始的Q而相应的<img>元素是从1开始命名的——这需要在脚本后面的一D里q行某种计算上的调整?/span>
PreloadImages()函数会负责把所有的囑փ都加载到~冲区里Q这L话对鼠标Ud的响应时间会被减到最。一个for()循环被用在第一步里创徏的图像里q行q代Qƈ预加载每一个图像?/span>
ResetAll()函数是把所有图像恢复都到它们正常状态的方便Ҏ。这是有必要的,因ؓ当菜单的目被点ȝ时候,菜单里其他所有的目都必d被点击项目能够切换到点击状态之前恢复到正常状态?/span>
SetNormal()、setHover()和setClick()函数负责把特定图像(囑փ的编可作ؓ函数的自变量q行传递)的来源分别改为正常、悬停或者点ȝ态。由于被点击的图像必M直保持点ȝ态,直到另外一个图像被点击Q见W二要求)Q所以它们暂时不会对鼠标Ud作出反应Q这L话,如果按钮q不是处在点ȝ态,那么setNormal()和setHover()函数所包括的代码就只能用来改变按钮的状态?/span>
上面所提到的预加蝲只是提高你JavaScript效果响应旉的多U方法之一。就在你的网站上使用上面列出的技巧,q根据你的要求在需要的地方更改它们吧。祝你好q!
一、多样化摺叠菜单Q?/strong>下蝲
一个由老外写的折叠式垂直菜单,多样化,多功能,可自订,使用ҎQ支持FF?/font>
二、CSS圆角ҎQ?/strong>下蝲
以CSSZ要,用Java Script装的相当完_也是老外写的Q支持多览器,可以自订样式Q目前有十多U可以运用?/font>
?
?
三、模拟视H:下蝲
用层模拟的视H,是一个中国高手写的,Java Script装的相当好Q用上也很Ҏ
四、支持FF的省略符Q?/strong>下蝲
说到省略W,那非CSS莫属Q有个老外用Java Script来实玎ͼq且是批量处理的Q重Ҏ支持FF?/font>
?
五、TAB选项卡:下蝲
用Java Script模仿各种作业pȝ的选项卡,老外是牛,不仅支援多样式的x切换Q同时也支援每个选项卡是否附带图C的切换选项Q选项卡也可以上下切换?/font>
六、最佛_多样式WindowsQ?/strong>下蝲
用层模拟视窗的最佳代表作Q这是我看过功能最多的模拟式窗Q内附多?4功能与样式Q你完完全全可以把它当成是一个真正的视窗来应用,可以Ҏ你的需求来应用Q快丢掉你那认ؓ好用的层视窗Q这套封装非常完整的视窗l对可以满你的各种需求?/font>
?
?
七、多样化的垂直菜单:附g
别具风格的方块式垂直折叠菜单Q目前有8U风格可以运用,如果你已l厌烦WEB上^凡的菜单Q这套在国外颇受Ƣ迎的菜单肯定是你的最佳首选?/font>
八、多样化的连l提C效果:下蝲
q个q结提示样式允许你直接写入css与htmlQ共?4功能可以让你自订?/font>
?0
九、侧栏式折叠菜单Q?/strong>下蝲
q是一个侧栏式的折叠菜单,它允怽讄它是否有q渡效果、侧栏菜单是否自动~、菜单项切换是否允许动画q渡、是否轮替切换等多项讄Qƈ且也有多U样式可以运用?/font>
q个脚本有个很好玩的东东Q下载ƈ且解压後Q请q入samples的目录ƈ打show.html看看效果Q我不知道这效果容不Ҏ实现Q但是这效果很牛Q菜单全自动q行的~
十、图形滚动条Q?/strong>下蝲
老外写的囑Ş滚动条,有多U样式,在ie里头q支持滚轮滚动?/font>
?2
十一、图片倒媄效果Q?/strong>下蝲
说到囄倒媄Q不外乎是直接作成囄跟css滤镜来实玎ͼ但是q个是用Java Script实现的,值得借镜?/font>
?3
十二、代码自动高亮:下蝲
虽说q不是什麽新东西Q但L会有人需要吧Q而且惛_正则表达的hQ这肯定是最佛_镜的作品?/font>
十三、酷似flash效果的图片展C:下蝲
q个老外牛到有点变态,q图片展C效果已l跟FLASH没什麽两P用Java Script写的耶?/font>
?5
十四、让ie6支援png图档Q?/font>下蝲
?6
q个问题之前被很多h讨论q,我就不多说什麽了Q有需要下吧?/font>
表达式: | ||||
试| | ||||
输出| | ||||
标 识Q?/td> | 全局 忽略 多行 | 方 法Q?/td> | ||
匚w中文字符的正则表辑ּQ?[\u4e00-\u9fa5]
匚w双字节字W?包括汉字在内)Q[^\x00-\xff]
应用Q计字W串的长度(一个双字节字符长度?QASCII字符?Q?/font>
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}
匚wI的正则表辑ּQ\n[\s| ]*\r
匚wHTML标记的正则表辑ּQ?<(.*)>.*<\/\1>|<(.*) \/>/
匚w首尾I格的正则表辑ּQ?^\s*)|(\s*$)
应用Qjavascript中没有像vbscript那样的trim函数Q我们就可以利用q个表达式来实现Q如下:
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
利用正则表达式分解和转换IP地址Q?/font>
下面是利用正则表辑ּ匚wIP地址QƈIP地址转换成对应数值的javascriptE序Q?/font>
function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匚wIP地址的正则表辑ּ
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}
不过上面的程序如果不用正则表辑ּQ而直接用split函数来分解可能更单,E序如下Q?/font>
var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是Q?+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
匚wEmail地址的正则表辑ּQ\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匚w|址URL的正则表辑ּQhttp://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
利用正则表达式去除字串中重复的字W的法E序Q[注:此程序不正确Q原因见本脓回复]
var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2) //l果为:abcefgi
我原来在CSDN上发贴寻求一个表辑ּ来实现去除重复字W的ҎQ最l没有找刎ͼq是我能惛_的最单的实现Ҏ。思\是用后向引用取出包括重复的字符Q再以重复的字符建立W二个表辑ּQ取C重复的字W,两者串q。这个方法对于字W顺序有要求的字W串可能不适用?/font>
得用正则表达式从URL地址中提取文件名的javascriptE序Q如下结果ؓpage1
s="http://www.9499.net/page1.htm"
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
alert(s)
利用正则表达式限制网表单里的文本框输入内容Q?/font>
用正则表辑ּ限制只能输入中文Qonkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"
用正则表辑ּ限制只能输入全角字符Q onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"
用正则表辑ּ限制只能输入数字Qonkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
用正则表辑ּ限制只能输入数字和英文:onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
正则表达?regular expression)对象包含一个正则表辑ּ模式(pattern)。它h用正则表辑ּ模式d
配或代替一个串(string)中特定字W?或字W集?的属?properties)和方?methods)?
正则表达式构造函敎ͼ new RegExp("pattern"[,"flags"]);
参数说明Q?
pattern -- 一个正则表辑ּ文本
flags -- 如果存在Q将是以下|
g: 全局匚w
i: 忽略大小?
gi: 以上l合
在构造函CQ一些特D字W需要进行{?在特D字W前?\")。正则表辑ּ中的Ҏ字符Q?
字符 含意
\ 转意Q即通常?\"后面的字W不按原来意义解释,?b/匚w字符"b"Q当b前面加了反斜杆后/\b/Q{意ؓ
匚w一个单词的边界?
-?
Ҏ则表辑ּ功能字符的还原,?*"匚w它前面元字符0ơ或多次Q?a*/匹配a,aa,aaaQ加?\"后,/a\*/
只匚w"a*"。?
^ 匚w一个输入或一行的开_/^a/匚w"an A"Q而不匚w"An a"
$ 匚w一个输入或一行的l尾Q?a$/匚w"An a"Q而不匚w"an A"
* 匚w前面元字W?ơ或多次Q?ba*/匹配b,ba,baa,baaa
+ 匚w前面元字W?ơ或多次Q?ba*/匹配ba,baa,baaa
? 匚w前面元字W?ơ或1ơ,/ba*/匹配b,ba
(x) 匚wx保存x在名?1...$9的变量中
x|y 匚wx或y
{n} _匚wnơ?
{n,} 匚wnơ以上?
{n,m} 匚wn-mơ?
[xyz] 字符?character set)Q匹配这个集合中的Q一一个字W?或元字符)
[^xyz] 不匹配这个集合中的Q何一个字W?
[\b] 匚w一个退格符
\b 匚w一个单词的边界
\B 匚w一个单词的非边?
\cX q儿QX是一个控制符Q?\cM/匚wCtrl-M
\d 匚w一个字数字W,/\d/ = /[0-9]/
\D 匚w一个非字数字符Q?\D/ = /[^0-9]/
\n 匚w一个换行符
\r 匚w一个回车符
\s 匚w一个空白字W,包括\n,\r,\f,\t,\v{?
\S 匚w一个非I白字符Q等?[^\n\f\r\t\v]/
\t 匚w一个制表符
\v 匚w一个重直制表符
\w 匚w一个可以组成单词的字符(alphanumericQ这是我的意译,含数?Q包括下划线Q如[\w]匚w"$5.98" 中的5Q等于[a-zA-Z0-9_]
\W 匚w一个不可以l成单词的字W,如[\W]匚w"$5.98"中的$Q等于[^a-zA-Z0-9]?
说了q么多了Q我们来看一些正则表辑ּ的实际应用的例子Q?
HTML代码的屏?
function mask_HTMLCode(strInput) {
var myReg = /<(\w+)>/;
return strInput.replace(myReg, "<$1>");
}
E-mail地址验证:
function test_email(strEmail) {
var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
return false;
}
正则表达式对象的属性及ҎQ?
预定义的正则表达式拥有有以下静态属性:input, multiline, lastMatch, lastParen, leftContext,
rightContext?1?9。其中input和multiline可以预设|。其他属性的值在执行qexec或testҎ后被Ҏ
不同条g赋以不同的倹{许多属性同时拥有长和短(perl风格)的两个名字,q且Q这两个名字指向同一个倹{? JavaScript模拟perl的正则表辑ּ)
正则表达式对象的属性:
属?含义
$1...$9 如果??存在Q是匚w到的子串
$_ 参见input
$* 参见multiline
$& 参见lastMatch
$+ 参见lastParen
$` 参见leftContext
$'' 参见rightContext
constructor 创徏一个对象的一个特D的函数原型
global 是否在整个串中匹?bool?
ignoreCase 匚w时是否忽略大写(bool?
input 被匹配的串?
lastIndex 最后一ơ匹配的索引
lastParen 最后一个括hh的子串?
leftContext 最q一ơ匹配以左的子串
multiline 是否q行多行匚w(bool?
prototype 允许附加属性给对象
rightContext 最q一ơ匹配以右的子串
source 正则表达式模式?
lastIndex 最后一ơ匹配的索引
正则表达式对象的ҎQ?
Ҏ 含义
compile 正则表达式比较?
exec 执行查找
test q行匚w
toSource q回特定对象的定?literal
representing)Q其值可用来创徏一个新的对象。重载Object.toSourceҎ得到的。?
toString q回特定对象的串。重载Object.toStringҎ得到的。?
valueOf q回特定对象的原始倹{重载Object.valueOfҎ得到
例子Q?
<script language = "JavaScript">
var myReg = /(w+)s(w+)/;
var str = "John Smith";
var newstr = str.replace(myReg, "$2, $1");
document.write(newstr);
</script>
输?Smith, John"
以上代码卛_Ҏ需要在别h的onLoad()事g之前或之后执行自q代码!