手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

CSS背景

Submitted by gouki on 2008, August 23, 9:02 AM

不多说啥了。在网上看到这篇文章，难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了，但。那都是直接拿来用的，并没有深刻的研究过。今天这里终于看到一个有注释的，就贴上来看看。

这种用法，是被YAHOO所推荐的。因为。这样的用法，降低了图片的下载量。而且并在一起，并不会给图片的大小增加很多。

原文：http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢

图片文件为：

大小: 6.41 K 尺寸: 14 x 166 浏览: 2052 次 点击打开新窗口浏览全图

首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.

比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:

CSS代码
  1. li {   
  2. height: 12px; /* 这个高度等于每个小图标的高度 */   
  3. line-height: 12px; /* 这个同上. 但只是有些时候需要写这个而已. */   
  4. background: url('icons.gif') 0 -12px; /* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */   
  5. padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */   
  6. padding-bottom: 0; /* 这个也一样.. */   
  7. padding-left: 14px; /* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */   
  8. margin: 2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */   
  9. overflow: hidden; /* 在有些情况下需要写这个. 具体作用我就不多解释了. */   
  10. }  
显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..

如果不明白可以问问原作者。。。

 

Tags: css, 背景色, position

Javascript | 评论:0 | 阅读:23071

测试JS的速度

Submitted by gouki on 2008, August 21, 10:49 PM

在mootools的官方网站有一个网页专门用来测试几个框架的速度，大概是：mootools,jquery,prototype,dojo,yui，测试下来jquery的平均速度应该算是最快的。

那个评测下来IE下JS运行速度慢果然是很明显的。同样的测试在IE下面比FF下面，速度慢了一倍左右啊。

不多了。自己测试一下看结果吧。。
http://mootools.net/slickspeed/

Tags: javascript, speed, framework

Javascript | 评论:0 | 阅读:24909

YUI 3.0 Preview Release 1

Submitted by gouki on 2008, August 17, 10:05 AM

几天不见，YUI居然release了，虽然是preview版本。
官方这么说：

The YUI development team has issued YUI 3.0 Preview Release 1, an early look at the next generation of the Yahoo! User Interface Library (YUI). This developer preview shows you where the library is headed as we pursue goals of size, performance, consistency, power, security, and openness.

You can read the introduction to the new release on YUIBlog and get a sense of the new syntactical style in this blog post, which reviews Dav Glass's Draggable Portable example — one of more than 60 examples that accompany the preview's extensive documentation.

YUI 3.0 PR 1 is an early preview — not suitable for production deployment. The development team is looking forward to your feedback in the YUI 3.x community forum as we refine the API toward a 2009 release.

Work continues on YUI's main 2.x codeline, too, and YUI 2.x is still the foundation for current projects. Check out the library's Roadmap for a up-to-date picture of what we're planning for upcoming releases.

有点期待。

Tags: javascript, yui, preview, release, framewok

Javascript | 评论:0 | 阅读:25739

javascript---浅析注册事件

Submitted by gouki on 2008, August 15, 11:18 PM

在这个浮躁的世界里，说实话，很难看到一两篇好的文章，我写的一般都比较垃圾，但我会尽量发现精品。在闲逛的时候发现这篇文章确实不错，虽然讲的比较简单一点。

文章是从cssrain.cn上COPY而来，原文网址为：http://item.feedsky.com/~feedsky/cssrain/~6110346/103912558/4218245/1/item.html

内容如下：

首先是最常规的方法：

XML/HTML代码
  1. <p id="para" title="cssrain demo!" onclick="test()" >test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6. </script>  

当某一天，我们知道JavaScript要跟HTML结构实现分离后，就会改了一种写法:

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6. window.onload = function(){  
  7.     document.getElementById("para").onclick = test;  
  8. }  
  9. </script>  

当我们工作越来越久后，有时候我们需要对某个元素绑定多个相同的事件类型：

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. window.onload = function(){  
  12.      document.getElementById("para").attachEvent("onclick",test);  
  13.      document.getElementById("para").attachEvent("onclick",pig);  
  14. }  
  15. </script>  

在一段时间内，你并没发现这段代码有任何错误。
某一天，一个名叫firefox的浏览器 闯入你的视野，当我们把这段代码放到firefox中执行后，
发现并不能正常运行。 问题就这样，越来越多，然而作为一名JS程序员，这些都是必须面对的。

为了解决这段代码的平台兼容性问题，我翻翻手册，知道了firefox跟ie的区别：
firefox中注册事件使用：addEventListener方法，同时为了兼容ie，我们必须用到if ... else...

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. window.onload = function(){  
  12.          var element =  document.getElementById("para");  
  13.          if(element.addEventListener){  // firefox  , w3c  
  14.                 element.addEventListener("click",test,false);  
  15.     element.addEventListener("click",pig,false);  
  16.          } else {   // ie  
  17.     element.attachEvent("onclick",test);  
  18.     element.attachEvent("onclick",pig);  
  19.          }  
  20. }  
  21. </script>  

此时，代码就可以在多个平台上工作了。

但随着水平的进步，你不满足每次都去判断，你想把这个判断封装起来，以后可以直接调用：

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. function addListener(element,e,fn){  
  12.      if(element.addEventListener){  
  13.           element.addEventListener(e,fn,false);  
  14.      } else {  
  15.           element.attachEvent("on" + e,fn);  
  16.      }  
  17. }  
  18.   
  19. window.onload = function(){  
  20.          var element =  document.getElementById("para");  
  21.          addListener(element,"click",test);  
  22.          addListener(element,"click",pig);  
  23. }  
  24. </script>  
XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. function addListener(element,e,fn){  
  12.      if(element.addEventListener){  
  13.           element.addEventListener(e,fn,false);  
  14.      } else {  
  15.           element.attachEvent("on" + e,fn);  
  16.      }  
  17. }  
  18.   
  19. window.onload = function(){  
  20.          var element =  document.getElementById("para");  
  21.          addListener(element,"click",test);  
  22.          addListener(element,"click",pig);  
  23. }  
  24. </script>  

 至此，作为一个程序员的工作就完了。
中间我们从一个最传统，最基本的写法 ， 然后实现Js和HTML的分离，然后又实现对同一个元素注册多个事件，期间，我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装，方便以后使用。

———END——

浏览器这东西还是非常害人的。啥时候才能有统一的标准 ？？？

Tags: javascript, 注册

Javascript | 评论:0 | 阅读:22403

Base64转换：AQAB=65537，你知道为什么吗？[转]

Submitted by gouki on 2008, August 2, 7:56 PM

什么是Base64？

按照RFC2045的定义，Base64被定义为：Base64内容传送编码被设计用来把任意序列 的8位字节描述为一种不易被人直接识别的形式。（The Base64 Content-Transfer-Encoding is designed to represent arbitrary sequences of octets in a form that need not be humanly readable.）

为什么要使用Base64？

在设计这个编码的时候，我想设计人员最主要考虑了3个问题：
1.是否加密？
2.加密算法复杂程度和效率
3.如何处理传输？

    加密是肯定的，但是加密的目的不是让用户发送非常安全的Email。这种加密方式主要就是“防君子不防小人”。即达到一眼望去完全看不出内容即可。
基 于这个目的加密算法的复杂程度和效率也就不能太大和太低。和上一个理由类似，MIME协议等用于发送Email的协议解决的是如何收发Email，而并不 是如何安全的收发Email。因此算法的复杂程度要小，效率要高，否则因为发送Email而大量占用资源，路就有点走歪了。

    但 是，如果是基于以上两点，那么我们使用最简单的恺撒法即可，为什么Base64看起来要比恺撒法复杂呢？这是因为在Email的传送过程中，由于历史原 因，Email只被允许传送ASCII字符，即一个8位字节的低7位。因此，如果您发送了一封带有非ASCII字符（即字节的最高位是1）的Email通 过有“历史问题”的网关时就可能会出现问题。网关可能会把最高位置为0！很明显，问题就这样产生了！因此，为了能够正常的传送Email，这个问题就必须 考虑！所以，单单靠改变字母的位置的恺撒之类的方案也就不行了。关于这一点可以参考RFC2046。
基于以上的一些主要原因产生了Base64编码。

» 阅读全文

Tags: base64, 算法

Javascript | 评论:0 | 阅读:25782

Records:305«‹51525354555657585960›»