javascript2014-08-04 06:42:38 3923
分享一个刚写的纯Javascript实现的Tag选项卡插件。选项卡数量可以自定义,大小也可以自定义。只需要几行代码即可将它引入到您的网页中。
源代码:
/*** author:pengyaou JavascriptTab选项卡插件 使用时Context和Tabs的数目必须一致 ***/ var TabPlug = { Width: "600", Height: "400", Parent: null, Context:["item1"], Tabs: ["选项卡1"], Initialize: function() { var tagContainer; var MainBody; for (var i = 0; i < this.Tabs.length; i ) { if (MainBody == null) { MainBody = document.createElement("div"); MainBody.style.width = this.Width "px"; MainBody.style.height = this.Height "px"; MainBody.style.border = "1px solid #ccc"; MainBody.style.marginTop = "50px"; this.Parent.appendChild(MainBody); } var tagBody = document.getElementById(this.Context[i]); tagBody.style.display="none"; MainBody.appendChild(tagBody); if (tagContainer == null) { tagContainer = document.createElement("div"); tagContainer.style.position = "absolute"; tagContainer.style.marginTop = -this.Height - 32 "px"; this.Parent.appendChild(tagContainer); } var childItem = document.createElement("div"); childItem.className = "childItem"; childItem.style.padding = "5px 20px 5px 20px"; childItem.style.border = "1px solid #ccc"; childItem.style.fontFamily = "微软雅黑"; childItem.style.fontSize = "13px"; childItem.style.float = "left"; childItem.id = i; childItem.style.cursor = "pointer"; childItem.style.marginLeft = i == 0 ? "0px" : "-1px"; childItem.style.backgroundColor = "#efefef"; childItem.innerHTML = this.Tabs[i]; tagContainer.appendChild(childItem); childItem.onclick = function() { TabPlug.Select(this.id); } } TabPlug.Select(0); }, Select: function(a) { for (var i = 0; i < TabPlug.Tabs.length; i ) { document.getElementById(this.Context[i]).style.display = "none"; document.getElementsByClassName("childItem")[i].style.backgroundColor = "#f2f2f2"; document.getElementsByClassName("childItem")[i].style.marginTop = "0px"; document.getElementsByClassName("childItem")[i].style.paddingBottom = "5px"; document.getElementsByClassName("childItem")[i].style.borderBottom = "1px solid #ccc"; } document.getElementById(this.Context[a]).style.display = "block"; document.getElementsByClassName("childItem")[a].style.backgroundColor = "#fff"; document.getElementsByClassName("childItem")[a].style.paddingBottom = "8px"; document.getElementsByClassName("childItem")[a].style.marginTop = "-3px"; document.getElementsByClassName("childItem")[a].style.borderBottom = "1px solid #fff"; } }
使用方法:
//指定父级对象 TabPlug.Parent = document.getElementById("Main"); //选项卡名称数组 TabPlug.Tabs = ["选项卡1", "选项卡2", "选项卡3", "选项卡4", "选项卡5"]; //选项卡对应的内容容器 TabPlug.Context=["item1", "item2", "item3", "item4", "item5"]; //初始化 TabPlug.Initialize();
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:原生JavascriptTab选项卡,Js选项卡,JsTab选项卡
文章固定链接:https://www.pengyaou.com/legendsz/front/codejs/MjY=.html
上一篇 ASP.NET Txt文件操作
下一篇 Html投票插件