原生js 設置html內容,原生js封装之路（一）

这几天比较空闲所以研究了一下封装的方法，对于我们这些小白来说，封装往往显得高大上，下面我就来讲解下我的封装之路。

原生js封装最简单的tab插件：

html部分：写了两个包含框一个id为wrap一个为wraps

• 第一项
• 第二项
• 第三项

第一部分

第二部分

第三部分

• 第一项
• 第二项
• 第三项

第一部分

第二部分

第三部分

css样式部分：

*{ padding:0; margin:0;}

.block{ display:block;}

.none{ display:none;}

#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}

#diya,#diyas{ list-style:none;}

#diya li,#diyas li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}

#diyas li:hover{ background:#CCC;}

#diya li.on,#diyas li.on{ background:#9C3;}

#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}

js部分：

首先定义一个插件函数

function tab (id,navul,eve){

}获取id值下对应的导航元素，和显示元素(此处的id对应的是包含框的id,navul对应的是nav的id，eve对应的事件类型)

function tab(id,navul,eve){

var divs = document.getElementById(id).getElementsByTagName('div');

var lis = document.getElementById(navul).getElementsByTagName('li');

}事件函数判断(目前只判断点击click和mouseover事件)

// 两个for循环的解释：列如去超市买面包，有多个超市多个面包种类，想要将所有的面包都看一遍

// 第一次循环表示进入到超市中，第二个循环表示查看超市中每个种类的面包

for(var i=0;i

//确定下标

lis[i].indx=i;

// 判断eve的状态并且设置默认的变换方式

if(eve=="click" || eve==null){

// 当前li的点击事件函数

lis[i].οnclick=function(){

for(i=0;i

//      清除所有的nav的li的className

lis[i].className="";

// 将所有的显示内容的div隐藏

divs[i].className="none"

//  当前的li的className赋值为on

this.className="on";

// 当前的div的className赋值为Block

divs[this.indx].className="block";

}

}

}else if(eve=="mouseover"){

lis[i].οnmοuseοver=function(){

for(i=0;i

lis[i].className="";

divs[i].className="none";

this.className="on";

divs[this.indx].className="block";

}

}

}

}完整代码：可以复制代码去测试一下效果

JS封装的选项卡TAB代码

*{ padding:0; margin:0;}

.block{ display:block;}

.none{ display:none;}

#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}

#diya,#diyas{ list-style:none;}

#diya li,#diyas li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}

#diyas li:hover{ background:#CCC;}

#diya li.on,#diyas li.on{ background:#9C3;}

#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}

• 第一项
• 第二项
• 第三项

第一部分

第二部分

第三部分

• 第一项
• 第二项
• 第三项

第一部分

第二部分

第三部分

tab("wrap","diya","mouseover") //对应的参数为包含框的id以及tab选项卡的id

tab("wraps","diyas")

function tab(id,navul,eve){

//tab效果封装，目前只有两种变换方式，一种为点击事件click(也是默认事件)，另外一种为鼠标移过事件mouseover

var divs=document.getElementById(id).getElementsByTagName("div");

var lis=document.getElementById(navul).getElementsByTagName("li");

// 两个for循环的解释：列如去超市买面包，有多个超市多个面包种类，想要将所有的面包都看一遍

// 第一次循环表示进入到超市中，第二个循环表示查看超市中每个种类的面包

for(var i=0;i

//确定下标

lis[i].indx=i;

// 判断eve的状态并且设置默认的变换方式

if(eve=="click" || eve==null){

// 当前li的点击事件函数

lis[i].οnclick=function(){

for(i=0;i

//      清除所有的nav的li的className

lis[i].className="";

// 将所有的显示内容的div隐藏

divs[i].className="none"

//  当前的li的className赋值为on

this.className="on";

// 当前的div的className赋值为Block

divs[this.indx].className="block";

}

}

}else if(eve=="mouseover"){

lis[i].οnmοuseοver=function(){

for(i=0;i

lis[i].className="";

divs[i].className="none";

this.className="on";

divs[this.indx].className="block";

}

}

}

}

}

此处再添加上jq的tab组件的封装方法

html：

tab组件的封装

*{margin:0;padding:0;}

ul{list-style:none;}

.con{

position:relative;

width:600px;

height:600px;

background:#f00;

}

.title{

position:absolute;

top:0;

left:0;

background:#f00;

color:#fff;

}

.title ul li{

float:left;

width:50px;

height:50px;

line-height:50px;

border:1px solid #f00;

}

.detail{

width:600px;

height:550px;

position:absolute;

top:50px;

left:0;

background:#ddd;

}

.con1,.con2,.con3{

position:absolute;

top:0;

left:0;

width:600px;

height:550px;

color:#fff;

}

.con1{

background:#f00;

}

.con2{

background:yellow;

}

.con3{

background:blue;

}

.active{

background:#ddd;

display:block;

}

.tab_item{

display:none;

}

• tab1
• tab2
• tab3

第一页

第二页

第三页

$('#tab').Tab(tab);

js部分(可以直接外部引用)

(function($){

function Tab(tab){

this.tab = tab;

var me = this; //留住this

this.config={

type:'click',

effect:'default'

};

console.log(this.config.type);

//将自己设置的参数和默认的config合并保留最新的

this.getConfig()&&$.fn.extend(this.config,this.getConfig());

this.tabNav = this.tab.find('.nav li');

this.tabItem= this.tab.find('.tab_item');

if(this.config.type == 'click'){

this.tabNav.bind(this.config.type,function(e){

me.currentChange($(this));

})

}else{

this.tabNav.bind('mouseover',function(){

me.currentChange($(this));

})

}

}

Tab.prototype={

// 获得配置参数

getConfig:function(){

var config = this.tab.attr('data-config');

if(config&&config!=null){

return($.parseJSON(config));

}else{

return null;

}

},

currentChange:function(cur){

var index = cur.index();

cur.addClass('active').siblings().removeClass('active');

if(this.config.effect==="default"){

this.tabItem.eq(index).addClass("active").siblings().removeClass("active");//为当前元素添加active，移除兄弟元素的active

}else if(this.config.effect==="fade"){

this.tabItem.eq(index).stop().fadeIn().siblings().stop().fadeOut();

}

}

}

// 扩展参数到jQuery方法上,实现链式调用，如$('xx').Tab().css()

$.fn.extend({

Tab:function(){

this.each(function(){

new Tab($(this));

});

return this; //jQuery链式调用

}

});

// 注册全局变量

window.Tab=Tab;

})(jQuery)