订阅此博客

Posts Tagged ‘javascript’

YUI Compressor online在线压缩js

2009-08-28 下午 - Javascript/Ajax - - - -

分享一个利用YUI Compressor在线压缩js的网页。

链接地址:YUI Compressor online

之前推荐过的TBCompressor其实就是这款压缩工具,只是TBueder将其封装了一下。该工具本地安装需要java的支持,有点麻烦,今天发现一个在线的,挺方便了!只是目前还不能压缩css,挺遗憾的~~!

简单解决“丑陋”的select下拉框

2009-01-9 上午 - Javascript/Ajax - -

  准备做为偶Blog的demo频道下的number one。代码就不在此处贴了,专门做了示范的页面。就请舞动你的鼠标,按得更深一点吧!

  有点仿tudou.com那个search select的原理,照着她的html结构写的代码,但是偶为了简便,value放在了input里,而土豆的是放进一个a标签的href属性里,说明她更充分的考虑了“预留退路”问题,深情的赞美一下!

  不多说了,偶要睡觉去袅,直接看代码,懒得做rar下载了,“另存为”一下,即OK!最后声明,用偶代码,很欢迎,转载偶的文章,别忘了留个链接哦!-_-!

预留退路+分离javascript+向后兼容性

2008-12-15 下午 - Javascript/Ajax - - - -

  谈谈这两天学到的一些新东西,就算是做个记录,自己也好随时来看看,增强记忆;同时也让喜欢js的朋友们也多了解一些有用的东西。

  1. 预留退路:确保网页在没有JavaScript的情况下也能正常工作。
  2. 分离JavaScript:把网页的结构和内容与JavaScript脚本的动作行为分开。
  3. 向后兼容性:确保老版本的浏览器不会因为你的JavaScript脚本而死机。

  其实这些东西说来说去也就是一条:养成良好的JavaScript编程习惯(事实上也并非一件简单的事)。

  预留退路,如果你正确地给JavaScript考虑了“退路”问题,就可以让用户在浏览器不支持或已关闭JavaScript的情况下也能够顺利浏览到原本该有的信息(虽然某些功能不可用,但至少保证内容是可见的)。

  分离javascript:顾名思义,就是将js脚本完完全全的迁移出html/xhtml文档,这样做是只有利而无弊的。可能在某些程度上会使得js脚本变得稍显复杂,但这些都是可以接受的。

  向后兼容性:现在,绝大多数的浏览器都能或多或少的支持JavaScript,同时对DOM的支持也都是很不错滴。但还是存在一些比较古老的浏览器,而正好它们却有可能无法理解DOM提供的方法和属性。解决方法比较容易实现,通过if语句,判断出结果从而选择该采取怎样的行动——这种检测叫做对象检测(object detection)。

  由于时间关系,该文章未提及解决方法的具体案例,网上有很多类似的例子可以查阅的,多多利用Google和百度吧!

两本新书到手,继续学习

2008-12-15 下午 - Javascript/Ajax, 乱七八糟 - -

  前几天去逛当当网,看中两本书,一时冲动就买了。现在当当的发货速度比以前快多了,赞一个!下面就所说这两本书吧!

  两本都是“图灵”的,WEB开发系列。喜欢他家的书,不是一两次买了,推荐大家想买这类书籍的都可以选择“图灵”的。

  1. 《JavaScript DOM 编程艺术》— Jeremy Keith著
  2. 《JavaScript 高级程序设计》— Nicholas C.Zakas著

  前者已经看得差不多了,从中确实受益不浅。对DOM又一个比较完善的理解了,也似乎明白究竟如何做到“预留退路”、“代码分离”、“向后兼容”着三点要素,但还需要更多的开发经验。

  后者我还没开始学习,准备先好好消化了前者的精华后再陆续跟进。留更多的时间给这本书,很明显后者的难度要大很多。

  同时我也会通过博客与大家一起分享我的学习成果,一起进步!理想万岁!-_-~!

js实现下拉导航菜单[3种]

2008-11-5 下午 - Javascript/Ajax - - -

最近几天在弄一些管理界面,说到管理界面,自然就离不开一个能打开收起的菜单了。就顺便整理一下,方便有需要的朋友使用。以下有3种,每种都有其优点,根据需要选择吧!

第一种,也是最简单实用的一种,正因为简单,也有其不完善的一面。

下载: code1.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <script type="text/javascript"> 
  3. <!--
  4. function getObject(objectId) {
  5. if(document.getElementById && document.getElementById(objectId)) {
  6. return document.getElementById(objectId);
  7. }
  8. else if (document.all && document.all(objectId)) {
  9. return document.all(objectId);
  10. }
  11. else if (document.layers && document.layers[objectId]) {
  12. return document.layers[objectId];
  13. }
  14. else {
  15. return false;
  16. }
  17. }
  18.  
  19. function showHide(e,objname){    
  20.     var obj = getObject(objname);
  21.     if(obj.style.display == "none"){
  22.         obj.style.display = "block";
  23.         e.className="xias";
  24.     }else{
  25.         obj.style.display = "none";
  26.         e.className="rights";
  27.     }
  28. }
  29. --> 
  30. </script> 
  31. <style type="text/css"> 
  32. body { font-size:12px; margin:20px; padding:0; text-align:left;}
  33. dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
  34. li { list-style:none;}
  35. h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}
  36. h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}
  37. .libiao_menu { margin-bottom:15px;}
  38. .libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; background:url(../picture/user_11.gif) no-repeat 20px 0; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;}
  39. .libiao_menu dl { margin-left:30px; margin-top:5px;}
  40. .libiao_menu dl dt { font-size:14px; line-height:24px;}
  41. .libiao_menu dl dt a { padding-left:13px; color:#333;}
  42. .libiao_menu dl dt a.rights { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 3px;}
  43. .libiao_menu dl dt a.xias { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 -41px;}
  44. .libiao_menu dl dd { padding-left:20px;}
  45. .libiao_menu dl dd ul {}
  46. .libiao_menu dl dd ul li { font-size:14px; line-height:24px;}
  47. .libiao_menu dl dd ul li a { color:#06c;}
  48. </style> 
  49. <h2>js2级下拉导航列表[1]</h2> 
  50. <h5>本文出处:<a href="http://www.11gz.com/" target="_blank">Heluyao's Blog</a>,转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span></h5> 
  51.     <div class="libiao_menu"> 
  52.         <dl> 
  53.             <dt><a href="#" class="xias" onclick="showHide(this,'items0');">我的订单</a></dt> 
  54.             <dd id="items0" style="display: block;"> 
  55.                 <ul> 
  56.                     <li><a href="#">所有订单</a></li> 
  57.                     <li><a href="#">需要支付的订单</a></li> 
  58.                     <li><a href="#">处理中的订单</a></li> 
  59.                     <li><a href="#">需要确认收货的订单</a></li> 
  60.                 </ul> 
  61.             </dd> 
  62.         </dl> 
  63.         <dl> 
  64.             <dt><a href="#" class="xias" onclick="showHide(this,'items1');">帐户管理</a></dt> 
  65.             <dd id="items1" style="display: block;"> 
  66.                 <ul> 
  67.                     <li><a href="#">我的积分</a></li> 
  68.                     <li><a href="#">管理收货地址</a></li> 
  69.                 </ul> 
  70.             </dd> 
  71.         </dl> 
  72.         <dl> 
  73.             <dt><a href="#" class="xias" onclick="showHide(this,'items2');">我的</a></dt> 
  74.             <dd id="items2" style="display: block;"> 
  75.                 <ul> 
  76.                     <li><a href="#">我的收藏</a></li> 
  77.                     <li><a href="#">我的评论</a></li> 
  78.                 </ul> 
  79.             </dd> 
  80.         </dl> 
  81.         <dl> 
  82.             <dt><a href="#" class="xias" onclick="showHide(this,'items3');">个人信息管理</a></dt> 
  83.             <dd id="items3" style="display: block;"> 
  84.                 <ul> 
  85.                     <li><a href="#">编辑个人档案</a></li> 
  86.                     <li><a href="#">修改密码</a></li> 
  87.                 </ul> 
  88.             </dd> 
  89.         </dl> 
  90.     </div>

第二种:功能上比第一种要强,预览查看效果就会有明显的感觉。当打开另一个下拉列表时,之前打开的会关闭合拢。实用了YAHOO一个操作DOM的函数库。

下载: code2.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <script type="text/javascript" src="http://www.11gz.com/yahoo-dom-event.js"></script> 
  3. <script type="text/javascript"> 
  4. <!--
  5. function fnInitMenu(){
  6.     YAHOO.namespace('Menu');
  7.     var sMenuId = "qMenu"; //导航的ID名
  8.     var sMenu2ClassName = "qMenu2"; //二级菜单的className
  9.     var sMenu1ActiveClassName = "activeItem"; //当前激活的一级菜单className
  10.     var oMenu = YAHOO.util.Dom.get(sMenuId);
  11.     YAHOO.Menu.hide = function(obj){
  12.         var menu2 = YAHOO.util.Dom.getElementsByClassName(sMenu2ClassName,"ul",oMenu);
  13.         for(var i=0;i<menu2.length;i++){
  14.             if(menu2[i].parentNode == obj) continue; 
  15.             menu2[i].style.display="none";
  16.             YAHOO.util.Dom.removeClass(menu2[i].parentNode,sMenu1ActiveClassName);    
  17.         }
  18.     }
  19.     YAHOO.Menu.fold = function(ev){
  20.         var a =YAHOO.util.Event.getTarget(ev);
  21.         var b =YAHOO.util.Dom.getLastChild(a);    
  22.         if(YAHOO.util.Dom.hasClass(a,sMenu1ActiveClassName)){                            
  23.             if(YAHOO.util.Dom.hasClass(b,sMenu2ClassName)){
  24.                 b.style.display = "none";
  25.             }
  26.             YAHOO.util.Dom.removeClass(a,sMenu1ActiveClassName);            
  27.         }else{
  28.         
  29.              if(YAHOO.util.Dom.hasClass(b,sMenu2ClassName)){
  30.                  YAHOO.Menu.hide();
  31.                 b.style.display = "block";
  32.             }
  33.             YAHOO.util.Dom.addClass(a,sMenu1ActiveClassName);
  34.         }
  35.     }
  36.     YAHOO.Menu.init = new function(){        
  37.         var c = YAHOO.util.Dom.getChildren(sMenuId);    
  38.         for(var j=0;j<c.length;j++){
  39.             YAHOO.util.Event.on(c[j],"click",YAHOO.Menu.fold);
  40.             if(YAHOO.util.Dom.hasClass(c[j],sMenu1ActiveClassName)){
  41.                 var oNotHide =c[j];
  42.             }    
  43.         }
  44.         YAHOO.Menu.hide(oNotHide);
  45.     }    
  46. }
  47. YAHOO.util.Event.onDOMReady(fnInitMenu);
  48. --> 
  49. </script> 
  50. <style type="text/css"> 
  51. *{ margin:0; padding:0;    list-style:none;}
  52. body { margin:20px; text-align:left; font-family:"宋体";}
  53. h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}
  54. h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}
  55. .menu {}
  56. .menu li { line-height:24px; background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 8px; font-size:14px; text-align:left; padding-left:10px; cursor:pointer;}
  57. .menu li.activeItem { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 -36px;}
  58. .menu li ul { margin-bottom:5px;}
  59. .menu li ul li { font-size:12px; text-align:left; background:#fff; line-height:22px; margin-left:-10px; cursor:auto;}
  60. .menu li ul li.activeItem { background:none;}
  61. .menu li ul li a { color:#06c; font-size:14px; text-decoration:underline;}
  62. </style> 
  63. <h2>js2级下拉导航列表[2]</h2><h5>本文出处:<a href="http://www.11gz.com/" target="_blank">Heluyao's Blog</a>,转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span></h5> 
  64. <ul class="menu" id="qMenu"> 
  65.                 <li>大类一
  66.                     <ul style="display: none;" class="qMenu2"> 
  67.                         <li>·<a href="#">列表一</a></li> 
  68.                         <li>·<a href="#">列表二</a></li> 
  69.                         <li>·<a href="#">列表三</a></li> 
  70.                         <li>·<a href="#">列表四</a></li> 
  71.                     </ul> 
  72.                 </li> 
  73.                 <li>大类二
  74.                     <ul style="display: none;" class="qMenu2"> 
  75.                         <li>·<a href="#">列表一</a></li> 
  76.                         <li>·<a href="#">列表二</a></li> 
  77.                         <li>·<a href="#">列表三</a></li> 
  78.                         <li>·<a href="#">列表四</a></li> 
  79.                     </ul> 
  80.                 </li> 
  81.                 <li>大类三
  82.                     <ul style="display: none;" class="qMenu2"> 
  83.                         <li>·<a href="#">列表一</a></li> 
  84.                         <li>·<a href="#">列表二</a></li> 
  85.                         <li>·<a href="#">列表三</a></li> 
  86.                         <li>·<a href="#">列表四</a></li> 
  87.                     </ul> 
  88.                 </li> 
  89.                 <li>大类四
  90.                     <ul style="display: none;" class="qMenu2"> 
  91.                         <li>·<a href="#">列表一</a></li> 
  92.                         <li>·<a href="#">列表二</a></li> 
  93.                         <li>·<a href="#">列表三</a></li> 
  94.                         <li>·<a href="#">列表四</a></li> 
  95.                     </ul> 
  96.                 </li> 
  97.                 <li>大类五
  98.                     <ul style="display: none;" class="qMenu2"> 
  99.                         <li>·<a href="#">列表一</a></li> 
  100.                         <li>·<a href="#">列表二</a></li> 
  101.                         <li>·<a href="#">列表三</a></li> 
  102.                         <li>·<a href="#">列表四</a></li> 
  103.                     </ul> 
  104.                 </li> 
  105.                 <li>大类六
  106.                     <ul style="display: none;" class="qMenu2"> 
  107.                         <li>·<a href="#">列表一</a></li> 
  108.                         <li>·<a href="#">列表二</a></li> 
  109.                         <li>·<a href="#">列表三</a></li> 
  110.                         <li>·<a href="#">列表四</a></li> 
  111.                     </ul> 
  112.                 </li> 
  113.             </ul>

第三种:这个功能很强大的说,绝对无限级。只要你按照标签嵌套的模式,想实现多少级就多少几,而且不会存在性能的问题。原理也比较简单。仅仅只是标签的display属性变换。同样也用了一个js框架,主要用于操作文档DOM节点。而且该js框架很小,5k而已咯!值得推荐!

下载: code3.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <style type="text/css"> 
  3.     *{ margin:0; padding:0;    list-style:none;}
  4.     body { margin:20px;}
  5.     h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}
  6.     h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}
  7.     #nav a { text-decoration:underline;color:#06c; font-size:14px; line-height:24px;}
  8.     #nav ul{ margin-bottom:5px;}
  9.     #nav strong{ color:#696;}
  10.     #nav.dyn li ul{ display:none;}
  11.     #nav.dyn li ul.show{ display:block;}
  12.     #nav.dyn li{ padding-left:15px;}
  13.     #nav.dyn li.parent{    background:url(http://www.11gz.com/blog/images/user_23.gif) 5px 10px no-repeat;}
  14.     #nav.dyn li.open{ background:url(http://www.11gz.com/blog/images/user_23.gif) 5px -34px no-repeat;}
  15.     </style> 
  16. <script type="text/javascript" src="http://www.11gz.com/DOMhelp.js"></script> 
  17. <script type="text/javascript"> 
  18. <!--
  19. sn={
  20.     dynamicClass:'dyn',
  21.     showClass:'show',
  22.     parentClass:'parent',
  23.     openClass:'open',
  24.     navID:'nav',
  25.     init:function(){
  26.         var triggerLink;
  27.         if(!document.getElementById || !document.createTextNode){return;}
  28.         var nav=document.getElementById(sn.navID);
  29.         if(!nav){return;}
  30.         DOMhelp.cssjs('add',nav,sn.dynamicClass);        
  31.         var nested=nav.getElementsByTagName('ul');
  32.         for(var i=0;i<nested.length;i++){
  33.             triggerLink=nested[i].parentNode.getElementsByTagName('a')[0];
  34.             DOMhelp.cssjs('add',triggerLink.parentNode,sn.parentClass);        
  35.             DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false);
  36.             triggerLink.onclick=DOMhelp.safariClickFix;
  37.             if(nested[i].parentNode.getElementsByTagName('strong').length>0){
  38.                 DOMhelp.cssjs('add',triggerLink.parentNode,sn.openClass);        
  39.                 DOMhelp.cssjs('add',nested[i],sn.showClass);
  40.             }
  41.         }
  42.     },
  43.     changeSection:function(e){
  44.         var t=DOMhelp.getTarget(e);
  45.         var firstList=t.parentNode.getElementsByTagName('ul')[0];
  46.         if(DOMhelp.cssjs('check',firstList,sn.showClass)){
  47.             DOMhelp.cssjs('remove',firstList,sn.showClass)
  48.             DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
  49.         } else {
  50.             DOMhelp.cssjs('add',firstList,sn.showClass)
  51.             DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
  52.         }
  53.         DOMhelp.cancelClick(e);
  54.     }
  55. }
  56. DOMhelp.addEvent(window,'load',sn.init,false);
  57. --> 
  58. </script> 
  59. <h2>js实现无限级下拉导航列表</h2><h5>本文出处:<a href="http://www.11gz.com/" target="_blank">Heluyao's Blog</a>,转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span></h5> 
  60. <ul id="nav"> 
  61.     <li><a href="#">主页</a></li> 
  62.     <li><a href="#">产品</a> 
  63.         <ul> 
  64.             <li><a href="#">大类别一</a> 
  65.                 <ul> 
  66.                     <li><a href="#">小类别一</a> 
  67.                         <ul> 
  68.                             <li><a href="#">次类别一</a></li> 
  69.                             <li><a href="#">次类别二</a></li> 
  70.                         </ul> 
  71.                     </li> 
  72.                     <li><a href="#">小类别二</a></li> 
  73.                 </ul> 
  74.             </li> 
  75.             <li><a href="#">大类别二</a></li> 
  76.             <li><a href="#">大类别三</a> 
  77.                 <ul> 
  78.                     <li><a href="#">小类别一</a></li> 
  79.                     <li><a href="#">小类别二</a></li> 
  80.                 </ul> 
  81.             </li> 
  82.         </ul> 
  83.     </li> 
  84.     <li><a href="#">服务</a> 
  85.         <ul> 
  86.             <li><a href="#">大类别一</a></li> 
  87.             <li><a href="#">大类别二</a></li> 
  88.             <li><a href="#">大类别三</a></li> 
  89.         </ul> 
  90.     </li> 
  91.     <li><a href="#">合作</a></li> 
  92.     <li><a href="#">关于我们</a> 
  93.         <ul> 
  94.             <li><a href="#">大类别一</a> 
  95.                 <ul> 
  96.                     <li><a href="#">小类别一</a></li> 
  97.                     <li><a href="#">小类别二</a></li> 
  98.                 </ul> 
  99.             </li> 
  100.             <li><a href="#">大类别二</a> 
  101.                 <ul> 
  102.                     <li><a href="#">小类别一</a></li> 
  103.                     <li><a href="#">小类别二</a></li> 
  104.                 </ul> 
  105.             </li> 
  106.             <li><a href="#">大类别三</a> 
  107.                 <ul> 
  108.                     <li><a href="#">小类别一</a></li> 
  109.                     <li><a href="#">小类别二</a></li> 
  110.                 </ul> 
  111.             </li> 
  112.             <li><a href="#">大类别四</a></li> 
  113.         </ul> 
  114.     </li> 
  115.     <li><a href="#">联系我们</a> 
  116.         <ul> 
  117.             <li><a href="#">大类别一</a></li> 
  118.             <li><a href="#">大类别二</a></li> 
  119.         </ul> 
  120.     </li> 
  121. </ul>

  相信你能找到你想要的!

CSS或js实现行间交替背景色效果

2008-09-24 下午 - Javascript/Ajax, Web Development - - -

  本文介绍两种方法,都挺简单的,略懂前端的同志们都应该能理解的。

1.利用CSS控制行的属性:

下载: code.html
  1. <style type="text/css"> 
  2. ul { list-style:none; font-size:12px; line-height:20px; color:#666;}
  3. ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');} 
  4. </style> 
  5.  
  6. <ul class="myul1"> 
  7. <li>·河北作协副主席:我要给韩寒当爹真相</li> 
  8. <li>·易建联:在美国去超市没有被认出来</li> 
  9. <li>·徐友渔:买到假药举报无门的亲身经历</li> 
  10. <li>·航天员如何在太空中吃饭上厕所(图) </li> 
  11. <li>·90后大学生艳装军训雷晕教官(图)</li> 
  12. <li>·北京报纸涨价便宜了谁</li> 
  13. <li>·河北作协副主席:我要给韩寒当爹真相</li>  
  14. <li>·易建联:在美国去超市没有被认出来</li>  
  15. <li>·徐友渔:买到假药举报无门的亲身经历</li>  
  16. <li>·航天员如何在太空中吃饭上厕所(图) </li>  
  17. <li>·90后大学生艳装军训雷晕教官(图)</li>  
  18. <li>·北京报纸涨价便宜了谁</li>  
  19. </ul>

  通过判断奇偶数来确定li的背景颜色,很简单吧!

2.利用JS控制各行的交替背景。

下载: code2.html
  1. <style type="text/css"> 
  2. ul { list-style:none; color:#666; font-size:12px;}
  3. .li01 { background:#EAF8FD; }
  4. .li02 { background:#fff; }
  5. </style> 
  6. <ul id="list01"> 
  7. <li>·河北作协副主席:我要给韩寒当爹真相</li> 
  8. <li>·易建联:在美国去超市没有被认出来</li> 
  9. <li>·徐友渔:买到假药举报无门的亲身经历</li> 
  10. <li>·航天员如何在太空中吃饭上厕所(图) </li> 
  11. <li>·90后大学生艳装军训雷晕教官(图)</li> 
  12. <li>·北京报纸涨价便宜了谁</li> 
  13. <li>·河北作协副主席:我要给韩寒当爹真相</li> 
  14. <li>·易建联:在美国去超市没有被认出来</li> 
  15. <li>·徐友渔:买到假药举报无门的亲身经历</li> 
  16. <li>·航天员如何在太空中吃饭上厕所(图) </li> 
  17. <li>·90后大学生艳装军训雷晕教官(图)</li> 
  18. <li>·北京报纸涨价便宜了谁</li> 
  19. </ul> 
  20. <Script type="text/javascript"> 
  21. objName=document.getElementById("list01").getElementsByTagName("li");
  22. for (i=0;i<objName.length;i++){
  23. (i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
  24. }
  25. </Script>

  两个方法都不错哦!值得推荐的!

利用js实现静态分页

2008-05-25 下午 - Javascript/Ajax - -

  由于工作上的需要,做了个用js分页的效果。不牵涉到服务器端的语言,所以只有用js来分页。

  把demo提供给大家,原本调xml文档的部分,这里就不提供了。

下载: code1.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>js实现静态分页</title>
  6. <style type="text/css">
  7. table.dynamic tbody tr{ display:none;}
  8. table.dynamic tbody tr.show{display:block;}
  9. html>body table.dynamic tbody tr.show{ display:table-row;}
  10. th,td{ padding:5px;}
  11. th{ background:#eef;}
  12. table.pagelist{ border:1px solid #ccc; border-bottom:none; border-right:none; width:500px;}
  13. table.pagelist td,table.pagelist th{ font-size:12px; border:1px solid #ccc; border-top:none; border-left:none;}
  14. p.paginatedNav{ font-size:12px; width:480px; margin-top:8px; text-align:right;}
  15. p.paginatedNav a{ color:#ccc;}
  16. p.paginatedNav a:link,p.paginatedNav a:visited{ color:#369;}
  17. </style>
  18. <script type="text/javascript" src="http://www.11gz.com/DOMhelp.js"></script>
  19. <script type="text/javascript"><!--
  20. pn = {
  21. //css class
  22. paginationClass:'pagelist',
  23. dynamicClass:'dynamic',
  24. showClass:'show',
  25. paginationNavClass:'paginatedNav',
  26.  
  27. //设置每页显示数据条数
  28. increase : 5,
  29. //分页导航的替换文本
  30. counter:'&#160;&#160;_x_到_y_条&#160;&#160;共_z_条&#160;&#160;',
  31. nextLabel:'下一页',
  32. previousLabel:'上一页',
  33.  
  34. init:function(){
  35.      var tablebody;
  36.   if(!document.getElementById || !document.createTextNode){return;}
  37.   var ts=document.getElementsByTagName('table');
  38.   for(var i=0;i<ts.length;i++){
  39.    if(!DOMhelp.cssjs('check',ts[i],pn.paginationClass)){continue;}
  40.    if(ts[i].getElementsByTagName('tr').length<pn.increase+1){continue;}
  41.    tablebody=ts[i].getElementsByTagName('tbody')[0];
  42.    ts[i].datarows=tablebody.getElementsByTagName('tr');
  43.    ts[i].datarowsize=ts[i].datarows.length;
  44.    ts[i].current=null;
  45.    DOMhelp.cssjs('add',ts[i],pn.dynamicClass);
  46.    pn.createPaginationNav(ts[i]);
  47.    pn.showSection(ts[i],0);
  48.   }
  49. },
  50. createPaginationNav:function(table){
  51.   var navBefore,navAfter;
  52.   navBefore=document.createElement('p');
  53.   DOMhelp.cssjs('add',navBefore,pn.paginationNavClass);
  54.   navBefore.appendChild(DOMhelp.createLink('#',pn.previousLabel));
  55.   navBefore.appendChild(document.createElement('span'));
  56.   counter=pn.counter.replace('_x_',1);
  57.   counter=counter.replace('_y_',pn.increase);
  58.   counter=counter.replace('_z_',table.datarowsize-1);
  59.   navBefore.getElementsByTagName('span')[0].innerHTML=counter;
  60.   navBefore.appendChild(DOMhelp.createLink('#',pn.nextLabel));
  61.   table.parentNode.insertBefore(navBefore,table);
  62.   navAfter=navBefore.cloneNode(true);
  63.   table.parentNode.insertBefore(navAfter,table.nextSibling);
  64.   table.topPrev=navBefore.getElementsByTagName('a')[0];
  65.   table.topNext=navBefore.getElementsByTagName('a')[1];
  66.   table.bottomPrev=navAfter.getElementsByTagName('a')[0];
  67.   table.bottomNext=navAfter.getElementsByTagName('a')[1];
  68.   DOMhelp.addEvent(table.topPrev,'click',pn.navigate,false); 
  69.   DOMhelp.addEvent(table.bottomPrev,'click',pn.navigate,false); 
  70.   DOMhelp.addEvent(table.topNext,'click',pn.navigate,false); 
  71.   DOMhelp.addEvent(table.bottomNext,'click',pn.navigate,false); 
  72.   table.bottomNext.onclick=DOMhelp.safariClickFix;
  73.   table.topPrev.onclick=DOMhelp.safariClickFix;
  74.   table.bottomPrev.onclick=DOMhelp.safariClickFix;
  75.   table.topNext.onclick=DOMhelp.safariClickFix;
  76.   table.topCounter=navBefore.getElementsByTagName('span')[0];
  77.   table.bottomCounter=navAfter.getElementsByTagName('span')[0];
  78. },
  79. navigate:function(e){
  80.   var start, table;
  81.   var t=DOMhelp.getTarget(e);
  82.   while(t.nodeName.toLowerCase()!='a'){t=t.parentNode;}
  83.   if(t.getAttribute('href') == null || t.getAttribute('href') == ''){return;}
  84.   if(t.parentNode.previousSibling.nodeName.toLowerCase() == 'table'){
  85.    table=t.parentNode.previousSibling;
  86.   }else{
  87.    table=t.parentNode.nextSibling;
  88.   }
  89.   if(t==table.topNext || t==table.bottomNext){
  90.    start=table.current+pn.increase;
  91.   }else if(t==table.topPrev || t==table.bottomPrev){
  92.    start=table.current-pn.increase;
  93.   }
  94.   pn.showSection(table,start)
  95. },
  96. showSection:function(table,start){
  97.   var i;
  98.   pn.changePaginationNav(table,start);
  99.   if(table.current!=null){
  100.    for(i=table.current;i<table.current+pn.increase;i++){
  101.     if(table.datarows[i]){
  102.      DOMhelp.cssjs('remove',table.datarows[i],pn.showClass);
  103.     }
  104.    }
  105.   }
  106.   for(i=start;i<start+pn.increase;i++){
  107.    if(table.datarows[i]){
  108.     DOMhelp.cssjs('add',table.datarows[i],pn.showClass);
  109.    }
  110.   }
  111.   table.current=start;
  112. },
  113. changePaginationNav:function(table,start){
  114.   if(start-pn.increase<0){
  115.    table.bottomPrev.removeAttribute('href');
  116.    table.topPrev.removeAttribute('href');
  117.   }else{
  118.    table.bottomPrev.setAttribute('href','#');
  119.    table.topPrev.setAttribute('href','#');
  120.   }
  121.   if(start+pn.increase>table.datarowsize-2){
  122.    table.bottomNext.removeAttribute('href');
  123.    table.topNext.removeAttribute('href');
  124.   }else{
  125.    table.bottomNext.setAttribute('href','#');
  126.    table.topNext.setAttribute('href','#');
  127.   }
  128.   var counter=pn.counter.replace('_x_',start+1);
  129.   var last=start+pn.increase;
  130.   if(last>table.datarowsize){last=table.datarowsize;}
  131.   counter=counter.replace('_y_',last);
  132.   counter=counter.replace('_z_',table.datarowsize);
  133.   table.topCounter.innerHTML=counter;
  134.   table.bottomCounter.innerHTML=counter;
  135. }
  136. }
  137. DOMhelp.addEvent(window,'load',pn.init,false);
  138. -->
  139. </script>
  140. </head>
  141. <body>
  142.  
  143. <table class="pagelist" cellspacing="0" cellpadding="0">
  144. <thead>
  145.  <tr><th scope="col">ID</th><th scope="col">作者</th><th scope="col">标题</th><th scope="col">介绍</th></tr>
  146. </thead>
  147. <tbody>
  148.  <tr><th>1</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  149.  <tr><th>2</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  150.  <tr><th>3</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  151.  <tr><th>4</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  152.  <tr><th>5</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  153.  <tr><th>6</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  154.  <tr><th>7</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  155.  <tr><th>8</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  156.  <tr><th>9</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  157.  <tr><th>10</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  158.  <tr><th>11</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  159.  <tr><th>12</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  160.  <tr><th>13</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  161.  <tr><th>14</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  162.  <tr><th>15</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  163.  <tr><th>16</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  164.  <tr><th>17</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  165.  <tr><th>18</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  166.  <tr><th>19</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  167.  <tr><th>20</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  168.  <tr><th>21</th><td>萧涤非 等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
  169.  <tr><th>22</th><td>左民安</td><td>细说汉字(精装版)</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
  170. </tbody>
  171. </table>
  172. </body>
  173. </html>

  你可以下载代码测试效果。

JQuery 是什么

2008-05-22 上午 - Javascript/Ajax - -

  jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。

  jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容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即可。

  Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多,简单了解过。但使用上jquery之后,马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby 罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。

  一,找到你了!

  还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的:

  代码

  1. var someElement = $(”#myId);

  看起来比其他两个框架的要多了一个#,好,看看下面的用法:

  代码

  1. $(div p);(1)
  2. $(div.container)(2)
  3. $(div #msg);(3)
  4. $(table a”,context);(4)

  在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。

  如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

  二,Jquery对象?

  jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):

  代码

  1. var a = $(”#cid);(1)
  2. var b = $(”<p>hello</p>”);(2)
  3. var c = document.createElement(”table”); var tb = $&copy;

  三,代替body标签的onload

  这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:

  代码

  1. $(document).ready(function(){
  2. alert(hello);
  3. });(1)
  1. <body onload=”alert(hello);”>(2

  上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jqeury的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。

  不管怎么说,这个惯例可以分离javascrīpt与HTML。推荐使用。

  四,事件机制

  我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = “fn()”,使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。

  代码

  1. $(document).ready(function(){
  2. $(”#clear).click(function(){
  3. alert(i am about to clear the table);
  4. });
  5. $(form[0]).submit(validate);
  6. });
  7. function validate(){
  8. //do some form validation
  9. }

  五,同一函数实现set

  代码

  1. $(”#msg).html();
  2. $(”#msg).html(hello);

  上面两行代码,调用了同样的函数。但结果却差别很大。

  第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。

  六,ajax

  这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常

  代码

  1. $.get(search.do”,{id:1},rend);
  2. function rend(xml){
  3. alert(xml);
  4. } (1)
  5. $.post(search.do”,{id:1},rend);
  6. function rend(xml){
  7. alert(xml);
  8. } (2)
  9. $(”#msg).ajaxStart(function(){
  10. this.html(”正在加载。。。。”);
  11. });(3)
  12. $(”#msg).ajaxSuccess(function(){
  13. this.html(”加载完成!”);
  14. });(4)

  这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。

  3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jquery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。

  七,渐入淡出

  代码

  1. $(”#msg).fadeIn(fast);
  2. $(”#msg).fadeOut(slow);

  没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。

  八,plugin

  这也是一个插件的时代。

  jquery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。

  写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。

  暂时告一段落吧。待有新的发现再来分享。

  加一些Jquery的资源:

  • http://www.visualjquery.com/index.xml 很好的API查询站点
  • http://jquery.com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西
  • http://www.codylindley.com/blogstuff/js/jtip/ Jtip,实用的提示工具
  • http://jquery.com/plugins/ 很多牛的插件。
  • http://15daysofjquery.com/jquery 的15天教程
  • http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐

  jquery来源

  jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的J&ouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。

  jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容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即可。

  jQuery的最新release版本是1.2.3。