Javascriptオブジェクト指向プログラミングTab切り替えコンポーネント

25189 ワード
JavaScript 職場 レジャー
今日は対象向けプログラミングでtab切替部品も書きました.コンストラクターモードとプロトタイプモードを一つ包装しました.もともとこのような非常に簡単なものを書いていますが、書いているうちに一つの問題に遭遇しました.次の時間を使って、このtabコンポーネントは自動切り替えに対応していません.  それを直接に呼び出すだけでいいです.コードの中にコールされたコメントコードがあります.HTMlコードは以下の通りです
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>     </title> 
    6. 
   
   
   
   
  6. <style> 
    7. 
   
   
   
   
  7. .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;} 
    8. 
   
   
   
   
  8. .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
    9. 
   
   
   
   
  9. .tabnav li.hover{background:#047} 
    10. 
   
   
   
   
  10. .tabbox{width:500px;border:2px solid #047; overflow:hidden;} 
    11. 
   
   
   
   
  11. .tabbox div{margin:10px;line-height:20px} 
    12. 
   
   
   
   
  12. .tabbox .hide{ display:none;} 
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;} 
    15. 
   
   
   
   
  15. .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
    16. 
   
   
   
   
  16. .tabnav2 li.hover{background:#047} 
    17. 
   
   
   
   
  17. .tabbox2{width:500px;border:2px solid #047; overflow:hidden;} 
    18. 
   
   
   
   
  18. .tabbox2 div{margin:10px;line-height:20px} 
    19. 
   
   
   
   
  19. .tabbox2 .hide{ display:none;} 
    20. 
   
   
   
   
  20. </style> 
    21. 
   
   
   
   
  21. <script src="base.js"></script> 
    22. 
   
   
   
   
  22. </head> 
    23. 
   
   
   
   
  23.  
    24. 
   
   
   
   
  24. <body> 
    25. 
   
   
   
   
  25.     <ul class="tabnav"> 
    26. 
   
   
   
   
  26.         <li class="list1">jQuery  </li> 
    27. 
   
   
   
   
  27.         <li class="list1">CSS  </li> 
    28. 
   
   
   
   
  28.         <li class="list1">xhtml  </li> 
    29. 
   
   
   
   
  29.     </ul> 
    30. 
   
   
   
   
  30. <div class="tabbox"> 
    31. 
   
   
   
   
  31.     <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    32. 
   
   
   
   
  32.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    33. 
   
   
   
   
  33.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    34. 
   
   
   
   
  34. </div> 
    35. 
   
   
   
   
  35.  
    36. 
   
   
   
   
  36. <script type="text/javascript" src="Tab.js"></script> 
    37. 
   
   
   
   
  37. <script type="text/javascript"> 
    38. 
   
   
   
   
  38.     var listMenu = getElementsByClassName("list1"); 
    39. 
   
   
   
   
  39.     var contents = getElementsByClassName("c1"); 
    40. 
   
   
   
   
  40.     var test = new Tab(listMenu,contents); 
    41. 
   
   
   
   
  41.     test.Mouseover(); 
    42. 
   
   
   
   
  42. </script> 
    43. 
   
   
   
   
  43. </body> 
    44. 
   
   
   
   
  44. </html> 
    45.
base.jsはいくつかの基本的な関数の方法をカプセル化したのです.
  

  
  
  
  
    
   
   
   
   
  1. function getElementsByClassName(className,context){ 
    2. 
   
   
   
   
  2.         context = context || document; 
    3. 
   
   
   
   
  3.         if(context.getElementsByClassName){ 
    4. 
   
   
   
   
  4.             return context.getElementsByClassName(className);    
    5. 
   
   
   
   
  5.         } 
    6. 
   
   
   
   
  6.         var nodes = context.getElementsByTagName("*"),ret=[];//           
    7. 
   
   
   
   
  7.         for(var i=0;i<nodes.length;i++){   //        
    8. 
   
   
   
   
  8.             if(hasClass(nodes[i],className)) ret.push(nodes[i]); 
    9. 
   
   
   
   
  9.         }    
    10. 
   
   
   
   
  10.         return ret; 
    11. 
   
   
   
   
  11.     } 
    12. 
   
   
   
   
  12.      
    13. 
   
   
   
   
  13. //       
    14. 
   
   
   
   
  14. function hasClass(node,className){ 
    15. 
   
   
   
   
  15.     var names = node.className.split(/\s+/);//                   
    16. 
   
   
   
   
  16.     //       
    17. 
   
   
   
   
  17.     for(var i=0;i<names.length;i++){ 
    18. 
   
   
   
   
  18.         if(names[i]==className) 
    19. 
   
   
   
   
  19.             return true;     
    20. 
   
   
   
   
  20.         } 
    21. 
   
   
   
   
  21.         return false;    
    22. 
   
   
   
   
  22.     } 
    23. 
   
   
   
   
  23.          
    24. 
   
   
   
   
  24. /** 
    25. 
   
   
   
   
  25.      
    26. 
   
   
   
   
  26. curTime                        0 
    27. 
   
   
   
   
  27. start :     
    28. 
   
   
   
   
  28. dur :          
    29. 
   
   
   
   
  29. alter :       
    30. 
   
   
   
   
  30. */ 
    31. 
   
   
   
   
  31. function animate(o,start,alter,dur,fx){ 
    32. 
   
   
   
   
  32.     var curTime=0; 
    33. 
   
   
   
   
  33.     var t = setInterval(function(){ 
    34. 
   
   
   
   
  34.         if(curTime>=dur) clearInterval(t); 
    35. 
   
   
   
   
  35.         for(var i in start){ 
    36. 
   
   
   
   
  36.             o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";   
    37. 
   
   
   
   
  37.         } 
    38. 
   
   
   
   
  38.         curTime+=50; 
    39. 
   
   
   
   
  39.     },50)    
    40. 
   
   
   
   
  40.     return function(){ 
    41. 
   
   
   
   
  41.         clearInterval(t);    
    42. 
   
   
   
   
  42.     }; 
    43. 
   
   
   
   
  43. } 
    44. 
   
   
   
   
  44.  
    45. 
   
   
   
   
  45. function Linear(start,alter,curTime,dur){ 
    46. 
   
   
   
   
  46.     return start + curTime/dur * alter;  
    47. 
   
   
   
   
  47.     //                   
    48. 
   
   
   
   
  48. } 
    49. 
   
   
   
   
  49. //     
    50. 
   
   
   
   
  50. function Quad(start,alter,curTime,dur){ 
    51. 
   
   
   
   
  51.     return start + Math.pow(curTime/dur,2)*alter;    
    52. 
   
   
   
   
  52. } 
    53. 
   
   
   
   
  53.  function addClass(obj,className){   
    54. 
   
   
   
   
  54.      obj.className+=" " +className;     
    55. 
   
   
   
   
  55.      return obj;   
    56. 
   
   
   
   
  56. } 
    57. 
   
   
   
   
  57. function delClass(obj,className){   
    58. 
   
   
   
   
  58.     var s = obj.className.split(/\s+/);//          
    59. 
   
   
   
   
  59.     for(var i=0;i<s.length;i++){   
    60. 
   
   
   
   
  60.     if(s[i]==className){   
    61. 
   
   
   
   
  61.     delete s[i];       
    62. 
   
   
   
   
  62.     }      
    63. 
   
   
   
   
  63.     }   
    64. 
   
   
   
   
  64.     obj.className = s.join(" ");   
    65. 
   
   
   
   
  65.     return obj;   
    66. 
   
   
   
   
  66. }  
    67.
Tab.jsコードは以下の通りです.
  

  
  
  
  
    
   
   
   
   
  1. /** 
    2. 
   
   
   
   
  2.  * @author tugenhua 
    3. 
   
   
   
   
  3.  * version V1.0 
    4. 
   
   
   
   
  4.  * Tab       
    5. 
   
   
   
   
  5.  *     Tab       tabMenu   li    tabContent         currentClass               hover 
    6. 
   
   
   
   
  6.  *       base.js  js    javascript      
    7. 
   
   
   
   
  7.  *  js     onclick      onmouseover        js        
    8. 
   
   
   
   
  8.  * <script type="text/javascript"> 
    9. 
   
   
   
   
  9.  *  var listMenu = getElementsByClassName("list1"); 
    10. 
   
   
   
   
  10.  *  var contents = getElementsByClassName("c1"); 
    11. 
   
   
   
   
  11.  *  var test = new Tab(listMenu,contents); 
    12. 
   
   
   
   
  12.  *  test.Mouseover()  test.Click();       
    13. 
   
   
   
   
  13.  ×  js      Click Mouseover                                                     
    14. 
   
   
   
   
  14.  ×   ！ 
    15. 
   
   
   
   
  15.  ×      javascript           !      this    that        this             ! 
    16. 
   
   
   
   
  16.  *  </script> 
    17. 
   
   
   
   
  17.  ×  
    18. 
   
   
   
   
  18.  */ 
    19. 
   
   
   
   
  19. function Tab(tabMenu, tabContent, currentClass, time){ 
    20. 
   
   
   
   
  20.     this.tabMenu = tabMenu; 
    21. 
   
   
   
   
  21.     this.tabContent = tabContent; 
    22. 
   
   
   
   
  22.     this.currentClass = currentClass || "hover"; 
    23. 
   
   
   
   
  23.     this.time = time || 3000; 
    24. 
   
   
   
   
  24.     this.tabMenu[0].className +=" " +this.currentClass; 
    25. 
   
   
   
   
  25.     } 
    26. 
   
   
   
   
  26.     Tab.prototype = { 
    27. 
   
   
   
   
  27.         Click : function(){ 
    28. 
   
   
   
   
  28.             for(var j=0;j<this.tabMenu.length;j++){ 
    29. 
   
   
   
   
  29.                 var that = this; 
    30. 
   
   
   
   
  30.                 (function(_j){ 
    31. 
   
   
   
   
  31.                     that.tabMenu[_j].onclick = function(){ 
    32. 
   
   
   
   
  32.                         for(var c=0;c<that.tabContent.length;c++){ 
    33. 
   
   
   
   
  33.                             that.tabContent[c].style.display = "none"; 
    34. 
   
   
   
   
  34.                         } 
    35. 
   
   
   
   
  35.                         that.clearClass(); 
    36. 
   
   
   
   
  36.                         addClass(this,that.currentClass); 
    37. 
   
   
   
   
  37.                         that.tabContent[_j].style.display = "block"; 
    38. 
   
   
   
   
  38.                          
    39. 
   
   
   
   
  39.                     } 
    40. 
   
   
   
   
  40.                 })(j)    
    41. 
   
   
   
   
  41.             } 
    42. 
   
   
   
   
  42.         }, 
    43. 
   
   
   
   
  43.         clearClass : function(){ 
    44. 
   
   
   
   
  44.             for(var k=0;k<this.tabMenu.length;k++){ 
    45. 
   
   
   
   
  45.                 if(hasClass(this.tabMenu[k],this.currentClass)){ 
    46. 
   
   
   
   
  46.                     delClass(this.tabMenu[k],this.currentClass); 
    47. 
   
   
   
   
  47.                 } 
    48. 
   
   
   
   
  48.             } 
    49. 
   
   
   
   
  49.         }, 
    50. 
   
   
   
   
  50.         Mouseover : function(){ 
    51. 
   
   
   
   
  51.             for(var j=0;j<this.tabMenu.length;j++){ 
    52. 
   
   
   
   
  52.                 var that = this; 
    53. 
   
   
   
   
  53.                 (function(_j){ 
    54. 
   
   
   
   
  54.                     that.tabMenu[_j].onmouseover = function(){ 
    55. 
   
   
   
   
  55.                         that.item = _j; 
    56. 
   
   
   
   
  56.                         for(var c=0;c<that.tabContent.length;c++){ 
    57. 
   
   
   
   
  57.                             that.tabContent[c].style.display = "none"; 
    58. 
   
   
   
   
  58.                         } 
    59. 
   
   
   
   
  59.                         that.clearClass(); 
    60. 
   
   
   
   
  60.                         addClass(this,that.currentClass); 
    61. 
   
   
   
   
  61.                         that.tabContent[_j].style.display = "block"; 
    62. 
   
   
   
   
  62.                          
    63. 
   
   
   
   
  63.                     } 
    64. 
   
   
   
   
  64.                 })(j)    
    65. 
   
   
   
   
  65.             } 
    66. 
   
   
   
   
  66.         } 
    67. 
   
   
   
   
  67.          
    68. 
   
   
   
   
  68.     } 
    69.
Tab.jsコードには相応のjs注釈とこのjsの長所と短所があります.およびjs呼び出し方法!興味がある人は見てもいいです.もちろん以下は該当のダウンロードを提供します.不明なところはメッセージを残してもいいです.
javascriptの中のprototype