一个简单oop的changeTab
好多地方都会用到这样一个效果“点击tab切换内容页”,根据自己的想法实现了一下,写了个简单的插件。以前写代码都是标准的函数式编程,现在觉得面向对象编程看起来比较爽,并且更容易维护,于是就用oop的思想写了这个功能。
这里有两个文件change.js 和test.html,内容有注释,就直接上代码了。
js代码:
/*********查询节点是否包含某个样式*******/
var hasClass = function(tag, clsName) {
var arr = tag.className.split(/\s+/);
for (var i = 0; i < arr.length; i++) {
if (arr[i] == clsName) {
return true;
}
};
return false;
}
/*********扩展getElementsByClassName函数(兼容IE低版本)*********/
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(cls) {
var nodeArr = [];
var nodes = document.getElementsByTagName('*');
if (nodes && nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
if (hasClass(nodes[i], cls)) {
nodeArr.push(nodes[i]);
}
};
}
return nodeArr;
}
} var changeTab = function(option) {
// body...
this.Init.apply(this, arguments);
} changeTab.prototype = {
/********参数的初始化********/
Init: function() {
var arr = Array.prototype.slice.call(arguments);
this.option = arr[0] || {
inittab: 0, //设置选中的tab索引
tab: '', //tab的className
tabclass: '', //tab点击之后的样式
container: '' //div的className
}; },
/*************函数执行**************/
render: function() {
///获取要操作的tab和div
this.tabs = document.getElementsByClassName(this.option.tab);
this.contents = document.getElementsByClassName(this.option.container);
if (this.tabs.length == 0 || this.contents.length == 0) {
return;
}
if (this.tabs.length != this.contents.length) {
return;
}
var that = this; ///由于闭包要用到此函数的参数,作用域不一致,所以要用that指向当前的函数
////设置初始显示的tab和div内容
this.contents[this.option.inittab].style.display = 'block';
this.tabs[this.option.inittab].className = that.option.tab + ' ' + that.option.tabclass;
for (var i = 0; i < this.tabs.length; i++) {
/////闭包
(function(num) {
that.tabs[num].onclick = function() {
for (var k = 0; k < that.contents.length; k++) {
///隐藏所有div和去除所有tab样式
that.contents[k].style.display = 'none';
that.tabs[k].className = that.option.tab;
};
///显示和设置当前点击的tab和div内容
this.className = that.option.tab + ' ' + that.option.tabclass;
that.contents[num].style.display = 'block';
}
})(i);
}
},
/*************为函数扩展功能**************/
extend: function(obj) {
if (obj && Object.prototype.toString.call(obj) == "[object Object]") {
for (prop in obj) {
this[prop] = obj[prop];
}
}
}
}
html代码:
<html>
<style type="text/css">
.current { background-color: red; }
.dv { background-color: green; width: 200px; height: 200px; }
</style>
<head>
<script type="text/javascript" src="change.js"></script>
<script type="text/javascript">
window.onload=function () { // body...
var tb=new changeTab( { inittab: 0, tab:'sp', tabclass:'current', container:'dv' });
tb.render();
}
</script>
</head>
<body> <div>
<span class="sp" >111</span>
<span class="sp">222</span>
<span class="sp">333</span>
</div>
<div id="">
<div class="dv" style="display: none; ">dv1</div>
<div class="dv" style="display: none; ">dv2</div>
<div class="dv" style="display: none; ">dv3</div>
<div>
</body>
</html>
由于页面设计能力有限,所以就写了比较简单的样式。大家主要看一下功能,有什么问题或者建议可以直接q我。
一个简单oop的changeTab的更多相关文章
- 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论(OO Vs 过程)------(一个简单的实例引发的沉思)
一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 在Openfire上弄一个简单的推送系统
推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库
57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能
CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...
- CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator
CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator 我还没有用过Compute Shader,所以现在把红宝书里的例子拿来了,加入CSharpGL中. ...
- 应用OpenMP的一个简单的设计模式
小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...
随机推荐
- ASP.NET Core 整合Autofac和Castle实现自动AOP拦截
前言: 除了ASP.NETCore自带的IOC容器外,我们还可以使用其他成熟的DI框架,如Autofac,StructureMap等(笔者只用过Unity,Ninject和Castle). 1.ASP ...
- html中,文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- MVC 传值
1.ViewBag Controller:ViewBag.Message = "Hello, Word"; View:@ViewBag.Message 注:View ...
- Debian的软件包管理工具命令 (dpkg,apt-get)详解
本文转载于:http://blog.chinaunix.net/uid-20769502-id-106056.html 1.dpkg包管理工具 dpkg --info "软件包名&quo ...
- java多线程解读二(内存篇)
线程的内存结构图 一.主内存与工作内存 1.Java内存模型的主要目标是定义程序中各个变量的访问规则.此处的变量与Java编程时所说的变量不一样,指包括了实例字段.静态字段和构成数组对象的元素,但是不 ...
- spider RPC高级特性
多租户 spider原生支持多租户部署,spider报文头对外开放了机构号.系统号两个属性用于支持多租户场景下的路由. 多租户场景下的路由可以支持下述几种模式: n 系统号: n 系统号+服务号( ...
- linux(七)__shell脚本编程
一.什么是shell脚本 shell除了是命令解释器之外还是一种编程语言,用shell编写的程序类似于DOS下的批处理程序. 它是用户与操作系统之间的一个接口. shell脚本语言非常擅长处理文本类型 ...
- Hibernate框架之Criteria查询 和注解(重点☆☆☆☆☆,难点☆☆☆)
写好一篇博客,不是容易的事.原因是:你要给自己以后看的时候,还能看懂,最重要的是当别人看到你的博客文章的时候,也一样很清楚的明白你自己写的东西.其实这也是一种成就感!! 对于每一个知识点,要有必要的解 ...
- MySQL动态字符串处理DYNAMIC_STRING
MySQL中,常常会看到一些关于动态字符串的处理,列如:DYNAMIC_STRING. 为了记录动态字符串的实际长度,缓冲区的最大长度,以及每次字符串需要调整时,及时分配新的内存,以及调整长度.MyS ...
- 性能卓越的js模板引擎--artTemplate
artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mu ...