热点导读： cos-html-cache, 联系方式, 域名代购&paypal代付款 , 给我短信
主机推荐： hostmonster， bluehost， hostgator, 通过本站优惠买主机, [本站继续代购美国主机]

Jquery树形菜单的实现

归类于： HTML客户端, Web技术|WEB Tech — 江东 @ 2008-09-03 20:01:16 才(7)条评论

jQuey这个东西很好很强大，用jQuery操作DOM简直是易如反掌。这不，刚才icemapro小弟给我留言，希望我能写一个jQuery的树形菜单，在强大的就Query的帮助下，仅仅花了大约10分钟就完成了，其中还有大约7分钟在考虑css的问题，所以熟悉jquery可是对你很有帮助的哦，废话不多说，下面发布代码，讲解方式依然在注释中体现：
菜单的html代码如下，你可以根据需要进行扩展：

  1. <ul class="folder">
  2.         <li class="folder"><a href="#root">storyday.com</a></li>
  3.         <li class="folder"><a href="#root" onClick="Exp(this)">第一级目录</a>
  4.                 <ul class="folder disnone" >
  5.                         <li class="folder" ><a href="#">iceman</a></li>
  6.                         <li class="folder" ><a href="#">第2级目录</a></li>
  7.                         <li class="folder" ><a href="#root" onClick="Exp(this)">第2级目录</a>
  8.                                 <ul class="folder disnone">
  9.                                         <li class="folder" ><a href="#">第3级目录</a></li>
  10.                                         <li class="folder" ><a href="#">第3级目录</a></li>
  11.                                 </ul>
  12.                         </li>
  13.                  </ul>
  14.         </li>
  15.         <li class="folder"><a href="#root" >cosbeta</a></li>
  16.         <li class="folder"><a href="#root" >生活点滴</a></li>
  17.         <li class="folder"><a href="#root" >江东</a></li>
  18. </ul>

我想上面的html代码应该不用解释了吧，否则这篇文章你也没有看得必要了哈，下面是css的实现，其实css是最难搞的，目前搞定是实现目录式树形，其他树状也是很简单的，无非就是改变一下css
  1. a:link,a:visited{font-size:12px;
  2. color:#094477;text-decoration:none;
  3. }
  4. a:link:hover,a:visited:hover{
  5. color:#000cf;text-decoration:underline;
  6. }
  7. ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding，否则打死都无法兼容FF和IE*/}
  8. li.folder{
  9. background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
  10. margin:0 2px;
  11. text-indent:20px;
  12. /*folder背景，目前放到是windows目录背景，如果是其他树形，用其他背景图片替代即可*/
  13. }
  14. li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
  15. .disnone{
  16. display:none;
  17. }/*这是一个公共的css class，表示隐藏该元素*/

下面开始介绍重点，那就是js的实现，可能这个重点会让你失望，毕竟代码才那么简单的几行，当然在运用jquery之前肯定是要引入jquery库文件的，本例子中直接引用的本blog（生活点滴）中的jquery库：
  1. <script type="text/javascript"  src="http://www.storyday.com/wp-content/themes/cosxp/common.js.php"></script>

下面是js代码，解释依然在注释中：
  1. function Exp(obj){
  2.                 var html_element = $(obj).parent('.folder');/*获取当前点击的父dom，在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
  3.                 var sub_element =  $(html_element).children(".folder"); ;/*根据当前的父dom，获取本级的子dom*/
  4.                 if( html_element.attr('class').indexOf('folder-op') != -1 ){
  5. /*css class .folder-op表示当前已经展开的类，如果展开，则前面的+背景变成-背景，具体可以在后面的例子中看到
  6. 如果class中含有该类，则表示当前已经展开，所以下面的两行的任务是：1.隐藏该目录，2.remove掉此css class
  7. */
  8.                         html_element.removeClass('folder-op');
  9.                         sub_element.hide();
  10.                         }
  11.                         else{
  12. /*否则，添加表示目录已经展开的类，展示该目录*/
  13.                         html_element.addClass('folder-op');
  14.                         sub_element.show(500);
  15.                         }
  16.                 }

对，对于js就只需要上面的几行，太简单了，对吧,下面是例子： (read on …)

javascript初级教程2：操作文档对象

归类于： HTML客户端, Web技术|WEB Tech — 江东 @ 2008-07-17 20:22:05 才(4)条评论

传说在很久很久以前，我打算写一下javascript入门到文章，结果仅仅在开了一个头之后便忘记续写了。今天晚上，忘记把电池带回家了，做不了其他事情，于是乎抓紧时间补上后续的教程。

在上次的日志中，我谈到这样一个看法：服务器端程序是负责输出文本，也包括输出javascript，而javascript则是负责操作浏览器。今天我就大致的说一说javascript是如何操作浏览器的。在javascript中，我们可以将一切都看作对象（各位看官，别看见对象就害怕，其实js的这个对象没有那么恐怖）。首先我们来举一个通俗的例子，比如我们想叫一个小妹妹把一个饭碗举起来，用javascript可以这样表达：

  1. 人.女人.小妹妹.右手.捧起(饭碗)。

我们看看这代代码，首先找到对象人.然后引用人的成员.女人，最后定位到右手，引用函数“捧起”，参数就是饭碗了。

好了，所以，你知道了一些常见的对象表述，便可以灵活的运用js来操作了。下面介绍一下常用的操作：

  1. alert('hi');//警示消息，内容是"hi"，当然hi也可以是其他变量
  2. window.close();//关闭窗口
  3. document.getElementById("my-id").value = "123";//给id="my-id"这个元素赋值 .value只对表单有效
  4. document.getElementById("my-id").innerHTML = "123";//如果 id元素是html区域，如div span li等等
  5. document.getElementById("my-id").innerHTML = "<strong>这里也可以是html代码</strong>";

是不是很简单呢，注意上面代码中大小写不能错误！

今天就写这么简单的几行，因为电池快用尽了，其实知道对象操作的基本思想之后，你甚至可以直接用javascript框架了。

分享一个基于jQuery的表单验证函数

归类于： Web技术|WEB Tech — 江东 @ 2008-07-11 20:25:57 才(3)条评论

今天晚上在做某个项目，由于需要表单验证，因此自己就花了点时间写了一个基于jQuery的表单验证的函数，当然下面的这个函数大家可以当作成品使用，如你熟悉jQuery的话，你还可以直接将函数绑定在表单上。

当然仅仅是简单的分享，所以有朋友肯定还嫌不够，需要了解一下原理，那么下面开始介绍原理：

首先，表单得按照特定的方式输入，这样js才能按照一定的格式去遍历元素，那么在本例子中，格式如下：

  1. <form action="" name="login" id="login"><!--首先当然是form元素，该元素的ID是login -->
  2. <!--每一项表单均由一个DIV分开，如下面的姓名 学号 email等等-->
  3. <!-- 下面我们分析每一项div中的元素-->
  4. <div>
  5.  <span type="text">姓名：</span>
  6. <!-- 第一个是span元素，该元素的作用有两点-->
  7. <!-- 1.体现标题，如例子中的姓名 -->
  8. <!-- 2.通过属性 type判断验证方式，即该项目需要验证否。type=text表示能为空-->
  9. <!-- type=email表示email验证 type=int表示必须为数字... 当然今后可以扩展 -->
  10.  
  11.  <input type="text" name="txt" />
  12.  <span class="errormsg">不能为空</span>
  13. </div>
  14.  
  15. <div>
  16.  <span type="int">学号:</span>
  17.  <input type="text" name="email" />
  18.  <span class="errormsg">必须为数字</span>
  19. </div>
  20.  
  21. <div>
  22.  <span type="email">E-mail:</span>
  23.  <input type="text" name="email" />
  24.  <span class="errormsg">email格式不正确</span>
  25. </div>
  26.  
  27.  
  28. <div>
  29.  <span type="">不需要验证</span>
  30.  <input type="text" name="email" />
  31.  <span class="errormsg">email格式不正确</span>
  32. </div>
  33.  
  34.  
  35.  
  36. </form>
(read on …)

”javascript 尚未实现“错误解决办法

归类于： HTML客户端, Web技术|WEB Tech — 江东 @ 2008-04-24 10:56:27 才(2)条评论

被该死的IE给搞惨了，耽误了很多时间，实在不划算。打开页面的时候，FF下一切正常，但是当我用IE6测试的时候，JS总执行不下去了，提示“尚未实现”，无论怎么搞就搞不定。在firebug中也没有看到任何错误提示。打开IE就遇到该死的“尚未实现错误”，根据IE中提示的位置找过去也没有发现任何错误，看来IE的报错定位也不太准确。万般无奈之下，google搜索，终于找到了错误所在的地方。原来错误在于window.onload= myFunc(var1,var2);IE的window.onload函数中不支持参数调用，虽然函数会照样执行，但是却会出现报错，影响后续脚本的继续执行，下面是两种简单而有用的解决办法：

  1. 再写一个函数，譬如function loadFunc(){ myFunc(var1,var2) },然后window.onload = loadFunc;
  2. 使用匿名函数。onload =function(){myFunc(var1,var2)}

足够了，就这两种方法。

让广告远离朋友

归类于： HTML客户端, Web技术|WEB Tech — 江东 @ 2007-12-28 09:27:39 才(7)条评论

在blog里面放点google广告，偶尔有那么几刀的收入也是很不错的，不过牛皮癣似的的广告可不是一个友好的显示方式，所以我一直都在对blog中的广告进行优化再优化，希望能做到更加和谐。今天，我做了一个重大的改动，那就是对于老访客，blog中的广告一律不再显示。

如果稍微熟悉一点js，实现这个效果一点都不困难，肯定有人也这样做过。我这里简单的说一下原理和实现方法。我们根据是否曾经留言来判断当前的访问用户是新用户还是老用户，当然这样可能不准确，因为凡是潜水的老用户都会被当作新用户。在wordpress中，访客留言之后都会自动生成一个cookie，用来记录当前留言者的信息，所以我们可以在js脚本文件中判断cookie是否存在，如果存在则隐藏掉广告，否则则显示之，下面是代码介绍。 (read on …)

分享一下第一次做WP模板的下拉菜单代码

归类于： Web技术|WEB Tech, Wordpress — 江东 @ 2007-11-30 10:35:22 才(2)条评论

首先看看下面的例子
可能有很多朋友和我以前的爱好一样，喜欢悬停的下拉菜单，所以这里我就将这个代码分享出来。代码分三个部分：1.wordpress模板代码；2.css代码；3.javascript代码。 (read on …)

IE下innerHTML奇怪的问题

归类于： HTML客户端, Web技术|WEB Tech — 江东 @ 2007-11-26 20:39:29 才(3)条评论

当innerHTML中含有html标签的时候，IE居然会将html标签的字母变成大小写，并且将标签中的属性引号给去掉了，下面是测试代码：

<div id=”test”>
<div id=”intest”>html</div>
</div>
<input type=”button” value=”click me” onClick=”alert(document.getElementById(’test’).innerHTML)” />

所以正常显示应该是Firefox中“<div id=”intest”>html</div>”而不是IE中的<DIV id=intest>html</DIV>

测试如下：

html

用javascript缓存ajax数据

归类于： HTML客户端, Web技术|WEB Tech — 江东 @ 2007-11-25 10:44:50 才(3)条评论

我们都知道，ajax能提高页面载入的速度的主要原因是通过ajax减少了重复数据的载入，真正做到按需获取，既然如此，我们在写ajax程序的时候不妨送佛送到西，在客户端再做一次缓存,进一步提高数据载入速度。那就是在载入数据的同时将数据缓存在浏览器内存中，一旦数据被载入，只要页面未刷新，该数据就永远的缓存在内存中，当用户再次查看该数据时，则不需要从服务器上去获取数据，极大的降低了服务器的负载和提高了用户的体验。

下面举例子来说明如何实现的！为了简化ajax，示例中采用了jQuery，首先我们来看看一个常规的ajax例子。ajax.html中的内容如下： (read on …)

当前是第1页 共2页12»

生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 0.718s & 23