博客 - 标签:javascript

JS实现多列等高

2008-05-11 下午 - JS/Ajax/AS -

  很多同学一定在为多列等高的问题头痛吧!今天提供一个很方便的控制多列等高的JS,可以控制多个标签,并循环遍历任意多个标签。不需要添加ID或class。很不错的!

  先看html代码:

  1. <ul id="news">
  2.  <li>
  3.   <h3><a href="#">news title 1</a></h3>
  4.   <p>Descirption 1 阿斯<br>asas</p>
  5.   <p class="more"><a href="#">more 1</a></p>
  6.  </li>
  7.  <li>
  8.   <h3><a href="#">news title 2</a></h3>
  9.   <p>Descirption 1</p>
  10.   <p class="more"><a href="#">more 1</a></p>
  11.  </li>
  12.  <li>
  13.   <h3><a href="#">news title 3</a></h3>
  14.   <p>Descirption 1</p>
  15.   <p class="more"><a href="#">more 1</a></p>
  16.  </li>
  17.  <li>
  18.   <h3><a href="#">news title 4</a></h3>
  19.   <p>Descirption 1</p>
  20.   <p class="more"><a href="#">more 1</a></p>
  21.  </li>
  22. </ul>

  这里是JS代码(有用到一个JS库,DOMHelp):

  1. fixcolumns={
  2.  highest:0,
  3.  moreClass:'more',
  4.  
  5.  init:function(){
  6.   if(!document.getElementById || !document.createTextNode){return;}
  7.   fixcolumns.n=document.getElementById('news');
  8.   if(!fixcolumns.n){return;}
  9.   fixcolumns.fix('h3');
  10.   fixcolumns.fix('p');
  11.   fixcolumns.fix('li');
  12.   
  13.  },
  14.  fix:function(elm){
  15.   fixcolumns.getHighest(elm);
  16.   fixcolumns.fixElements(elm);
  17.  },
  18.  getHighest:function(elm){
  19.   fixcolumns.highest=0;
  20.   var temp=fixcolumns.n.getElementsByTagName(elm);
  21.   for(var i=0;i<temp.length;i++){
  22.    if(!temp[i].offsetHeight){continue;}
  23.    if(temp[i].offsetHeight>fixcolumns.highest){
  24.     fixcolumns.highest=temp[i].offsetHeight;
  25.    }
  26.   }
  27.  },
  28.  fixElements:function(elm){
  29.   var temp=fixcolumns.n.getElementsByTagName(elm);
  30.   for(var i=0;i<temp.length;i++){
  31.    if(!DOMhelp.cssjs('check',temp[i],fixcolumns.moreClass)){
  32.     temp[i].style.height=parseInt(fixcolumns.highest)+'px';
  33.    } 
  34.   }
  35.  }
  36. }
  37. DOMhelp.addEvent(window,'load',fixcolumns.init,false);

  自己复制另存代码,测试一下,应该会与用到的时候。注意该处用到的DOMHelp库,是一个操作文档节点很方便且符合标准并兼容各浏览器的JS库。

No Comments »

把JS与CSS可在同一个文件里共存

2008-05-9 上午 - JS/Ajax/AS, html/css/xml/xsl - -

  今天看了aoao的blog,学到了这一招,和大家分享一下。

<!– /* window.onload=function(){ document.getElementById(“test2″).innerHTML=”传说中滴JS测试者。如果你看到我,那JS也生效了”; } <!– */ <!– #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

  在网上运行时还要通过程序输出个“*/*”的头,不然MIME不对有的浏览器不干活。PHP的是这样:

  <?header(’Content-type: */*’);?>

  理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通,不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种,虽然文件大了一点,但能少了一半的请求数,帅帅滴。补充说明,直接这样使用会是两个200的,要节省还要涉及到服务器配置,最少我还不知道单程序可以实现的。

  如果你有兴趣,那么复制代码。测试一下。怎么样?神吧!其实也没什么,只是充分利用了注释符。不过还真未曾想到还有此一招。佩服佩服!

No Comments »

近两个月加强javascript的学习

2008-04-17 下午 - JS/Ajax/AS -

很早就有一种想法,那就是自己能写些很炫的JS出来的话那该多好啊!(以前都是直接套用别人的,只是改改参数什么的)

两个月前,突然行动。首现在网上找了些基础的教程,学了,感觉没什么用。星期天,去了书城。精挑细选的,最后决定买下《JavaScript 深入浅出》。

我每天分两段时间去学习,早上大概一个小时(公司早上11点才上班,所以有时间)。下午回家后吃过饭,再花一个小时消化早上学的,且又学点新知识点。

不知不觉,两个月了,这本书大概是学了一半有余了吧。感觉还是不错的,虽不敢说很熟悉,但有达到了某种程度了吧。而且慢慢发觉自己越来越喜欢这门程序了(其实它只是一个脚本语言而已)。

后面还有很多的案例要学习,希望自己能很好的坚持到底。未来要学的还有很多很多!

No Comments »