使用JavaScript,按照面向对象的思想来构建组件。
现以构建一个TAB组件为例。
从功能上讲,组件包括可视部分和逻辑控制部分;从代码结构上讲,组件包括代码部分和资源部分(样式、图片等)。
组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含);封装性(隐藏私有方法和变量);可重用性(可反复多次使用,用来组装更复杂的应用)。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>JS 组件</title>
- <style>
- .TabControl{
- position:absolute;
- }
- .TabControl .tab-head{
- height:22px;width:100%;
- /* border-left: solid 0px #e0e0e0;border-right: solid 0px #e0e0e0;border-top: solid 0px #e0e0e0;border-bottom: solid 1px #e0e0e0; */
- position:absolute;
- z-index:9;
- }
- .TabControl ul{
- position:absolute;
- top:2px;
- padding:0px;
- margin:0px;
- z-index:10;
- }
- .TabControl li{
- list-style:none; /* 将默认的列表符号去掉 */
- padding-left:10px; padding-right:10px;
- margin:0;
- float:left;
- border: solid 1px #e0e0e0;
- background-color:#ffffff;
- height:20px;
- cursor:default;
- }
- .TabControl li.selected{
- border-bottom: solid 1px #ffffff;border-top: solid 1px #ff0000;
- z-index:10;
- }
- .TabControl li.unselected{
- border-bottom: solid 1px #e0e0e0;border-top: solid 1px #e0e0e0;
- z-index:10;
- }
- .TabControl .pageSelected{
- position:absolute;
- display:block;
- border: solid 1px #e0e0e0;
- width:100%;height:100%;
- z-index:1;
- top:23px;
- }
- .TabControl .pageUnSelected{
- display:none;
- border: solid 1px #e0e0e0;
- width:100%;height:100%;
- z-index:1;
- top:23px;
- }
- </style>
- </head>
- <body>
- <script lang="javascript">
- var TabControl = function(width, height){
- var me = this;
- //TAB控件容器,头,列表
- var cbody,tabHead, ul;
- //最后选中的TAB页
- var lastSelectedPage = 0;
- //TAB页管理容器
- var pages = [];
- /**
- * 初始化函数
- * param{tabCount}, 创建tab页的个数
- */
- me.init = function(tabCount){
- //创建TAB容器
- cbody = document.createElement("DIV");
- cbody.className = "TabControl";
- cbody.style.width = width || "400px";
- cbody.style.height = height || "300px";
- //创建TAB控件头
- tabHead= document.createElement("DIV");
- tabHead.className = "tab-head";
- cbody.appendChild(tabHead);
- //创建TAB头
- ul = document.createElement("UL");
- tabHead.appendChild(ul);
- //根据参数初始化TAB页,缺省创建2个TAB页
- var tc = tabCount || 2;
- for(var i=0;i<tc;i++){
- me.insertPage(i,"tabPage" + i)
- }
- //缺省选中第一页
- me.selectPage(0);
- }
- /**
- * 插入TAB页
- * param{idx},插入位置
- * param{title},TAB页标题
- *
- */
- me.insertPage = function(idx,title){
- if(parseInt(idx)>=0){
- var li = document.createElement("LI");
- li.className = "unselected";
- li.innerText = title;
- var chd = ul.childNodes[idx];
- ul.insertBefore(li);
- li.onclick = function(){
- me.selectPage(getSelectedIndex(li));
- }
- //创建page
- var page = document.createElement("DIV");
- page.className = "pageUnSelected";
- pages.push(page);
- cbody.appendChild(page);
- }
- }
- /*
- * 内部函数
- * 根据选中的对象,获取对应的TAB页索引
- */
- function getSelectedIndex(li){
- var chd = ul.childNodes;
- for(var i=0;i<chd.length;i++){
- if(chd[i] == li){
- return i;
- }
- }
- }
- /**
- * 选中某页
- * param{idx},选中页的索引
- */
- me.selectPage = function(idx){
- if(parseInt(idx)>=0){
- var lis = ul.childNodes;
- alert(lastSelectedPage + ',' + idx);
- lis[lastSelectedPage].className = "unselected";
- lis[idx].className = "selected";
- /*
- for(var i=0;i<lis.length;i++){
- if( i== idx){
- lis[i].className = "selected";
- } else{
- alert('B:'+ i + ',' + lis[idx].innerText);
- lis[i].className = "unselected";
- }
- }
- */
- //隐藏无需显示的TAB页,显示选中的TAB页
- pages[lastSelectedPage].className = "pageUnSelected";
- pages[idx].className = "pageSelected";
- lastSelectedPage = idx;
- }
- }
- //在函数尾部调用初始化函数执行初始化
- me.init();
- //最后返回DOM对象
- return cbody;
- }
- var tabControl = new TabControl();
- document.body.appendChild(tabControl);
- </script>
- </body>
- </html>