开发JavaScript组件

使用JavaScript，按照面向对象的思想来构建组件。

现以构建一个TAB组件为例。

从功能上讲，组件包括可视部分和逻辑控制部分；从代码结构上讲，组件包括代码部分和资源部分（样式、图片等）。

组件的特点：高内聚，低耦合（不与其他代码逻辑交叉，可以继承，包含）；封装性（隐藏私有方法和变量）；可重用性（可反复多次使用，用来组装更复杂的应用）。

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.   
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. <title>JS 组件</title>  
  6. <style>  
  7. .TabControl{  
  8.     position:absolute;  
  9.   
  10. }  
  11.   
  12. .TabControl .tab-head{  
  13.     height:22px;width:100%;  
  14. /*  border-left: solid 0px #e0e0e0;border-right: solid 0px #e0e0e0;border-top: solid 0px #e0e0e0;border-bottom: solid 1px #e0e0e0; */  
  15.     position:absolute;  
  16.     z-index:9;  
  17. }  
  18.   
  19. .TabControl ul{  
  20.     position:absolute;  
  21.     top:2px;  
  22.     padding:0px;  
  23.     margin:0px;  
  24.     z-index:10;  
  25. }  
  26.   
  27. .TabControl li{  
  28.     list-style:none; /* 将默认的列表符号去掉 */  
  29.     padding-left:10px;  padding-right:10px;  
  30.     margin:0;   
  31.     float:left;  
  32.     border: solid 1px #e0e0e0;  
  33.     background-color:#ffffff;     
  34.     height:20px;  
  35.     cursor:default;  
  36. }  
  37.   
  38. .TabControl  li.selected{  
  39.     border-bottom: solid 1px #ffffff;border-top: solid 1px #ff0000;  
  40.     z-index:10;   
  41. }  
  42.   
  43. .TabControl li.unselected{  
  44.     border-bottom: solid 1px #e0e0e0;border-top: solid 1px #e0e0e0;  
  45.     z-index:10;   
  46. }  
  47.   
  48.   
  49. .TabControl  .pageSelected{  
  50.     position:absolute;  
  51.     display:block;  
  52.     border: solid 1px #e0e0e0;   
  53.     width:100%;height:100%;  
  54.     z-index:1;  
  55.     top:23px;  
  56. }  
  57.   
  58. .TabControl .pageUnSelected{  
  59.     display:none;  
  60.     border: solid 1px #e0e0e0;   
  61.     width:100%;height:100%;  
  62.     z-index:1;  
  63.     top:23px;     
  64. }  
  65. </style>  
  66. </head>  
  67.   
  68. <body>  
  69. <script lang="javascript">  
  70.     var TabControl = function(width, height){  
  71.         var me = this;  
  72.           
  73.         //TAB控件容器，头，列表  
  74.         var cbody,tabHead, ul;    
  75.           
  76.         //最后选中的TAB页  
  77.         var lastSelectedPage = 0;  
  78.           
  79.         //TAB页管理容器  
  80.         var pages = [];       
  81.           
  82.   
  83.         /**  
  84.          * 初始化函数  
  85.          * param{tabCount}, 创建tab页的个数  
  86.          */  
  87.         me.init = function(tabCount){  
  88.             //创建TAB容器  
  89.             cbody = document.createElement("DIV");  
  90.             cbody.className = "TabControl";  
  91.             cbody.style.width = width || "400px";  
  92.             cbody.style.height = height || "300px";  
  93.   
  94.             //创建TAB控件头  
  95.             tabHead= document.createElement("DIV");  
  96.             tabHead.className = "tab-head";  
  97.             cbody.appendChild(tabHead);  
  98.               
  99.             //创建TAB头  
  100.             ul = document.createElement("UL");  
  101.             tabHead.appendChild(ul);  
  102.           
  103.             //根据参数初始化TAB页，缺省创建2个TAB页  
  104.             var tc = tabCount ||  2;  
  105.               
  106.             for(var i=0;i<tc;i++){  
  107.                 me.insertPage(i,"tabPage" + i)   
  108.             }  
  109.               
  110.             //缺省选中第一页  
  111.             me.selectPage(0);   
  112.         }  
  113.           
  114.         /**  
  115.          * 插入TAB页  
  116.          * param{idx},插入位置  
  117.          * param{title},TAB页标题  
  118.          *  
  119.          */  
  120.         me.insertPage = function(idx,title){  
  121.             if(parseInt(idx)>=0){  
  122.                 var li = document.createElement("LI");  
  123.                 li.className = "unselected";  
  124.                 li.innerText = title;  
  125.                 var chd = ul.childNodes[idx];  
  126.                 ul.insertBefore(li);  
  127.                 li.onclick = function(){  
  128.                     me.selectPage(getSelectedIndex(li));  
  129.                 }  
  130.                   
  131.                   
  132.                 //创建page  
  133.                 var page = document.createElement("DIV");  
  134.                 page.className = "pageUnSelected";  
  135.                 pages.push(page);  
  136.                 cbody.appendChild(page);  
  137.              }            
  138.         }  
  139.           
  140.         /*  
  141.          * 内部函数  
  142.          * 根据选中的对象，获取对应的TAB页索引  
  143.          */  
  144.         function getSelectedIndex(li){  
  145.             var chd = ul.childNodes;  
  146.             for(var i=0;i<chd.length;i++){  
  147.                 if(chd[i] == li){  
  148.                     return i;  
  149.                 }  
  150.             }  
  151.         }  
  152.           
  153.           
  154.         /**  
  155.          * 选中某页  
  156.          * param{idx},选中页的索引  
  157.          */  
  158.         me.selectPage  = function(idx){  
  159.             if(parseInt(idx)>=0){                  
  160.                 var lis = ul.childNodes;  
  161.   
  162.                 alert(lastSelectedPage + ',' + idx);  
  163.                 lis[lastSelectedPage].className = "unselected";   
  164.                 lis[idx].className  = "selected";  
  165.   
  166. /*  
  167.                   
  168.                 for(var i=0;i<lis.length;i++){  
  169.                     if( i== idx){  
  170.                         lis[i].className  = "selected";  
  171.                     } else{  
  172.                         alert('B:'+ i + ','  + lis[idx].innerText);  
  173.                         lis[i].className  = "unselected";  
  174.                     }  
  175.   
  176.                 }  
  177. */                        
  178.                   
  179.                 //隐藏无需显示的TAB页，显示选中的TAB页  
  180.                 pages[lastSelectedPage].className = "pageUnSelected";     
  181.                 pages[idx].className = "pageSelected";    
  182.       
  183.                 lastSelectedPage = idx;  
  184.             }  
  185.   
  186.         }  
  187.           
  188.         //在函数尾部调用初始化函数执行初始化  
  189.         me.init();  
  190.       
  191.         //最后返回DOM对象  
  192.         return  cbody;  
  193.     }  
  194.   
  195.   
  196.     var tabControl = new TabControl();  
  197.     document.body.appendChild(tabControl);    
  198. </script>  
  199. </body>  
  200.   
  201. </html>  

posted on 2016-03-25 23:06  taoboy  阅读(249)  评论(0)  编辑  收藏  举报

导航