zoukankan      html  css  js  c++  java

  • 开发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;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.     100%;height:100%;  
    54.     z-index:1;  
    55.     top:23px;  
    56. }  
    57.   
    58. .TabControl .pageUnSelected{  
    59.     display:none;  
    60.     border: solid 1px #e0e0e0;   
    61.     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>  
  • 相关阅读:
    自我介绍
    第一学期第一周学习总结
    2020-2021-1 20201332杨赛 《信息安全专业导论》第一周学习总结
    自我介绍
    2020-2021-1 20201307 《信息安全专业导论》第2周学习总结
    师生关系
    教材快速浏览
    2020-2021-1 20201307 《信息安全专业导论》第一周学习总结
    自我介绍
    20201319《信息安全导论》第一周学习总结
  • 原文地址：https://www.cnblogs.com/taoboy/p/5321505.html
Copyright © 2011-2022 走看看