一个有趣的布局

Posted on 2008-07-06 by Shawphy


　
尝试一下，不用定位，只用浮动，就把这个排版排出来看看。

不要被她迷惑了，其实没你想的那么难

实在想不出来，可以看这里。

  1. <div id="wrap">
  2.     <div id="a"></div>
  3.     <div id="b"></div>
  4.     <div id="c"></div>
  5.     <div id="d"></div>
  6.     <div id="e"></div>
  7. </div>
Posted in CSS | Tagged , | 18 Comments

找出页面内重复的Id

Posted on 2008-07-06 by Shawphy

今天群里提起这事，
判断页面内是否有重复的id

一种是已知id，看是否有重复。基本上Ctrl+F就能搞定~
但是Robin给出了方法：

  1. function chkid(idname){
  2.     s=0;
  3.     divs = document.getElementsByTagName("*");
  4.     for (i=0; i<divs.length; i++){
  5.         if(divs[i].getAttribute("id")==idname)
  6.             s++;
  7.     }
  8.     alert(s);
  9. }

而后我又在其基础上修改了能够找出页面内所有重复的Id

  1. function chkid(){
  2.     var did={},tmpid;
  3.     divs = document.getElementsByTagName("*");
  4.     for (var i=divs.length-1; i+1; i--){
  5.         (tmpid=divs[i].id)
  6.             &&did[tmpid]===undefined
  7.                 ?did[tmpid]=0
  8.                 :did[tmpid]++;
  9.     }
  10.     for (var i in did) {
  11.         did[i]&&alert("id="+i+"重复了"+(did[i]+1)+"次");
  12.     }
  13. }

比较可靠，兼容ie和ff。
不过一般的html检查器都有这个功能，这个代码又有多大用处呢？呵呵，感觉没有。

Posted in JavaScript | Tagged | Leave a comment

博客从pjblog换成wordpress咯

Posted on 2008-07-05 by Shawphy

博客换了，换的有点曲折，之前是因为.htaccess文件的问题操导致网站一直无法访问，可能是编码问题吧。

这回换成wordpress了，用了asp2wp这个转换工具，蛮强悍，文章和评论都在。不光是pj到wp,还能从lbs到wp。

之前试用了aw的修改版，总是失败，只能导入评论而没有文章。
那感谢大家一如既往的支持啦。

Posted in 本站动态 | Tagged , , | 1 Comment

读jQuery基础教程时的需要注意的1.1和1.2版的差别

Posted on 2008-06-24 by Shawphy

jQuery基础教程这本书已经出版咯~
这本书可以用于快速入门，大大缩短jQuery入门所需要的时间（实际上就算没有这本书，看现有的资料，1个星期也足够入门了）。
但还是强烈建议购买此书，因为这能让你能达到看现在有资料好几个月也未必能达到的水平。
至少我现在依然能从上面学到不少东西！

最近书到手了，翻阅了一下
也知道由于译者比较忠于原著，所以未能对其中少部分过时的内容予以修订。
看到他写了不少的“译者注”，但对于1.2的更新是完全没有涉及。

已知的重大变更是：
（1），1.2以后中属性选择器均不需要@，但依然兼容1.1的选择器。
（2），第一章里提到了XPath选择符在1.2中因为不常用且影响效率而取消了，如需使用则需要兼容1.1中的XPath插件（http://plugins.jquery.com/project/xpath），同样第六章和第九章涉及XML解析等也无法使用XPath语法了。关于更多xml解析的问题，可以看http://shawphy.com/2008/01/load-xml-by-ajax-with-jquery-and-parse-it.html
（3），第五章，关于clone(false)的描述，在1.2中，已经整合了复制绑定事件的插件了，即增加了clone(true)功能用于连同元素绑定的事件一起复制。而取消了clone(false)这个只复制元素而不复制内容的方法。读者需要注意。可以用.clone().empty()代替。
（4），第七章中部分地方使用了已被废弃的gt()和lt()方法。可以使用slice代替，或者用:gt和:lt选择符代替。具体请参考文档。
（5），第十章，流行插件中，由于Dimensions插件过于流行，已经被整合进jQuery，所以你无需再另行导入。而Interface插件也已经更新换代，又官方重新编写后改名为jQuery UI。（http://ui.jquery.com）

Posted in jQuery | 1 Comment

位于p最开始的span设置text-indent影响p的整个第一行，反继承

Posted on 2008-06-11 by Shawphy

今天遇到这个问题
描述起来也蛮麻烦的
搜也搜不到，所以问了群里的朋友，
感谢Robin还有$一揪就出来，
他俩对此问题进行了深入的讨论，
感谢他们细心解答，真相才得以水落石出。
最后本文采用了$一揪就出来的方法：

如下代码

  1. <style>
  2. span.imgblock{
  3.     height:16px;
  4.     width:16px;
  5.     display:inline-block;
  6.     background:#0099FF;
  7.     text-indent:5em;
  8.     overflow:hidden;
  9. }
  10. </style>
  11. <p><span class="imgblock">这里看不见，确可以复制到</span>选中前边的框子，然后复制吧。<br />你可以复制所有本文<p>

给最开始的span设置了text-indent属性之后，导致了整个父元素p的text-indent属性
IE6/7都确认有这个bug，可以说是一种反继承。

解决的方法是多一个标签,避开问题多多的text-indent，
设置内层标签的行高,以及padding-left。就能够大致解决问题了。
即保证了效果，也保证了文本的不丢失，为残障人士，搜索引擎，以及想要复制文章的人给予方便。
至少可以不用空格了，使用空格虽然可以轻松达到效果，无需使用text-indent了，但这显然不好。

  1. <style>
  2. span.imgblock{
  3.     height:16px;
  4.     width:16px;
  5.     display:inline-block;
  6.     background:#0099FF;
  7.     overflow:hidden;
  8. }
  9. strong.aaa{
  10.     display:inline-block;
  11.     padding-left:2000px;
  12. }
  13. </style>
  14. <p><span class="imgblock"><strong class="aaa">这里看不见，确可以复制到。</strong></span>选中前边的框子，然后复制吧<br />你可以复制所有本文<p>
Posted in CSS | 3 Comments

用闭包制作简单动画效果

Posted on 2008-06-09 by Shawphy

刚才用书上看来的写了一下，貌似还蛮好玩的

http://shawphy.com/demo/closure/animate.html

大家看那个小红方框
ie6请点上面链接查看效果,或者弹开后刷新一下看效果

  1. function tipUpdown(obj){
  2.     var objorg=obj.css("top").replace(/px/,"")-0;
  3.     for(var i=0;i<10;i++){
  4.         (function(){
  5.             var b=i;
  6.             setTimeout(function(){
  7.                 obj.css({"top":b*1+objorg+"px"})
  8.             },b*20);
  9.             setTimeout(function(){
  10.                 obj.css({"top&":b*1+objorg+"px"})
  11.             },400-b*20);
  12.         })();
  13.     };
  14. };
  15.  
  16. setInterval("tipUpdown($('#ab'))",1000)
Posted in jQuery | 2 Comments

jQuery UI 1.5 正式版发布

Posted on 2008-06-09 by Shawphy

原文：

http://jquery.com/blog/2008/06/09/jquery-ui-v15-released-focus-on-consistent-api-and-effects/

实在太长，懒得翻译了……

总体来说，蛮好用的看上去。官方的文档还没有完全跟上，只有老的一些了。
等下回官网的文档好了，我也一并更新下吧。

主要是统一了API

* $(”div”).draggable() creates a draggable
* $(”div”).draggable(”destroy”) destroys it
* $(”div”).draggable(”method”) calls another method on the plugin.

修正了N多的BUG

增加了http://script.aculo.us/这里很多特效

http://ui.jquery.com/themeroller

这里可以做自己的主题

http://ui.jquery.com/download

这里可以下载到最新版

http://docs.jquery.com/UI

这里是文档

记得datepicker吧，里边的简体中文部分是cloudream翻译的~

Posted in jQuery | 2 Comments

Firebug 1.2b3 中文版

Posted on 2008-06-09 by Shawphy

本来我不想发这个篇文章的，只在上次那文章里改 一下就好

不过考虑到可能有些人是通过RSS订阅的，如果我这不发帖子他们不知道更新了。。。
所以就再发一次

firebug 1.2b3
点击下载firebug 1.2b3
下载的文件如Fx不识别，则下载完后在资源管理器中把文件拖进Fx即可开始安装

Posted in 其他 | 4 Comments

适用于firefox 3 的fierbug 和 web developer 中文版

Posted on 2008-06-06 by Shawphy

两个版本都更新了一些东西，强烈推荐下载适用
这回两个都不是我翻译的。web developer 可能是基于我先前1.1.5翻译的，不管了，反正有中文版就是好的。
firebug我这个只是启用了简体中文版，我增加了一点点之前没翻译的

web developer 1.1.6

http://downloads.chrispederick.com/work/web-developer/web-developer-localized.xpi

firebug 1.2b3
点击下载firebug 1.2b3
firebug 1.2.0b6

https://addons.mozilla.org/zh-CN/firefox/addon/1843

下载的文件如FF不识别，则下载完后在资源管理器中把文件拖进FF即可开始安装

Posted in 其他 | 2 Comments

jQuery 1.2.6 发布信息

Posted on 2008-06-04 by Shawphy

姗姗来迟的1.2.6的发布信息，其实本来是1.2.4的，结果扯出点小事来。
这回jq文件97.8K，直逼100K大关啦。估计下个版本就破了。
其实pack版破30也是很早以前的事情了
好了，多的不说了

主要是性能更新，
可以看这里：

http://spreadsheets.google.com/pub?key=pFIHldY_CksyThxfgx6krfA

没有IE6，被无视咯~

事件处理快了103% ——快了很多啊

CSS选择器快了13%——非常好，这个最重要了，越快越好。不过受限于正则的速度。。。是由于jQuery.map() 提升866% 还有 jQuery.extend() 19% 提升速度，所以导致整个都快了

.offset() 21%

.css() 25%

然后是新特性
Dimensions插件彻底融入jquery内核。这个上次已经说过了。

.attr()重写了，解决了１５项ｂｕｇ

.toggle() 能接受更多函数了
比如：
$("div").toggle(function(){
$(this).removeClass("three").addClass("one");
}, function(){
$(this).removeClass("one").addClass("two");
}, function(){
$(this).removeClass("two").addClass("three");
});

.index() 支持jQuery集合了
var test = $("div.test");
$("div").index( test ) == 3

jQuery.makeArray可以把任何东西弄成数组了
jQuery.makeArray( document.getElementsByTagName("div") )
// => [ div, div, div ]

jQuery.makeArray( true )
// => [ true ]

jQuery.makeArray()
// => []

beforeSend 能取消Ajax调用了
$.ajax({
beforeSend: function(){
return $("#input").val() == "";
},
url: "test.php"
});

从上面代码上看，就是在beforeSend里，return true，就是取消请求。跟一般的return false不太一样。

动画的速度可以自己设置fast slow normal的值了。
jQuery.fx.speeds.slow = 1000;
$("#test").slideDown("slow");

总体来说，更新就这些了。

Posted in jQuery | 1 Comment