JS面向对象封装

自己这一段时间在研究怎么样进行面向对象的封装，别人可以直接调用来进行操作，自己可以根据想要的样式进行调整，自己也搜集了一些资料，比较容易复用的现在还不太会写，自己会更加抽出时间来学习这一块，希望大家能够给个指导。 点击弹出遮罩层： 首先要引入jquery文件，http://demo.jb51.net/jslib/jquery/jquery.js

JS：

(function($) {//写法1 jQuery.extend({ a: function(h){ $("#modelContainer").html(h); } b:function(){} }） })(jQuery); (function($) {//写法二 jQuery.mask=function(h){ var htmlTest = '<div id="modelBox" class="modelBox">'+ '<div class="alertBox" id="alertBox">'+ '<h1>消息确认框</h1>'+ '<p class="confirm-mgs">'+h.tips+'</p>'+ '<div class="left confirm">'+ '<a class="ensurediv">'+h.leftBtn+'</a>'+ '<a class="cancel" href="javascript:void(0)">'+h.rightBtn+'</a>'+ '</div>'+ '</div>'+ '</div>'; $("#modelContainer").html(htmlTest); $("#delete").click(function(){ $('#modelContainer').css('display','block'); }) } })(jQuery);

CSS:

*{margin: 0; padding:0; } html,body{ width: 100%; height: 100%; } .modelContainer{ width: 100%; height: auto; overflow: hidden; display: none; } .modelBox{ width: 100%; height: 100%; position: absolute; z-index: 9999; left: 0; top: 0; background: rgba(0,0,0,0.4); } .modelBox .alertBox{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); border-radius: 5px; background-color: #FFFFFF; position: absolute; min-height: 150px; max-height: 150px; top: 20%; left: 40%; height: 60%; width: 22%; } .alertBox h1 { border-bottom: 1px solid #efefef; border-radius: 5px 5px 0px 0px; background-color: #DAE6F2; padding: 3px 0 5px 5px; font-weight: normal; font-size: 12px; color: #666666; line-height: 28px; } .confirm-mgs { text-align: center; color: #666666; margin-top: 20px; } .confirm { margin-top: 11px; width: 120px; padding-left:80px; padding-right: 80px; } .alertBox a{ text-transform: uppercase; text-decoration: none; background-color: #3890CF; position: relative; text-align: center; font-size: 12px; display: block; padding: 5px; width: 40px; height: 18px; line-height: 18px; color: #FFF; cursor: pointer; } .alertBox .cancel { margin-top: -28px; margin-left: 80px; background:#B8B8B8; } HTML:

<input type="button" name="delete" id="delete" value="点击弹出遮罩层" /> <div id="modelContainer" class="modelContainer"></div> 自定义JS：

$.mask({ 'tips':'确定删除吗？', 'leftBtn':'确定', 'rightBtn':'取消' }); tab切换：

JS：

function Tab(id){ this.tabBtn = $(id+' '+'input'); this.tabDiv = $(id+' '+'div'); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; var _this = this; this.tabBtn.eq(i).click(function(){ _this.clickBtn(this); }); } }; Tab.prototype.clickBtn = function(btn){ for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn.eq(j).attr('class',''); this.tabDiv.eq(j).css('display','none'); } $(btn).addClass('active'); this.tabDiv.eq(btn.index).css('display','block'); };CSS：

.tab input { background: #F6F3F3; border: 1px solid #FF0000; border-bottom: none; outline: none; cursor: pointer; } .tab .active { background: #E9D4D4; } .tab div { width:300px; height:250px; display:none; padding: 10px; background: #E9D4D4; border: 1px solid #FF0000; } HTML:

<div class="tab" id="tabBox1"> <input type="button" value="聊天" class="active" /> <input type="button" value="音乐" /> <input type="button" value="运动" /> <div style="display:block;">QQ、微信</div> <div>蓝色的圣诞节、虎口脱险</div> <div>篮球、羽毛球</div> </div> <br /> <div class="tab" id="tabBox2"> <input type="button" value="HTML" class="active" /> <input type="button" value="CSS" /> <input type="button" value="JS" /> <div style="display:block;">h1、span</div> <div>margin、padding</div> <div>AngularJS、jQuery</div> </div> 自己定义：

var tab1 = new Tab("#tabBox1"); var tab2 = new Tab("#tabBox2"); 自己会继续努力来学习这方面的知识，从基础做起，相信只要努力去学，一定会有收获的！！！