JavaScript组件开发完整示例


Posted in Javascript onDecember 15, 2015

本文实例讲述了JavaScript组件开发的技巧。分享给大家供大家参考,具体如下:

使用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>

最终效果如图:

JavaScript组件开发完整示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
微信JS接口大全
Aug 25 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 #Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 #Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 #Javascript
js简单网速测试方法完整实例
Dec 15 #Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 #Javascript
理解javascript闭包
Dec 15 #Javascript
jQuery检测滚动条是否到达底部
Dec 15 #Javascript
You might like
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
基于python 字符编码的理解
2017/09/02 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
详解Python_shutil模块
2019/03/15 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
python中的插入排序的简单用法
2021/01/19 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
函数指针的定义是什么
2016/08/14 面试题
领导失职检讨书
2014/02/24 职场文书
维修工先进事迹
2014/05/29 职场文书
2014高考励志标语
2014/06/05 职场文书
计算机求职信
2014/07/02 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Python turtle实现贪吃蛇游戏
2021/06/18 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python