<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>凯阔天空 &#187; 学习笔记</title>
	<atom:link href="http://www.hikai.cn/article/category/study/feed" rel="self" type="application/rss+xml" />
	<link>http://www.hikai.cn</link>
	<description>宁静致远</description>
	<lastBuildDate>Sun, 27 Mar 2011 16:31:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>javascript视频教程</title>
		<link>http://www.hikai.cn/article/288.html</link>
		<comments>http://www.hikai.cn/article/288.html#comments</comments>
		<pubDate>Wed, 08 Apr 2009 13:37:36 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[javascript视频教程]]></category>
		<category><![CDATA[视频教程]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=288</guid>
		<description><![CDATA[<p>在网上早的一些javascript视频教程<a href="http://v.youku.com/v_playlist/f3051209o1p0.html"><br />http://v.youku.com/v_playlist/f3051209o1p0.html</a></p>
]]></description>
			<content:encoded><![CDATA[<p>在网上早的一些javascript视频教程<a href="http://v.youku.com/v_playlist/f3051209o1p0.html"><br />http://v.youku.com/v_playlist/f3051209o1p0.html</a></p>
<p>原书视频地址<br /><a href="http://learning.artech.cn/20080621.mastering-javascript-jquery.html">http://learning.artech.cn/20080621.mastering-javascript-jquery.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/288.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>108个常用JAVASCRIPT语句</title>
		<link>http://www.hikai.cn/article/269.html</link>
		<comments>http://www.hikai.cn/article/269.html#comments</comments>
		<pubDate>Mon, 09 Mar 2009 22:57:52 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=269</guid>
		<description><![CDATA[<p>1.document.write( &#34; &#34;); 输出语句 <br />2.JS中的注释为// <br />3.传统的HTML文档顺序是:document- &#62;html- &#62;(head,body) <br />4.一个浏览器窗口中的DOM顺序是:window- &#62;(navigator,screen,history,location,document) <br />5.得到表单中元素的名称和值:document.getElementById( &#34;表单中元素的ID號 &#34;).name(或value) <br />...</p>
]]></description>
			<content:encoded><![CDATA[<p>1.document.write( &quot; &quot;); 输出语句 <br />2.JS中的注释为// <br />3.传统的HTML文档顺序是:document- &gt;html- &gt;(head,body) <br />4.一个浏览器窗口中的DOM顺序是:window- &gt;(navigator,screen,history,location,document) <br />5.得到表单中元素的名称和值:document.getElementById( &quot;表单中元素的ID號 &quot;).name(或value) <br />6.一个小写转大写的JS: document.getElementById(&quot;output&quot;).value = document.getElementById( &quot;input &quot;).value.toUpperCase(); <br />7.JS中的值类型:String,Number,Boolean,Null,Object,Function <br />8.JS中的字符型转换成数值型:parseInt(),parseFloat() <br />9.JS中的数字转换成字符型:( &quot; &quot; 变量) <br />10.JS中的取字符串长度是:(length) <br />11.JS中的字符与字符相连接使用 號. <br />12.JS中的比较操作符有:==等于,!=不等于, &gt;, &gt;=, &lt;. &lt;= <br />13.JS中声明变量使用:var来进行声明 <br />14.JS中的判定语句结构:if(condition){}else{} <br />15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop} <br />16.循环中止的命令是:break <br />17.JS中的函数定义:function functionName([parameter],&#8230;){statement[s]} <br />18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替. <br />19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self <br />20.状態栏的设置:window.status= &quot;字符 &quot;; <br />21.弹出提示信息:window.alert( &quot;字符 &quot;); <br />22.弹出確认框:window.confirm(); <br />23.弹出输入提示框:window.prompt(); <br />24.指定当前显示链接的位置:window.location.href= &quot;URL &quot; <br />25.取出窗体中的所有表单的数量:document.forms.length <br />26.关闭文档的输出流:document.close(); <br />27.字符串追加连接符: = <br />28.创建一个文档元素:document.createElement(),document.createTextNode() <br />29.得到元素的方法:document.getElementById() <br />30.设置表单中所有文本型的成员的值为空: <br />var form = window.document.forms[0] <br />for (var i = 0; i &lt;form.elements.length;i ){ <br />if (form.elements.type == &quot;text &quot;){ <br />form.elements.value = &quot; &quot;; <br />} <br />} <br />31.复选按钮在JS中判定是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE) <br />32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length <br />33.单选按钮组判定是否被选中也是用checked. <br />34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来確定被选中的值) <br />35.字符串的定义:var myString = new String( &quot;This is lightsword &quot;); <br />36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase(); <br />37.返回字符串2在字符串1中出现的位置:String1.indexOf( &quot;String2 &quot;)!=-1则说明没找到. <br />38.取字符串中指定位置的一个字符:StringA.charAt(9); <br />39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6); <br />40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回 value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n 1))返回隨机数 <br />41.定义日期型变量:var today = new Date(); <br />42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置 月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置 分,dateObj.setSeconds(val)设置秒 [注重:此日期时间从0开始计] <br />43.FRAME的表示方式:[window.]frames[n].ObjFuncVarName,frames[&quot;frameName &quot;].ObjFuncVarName,frameName.ObjFuncVarName <br />44.parent代表父亲对象,top代表最顶端对象 <br />45.打开子窗口的父窗口为:opener <br />46.表示当前所属的位置:this <br />47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名 <br />48.在老的浏览器中不执行此JS: &lt;!&#8211; //&#8211; &gt; <br />49.引用一个文件式的JS: &lt;script type= &quot;text/javascript &quot; src= &quot;aaa.js &quot; &gt; &lt;/script &gt; <br />50.指定在不支持脚本的浏览器显示的HTML: &lt;noscript &gt; &lt;/noscript &gt; <br />51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例: &lt;a href= &quot;a.html &quot; &gt;dfsadf &lt;/a &gt; <br />52.JS的內建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeErr or,URIError <br />53.JS中的换行:&amp;#92;n <br />54.窗口全屏大小: &lt;script &gt;function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen; &lt;/script &gt; <br />55.JS中的all代表其下层的全部元素 <br />56.JS中的焦点顺序:document.getElementByid( &quot;表单元素 &quot;).tabIndex = 1 <br />57.innerHTML的值是表单元素的值:如 &lt;p id= &quot;para &quot; &gt; &quot;how are &lt;em &gt;you &lt;/em &gt; &quot; &lt;/p &gt;,则innerHTML的值就是:how are &lt;em &gt;you &lt;/em &gt;<br />58.innerTEXT的值和上面的一样,只不过不会把 &lt;em &gt;这种標记显示出来. <br />59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状態. <br />60.isDisabled判定是否为禁止状態.disabled设置禁止状態 <br />61.length取得长度,返回整型数值 <br />62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc <br />63.window.focus()使当前的窗口在所有窗口之前. <br />64.blur()指失去焦点.与FOCUS()相反. <br />65.select()指元素为选中状態. <br />66.防止用户对文本框中输入文本: <br />67.取出该元素在页面中出现的数量:document.all.tags( &quot;div(或其它HTML標记符) &quot;).length <br />68.JS中分为两种窗体输出:模態和非模態.window.showModaldialog(),window.showModeless() <br />69.状態栏文字的设置:window.status= &amp;apos;文字 &amp;apos;,默认的状態栏文字设置:window.defaultStatus = &amp;apos;文字. &amp;apos;; <br />70.添加到收藏夹:external.AddFavorite( &quot;<a href="http://www.dannyg.com">http://www.dannyg.com</a> &quot;;, &quot;jaskdlf &quot;); <br />71.JS中碰到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError; <br />72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener&#8230;的多重继续. <br />73.JS中的self指的是当前的窗口 <br />74.JS中状態栏显示內容:window.status= &quot;內容 &quot; <br />75.JS中的top指的是框架集中最顶层的框架 <br />76.JS中关闭当前的窗口:window.close(); <br />77.JS中提出是否確认的框:if(confirm( &quot;Are you sure? &quot;)){alert( &quot;ok &quot;);}else{alert( &quot;Not Ok &quot;);} <br />78.JS中的窗口重定向:window.navigate( &quot;<a href="http://www.sina.com.cn">http://www.sina.com.cn</a> &quot;;); <br />79.JS中的打印:window.print() <br />80.JS中的提示输入框:window.prompt( &quot;message &quot;, &quot;defaultReply &quot;); <br />81.JS中的窗口滚动条:window.scroll(x,y) <br />82.JS中的窗口滚动到位置:window.scrollby <br />83.JS中设置时间间隔:setInterval( &quot;expr &quot;,msecDelay)或setInterval(funcRef,msecDelay)或setTimeout <br />84.JS中的模態显示在IE4 行,在NN中不行:showModalDialog( &quot;URL &quot;[,arguments][,features]); <br />85.JS中的退出之前使用的句柄:function verifyClose(<br />
){event.returnValue= &quot;we really like you and hope you will stay longer. &quot;;}} window.=verifyClose; <br />86.当窗体第一次调用时使用的文件句柄:onload() <br />87.当窗体关闭时调用的文件句柄:onunload() <br />88.window.location的属性: protocol(http:),hostname(<a href="http://www.example.com),port(80),host(www.example.com:80),pathname">www.example.com),port(80),host(www.example.com:80),pathname</a>( &quot;/a/a.html &quot;),hash( &quot;#giantGizmo &quot;,指跳转到相应的锚记),href(全部的信息) <br />89.window.location.reload()刷新当前页面. <br />90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL) <br />91.document.write()不换行的输出,document.writeln()换行输出 <br />92.document.body.noWrap=true;防止链接文字折行. <br />93.变量名.charAt(第几位),取该变量的第几位的字符. <br />94. &quot;abc &quot;.charCodeAt(第几个),返回第几个字符的ASCii码值. <br />95.字符串连接:string.concat(string2),或用 =进行连接 <br />96.变量.indexOf( &quot;字符 &quot;,起始位置),返回第一个出现的位置(从0开始计算) <br />97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置. <br />98.string.match(regExpression),判定字符是否匹配. <br />99.string.replace(regExpression,replaceString)替换现有字符串. <br />100.string.split(分隔符)返回一个数组存储值. <br />101.string.substr(start[,length])取从第几位到指定长度的字符串. <br />102.string.toLowerCase()使字符串全部变为小写. <br />103.string.toUpperCase()使全部字符变为大写. <br />104.parseInt(string[,radix(代表进制)])强制转换成整型. <br />105.parseFloat(string[,radix])强制转换成浮点型. <br />106.isNaN(变量):测试是否为数值型. <br />107.定义常量的要害字:const,定义变量的要害字:var<br />108.自己摸索.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/269.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zend Studio 5.5中文版 windows环境下中文乱码</title>
		<link>http://www.hikai.cn/article/253.html</link>
		<comments>http://www.hikai.cn/article/253.html#comments</comments>
		<pubDate>Thu, 22 Jan 2009 23:40:19 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[zend]]></category>
		<category><![CDATA[Zend Studio 5.5中文版]]></category>
		<category><![CDATA[乱码]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=253</guid>
		<description><![CDATA[<p>　　今天离放假还有1天了，回来后也并没有马上就投入到PHP学习中。有时候吉他一拿就是一个小时，周围环境也比较安静，有时真怕吵到人了。听老歌，人似乎也会变老。放下吉他，洗个澡，一直想以后房子一定要有个大大的浴缸，下班回来可以好好泡了澡，洗完澡后打开电脑，先给<a target="_blank" href="http://www.hikai.cn/article/251.html">淘宝那卖家</a>付了款，早上货到了。然后就下了个Zend Studio这也是小董一直推荐的，他一直鄙视EditPlus，其实EditPlus是大学那个女JAVA老师介绍的，至今仍然经常使用，因为方便。看到PHPCHINA论坛上大有人使用，其实它也就是个记事本的升级版，小而方便而已。</p><p>...</p>
]]></description>
			<content:encoded><![CDATA[<p>　　今天离放假还有1天了，回来后也并没有马上就投入到PHP学习中。有时候吉他一拿就是一个小时，周围环境也比较安静，有时真怕吵到人了。听老歌，人似乎也会变老。放下吉他，洗个澡，一直想以后房子一定要有个大大的浴缸，下班回来可以好好泡了澡，洗完澡后打开电脑，先给<a target="_blank" href="http://www.hikai.cn/article/251.html">淘宝那卖家</a>付了款，早上货到了。然后就下了个Zend Studio这也是小董一直推荐的，他一直鄙视EditPlus，其实EditPlus是大学那个女JAVA老师介绍的，至今仍然经常使用，因为方便。看到PHPCHINA论坛上大有人使用，其实它也就是个记事本的升级版，小而方便而已。</p>
<p>Zend Studio是一个比较系统的专业开发PHP软件，或许我还没怎么用过，我就不评论有多好。</p>
<p>Zend Studio 5.5中文版下载地址：（用这个版本就不用在下什么补丁包了）<br /><a href="http://downloads.phpchina.com/zend/studio/5.5.0/ZendStudio-5_5_0.exe">http://downloads.phpchina.com/zend/studio/5.5.0/ZendStudio-5_5_0.exe</a></p>
<p>安装后在软件中设计下语言：<br />tools&#8212;&gt;preferences&#8211;&gt;languages&#8211;&gt;中文&nbsp;&nbsp;<br />确定&#8211;&gt;重启下Zend Studio OK了，界面是中文了。<br />&nbsp;</p>
<p><span style="font-size: medium;"><strong>编辑里面中文字符乱码的问题</strong></span></p>
<p>在顶部菜单&#8211;工具&#8211;首选项&#8211;桌面&#8211;编码<br />选择你相应的代码就可以了。 比如你打开的是UTF-8的文件（这个可以用editplus查看）</p>
<p>&nbsp;</p>
<p>至此开发环境基本解决了。</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/253.html/feed</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
		<item>
		<title>PHP起步记</title>
		<link>http://www.hikai.cn/article/252.html</link>
		<comments>http://www.hikai.cn/article/252.html#comments</comments>
		<pubDate>Thu, 22 Jan 2009 01:03:53 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=252</guid>
		<description><![CDATA[<p>　　买了本《PHP从入门到精通》一直放着以为没时间看，偶然兴趣就看几下，觉得很是简单，但真正操作起来，发现问题一大堆。往往学习我会找很多借口说没时间，但玩的话就不知不觉投入进去，并乐此不彼。学习也能这样吗。</p><p>　　一种学习是被逼出来，比如工作中，你面对压力你要不断的去学习，巩固提升自己，而免得被别人赶上。<br />而还有一种是源自兴趣，兴趣是最好的老师了。<br />整理D盘无意间发现几句话&#8220;<br />我个人觉得只有做自己最喜欢做的事，也是最容易成功的事。<br />...</p>
]]></description>
			<content:encoded><![CDATA[<p>　　买了本《PHP从入门到精通》一直放着以为没时间看，偶然兴趣就看几下，觉得很是简单，但真正操作起来，发现问题一大堆。往往学习我会找很多借口说没时间，但玩的话就不知不觉投入进去，并乐此不彼。学习也能这样吗。</p>
<p>　　一种学习是被逼出来，比如工作中，你面对压力你要不断的去学习，巩固提升自己，而免得被别人赶上。<br />而还有一种是源自兴趣，兴趣是最好的老师了。<br />整理D盘无意间发现几句话&ldquo;<br />我个人觉得只有做自己最喜欢做的事，也是最容易成功的事。<br />爱恩斯坦说：&ldquo;理论没有实践是不行的， 但是没有理论的实践是盲目的&rdquo;。<br />很喜欢马云的这句话:心中无敌,无敌于天下<br />永远不要把你的竞争对手当作对手,而要把他们当作你学习的榜样!<br />[人赚不到钱，不是因为自己不行，而是没有行动力，光想不做，或者光做不想]&rdquo; <br />很是喜欢，也顺便载进来。</p>
<p>　　凌晨1点11分，外面下起了雨，我发现原来自己真什么事都没有了，眼睛酸痛都可能是假象而已。<br />中午吃饭，突然觉得难受，连请个假都要请别人批不批，所以一定要自由。想想每天做的这些事，其实大部分不是自己最喜欢的。</p>
<p>今天有一款烂游戏上线，开服的一瞬间，服务器又爆了。玩家论坛大骂，随便看了一下，找了个造句接力的小游戏，发现玩家也都玩得有点意思。那是属于运营的事了。</p>
<p>发现自己越来越渴望，得学语言，做自己的东西。而不用去求别人，等别人的程序。</p>
<p>　　今天第一课&#8212;在windows下安装php环境。</p>
<p>　　先装了APACHE2.2,算一路比较通畅。就是一些配置上的问题&ldquo;比如增加个编码显示&rdquo;AddDefaultCharset off　&quot; 目的是为了让浏览器自动识别编码。然后就PHP5，下载要下个 ZIP 安装包。 php.ini应该放在哪system32下吗？ 还有相应的dll 要不要都考到 system32呢<br />经过证明后，发现似乎不用，因为那个php配置里面有指定了&quot;d:/php5/ext&quot;的位置我发现书中讲的还是有点模糊。。</p>
<p>　　然后就是MYSQL，这个最麻烦了，装了好几遍。<br />特别是装了一次后卸载后重装，特麻烦。会出现那个内存错误等。网上查了下要 把安装目录也都删了，再用WINDOWs优化大师清理下注册表。后面果真OK，我还不断判断是不是哪个程序冲突了。最后终于是用 phpmyadmin可以用了，但还有点乱码。</p>
<p>　　书看得再多都没用，实践是关键。<br />用心，投入。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/252.html/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>240多个jQuery插件</title>
		<link>http://www.hikai.cn/article/237.html</link>
		<comments>http://www.hikai.cn/article/237.html#comments</comments>
		<pubDate>Fri, 26 Dec 2008 11:50:50 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[js.jQuery]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=237</guid>
		<description><![CDATA[<h2>概述</h2><p>jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是&#8212;写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不<a href="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/jquery_2.gif"><img height="117" width="164" border="0" align="right" src="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/jquery_thumb.gif" alt="jquery" style="border-width: 0px;" /></a>及 的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在<a href="http://www.kollermedia.at/" title="Logo Kollermedia.at">Kollermedia.at</a>上发现了一篇JQuery插件列表的<a target="_blank" href="http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/">文章</a>，特推荐如下。</p>...
]]></description>
			<content:encoded><![CDATA[<h2>概述</h2>
<p>jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是&mdash;写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不<a href="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/jquery_2.gif"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="117" alt="jquery" width="164" align="right" border="0" src="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/jquery_thumb.gif" /></a>及 的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在<a title="Logo Kollermedia.at" href="http://www.kollermedia.at/">Kollermedia.at</a>上发现了一篇JQuery插件列表的<a target="_blank" href="http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/">文章</a>，特推荐如下。</p>
<h2>文件上传(File upload)<a href="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_001_6.gif"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="165" alt="JQuery_001" width="396" align="right" border="0" src="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_001_thumb_2.gif" /></a></h2>
<p><a href="http://www.phpletter.com/Demo/AjaxFileUpload-Demo/">Ajax File Upload</a>.<br /><a href="http://www.pixeline.be/experiments/jqUploader/">jQUploader</a>.<br /><a href="http://www.fyneworks.com/jquery/multiple-file-upload/">Multiple File Upload plugin</a>.&nbsp; <br /><a href="http://www.appelsiini.net/projects/filestyle">jQuery File Style</a>.<br /><a href="http://jquery.com/plugins/project/InputFileCSS">Styling an input type file</a>.<br /><a href="http://digitalbush.com/projects/progress-bar-plugin">Progress Bar Plugin</a>.</p>
<h2>表单验证(Form Validation)</h2>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation</a>.<br /><a href="http://www.dyve.net/jquery/?autohelp">Auto Help</a>.<br /><a href="http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html">Simple jQuery form validation</a>.<br /><a href="http://letmehaveblog.blogspot.com/2007/08/easy-client-side-web-forms-validations.html">jQuery XAV &#8211; form validations</a>.<br /><a href="http://itgroup.com.ph/alphanumeric/">jQuery AlphaNumeric</a>.<br /><a href="http://digitalbush.com/projects/masked-input-plugin">Masked Input</a>.<br /><a href="http://www.dennydotnet.com/post/TypeWatch-jQuery-Plugin.aspx">TypeWatch Plugin</a>.<br /><a href="http://jquery.com/plugins/project/TextLimiter">Text limiter for form fields</a>.<br /><a href="http://www.shawngo.com/gafyd/index.html">Ajax Username Check with jQuery</a>.</p>
<h2>表单－选取框(Form &#8211; Select Box stuff)</h2>
<p><a href="http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx">jQuery Combobox</a>.<br /><a href="http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/">jQuery controlled dependent (or Cascadign) Select List</a>.<br /><a href="http://code.google.com/p/jqmultiselects/">Multiple Selects</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/select/">Select box manipulation</a>.<br /><a href="http://code.google.com/p/jqueryselectcombo/">Select Combo Plugin</a>.<br /><a href="http://www.msxhost.com/jquery/linked-selects/json/%20target=">jQuery &#8211; LinkedSelect</a><br /><a href="http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/">Auto-populate multiple select boxes</a>.<br /><a href="http://www.sitespotting.it/esempi/002/">Choose Plugin (Select Replacement)</a>.</p>
<h2>表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)</h2>
<p><a href="http://www.malsup.com/jquery/form/">jQuery Form Plugin</a>.<br /><a href="http://code.handlino.com/wiki/jquery-form">jQuery-Form</a>.<br /><a href="http://envero.org/jlook/">jLook Nice Forms</a>.<br /><a href="http://www.whitespace-creative.com/jquery/jNice/">jNice</a>.<br /><a href="http://www.brainfault.com/2007/07/07/pin-plugin-reloaded/">Ping Plugin</a>.<br /><a href="http://grzegorz.frydrychowicz.net/jquery_toggleformtext/">Toggle Form Text</a>.<br /><a href="http://thoughts.kuzemchak.net/entry/toggleval-for-jquery/">ToggleVal</a>.<br /><a href="http://www.pengoworks.com/workshop/jquery/field.plugin.htm">jQuery Field Plugin</a>.<br /><a href="http://code.befruit.com/">jQuery Form&rsquo;n Field plugin</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/checkboxes/">jQuery Checkbox manipulation</a>.<br /><a href="http://www.alcoholwang.cn/jquery/jTaggingDemo.htm">jTagging</a>.<br /><a href="http://code.google.com/p/labelcheck/">jQuery labelcheck</a>.<br /><a href="http://scott.sauyet.com/thoughts/archives/2007/03/31/overlabel-with-jquery/">Overlabel</a>.<br /><a href="http://blog.amicoimmaginario.it/2007/08/28/jquery-plugin-3-state-radio-buttons/">3 state radio buttons</a>.<br /><a href="http://sanisoft-demo.com/jquery/plugins/shiftcheckbox/">ShiftCheckbox jQuery Plugin</a>.<br /><a href="http://digitalbush.com/projects/watermark-input-plugin">Watermark Input</a>.<br /><a href="http://kawika.org/jquery/checkbox/">jQuery Checkbox (checkboxes with imags)</a>.<br /><a href="http://www.softwareunity.com/sandbox/jqueryspinbtn/">jQuery SpinButton Control</a>.<br /><a href="http://www.phpletter.com/form_builder/demo.html">jQuery Ajax Form Builder</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/focusfields/">jQuery Focus Fields</a>.<br /><a href="http://home.iprimus.com.au/kbwood/jquery/timeEntry.html">jQuery Time Entry</a>.</p>
<h2>时间、日期和颜色选取(Time, Date and Color Picker)</h2>
<p><a href="http://marcgrabanski.com/code/ui-datepicker/">jQuery UI Datepicker</a>.<br /><a href="http://kelvinluck.com/assets/jquery/datePicker/">jQuery date picker plugin</a>.<br /><a href="http://code.google.com/p/jquery-timepicker/">jQuery Time Picker</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/timepicker/">Time Picker</a>.<br /><a href="http://www.oakcitygraphics.com/jquery/clockpick/ClockPick.cfm">ClickPick</a>.<br /><a href="http://labs.perifer.se/timedatepicker/">TimePicker</a>.<br /><a href="http://acko.net/dev/farbtastic">Farbtastic jQuery Color Picker Plugin</a>.<br /><a href="http://www.intelliance.fr/jquery/color_picker/">Color Picker by intelliance.fr</a>.</p>
<h2>投票插件(Rating Plugins)</h2>
<p><a href="http://www.phpletter.com/Demo/Jquery-Star-Rating-Plugin/#">jQuery Star Rating Plugin</a>.<br /><a href="http://www.m3nt0r.de/devel/raterDemo/">jQuery Star Rater</a>.<br /><a href="http://riderdesign.com/articles/displayarticle.aspx?articleid=21">Content rater with asp.net, ajax and jQuery</a>.<br /><a href="http://www.learningjquery.com/2007/05/half-star-rating-plugin">Half-Star Rating Plugin</a>.</p>
<h2>搜索插件(Search Plugins)</h2>
<p><a href="http://www.vulgarisoip.com/2007/08/06/jquerysuggest-11/">jQuery Suggest</a>.<br /><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete</a>.<br /><a href="http://www.pengoworks.com/workshop/jquery/autocomplete.htm">jQuery Autocomplete Mod</a>.<br /><a href="http://www.ajaxdaddy.com/demo-jquery-autocomplete.html">jQuery Autocomplete by AjaxDaddy</a>.<br /><a href="http://dev.reach1to1.net/saurabh/jplugins/autocomplete/">jQuery Autocomplete Plugin with HTML formatting</a>.<br /><a href="http://interface.eyecon.ro/docs/autocomplete">jQuery Autocompleter</a>.<br /><a href="http://nodstrum.com/2007/09/19/autocompleter/">AutoCompleter (Tutorial with PHP&amp;MyS<br />
QL)</a>.<br /><a href="http://rikrikrik.com/jquery/quicksearch/">quick Search jQuery Plugin</a>.</p>
<h2>编辑器(Inline Edit &amp; Editors)<a href="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_002_2.gif"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="193" alt="JQuery_002" width="400" align="right" border="0" src="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_002_thumb.gif" /></a></h2>
<p><a href="http://www.jaysalvat.com/jquery/jtageditor/">jTagEditor</a>.<br /><a href="http://demo.wymeditor.org/demo.html">WYMeditor</a>.<br /><a href="http://garage.pimentech.net/scripts_doc_jquery_jframe/">jQuery jFrame</a>.<br /><a href="http://www.appelsiini.net/projects/jeditable">Jeditable &#8211; edit in place plugin for jQuery</a>. <br /><a href="http://www.dyve.net/jquery/?editable">jQuery editable</a>.<br /><a href="http://www.jdempster.com/category/jquery/disableTextSelect/">jQuery Disable Text Select Plugin</a>.<br /><a href="http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-library/15/">Edit in Place with Ajax using jQuery</a>.<br /><a href="http://davehauenstein.com/blog/archives/28">jQuery Plugin &#8211; Another In-Place Editor</a>.<br /><a href="http://dev.iceburg.net/jquery/tableEditor/demo.php">TableEditor</a>.<br /><a href="http://joshhundley.com/teditable-in-place-editing-for-tables/">tEditable &#8211; in place table editing for jQuery</a>.</p>
<h2>多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)</h2>
<p><a href="http://www.contentwithstructure.com/extras/jmedia">jMedia &#8211; accessible multi-media embedding</a>.<br /><a href="http://sourceforge.net/projects/jbedit/">JBEdit &#8211; Ajax online Video Editor</a>.<br /><a href="http://www.sean-o.com/jquery/jmp3/">jQuery MP3 Plugin</a>.<br /><a href="http://malsup.com/jquery/media/">jQuery Media Plugin</a>.<br /><a href="http://jquery.lukelutman.com/plugins/flash/index.html">jQuery Flash Plugin</a>.<br /><a href="http://www.solitude.dk/archives/embedquicktime/">Embed QuickTime</a>.<br /><a href="http://keith-wood.name/svg.html">SVG Integration</a>.</p>
<h2>图片(Photos/Images/Galleries)</h2>
<p><a href="http://jquery.com/demo/thickbox/">ThickBox</a>.<br /><a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery lightBox plugin</a>.<br /><a href="http://blog.joshuaeichorn.com/archives/2007/01/11/jquery-image-strip/">jQuery Image Strip</a>.<br /><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html">jQuery slideViewer</a>.<br /><a href="http://benjaminsterling.com/2007/09/09/jquery-jqgalscroll-photo-gallery/">jQuery jqGalScroll 2.0</a>.<br /><a href="http://benjaminsterling.com/2007/10/02/jquery-jqgalviewii-photo-gallery/">jQuery &#8211; jqGalViewII</a>.<br /><a href="http://benjaminsterling.com/2007/10/21/jqgalviewiii-proof-of-concept/">jQuery &#8211; jqGalViewIII</a>.<br /><a href="http://opiefoto.com/articles/photoslider">jQuery Photo Slider</a>.<br /><a href="http://joanpiedra.com/jquery/thumbs/">jQuery Thumbs &#8211; easily create thumbnails</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/jQIR/">jQuery jQIR Image Replacement</a>.<br /><a href="http://www.gmarwaha.com/jquery/jcarousellite/index.php#what">jCarousel Lite</a>.<br /><a href="http://projects.sevir.org/storage/jpanview/index.html">jQPanView</a>.<br /><a href="http://sorgalla.com/projects/jcarousel/#Examples">jCarousel</a>.<br /><a href="http://www.intelliance.fr/jquery/imagebox/">Interface Imagebox</a>.<br /><a href="http://www.getintothis.com/blog/2006/10/12/image-gallery-using-jquery-interface-reflections/">Image Gallery using jQuery, Interface &amp; Reflactions</a>.<br /><a href="http://realazy.org/lab/jquery/j-gallery/">simple jQuery Gallery</a>.<br /><a href="http://chicagosocial.com/gallery/">jQuery Gallery Module</a>.<br /><a href="http://www.eogallery.com/">EO Gallery</a>.<br /><a href="http://flesler.blogspot.com/search/label/jQuery.ScrollShow">jQuery ScrollShow</a>.<br /><a href="http://www.malsup.com/jquery/cycle/">jQuery Cycle Plugin</a>.<br /><a href="http://www.projectatomic.com/en/flickr.htm">jQuery Flickr</a>.<br /><a href="http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin">jQuery Lazy Load Images Plugin</a>.<br /><a href="http://www.sunsean.com/zoomi/">Zoomi &#8211; Zoomable Thumbnails</a>.<br /><a href="http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#crop">jQuery Crop &#8211; crop any image on the fly</a>.<br /><a href="http://jquery.com/plugins/project/reflection">Image Reflection</a>.</p>
<h2>Google地图（Google Map）</h2>
<p><a href="http://www.dyve.net/jquery/?googlemaps">jQuery Plugin googlemaps</a>.<br /><a href="http://code.google.com/p/jmaps/">jMaps jQuery Maps Framework</a>.<br /><a href="http://projects.sevir.org/storage/jqmaps/index.html">jQmaps</a>.<br /><a href="http://olbertz.de/jquery/googlemap.html#">jQuery &amp; Google Maps</a>.<br /><a href="http://snippets.dzone.com/posts/show/4361">jQuery Maps Interface forr Google and Yahoo maps</a>.<br /><a href="http://webrocket.ulmb.com/jmaps/">jQuery J Maps &#8211; by Tane Piper</a>.</p>
<h2>游戏(Games)</h2>
<p><a href="http://fmarcia.info/jquery/tetris/tetris.html">Tetris with jQuery</a>.<br /><a href="http://64squar.es/">jQuery Chess</a>.<br /><a href="http://www.bennadel.com/blog/623-jQuery-Demo-Mad-Libs-Word-Game.htm">Mad Libs Word Game</a>.<br /><a href="http://www.alexatnet.com/node/68">jQuery Puzzle</a>.<br /><a href="http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html">jQuery Solar System (not a game but awesome jQuery Stuff)</a>.</p>
<h2>表格等(Tables, Grids etc.)</h2>
<p><a href="http://docs.jquery.com/Plugins/Tablesorter">UI/Tablesorter</a>.<a href="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_003_2.gif"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="143" alt="JQuery_003" width="400" align="right" border="0" src="http://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_003_thumb.gif" /></a> <br /><a href="http://www.reconstrukt.com/ingrid/">jQuery ingrid</a>.<br /><a href="http://www.trirand.com/blog/?p=13">jQuery Grid Plugin</a>.<br /><a href="http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm">Table Filter &#8211; awesome!</a>.<br /><a href="http://dev.iceburg.net/jquery/tableEditor/demo.php">TableEditor</a>.<br /><a href="http://www.hanpau.com/jquery/unobtrusivetreetable.php">jQuery Tree Tables</a>.<br /><a href="http://www.javascripttoolbox.com/jquery/#expandablerows">Expandable &ldquo;Detail&rdquo; Table Rows</a>.<br /><a href="http://www.remotesynthesis.com/blog/index.cfm/2007/9/25/Sortable-Table-ColdFusion-Custom-Tag-with-jQueryUI">Sortable Table ColdFusion Costum Tag with jQuery UI</a>.<br /><a href="http://flesler.blogspot.com/2007/10/jquerybubble.html">jQuery Bubble</a>.<br /><a href="http://tablesorter.com/docs/">TableSorter</a>.<br /><a href="http://www.webtoolkit.info/demo/jquery/scrollable/demo.html">Scrollable HTML Table</a>.<br /><a href="http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html">jQuery column Manager Plugin</a>.<br /><a href="http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html">jQuery tableHover Plugin</a>.<br /><a href="http://p.sohei.org/stuff/jquery/columnhover/demo/demo.html">jQuery columnHover Plugin</a>.<br /><a href="http://makoomba.altervista.org/grid/">jQuery Grid</a>.<br /><a href="http://motherrussia.polyester.se/jquery-plugins/tablesorter/">TableSorter plugin for jQuery</a>.<br /><a href="http://joshhundley.com/teditable-in-place-editing-for-tables/">tEditable &#8211; in place table editing for jQuery</a>.<br /><a href="http://www.hovinne.com/dev/jquery/chartotable/">jQuery charToTable Plugin</a>.<br /><a href="http://www.ita.es/jquery/jquery.grid.columnSizing.htm">jQuery Grid Column Sizing</a>.<br /><a href="http://www.ita.es/jquery/jquery.grid.rowSizing.htm">jQuery Grid Row Sizing</a>.</p>
<h2>统计图(Charts, Presentation etc.)</h2>
<p><a href="http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/">jQuery Wizard Plugin </a><br />
.<br /><a href="http://www.reach1to1.com/sandbox/jquery/jqchart/">jQuery Chart Plugin</a>.<br /><a href="http://ejohn.org/apps/speed/">Bar Chart</a>.</p>
<h2>边框、圆角、背景(Border, Corners, Background)</h2>
<p><a href="http://www.malsup.com/jquery/corner/">jQuery Corner</a>.<br /><a href="http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery">jQuery Curvy Corner</a>.<br /><a href="http://dev.jquery.com/%7Epaul/plugins/nifty/example.html">Nifty jQuery Corner</a>.<br /><a href="http://illandril.net/jQuery/transparentCorners/">Transparent Corners</a>.<br /><a href="http://www.methvin.com/jquery/jq-corner.html">jQuery Corner Gallery</a>.<br /><a href="http://blog.brandonaaron.net/my-jquery-plugins/gradient/">Gradient Plugin</a>.</p>
<h2>文字和超链接(Text and Links)</h2>
<p><a href="http://wanderinghorse.net/computing/javascript/jquery/spoilers/demo.html">jQuery Spoiler plugin</a>.<br /><a href="http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html">Text Highlighting</a>.<br /><a href="http://www.jdempster.com/category/jquery/disableTextSelect/">Disable Text Select Plugin</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/newsticker/">jQuery Newsticker</a>.<br /><a href="http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html">Auto line-height Plugin</a>.<br /><a href="http://agencenp.net/textgrad/textgrad.html">Textgrad &#8211; a text gradient plugin</a>.<br /><a href="http://kawika.org/jquery/linklook/">LinkLook &#8211; a link thumbnail preview</a>.<br /><a href="http://rikrikrik.com/jquery/pager/#examples">pager jQuery Plugin</a>.<br /><a href="http://rikrikrik.com/jquery/shortkeys/">shortKeys jQuery Plugin</a>.<br /><a href="http://www.ollicle.com/eg/jquery/biggerlink">jQuery Biggerlink</a>.<br /><a href="http://troy.dyle.net/linkchecker/">jQuery Ajax Link Checker</a>.</p>
<h2>鼠标提示（Tooltips）</h2>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/">jQuery Plugin &#8211; Tooltip</a>.<br /><a href="http://www.codylindley.com/blogstuff/js/jtip/">jTip &#8211; The jQuery Tool Tip</a>.<br /><a href="http://examples.learningjquery.com/62/demo/index.html#examplesection">clueTip</a>.<br /><a href="http://edgarverle.com/BetterTip/default.cfm">BetterTip</a>.<br /><a href="http://ioreader.com/2007/05/15/flash-tooltips-using-jquery/">Flash Tooltips using jQuery</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/tooltipdemo/">ToolTip</a>.</p>
<h2>菜单和导航(Menus, Navigations)</h2>
<p><a href="http://stilbuero.de/jquery/tabs_3/">jQuery Tabs Plugin &#8211; awesome! </a>. [<a href="http://stilbuero.de/jquery/tabs_3/nested.html">demo nested tabs</a>.]<br /><a href="http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo">another jQuery nested Tab Set example (based on jQuery Tabs Plugin)</a>.<br /><a href="http://www.sunsean.com/idTabs/">jQuery idTabs</a>.<br /><a href="http://jdsharp.us/jQuery/plugins/jdMenu/">jdMenu &#8211; Hierarchical Menu Plugin for jQuery</a>.<br /><a href="http://be.twixt.us/jquery/suckerFish.php">jQuery SuckerFish Style</a>.<br /><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Plugin Treeview</a>.<br /><a href="http://be.twixt.us/jquery/treeView.php">treeView Basic</a>.<br /><a href="http://labs.activespotlight.net/jQuery/menu_demo.html">FastFind Menu</a>.<br /><a href="http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/">Sliding Menu</a>.<br /><a href="http://gmarwaha.com/blog/?p=7">Lava Lamp jQuery Menu</a>.<br /><a href="http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin">jQuery iconDock</a>.<br /><a href="http://cherne.net/brian/resources/jquery.variations.html">jVariations Control Panel</a>.<br /><a href="http://www.trendskitchens.co.nz/jquery/contextmenu/">ContextMenu plugin</a>.<br /><a href="http://p.sohei.org/jquery-plugins/clickmenu/">clickMenu</a>.<br /><a href="http://www.ndesign-studio.com/blog/mac/css-dock-menu">CSS Dock Menu</a>.<br /><a href="http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/">jQuery Pop-up Menu Tutorial</a>.<br /><a href="http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/">Sliding Menu</a>.</p>
<p><a title="http://stilbuero.de/jquery/tabs_3/" href="http://stilbuero.de/jquery/tabs_3/">http://stilbuero.de/jquery/tabs_3/</a></p>
<h2>幻灯、翻转等(Accordions, Slide and Toggle stuff)</h2>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/">jQuery Plugin Accordion</a>.<br /><a href="http://fmarcia.info/jquery/accordion.html">jQuery Accordion Plugin Horizontal Way</a>.<br /><a href="http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html">haccordion &#8211; a simple horizontal accordion plugin for jQuery</a>.<br /><a href="http://dev.portalzine.de/index?/Horizontal_Accordion--print">Horizontal Accordion by portalzine.de</a>.<br /><a href="http://berndmatzner.de/jquery/hoveraccordion/">HoverAccordion</a>.<br /><a href="http://fmarcia.info/jquery/accordion.html">Accordion Example from fmarcia.info</a>.<br /><a href="http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index.php">jQuery Accordion Example</a>.<br /><a href="http://jquery.com/files/demo/dl-done.html">jQuery Demo &#8211; Expandable Sidebar Menu</a>.<br /><a href="http://www.andreacfm.com/examples/jQpanels/">Sliding Panels for jQuery</a>.<br /><a href="http://jquery.andreaseberhard.de/toggleElements/">jQuery ToggleElements</a>.<br /><a href="http://www.ndoherty.com/demos/coda-slider/">Coda Slider</a>.<br /><a href="http://sorgalla.com/projects/jcarousel/#Examples">jCarousel</a>.<br /><a href="http://www.reindel.com/accessible_news_slider/">Accesible News Slider Plugin</a>.<br /><a href="http://icant.co.uk/sandbox/jquerycodeview/">Showing and Hiding code Examples</a>.<br /><a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>.<br /><a href="http://sonspring.com/journal/jquery-portlets">jQuery Portlets</a>.<br /><a href="http://jdsharp.us/jQuery/plugins/AutoScroll/">AutoScroll</a>.<br /><a href="http://medienfreunde.com/lab/innerfade/">Innerfade</a>.</p>
<h2>拖放插件(Drag and Drop)</h2>
<p><a href="http://docs.jquery.com/UI/Draggables">UI/Draggables</a>.<br /><a href="http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/">EasyDrag jQuery Plugin</a>.<br /><a href="http://sonspring.com/journal/jquery-portlets">jQuery Portlets</a>.<br /><a href="http://dev.iceburg.net/jquery/jqDnR/">jqDnR &#8211; drag, drop resize</a>.<br /><a href="http://interface.eyecon.ro/demos/drag.html">Drag Demos</a>.</p>
<h2>XML XSL JSON Feeds</h2>
<p><a href="http://www.jongma.org/webtools/jquery/xslt/">XSLT Plugin</a>.<br /><a href="http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/">jQuery Ajax call and result XML parsing</a>.<br /><a href="http://jquery.com/plugins/project/xmlObjectifier">xmlObjectifier &#8211; Converts XML DOM to JSON</a>.<br /><a href="http://jquery.glyphix.com/">jQuery XSL Transform</a>.<br /><a href="http://malsup.com/jquery/taconite/">jQuery Taconite &#8211; multiple Dom updates</a>.<br /><a href="http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin">RSS/ATOM Feed Parser Plugin</a>.<br /><a href="http://www.malsup.com/jquery/gfeed/">jQuery Google Feed Plugin</a>.</p>
<h2>浏览器(Browserstuff)</h2>
<p><a href="http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/">Wresize &#8211; IE Resize event Fix Plugin</a>.<br /><a href="http://jquery.khurshid.com/ifixpng.php">jQuery ifixpng</a>.<br /><a href="http://jquery.andreaseberhard.de/pngFix/">jQuery pngFix</a>.<br /><a href="http://www.crismancich.de/jquery/plugins/linkscrubber/">Link Scrubber &#8211; removes the dotted line onfocus from links</a>.<br /><a href="http://www.matthewjrichards.co.uk/articles/2007/06/25/jquery-perciformes-the-entire-suckerfish-familly-under-one-roof">jQuery Perciformes &#8211; the entire suckerfish familly under one roof</a>.<br /><a href="http://blog.brandonaaron.net/my-jquery-plugins/background-iframe/">Background Iframe</a>.<br /><a href="http://jquery.com/plugins/project/QinIE">QinIE &#8211; for proper display of<br />
Q tags in IE</a>.<br /><a href="http://webrocket.ulmb.com/ability/">jQuery Accessibility Plugin</a>.<br /><a href="http://www.ogonek.net/mousewheel/jquery-demo.html">jQuery MouseWheel Plugin</a>.</p>
<h2>对话框、确认窗口(Alert, Prompt, Confirm Windows)</h2>
<p><a href="http://trentrichardson.com/Impromptu/">jQuery Impromptu</a>.<br /><a href="http://nadiaspot.com/jquery/confirm">jQuery Confirm Plugin</a>.<br /><a href="http://dev.iceburg.net/jquery/jqModal/">jqModal</a>.<br /><a href="http://www.ericmmartin.com/projects/simplemodal/">SimpleModal</a>.</p>
<h2>CSS</h2>
<p><a href="http://www.kelvinluck.com/article/switch-stylesheets-with-jquery">jQuery Style Switcher</a>.<br /><a href="http://andykent.bingodisk.com/bingo/public/jss/">JSS &#8211; Javascript StyleSheets</a>.<br /><a href="http://flesler.blogspot.com/2007/11/jqueryrule.html">jQuery Rule &#8211; creation/manipulation of CSS Rules</a>.<br /><a href="http://www.designerkamal.com/jPrintArea/">jPrintArea</a>.</p>
<h2>DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）</h2>
<p><a href="http://flydom.socianet.com/">FlyDOM</a>.<br /><a href="http://brandonaaron.net/docs/dimensions/#getting-started">jQuery Dimenion Plugin</a>.<br /><a href="http://happygiraffe.net/blog/articles/2007/09/26/jquery-logging">jQuery Loggin</a>.<br /><a href="http://jquery.com/plugins/project/metadata">Metadata &#8211; extract metadata from classes, attributes, elements</a>.<br /><a href="http://johannburkard.de/blog/programming/javascript/inc-a-super-tiny-client-side-include-javascript-jquery-plugin.html">Super-tiny Client-Side Include Javascript jQuery Plugin</a>.<br /><a href="http://humanized.com/weblog/2007/09/14/undo-made-easy-with-ajax-part-1/">Undo Made Easy with Ajax</a>.<br /><a href="http://www.jasons-toolbox.com/JHeartbeat/">JHeartbeat &#8211; periodically poll the server</a>.<br /><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load Plugin</a>.<br /><a href="http://blog.brandonaaron.net/2007/08/19/new-plugin-live-query/">Live Query</a>.<br /><a href="http://jquery.offput.ca/every/">jQuery Timers</a>.<br /><a href="http://www.joanpiedra.com/jquery/shareit/">jQuery Share it &#8211; display social bookmarking icons</a>.<br /><a href="http://www.jdempster.com/category/code/jquery/cookiejar/">jQuery serverCookieJar</a>.<br /><a href="http://ideamill.synaptrixgroup.com/?p=3">jQuery autoSave</a>.<br /><a href="http://www.semicomplete.com/blog/geekery/jquery-interface-puffer.html">jQuery Puffer</a>.<br /><a href="http://33rockers.com/jquery/iframe-demo/">jQuery iFrame Plugin</a>.<br /><a href="http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/">Cookie Plugin for jQuery</a>.<br /><a href="http://leftlogic.com/lounge/articles/jquery_spy2">jQuery Spy &#8211; awesome plugin</a>.<br /><a href="http://www.learningjquery.com/2007/01/effect-delay-trick">Effect Delay Trick</a>.<br /><a href="http://jquick.sullof.com/jquick/">jQuick &#8211; a quick tag creator for jQuery</a>.<a href="http://noteslog.com/post/metaobjects-11-released-today/"><br />Metaobjects</a>.<br /><a href="http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/">elementReady</a>.</p>
<p>英文：<a title="http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/" href="http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/">http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/</a></p>
<div id="MySignature">作者：<a href="http://terrylee.cnblogs.com/">TerryLee</a><br />出处：<a href="http://terrylee.cnblogs.com/">http://terrylee.cnblogs.com</a> <br />本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/237.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>谈谈新手如何学习PHP(转)</title>
		<link>http://www.hikai.cn/article/235.html</link>
		<comments>http://www.hikai.cn/article/235.html#comments</comments>
		<pubDate>Tue, 23 Dec 2008 09:03:38 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[学习]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=235</guid>
		<description><![CDATA[<p>&#160;&#160; 从默默自己向别人问怎么学PHP开始，到后来不少人又来问默默怎么学PHP，不管默默是新手，还是老鸟，似乎总是感觉摸不出一条清晰的脉络来，不过，默默既然学会了PHP，那么我走的这条路或多或少的有一定借鉴性。</p><p>&#160;&#160;&#160; PHP的背景恐怕就不用默默赘言了，我相信大家选择一种语言，并不是看它的背景和悠久历史，更重要的是看它的实用性，华而不实的语言哪怕是再辉煌的历史，也毕将步向没落，可喜的是PHP经受住了考验，也因此，它确实是一种值得学习的语言。</p><p>...</p>
]]></description>
			<content:encoded><![CDATA[<p>&nbsp;&nbsp; 从默默自己向别人问怎么学PHP开始，到后来不少人又来问默默怎么学PHP，不管默默是新手，还是老鸟，似乎总是感觉摸不出一条清晰的脉络来，不过，默默既然学会了PHP，那么我走的这条路或多或少的有一定借鉴性。</p>
<p>&nbsp;&nbsp;&nbsp; PHP的背景恐怕就不用默默赘言了，我相信大家选择一种语言，并不是看它的背景和悠久历史，更重要的是看它的实用性，华而不实的语言哪怕是再辉煌的历史，也毕将步向没落，可喜的是PHP经受住了考验，也因此，它确实是一种值得学习的语言。</p>
<p>&nbsp;&nbsp;&nbsp; 默默一直是听从别人的经验长大的，也因此在前辈们的经验里让默默少走了许多的弯路，更快的步入了正规，在此向那些我至尽不知道其名字的前辈们道声谢谢，在默默的眼里，帮助不分大小，只要是帮助，总会让默默的心里暖融融的，我想，前辈们帮助我，并不是为了得到我的一句谢谢，更多的是出于一种责任感和对默默的期望，所以我想，只有学好PHP，才能对得起前辈们的汗水。</p>
<p>&nbsp;&nbsp;&nbsp; 正如我所说的，默默也终于感觉到了一种责任感，默默不知道自己的经验到底能帮助新手多少，但是默默明白，现在到了履行责任的时候了，我有必要把自己的经验告诉给所有希望学好PHP的人，只有这样才能让中国的PHP不断的进步，不断的发展，在世界上占据一席之地。</p>
<p>&nbsp;&nbsp;&nbsp; 默默学习PHP的这段期间，感觉国内的PHP环境越来越成熟，规范也在逐渐的健全，PHPCHINA的成立，标志着与官方直接挂钩的PHP机构在中国正式落户了，在此献上迟到的掌声！</p>
<p>&nbsp;&nbsp;&nbsp; 好的，切入正题：</p>
<p>&nbsp;&nbsp;&nbsp; 我想在讲述自己的学习方式前，对那些期望能从我的文章中获得有用信息的人说一句心里话：</p>
<p>&nbsp;&nbsp;&nbsp; 默默的文章不会对您的学习起到实质性的作用，您能否成功，还得靠自己的，坚持，坚持，再坚持，就是步入成功的不二法门。</p>
<p>&nbsp;&nbsp;&nbsp; 我先把我自己学习PHP的过程做一下概括：</p>
<p>&nbsp;&nbsp;&nbsp; 熟悉HTML/CSS/JS等网页基本元素，完成阶段可自行制作完整的网页，对元素属性达到熟悉程度</p>
<p>&nbsp;&nbsp;&nbsp; 理解动态语言的概念，运做机制，熟悉PHP语法</p>
<p>&nbsp;&nbsp;&nbsp; 学习如何将PHP与HTML结合起来完成简单动态页面</p>
<p>&nbsp;&nbsp;&nbsp; 接触MYSQL，开始设计数据库程序</p>
<p>&nbsp;&nbsp;&nbsp; 不断巩固，摸透大部分PHP常用函数，并可理解OOP，MYSQL优化，以及模板</p>
<p>&nbsp;&nbsp;&nbsp; 完成一个功能齐全的动态站点</p>
<p>&nbsp;&nbsp;&nbsp; 我的这套线路可能跟许多学习PHP的爱好者不谋而合，这也算是一个循序渐进的学习过程，不过新手不要看到上面的概括就以为学习蛮简单的，默默在此不得不对您稍微泼一下冷水，任何东西其实都不简单，即使是小吃部的烧饼也不是一下子就会做成的。</p>
<p>&nbsp;&nbsp;&nbsp; 我先解释一下我的学习思路。</p>
<p>&nbsp;&nbsp;&nbsp; 首先，理解网站这一概念之后不难看出，任何网站都是由网页组成的，也就是说想完成网站，必须先学会做网页，因此必须要掌握了HTML，才能为今后制作网站打下基础。</p>
<p>&nbsp;&nbsp;&nbsp; 在学习HTML中我想边学边做是最有效的方式，当然这一方式对于学习PHP同样是最有效的。</p>
<p>&nbsp;&nbsp;&nbsp; HTML中的任何元素都要亲自实践，只有明白了什么元素会起到什么效果之后，你才会记忆深刻，而一味的啃书，绝对是不行的，我想大部分新手之所以觉得概念难学，大部分是一个字&ldquo;懒&rdquo;，懒是阻止进步的最大敌人，所以克服掉懒的习惯，才能更快的学好一样东西。</p>
<p>&nbsp;&nbsp;&nbsp; 也许您在学习PHP的时候只想尽快的开发一个网站，也就会想我做网站，干嘛要学什么网页这些小儿科？不难看出，眼高手低的新手不在少数，这种思想无疑于建造空中楼阁，你不建地基，何来的房顶呢？</p>
<p>&nbsp;&nbsp;&nbsp; OK，掌握静态网页的制作技术是学习开发网站的先决条件，这一点就讲到这里，因为这篇文章不是教程文章，也就不对技术进行深入的刨析了。</p>
<p>&nbsp;&nbsp;&nbsp; 我假设你目前已经可以完成一个静态页面了，当然，做的好看难看是另外一说，默默的第一个网页也没好看到哪去，但是&ldquo;孩子&rdquo;再丑，咱们做&ldquo;爹妈&rdquo;的也不能嫌弃不是？这毕竟是咱的成果。</p>
<p>&nbsp;&nbsp;&nbsp; 那么咱们就开始学习动态语言的概念吧，刚一接触动态语言，可能很多人都会蒙了，怎么这乱七八糟的东西，在网页里显示的时候却是另外一码事？其实这并不算乱七八糟，你写的HTML代码不也一样是一堆堆的字符吗？毕竟，代码并不是作为直接输出的，而是经过处理的，说白了，HTML是经过HTML解析器，而PHP当然也就通过PHP解析器了，跟学习HTML一样的道理，想让任何的解析器完成操作，就必须使用它们专用的语法结构，所以PHP长相奇怪也就不足为奇了。</p>
<p>文章来源：<a href="http://www.com-edu.cn/html/2008-5/2008514001027_1.html">http://www.com-edu.cn/html/2008-5/2008514001027_1.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/235.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>js文本上下滚动点击停顿代码</title>
		<link>http://www.hikai.cn/article/225.html</link>
		<comments>http://www.hikai.cn/article/225.html#comments</comments>
		<pubDate>Tue, 09 Dec 2008 18:38:44 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[代码]]></category>
		<category><![CDATA[滚动]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=225</guid>
		<description><![CDATA[<p>[code]</p><div class="cnt" id="blog_text">&#60;div id=&#34;mq&#34; style=&#34;width:100%;height:18px;overflow:hidden;border:1px solid #ffffff&#34; onmouseover=&#34;iScrollAmount=0&#34; onmouseout=&#34;iScrollAmount=1&#34;&#62; <br />　　轻轻的我走了，正如我轻轻的来；&#60;br/&#62; <br />...</div>
]]></description>
			<content:encoded><![CDATA[<p>js文本上下滚动点击停顿代码<br /><a href="http://hi.baidu.com/hoozhen/blog/item/d378542c20e574ef8a13998d.html">http://hi.baidu.com/hoozhen/blog/item/d378542c20e574ef8a13998d.html</a></p>
<p><textarea class="code" rows="10" cols="50">&lt;/p&gt;&lt;div&nbsp;class=”cnt”&nbsp;id=”blog_text”&gt;&lt;div&nbsp;id=&quot;mq&quot;&nbsp;style=&quot;width:100%;height:18px;overflow:hidden;border:1px&nbsp;solid&nbsp;#ffffff&quot;&nbsp;onmouseover=&quot;iScrollAmount=0&quot;&nbsp;onmouseout=&quot;iScrollAmount=1&quot;&gt;&nbsp;&lt;br&nbsp;/&gt;　　轻轻的我走了，正如我轻轻的来；&lt;br/&gt;&nbsp;&lt;br&nbsp;/&gt;　　我轻轻的招手，作别西天的云彩。&lt;br/&gt;&nbsp;&lt;br&nbsp;/&gt;　　那河畔的金柳，是夕阳中的新娘；&lt;br/&gt;&nbsp;&lt;br&nbsp;/&gt;　　波光里的艳影，在我心头荡漾。&nbsp;&lt;br&gt;&lt;br&nbsp;/&gt;&lt;/div&gt;&nbsp;&lt;br&nbsp;/&gt;&lt;script&gt;&nbsp;&lt;br&nbsp;/&gt;var&nbsp;oMarquee&nbsp;=&nbsp;document.getElementById(&quot;mq&quot;);&nbsp;//滚动对象&nbsp;&lt;br&nbsp;/&gt;var&nbsp;iLineHeight&nbsp;=&nbsp;16;&nbsp;//单行高度，像素&nbsp;&lt;br&nbsp;/&gt;var&nbsp;iLineCount&nbsp;=&nbsp;4;&nbsp;//实际行数&nbsp;&lt;br&nbsp;/&gt;var&nbsp;iScrollAmount&nbsp;=&nbsp;1;&nbsp;//每次滚动高度，像素&nbsp;&lt;br&nbsp;/&gt;function&nbsp;run()&nbsp;{&nbsp;&lt;br&nbsp;/&gt;oMarquee.scrollTop&nbsp;+=&nbsp;iScrollAmount;&nbsp;&lt;br&nbsp;/&gt;if&nbsp;(&nbsp;oMarquee.scrollTop&nbsp;==&nbsp;iLineCount&nbsp;*&nbsp;iLineHeight&nbsp;)&nbsp;&lt;br&nbsp;/&gt;oMarquee.scrollTop&nbsp;=&nbsp;0;&nbsp;&lt;br&nbsp;/&gt;if&nbsp;(&nbsp;oMarquee.scrollTop&nbsp;%&nbsp;iLineHeight&nbsp;==&nbsp;0&nbsp;)&nbsp;{&nbsp;&lt;br&nbsp;/&gt;window.setTimeout(&nbsp;&quot;run()&quot;,&nbsp;2000&nbsp;);&nbsp;&lt;br&nbsp;/&gt;}&nbsp;else&nbsp;{&nbsp;&lt;br&nbsp;/&gt;window.setTimeout(&nbsp;&quot;run()&quot;,&nbsp;50&nbsp;);&nbsp;&lt;br&nbsp;/&gt;}&nbsp;&lt;br&nbsp;/&gt;}&nbsp;&lt;br&nbsp;/&gt;oMarquee.innerHTML&nbsp;+=&nbsp;oMarquee.innerHTML;&nbsp;&lt;br&nbsp;/&gt;window.setTimeout(&nbsp;&quot;run()&quot;,&nbsp;2000&nbsp;);&nbsp;&lt;br&nbsp;/&gt;&lt;/script&gt;&lt;/div&gt;&lt;p&gt;</textarea></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/225.html/feed</wfw:commentRss>
		<slash:comments>36</slash:comments>
		</item>
		<item>
		<title>javascript遮罩效果</title>
		<link>http://www.hikai.cn/article/215.html</link>
		<comments>http://www.hikai.cn/article/215.html#comments</comments>
		<pubDate>Wed, 26 Nov 2008 17:15:56 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[效果]]></category>
		<category><![CDATA[遮罩]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=215</guid>
		<description><![CDATA[<p>在页面当中让如如下代码：</p><div class="highlighter"><ol start="1" class="highlighter-xml">    <li><span class="tag">&#60;</span><span class="tag-name">div</span><span>&#160;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">'alpha'</span><span>&#160;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">'hidden'</span><span>&#160;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">'width:100%;height:10px;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);-moz-opacity:0.3;z-index:0;'</span><span class="tag">&#62;</span><span>&#160;</span><span class="tag">&#60;/</span><span class="tag-name">div</span><span class="tag">&#62;</span></li>...</div>
]]></description>
			<content:encoded><![CDATA[<p>在页面当中让如如下代码：</p>
<div class="highlighter">
<ol class="highlighter-xml">
<li><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&#8216;alpha&#8217;</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&#8216;hidden&#8217;</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">&#8216;width:100%;height:10px;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);-moz-opacity:0.3;z-index:0;&#8217;</span><span class="tag">&gt;</span><span>&nbsp;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span></li>
<li class="alt">&nbsp;</li>
</ol>
</div>
<p>利用scirpt事件，触发如下事件：</p>
<p><span style="font-family: monospace"></p>
<p></span></p>
<p>document.getElementById(&quot;alpha&quot;).style.height=document.body.offsetHeight+&quot;px&quot;;</p>
<p>&nbsp;</p>
<p>=============================================================================================</p>
<p>&nbsp;</p>
<pre>第二种方式：
<div class="highlighter">
<ol class="highlighter-c">
<li><span class="keyword">var</span><span>&nbsp;darkDiv&nbsp;=&nbsp;document.createElement(</span><span class="string">&quot;div&quot;</span><span>);</span></li>
<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;darkDiv.id&nbsp;=&nbsp;</span><span class="string">&quot;darkDiv&quot;</span><span>;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;darkDiv.style.cssText&nbsp;=&nbsp;</span><span class="string">&quot;position:absolute;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:110;top:0px;left:0px;width:100%;&quot;</span><span>;</span></li>
<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="comment">//darkDiv.style.height&nbsp;=&nbsp;(this.getPagePosition().clientHeight&nbsp;+&nbsp;this.getPagePosition().scrollTop)&nbsp;+&nbsp;&quot;px&quot;;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;darkDiv.style.height&nbsp;=&nbsp;</span><span class="keyword">this</span><span>.getPageSize()[1]&nbsp;+&nbsp;</span><span class="string">&quot;px&quot;</span><span>;</span></li>
<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(darkDiv);</span></li>
<li>&nbsp;</li>
</ol>
</div>

==============================================================================================</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/215.html/feed</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
		<item>
		<title>js css tab代码</title>
		<link>http://www.hikai.cn/article/213.html</link>
		<comments>http://www.hikai.cn/article/213.html#comments</comments>
		<pubDate>Wed, 26 Nov 2008 13:02:31 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[tab]]></category>
		<category><![CDATA[代码]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=213</guid>
		<description><![CDATA[<p>两组js css tab效果效果代码 滑动门。点击代码就可以查看效果。<br />最近看了点JS原理上理解了些了。</p><p>&#60;code&#62;<br />&#160;</p><div class="xspace-itemmessage" id="xspace-showmessage"><div class="HtmlCode" title="点击运行该代码！" style="cursor: pointer" onclick="preWin=window.open('','','');preWin.document.open();preWin.document.write(this.innerText);preWin.document.close();">...</div></div>
]]></description>
			<content:encoded><![CDATA[<p>两组js css tab效果效果代码 滑动门。点击代码就可以看到效果了。<br />最近看了点JS原理上理解了些了。</p>
<p>&lt;code&gt;<br />&nbsp;</p>
<div class="xspace-itemmessage" id="xspace-showmessage">
<div class="HtmlCode" title="点击运行该代码！" style="cursor: pointer" onclick="preWin=window.open('','','');preWin.document.open();preWin.document.write(this.innerText);preWin.document.close();">
<p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><font color="#000066">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</font></a>&quot;&gt;<br />&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml"><font color="#000066">http://www.w3.org/1999/xhtml</font></a>&quot;&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />&lt;style type=&quot;text/css&quot;&gt;<br />a {<br />&nbsp; color:#000000;<br />&nbsp; text-decoration:none;<br />}<br />&nbsp;&nbsp; <br />#header {<br />&nbsp; float:left;<br />&nbsp; width:100%;<br />&nbsp; background:#D3D3D3;<br />&nbsp; font-size:93%;<br />&nbsp;&nbsp; line-height:normal;<br />}<br />#header ul {<br />&nbsp; margin:0;<br />&nbsp; padding:0px;<br />&nbsp; list-style:none;<br />}<br />#header li {<br />&nbsp; float:left;<br />&nbsp; background:#DCE1EF;<br />&nbsp;border:solid 1px #8EA2C2;<br />&nbsp;margin-left:2px;<br />&nbsp;padding:0px;<br />}<br />#header a {<br />&nbsp; display:block;<br />&nbsp;padding:5px 15px 4px;<br />}<br />#header .current {<br />&nbsp;background:#FFFFFF;<br />&nbsp;border-left:solid 1px #8EA2C2;<br />&nbsp;border-top:solid 1px #8EA2C2;<br />&nbsp;border-right:solid 1px #8EA2C2;<br />&nbsp;border-bottom:solid 0px #8EA2C2;<br />&nbsp;<br />}<br />#header .current a{<br />&nbsp;padding-bottom:5px;<br />}<br />.content {<br />&nbsp; margin-top:10px;<br />}<br />.content .contentHeader {<br />&nbsp; background-color:#BCC7E0;<br />&nbsp; border:solid 1px #4B66A5;<br />&nbsp; font-weight:bold;<br />}</p>
<p>.content .contentMain {<br />&nbsp;border-left:solid 1px #4B66A5;<br />&nbsp;border-top:solid 0px #4B66A5;<br />&nbsp;border-right:solid 1px #4B66A5;<br />&nbsp;border-bottom:solid 1px #4B66A5;<br />}<br />&lt;/style&gt;<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />function change_option(number,index){<br />&nbsp;for (var i = 1; i &lt;= number; i++) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById(&#8216;current&#8217; + i).className = ”;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById(&#8216;content&#8217; + i).style.display = &#8216;none&#8217;;<br />&nbsp;}<br />&nbsp; document.getElementById(&#8216;current&#8217; + index).className = &#8216;current&#8217;;<br />&nbsp; document.getElementById(&#8216;content&#8217; + index).style.display = &#8216;block&#8217;;<br />}<br />&lt;/script&gt;<br />&lt;title&gt;CSS中的滑动门技术&lt;/title&gt;<br />&lt;/head&gt;</p>
<p>&lt;body&gt;<br />&lt;div id=&quot;navbar&quot;&gt;<br />&nbsp;&lt;div id=&quot;header&quot;&gt;<br />&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li id=&quot;current1&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;change_option(3,1);&quot;&gt;唐诗三百首&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li id=&quot;current2&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;change_option(3,2);&quot;&gt;宋词精选&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li id=&quot;current3&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;change_option(3,3);&quot;&gt;明清小说&lt;/a&gt;&lt;/li&gt;<br />&nbsp; &lt;/ul&gt;<br />&nbsp;&lt;/div&gt;<br />&nbsp;&lt;div id=&quot;content1&quot; class=&quot;content&quot;&gt;<br />&nbsp;&nbsp; &lt;div class=&quot;contentHeader&quot;&gt;唐诗三百首&lt;/div&gt;<br />&nbsp;&nbsp; &lt;div class=&quot;contentMain&quot;&gt;关山月&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; 明月出天山，苍茫云海间。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; 长风几万里，吹度玉门关。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; 汉下白登道，胡窥青海湾。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; 由来征战地，不见有人还。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; 戍客望边色，思归多苦颜。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 高楼当此夜，叹息未应闲。&lt;/div&gt;<br />&nbsp;&lt;/div&gt;<br />&nbsp;&lt;div id=&quot;content2&quot; class=&quot;content&quot; style=&quot;display:none&quot;&gt;<br />&nbsp;&nbsp; &lt;div class=&quot;contentHeader&quot;&gt;宋词精选&lt;/div&gt;<br />&nbsp;&nbsp; &lt;div class=&quot;contentMain&quot;&gt;清平乐&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 春归何处&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 寂寞无行路。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 若有人知春去处。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 唤取归来同住。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 春无踪迹谁知。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 除非问取黄鹂。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 百啭无人能解，因风飞过蔷薇。&lt;/div&gt;<br />&nbsp;&lt;/div&gt;<br />&nbsp;&lt;div id=&quot;content3&quot; class=&quot;content&quot; style=&quot;display:none&quot;&gt;<br />&nbsp;&nbsp; &lt;div class=&quot;contentHeader&quot;&gt;明清小说&lt;/div&gt;<br />&nbsp;&nbsp; &lt;div class=&quot;contentMain&quot;&gt;三国演义&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp; 滚滚长江东逝水，浪花淘尽英雄。&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; 是非成败转头空，青山依旧在几度夕阳红。&lt;/div&gt;<br />&nbsp;&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />&nbsp;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
</div>
<p><strong><font style="background-color: #fdfddf" face="Tahoma">
<div class="HtmlCode" title="点击运行该代码！" style="cursor: pointer" onclick="preWin=window.open('','','');preWin.document.open();preWin.document.write(this.innerText);preWin.document.close();">
<p><strong><font style="background-color: #fdfddf" face="Tahoma"><em>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;</em><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><font color="#000066"><em>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</em></font></a><em>&quot;&gt;<br />&lt;html xmlns=&quot;</em><a href="http://www.w3.org/1999/xhtml"><font color="#000066"><em>http://www.w3.org/1999/xhtml</em></font></a><em>&quot;&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />&lt;title&gt;无标题文档&lt;/title&gt;<br />&lt;style type=&quot;text/css&quot;&gt;<br />&lt;!&#8211;<br />* {<br />margin: 0; padding:0<br />}<br />body {<br />margin-top: 10px;<br />margin-right: auto;<br />margin-bottom: 10px;<br />margin-left: auto;<br />text-align: center;<br />height: auto;<br />width: auto;<br />background-color: #666666;<br />font-size: 12px;<br />color: #000000;<br />}<br />#container {<br />text-align: left;<br />width: 760px;<br />height: 400px;<br />background-color: #FFFFFF;<br />padding: 20px;<br />}</em></font></strong></p>
<p><strong><font style="background-color: #fdfddf" face="Tahoma"><em>#container #title {<br />height: 28px;<br />}<br />#container #title li {<br />float: left;<br />list-style-type: none;<br />height: 28px;<br />line-height: 28px;<br />text-align: center;<br />margin-right: 1px;<br />}<br />#container #title ul {<br />background-color: #FFFFFF;<br />height: 28px;<br />}<br />#container #title a {<br />text-decoration: none;<br />color: #000000;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2<br />
.gif</em></font></a><em>) no-repeat left -29px;<br />}<br />#container #title a span{<br />display: block;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -29px;<br />padding: 0 15px 0 15px;<br />}<br />#container #title #tag1 a:hover {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -87px;<br />}<br />#container #title #tag1 a:hover span{<br />display: block;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -87px;<br />padding: 0 15px 0 15px;<br />}<br />#container #title #tag2 a:hover {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left 0px;<br />}<br />#container #title #tag2 a:hover span{<br />display: block;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right 0px;<br />padding: 0 15px 0 15px; <br />}<br />#container #title #tag3 a:hover {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -58px;<br />}<br />#container #title #tag3 a:hover span{<br />display: block;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -58px;<br />padding: 0 15px 0 15px; <br />}<br />#container #title #tag4 a:hover {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -145px;<br />}<br />#container #title #tag4 a:hover span{<br />display: block;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -145px;<br />padding: 0 15px 0 15px;<br />}<br />#container #title #tag5 a:hover {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -174px;<br />}<br />#container #title #tag5 a:hover span{<br />display: block; <br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -174px;<br />padding: 0 15px 0 15px;<br />}<br />#container #title .selectli1 {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -87px;<br />}<br />#container #title a .selectspan1 {<br />display: block;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -87px; <br />padding: 0 15px 0 15px;<br />}<br />#container #title .selectli2 {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left 0px;<br />}<br />#container #title a .selectspan2 {<br />display: block; </em></font></strong></p>
<p><strong><font style="background-color: #fdfddf" face="Tahoma"><em>background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right 0px; <br />padding: 0 15px 0 15px;<br />}<br />#container #title .selectli3 {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -58px;<br />}<br />#container #title a .selectspan3 {<br />display: block; <br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -58px; <br />padding: 0 15px 0 15px;<br />}<br />#container #title .selectli4 {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -145px;<br />}<br />#container #title a .selectspan4 {<br />display: block; <br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -145px; <br />padding: 0 15px 0 15px;<br />}<br />#container #title .selectli5 {<br />text-decoration: none;<br />color: #ffffff;<br />display: block;<br />width: auto;<br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>) no-repeat left -174px;<br />}<br />#container #title a .selectspan5 {<br />display: block; <br />background: url(</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>) no-repeat right -174px; <br />padding: 0 15px 0 15px;<br />}<br />#container #content ul {margin: 10px;}<br />#container #content li {margin: 5px; }<br />#container #content li img {margin: 5px;display:block;}<br />#container #content {<br />height: 300px;<br />padding: 10px;<br />}<br />.content1 {<br />border-top-width: 3px;<br />border-right-width: 1px;<br />border-bottom-width: 1px;<br />border-left-width: 1px;<br />border-top-style: solid;<br />border-right-style: solid;<br />border-bottom-style: solid;<br />border-left-style: solid;<br />border-top-color: #3A81C8;<br />border-right-color: #3A81C8;<br />border-bottom-color: #3A81C8;<b<br />
r />border-left-color: #3A81C8;<br />background-color: #DFEBF7;<br />}<br />.content2 {<br />border-top-width: 3px;<br />border-right-width: 1px;<br />border-bottom-width: 1px;<br />border-left-width: 1px;<br />border-top-style: solid;<br />border-right-style: solid;<br />border-bottom-style: solid;<br />border-left-style: solid;<br />border-top-color: #ff950b;<br />border-right-color: #ff950b;<br />border-bottom-color: #ff950b;<br />border-left-color: #ff950b;<br />background-color: #FFECD2;<br />}<br />.content3 {<br />height: 300px;<br />padding: 10px;<br />border-top-width: 3px;<br />border-right-width: 1px;<br />border-bottom-width: 1px;<br />border-left-width: 1px;<br />border-top-style: solid;<br />border-right-style: solid;<br />border-bottom-style: solid;<br />border-left-style: solid;<br />border-top-color: #FE74B8;<br />border-right-color: #FE74B8;<br />border-bottom-color: #FE74B8;<br />border-left-color: #FE74B8;<br />background-color: #FFECF5;<br />}<br />.content4 {<br />height: 300px;<br />padding: 10px;<br />border-top-width: 3px;<br />border-right-width: 1px;<br />border-bottom-width: 1px;<br />border-left-width: 1px;<br />border-top-style: solid;<br />border-right-style: solid;<br />border-bottom-style: solid;<br />border-left-style: solid;<br />border-top-color: #00988B;<br />border-right-color: #00988B;<br />border-bottom-color: #00988B;<br />border-left-color: #00988B;<br />background-color: #E8FFFD;<br />}<br />.content5 {<br />height: 300px;<br />padding: 10px;<br />border-top-width: 3px;<br />border-right-width: 1px;<br />border-bottom-width: 1px;<br />border-left-width: 1px;<br />border-top-style: solid;<br />border-right-style: solid;<br />border-bottom-style: solid;<br />border-left-style: solid;<br />border-top-color: #A8BC1F;<br />border-right-color: #A8BC1F;<br />border-bottom-color: #A8BC1F;<br />border-left-color: #A8BC1F;<br />background-color: #F7FAE2;<br />}<br />.hidecontent {display:none;}<br />&#8211;&gt;<br />&lt;/style&gt;<br />&lt;script language=&quot;javascript&quot;&gt;<br />function switchTag(tag,content)<br />{<br />// alert(tag);<br />// alert(content);<br />for(i=1; i &lt;6; i++)<br />{<br />if (&quot;tag&quot;+i==tag)<br />{<br />document.getElementById(tag).getElementsByTagName(&quot;a&quot;)[0].className=&quot;selectli&quot;+i;<br />document.getElementById(tag).getElementsByTagName(&quot;a&quot;)[0].getElementsByTagName(&quot;span&quot;)[0].className=&quot;selectspan&quot;+i;<br />}else{<br />document.getElementById(&quot;tag&quot;+i).getElementsByTagName(&quot;a&quot;)[0].className=&quot;&quot;;<br />document.getElementById(&quot;tag&quot;+i).getElementsByTagName(&quot;a&quot;)[0].getElementsByTagName(&quot;span&quot;)[0].className=&quot;&quot;;<br />}<br />if (&quot;content&quot;+i==content)<br />{<br />document.getElementById(content).className=&quot;&quot;;<br />}else{<br />document.getElementById(&quot;content&quot;+i).className=&quot;hidecontent&quot;;<br />}<br />document.getElementById(&quot;content&quot;).className=content;<br />}<br />}<br />&lt;/script&gt;<br />&lt;/head&gt;</em></font></strong></p>
<p><strong><font style="background-color: #fdfddf" face="Tahoma"><em>&lt;body&gt;<br />&lt;div id=&quot;container&quot;&gt;<br />&nbsp; &lt;div id=&quot;title&quot;&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=&quot;tag1&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;switchTag(&#8216;tag1&#8242;,&#8217;content1&#8242;);this.blur();&quot; class=&quot;selectli1&quot;&gt;&lt;span class=&quot;selectspan1&quot;&gt;首页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=&quot;tag2&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;switchTag(&#8216;tag2&#8242;,&#8217;content2&#8242;);this.blur();&quot;&gt;&lt;span&gt;下载中心&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=&quot;tag3&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;switchTag(&#8216;tag3&#8242;,&#8217;content3&#8242;);this.blur();&quot;&gt;&lt;span&gt;产品介绍&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=&quot;tag4&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;switchTag(&#8216;tag4&#8242;,&#8217;content4&#8242;);this.blur();&quot;&gt;&lt;span&gt;会员注册与登录&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=&quot;tag5&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;switchTag(&#8216;tag5&#8242;,&#8217;content5&#8242;);this.blur();&quot;&gt;&lt;span&gt;联系我们&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;div id=&quot;content&quot; class=&quot;content1&quot;&gt;<br />&nbsp; &lt;div id=&quot;content1&quot;&gt;&lt;p&gt;仿淘宝网站的导航效果。此方法有几个优点：&lt;/p&gt;1、根据字数自适应项目长度&lt;/div&gt; <br />&nbsp; &lt;div id=&quot;content2&quot; class=&quot;hidecontent&quot;&gt;2、不同的项目使用不同的颜色来区分&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;content3&quot; class=&quot;hidecontent&quot;&gt;3、这回需要使用到js了，呵呵&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;content4&quot; class=&quot;hidecontent&quot;&gt;4、背景图片只需要两个图片文件就足够，减少服务器负担&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;content5&quot; class=&quot;hidecontent&quot;&gt;5、这是使用到的两个图片：<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table width=&quot;58%&quot; border=&quot;1&quot; cellspacing=&quot;2&quot; cellpadding=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width=&quot;70%&quot; align=&quot;center&quot;&gt;&lt;img src=&quot;</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</em></font></a><em>&quot; width=&quot;250&quot; height=&quot;290&quot; /&gt;&lt;/td&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width=&quot;30%&quot; align=&quot;center&quot;&gt;&lt;img src=&quot;</em><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"><font color="#000066"><em>http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</em></font></a><em>&quot; width=&quot;15&quot; height=&quot;290&quot; /&gt;&lt;/td&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/div&gt;&nbsp; </em></font></strong></p>
<p><strong><font style="background-color: #fdfddf" face="Tahoma"><em>&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</em></font></strong></p>
<p><strong><font style="background-color: #fdfddf" face="Tahoma">&nbsp;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</font></strong></p>
</div>
<div class="HtmlCode" title="点击运行该代码！" style="cursor: pointer" onclick="preWin=window.open('','','');preWin.document.open();preWin.document.write(this.innerText);preWin.document.close();"><em>&lt;html&gt;<br />&lt;head&gt;<br />&lt;style type=text/css&gt;<br />li{<br />&nbsp;&nbsp;&nbsp; list-style:none;<br />}<br />#mainTable li table{<br />&nbsp;&nbsp;&nbsp; top:50px;<br />&nbsp;&nbsp;&nbsp; margin-top:10px;<br />}<br />#secTable li{<br />&nbsp;&nbsp;&nbsp; font-size: 12px;<br />&nbsp;&nbsp;&nbsp; color: #000000;<br />&nbsp;&nbsp;&nbsp; line-height:30px;<br />width:136px;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align:center;<br />float:left;<br />}<br />.sec1 { <br />&nbsp;&nbsp;&nbsp; background-color: #EEEEEE;<br />&nbsp;&nbsp;&nbsp; cursor: hand;<br />&nbsp;&nbsp;&nbsp; color: #000000;<br />&nbsp;&nbsp;&nbsp; border-left: 1px solid #FFFFFF;<br />&nbsp;&nbsp;&nbsp; border-center: 1px solid #FFFFFF;<br />&nbsp;&nbsp;&nbsp; border-right: 1px solid gray;<br />&nbsp;&nbsp;&nbsp; border-bottom: 1px solid #FFFFFF<br />&nbsp;&nbsp;&nbsp; }<br />.sec2 { <br />&nbsp;&nbsp;&nbsp; background-color: #D4D0C8;<br />&nbsp;&nbsp;&nbsp; cursor: hand;<br<br />
/>&nbsp;&nbsp;&nbsp; color: #000000;<br />&nbsp;&nbsp;&nbsp; border-left: 1px solid #FFFFFF; <br />&nbsp;&nbsp;&nbsp; border-center: 1px solid #FFFFFF; <br />&nbsp;&nbsp;&nbsp; border-right: 1px solid gray; <br />&nbsp;&nbsp;&nbsp; font-weight: bold; <br />&nbsp;&nbsp;&nbsp; }<br />.main_tab {<br />&nbsp;&nbsp;&nbsp; background-color: #D4D0C8;<br />&nbsp;&nbsp;&nbsp; color: #000000;<br />&nbsp;&nbsp;&nbsp; border-left:1px solid #FFFFFF;<br />&nbsp;&nbsp;&nbsp; border-right: 1px solid gray;<br />&nbsp;&nbsp;&nbsp; border-bottom: 1px solid gray; <br />&nbsp;&nbsp;&nbsp; }<br />&lt;/style&gt;<br />&nbsp;&nbsp;&nbsp; &lt;script language=javascript&gt;<br />function secBoard(n)<br />{<br />&nbsp;var hs=mainTable.getElementsByTagName(&quot;li&quot;);//内容的li的id<br />&nbsp;&nbsp;&nbsp; for(i=0;i&lt;4;i++){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; idName=document.getElementById(i);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(i!=n)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; idName.className=&quot;sec1&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; idName.className=&quot;sec2&quot;;<br />&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp; for(i=0;i&lt;hs.length;i++){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(i!=n)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hs.style.display=&quot;none&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hs[n].style.display=&quot;block&quot;;<br />&nbsp;&nbsp;&nbsp; }<br />}<br />&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul style=&quot;position:absolute;left:100px;top:75px;width:548px;&quot; border=0 cellspacing=0 cellpadding=0&nbsp; id=secTable&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=0 class=sec2 width=10% onMouseMove=&quot;secBoard(0)&quot;&gt;111111111&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=1 class=sec1 width=10% onMouseMove=&quot;secBoard(1)&quot;&gt;222222222&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=2 class=sec1 width=10% onMouseMove=&quot;secBoard(2)&quot;&gt;3333333333&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li id=3 class=sec1 width=10% onMouseMove=&quot;secBoard(3)&quot;&gt;4444444444&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; <br />&lt;ul style=&quot;position:absolute;left:100px;top:100px;width:548px;height:200px;text-align:center;&quot; id=&quot;mainTable&quot; class=&quot;main_tab&quot;&gt;<br />&lt;li align=center style=&quot;display:block;&quot;&gt;&lt;img src=&quot;</em><a href="http://pic1.blueidea.com/bbs/icon10.gif"><font color="#000066"><em>http://pic1.blueidea.com/bbs/icon10.gif</em></font></a><em>&quot; width=548px height=200px;&gt;&lt;/li&gt;<br />&lt;li align=center style=&quot;display:none;&quot;&gt; &lt;img src=&quot;</em><a href="http://pic1.blueidea.com/bbs/icon11.gif"><font color="#000066"><em>http://pic1.blueidea.com/bbs/icon11.gif</em></font></a><em>&quot; width=548px height=200px;&gt;&lt;/li&gt;<br />&lt;li align=center style=&quot;display:none;&quot;&gt; &lt;img src=&quot;</em><a href="http://pic1.blueidea.com/bbs/icon13.gif"><font color="#000066"><em>http://pic1.blueidea.com/bbs/icon13.gif</em></font></a><em>&quot; width=548px height=200px;&gt;&lt;/li&gt;<br />&lt;li align=center style=&quot;display:none;&quot;&gt; &lt;img src=&quot;</em><a href="http://pic1.blueidea.com/bbs/icon12.gif"><font color="#000066"><em>http://pic1.blueidea.com/bbs/icon12.gif</em></font></a><em>&quot; width=548px height=200px;&gt;&lt;/li&gt; <br />&lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</em></div>
<p></font></strong>
<div class="xspace-imginlog">&nbsp;</div>
</div>
<div class="xspace-itemmessage">
<p class="xspace-itemlinks">&nbsp;</p>
</div>
<p>&lt;/code&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/213.html/feed</wfw:commentRss>
		<slash:comments>36</slash:comments>
		</item>
		<item>
		<title>搜索框提示文字点击消失的效果</title>
		<link>http://www.hikai.cn/article/189.html</link>
		<comments>http://www.hikai.cn/article/189.html#comments</comments>
		<pubDate>Sat, 01 Nov 2008 17:06:30 +0000</pubDate>
		<dc:creator>kailysky</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[搜索框]]></category>
		<category><![CDATA[效果]]></category>
		<category><![CDATA[文字]]></category>
		<category><![CDATA[点击]]></category>

		<guid isPermaLink="false">http://www.hikaicn.com/?p=189</guid>
		<description><![CDATA[<p>&#60;code&#62;&#60;input value=&#34;提示的文字&#34; onfocus=&#34;if (value =='提示的文字'){value =''}&#34; onblur=&#34;if (value ==''){value='提示的文字'}&#34; /&#62;&#60;/code&#62;<br />这样当输入框默认显示&#8220;提示的文字&#8221;当鼠标点击的时候自动变成空白，如果不输入任何文字再点击其他地方则再次显示&#8220;提示的文字&#8221;，如果输入了文字再点击其他地方则无反映。</p><p>...</p>
]]></description>
			<content:encoded><![CDATA[<p><span style="color: #000080">引用内容：<br />&lt;input value=&quot;提示的文字&quot; onfocus=&quot;if (value ==&#8217;提示的文字&#8217;){value =”}&quot; onblur=&quot;if (value ==”){value=&#8217;提示的文字&#8217;}&quot; /&gt;</span></p>
<p>这样当输入框默认显示&ldquo;提示的文字&rdquo;当鼠标点击的时候自动变成空白，如果不输入任何文字再点击其他地方则再次显示&ldquo;提示的文字&rdquo;，如果输入了文字再点击其他地方则无反映。</p>
<p>另一种方法：</p>
<p>&nbsp;引用内容<br /><span style="color: #333399">&lt;input value=&quot;&quot; onfocus=&quot;if (value ==”){value =&#8217;数字&#8217;}&quot; onblur=&quot;if (value ==&#8217;数字&#8217;){value=&#8217;}&quot; /&gt;</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.hikai.cn/article/189.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

