框架选项卡，框架选项卡资源-CSDN下载

共59个文件

gif：55个

db：2个

html：1个

框架选项卡

2星需积分: 10 147 浏览量 2008-12-20 09:52:28 上传评论 1 收藏 42KB RAR 举报

在IT行业中，框架选项卡是一种常见的用户界面设计模式，它被广泛应用于网页和应用程序中，以帮助用户在多个视图或内容之间进行切换，而无需不断地打开和关闭新窗口。框架选项卡允许用户在一个单一的界面空间内组织和管理复杂的信息，提高了工作效率和用户体验。标题“框架选项卡”暗示我们将探讨的焦点是关于如何使用和实现这种UI组件。框架选项卡的核心在于它们提供了一种结构化的方式来展示和操作多份数据或功能区域，这些区域可以是相互独立的，也可以是相互关联的。描述中的重复“框架选项卡”进一步强调了这一主题的重要性。在实际应用中，框架选项卡通常由一个包含多个选项卡的容器组成，每个选项卡代表一个独立的框架或视图。用户点击选项卡时，对应的框架内容会被显示，其他框架则隐藏，以此实现内容的切换。标签“框架选项卡”提示我们关注的关键词是框架和选项卡，这可能是从技术角度讨论如何在Web开发中实现这样的功能。在HTML和JavaScript中，我们可以使用如Bootstrap、AngularJS或Vue.js等前端框架来创建选项卡组件。例如，Bootstrap的选项卡插件通过简单的HTML标记和CSS类就能实现基本的选项卡效果，而更复杂的交互可以通过JavaScript事件处理来完成。文件“menus.html”可能包含了用于构建选项卡菜单的HTML代码。在HTML中，可以使用`<div>`元素配合`class`属性来定义选项卡容器，每个选项卡可以用`<li>`和`<a>`元素表示，而内容区域则可以是`<div>`元素，通过CSS的`display`属性控制其可见性。通过JavaScript，我们可以监听用户的点击事件，动态地改变内容区域的显示状态。至于文件“image”，它可能是用于装饰或说明框架选项卡界面的图片，比如展示一个示例截图，或者用于解释某些功能点的视觉辅助。框架选项卡是提高用户界面可操作性和效率的关键工具，开发者需要了解如何使用HTML、CSS和JavaScript来创建和控制这些组件。在设计时，应考虑用户体验，确保选项卡的布局清晰，切换流畅，并且能够适应不同的屏幕尺寸和设备类型，以实现响应式设计。此外，良好的文档和注释也是关键，以便于团队协作和后期维护。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （59个子文件）

image

s_left.gif 398B

cancel.png 587B

n_left.gif 397B

back.gif 288B

s_back.gif 362B

img

style04_s_right.gif 396B

styleFF_s_left.gif 628B

style04_4_s_back.gif 138B

styleFF_s_right.gif 632B

styleFF_s_back.gif 171B

style10_s_left.gif 378B

style04_3_s_right.gif 396B

styleFF_n_right.gif 364B

style04_4_s_left.gif 398B

styleOp_s_back.gif 269B

styleIE7_o_back.gif 182B

styleIE7_s_right.gif 598B

styleOp_s_right.gif 579B

styleIE7_n_back.gif 182B

style04_3_n_right.gif 345B

style04_n_back.gif 250B

styleFF_o_left.gif 625B

style04_4_n_right.gif 399B

styleIE7_o_right.gif 570B

style04_s_left.gif 398B

styleIE7_n_right.gif 564B

styleFF_o_right.gif 627B

styleFF_n_left.gif 364B

styleIE7_n_left.gif 567B

style04_n_right.gif 399B

style04_3_n_back.gif 130B

style04_4_n_left.gif 397B

style10_n_left.gif 378B

style04_4_n_back.gif 250B

style04_2_n_right.gif 395B

styleIE7_o_left.gif 571B

style10_n_right.gif 380B

Thumbs.db 54KB

style04_4_s_right.gif 396B

style04_3_s_left.gif 397B

style04_2_n_back.gif 361B

style04_3_s_back.gif 138B

style04_n_left.gif 397B

styleIE7_s_back.gif 182B

styleFF_o_back.gif 172B

styleFF_n_back.gif 171B

style10_s_right.gif 380B

styleIE7_s_left.gif 599B

styleOp_s_left.gif 580B

style04_2_n_left.gif 403B

styleOp_o_right.gif 550B

style04_s_back.gif 362B

styleOp_o_left.gif 556B

style04_3_n_left.gif 351B

s_right.gif 396B

Thumbs.db 20KB

n_right.gif 399B

n_back.gif 250B

menus.html 11KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" content_panel="EditPlus"> <META NAME="Author" content_panel=""> <META NAME="Keywords" content_panel=""> <META NAME="Description" content_panel=""> <style type="text/css"> a.aclose:link,a.aclose:visited {color:#aa0000; font-weight:bold; font-size:14px; text-decoration:none; margin-top:0px; } a.aclose:active,a.aclose:hover {color:#ff0000; font-weight:bold; font-size:14px; text-decoration:none; margin-top:0px; } .tdb, .tdb nobr{float:left;} .content_panel{ /*内容面板样式*/ border:2px solid #9DBFFF; width:760px; height:510px; } .tabcls{ /*按钮面板层*/ background:url(image/back.gif); background-position :0px 25px; background-repeat :repeat-x;} .tabcls table{ border:0; margin:0; border-collapse:collapse; cursor:pointer; font-size:12px; height:30px; } .tabcls table td{ padding:7px 0px 9px 0px!important; padding:5px 0px 0px 0px; } .tabcls table .tdc{padding:0px 0px 0px 0px!important;} .tabButton{ /*按钮表格*/ background : #00ff22 ; float:left; overflow:hidden; } .now{ /*当前选中*/ background:#00ff88; float:left; overflow : hidden ; } .now .tdl{ /*表格按钮左侧*/ width:7px; background:url(image/s_left.gif); background-repeat:no-repeat; } .now .tdb{ /*表格按钮标题*/ overflow:hidden; font-weight:bold; width:100%!important; width :auto; background-image:url(image/s_back.gif); } .now .tdc{ /*关闭按钮所在单元格*/ width:10px; background-image:url(image/s_back.gif); } .now .tdr{ /*表格右侧*/ width:7px; background:url(image/s_right.gif); background-repeat:no-repeat; } .tabButton .tdl{ /*表格按钮左侧*/ width:7px; background:url(image/n_left.gif); background-repeat:no-repeat; } .tabButton .tdb{ /*表格按钮标题*/ overflow:hidden; font-weight:bold; width:100%!important; width :auto; background-image:url(image/n_back.gif); } .tabButton .tdc{ /*关闭按钮所在单元格*/ width:10px; background-image:url(image/n_back.gif); } .tabButton .tdr{ /*表格右侧*/ width:7px; background:url(image/n_right.gif); background-repeat:no-repeat; } </style> <script language="javascript"> var statsnum= new Object; //定义全局状态 statsnum.num=1; var layerT; //---------延时------------- function chtab(obj){ if (obj=='0'){ clearTimeout(layerT); } } function chtab1(e){ //var e=e||window.event; // var o=e.srcElement||e.target; layerT = setTimeout(function(){showtab(e);},50); } //------------显示----------- function showtab(o) { //var obj1=obj.parentNode; //1 var un=o.getAttribute("un"); //2 var un2=$("control_panel").getAttribute("stats"); //3 document.getElementById("content_"+un2).style.display="none"; //4 document.getElementById("tab_"+un2).className="tabButton"; document.getElementById("content_"+un).style.display=""; //5 document.getElementById("tab_"+un).className="now"; $("control_panel").setAttribute("stats",un); //6 /* 分析: //1.获取对象层次中的父对象。 // 2.获得当前对象中 un 的值. //3.获得上一次显示层的id //4. 将上一次显示的曾的显示属性设为隐藏 //5.将当前的层设置为显示 //6.将当前曾的id记住注: parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。 childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 children 获取作为对象直接后代的 DHTML 对象的集合。 firstChild 获得第一个节点 lastChild 获得最后一个节点 -------------------------------------------------------- parentNode和parentElement***能一样，childNodes和children***能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 */ } //创建样式库，参数为<style></style>标签的内容串 function initStyle(styleStr) { if(document.all){ window.style=styleStr; document.createStyleSheet("javascript:style"); }else { var styles=document.createElement("style"); styles.type="text/css"; styles.innerHTML=styleStr; document.getElementsByTagName("HEAD").item(0).appendChild(styles); } } function $(id){ return document.getElementById(id);} //移除标签 function removeTab(id) { var temp_stats=$(id).getAttribute("un"); $("control_panel").removeChild($(id)); $("content_panel").removeChild($("content_"+id.replace(/tab_/gi,""))); var tabs=$("control_panel").getElementsByTagName("table"); if(tabs.length>0) { //alert(spans[0].getAttribute("un")); if($("control_panel").getAttribute("stats")==temp_stats){ //假如当前状态是移除的节点的属性 $("control_panel").setAttribute("stats",tabs[tabs.length-1].getAttribute("un")); } chtab1(tabs[tabs.length-1]); } //$("boxctrl").setAttribute("stats",$("content").lastChild.id); createStyleStr() } function addTab(titles,urls) //创建表格形式按钮 { statsnum.num=statsnum.num+1; var tabButton=document.createElement("table"); tabButton.id="tab_"+statsnum.num; tabButton.className="tabButton"; tabButton.un=statsnum.num; tabButton.setAttribute("un",statsnum.num.toString()); if(tabButton.addEventListener){ tabButton.addEventListener("click",function(){chtab1(tabButton);},false); }else{ tabButton.attachEvent("onclick",function(){chtab1(tabButton);}); } var trNode=tabButton.insertRow(0); var tdCls=new Array("tdl","tdb","tdc","tdr"); var tdNodes=new Array(); for(var i=0;i<4;i++) { tdNode=trNode.insertCell(i); tdNode.className=tdCls[i]; tdNodes[i]=tdNode; } tdNodes[1].innerHTML="<nobr>"+titles+"</nobr>" //需要对该节点进行操作 tdNodes[1].id=tabButton.id+"td"; var aclose=document.createElement("a"); aclose.title="关闭"; aclose.className="aclose"; aclose.innerHTML="×"; if(aclose.addEventListener){ aclose.addEventListener("click",function(){removeTab(tabButton.id)},false); }else{ aclose.attachEvent("onclick",function(){removeTab(tabButton.id)}); } aclose.href="javascript:goto();" tdNodes[2].appendChild(aclose); //将以上的附加到区块中 $("control_panel").appendChild(tabButton); //添加内容域内容可为文字或框架 var contents=document.createElement("div"); contents.id="content_"+statsnum.num; contents.className="contentarea" createIframe(contents,760,500,"iframe_"+statsnum.num,"iframe_"+statsnum.num,0,"auto",urls) //调用创建框架函数附加 contents.style.display="none"; //contents.innerHTML="内容"+statsnum.num; $("content_panel").appendChild(contents); createStyleStr(); //初始化样式 chtab1(tabButton);//将焦点移到新掭加的内容上 } //目标对象,高,宽,id,名称,边框,滚动条,链接 function createIframe(toObj,h,w,iId,iName,iBorder,iScroll,iUrl){ var ifm=document.createElement("iframe"); ifm.src=iUrl; ifm.id=iId; ifm.name=iName; ifm.width=h; ifm.height=w; ifm.frameBorder=iBorder; ifm.scroll=iScroll; toObj.appendChild(ifm); } // 定义将指定域中的链接初始化为在Tab模块中打开,传入对象obj function initOpenArea(obj,aSign) { var a_Aggregate; if(obj.getElementsByTagName) { a_Aggregate=obj.getElementsByTagName("a"); } else{ a_Aggregate=document.getElementsByTagName("a"); } if(a_Aggregate){ var a_AggregateLen=a_Aggregate.length; for(var i=0; i<a_AggregateLen; i++) { var other_A=a_Aggregate[i]; var clsSign=(other_A.className).split(" "); if(clsSign&&clsSign.length>=2&&clsSign[1]==aSign) { var url=other_A.getAttribute("href"); var atext=other_A.innerHTML; other_A.setAttribute("href","JavaScript:openToTab('"+url+"','"+atext+"')"); // if(other_A.addEventListener){ // other_A.addEventListener("click",function(){openToTab(url,atext);},false); //

评论收藏

内容反馈