利用JScript/CSS 编程技术模拟实现TABView控件

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量726 收藏
点赞数
分类专栏： JavaScript 文章标签： 编程 function javascript border class null
        熟悉可视化界面编程的朋友一定很熟悉各种控件。在所有的控件中有一个控件在数据库应用编程中
经常用到，这个控件就是TabView控件，当然也可以叫属性页(PropertyPage)。本文将利用JScipt结合CSS
技术在网页中模拟实现这个控件。

        现在先介绍一下界面的主要组成部分。根据对TabView控件的分析理解，我把界面分成两个部分。一是
Tab部分(或者叫页面控制部分)，一是页面部分（或者叫内容部分）。同时为了本文描述简单，TAB控制部分
的每个TAB只有两种状态（激活或者非激活）,每个TAB控制一个单独的页面。同时为了使用的灵活性原因，
页面设计这个任务应该由用户自己来完成设计，但是要符合一定的格式要求。

现在正式开始解释这个控件的实现要素和实现过程。
//
       实现要素部分         //
//
[要素一]控件使用的主要样式列表
.TabActive {
 color: #ffff00;
 font-family:宋体;font-size:9pt;
 font-weight: bold;
 background-color: #6699CC;
 cursor: default; 
 border-top: 2px outset #99ccff;
 border-right: 2px outset #336699;
    }
//上面是Tab处于激活状态时使用的样式
.TabInactive {
 color: #FFFFFF;
 font-family:宋体;font-size:9pt;
 font-weight: normal;
 background-color: #003366;
 cursor: hand;
 border-right: 1px solid #99ccff;
 border-bottom: 1px solid #99ccff;
    }
//上面是Tab处于非激活状态时使用的样式
.PageNT {
 background-color:#F5F0E6;
    width:100%;height:508px;
    padding-left:0px;padding-top:2px;
      } 
//上面是Tab控制的页面使用的样式
[要素二]动态生成TAB控制部分代码
 这个部分功能主要由多个TAB控件控制说明数组和一个函数组成。
 
 数组采用下面的形式：
 //Tab部分TabID     Tab部分的初始运行类类型     Tab部分对应的页面pageID 
 var Folder1=new Array("Tab1","TabActive","Page1");
 
 //这里请注意：程序把第一把Tab部分的初始运行类类型定义为TabActive的项目选择为
 //默认的选择项，其对应页面也作为默认显示页面。
 
 ********************重要提示**************************
 
 //但是为了简单，实际上也符合逻辑，应该所有定义中只有一个控制初始化
 //运行类类型定义为TabActive
 
 //下面这个函数根据数组生成TABView的控制部分。
 function CreateFolder()
 {
 ...
 };
 [具体请参阅文后源代码]
 
[要素三]TabView控件的功能模拟
 正如上面所讲的那样，本文尽可能把代码写的简单，把实现说的更容易理解一点。
 所以这个模拟控件没有实现mouseover以及mouseout时间响应，同时我也没有使用
 更新的HTC组件技术。我下篇文章会写一个组件的例子。
 
 本文在TABView控件的TAB控制部分生成以后只是简单为其提供一个click事件处理器。
 这样就可以模拟了真正TABView控件的换页功能。页面部分用户根据下面的规则按照
 自己对页面内容的需要自己添加。下文我会在实现过程部分对此有详细的说明。
 

//
                 实现过程部分           //
//
[步骤一]建立TABView控件的控制数组定义

var Folder1=new Array("Tab1","TabActive","Page1");

var Folder2=new Array("Tab2","TabInActive","Page2");

...

[步骤二]动态生成TABView控件的控制部分

调用函数CreateFolder()读取数组定义按照格式生成TABView控件的控制部分。


[步骤三]用户生成自己的页面（可以静态也可以是动态。本文示例为静态）

 //下面是页面要求的格式
 <div ID="Case Detail" CLASS="PageNT" style="display:none">
 //页面格式中有两个是必须的。一个是ID必须是[]
 //这里用户可以自由的添加自己需要的内容
 </div>

[步骤四]为TABView控件的控制部分中的每一个TAB安装事件处理器

tab.attachEvent("onclick",new Function("tab_onclick(this)"));


到这里利用JScript/CSS模拟实现简单TABView控件的工作就全部结束了。

现在可以在IE浏览自己的控件了，感觉不错吧。

//
                 结束语                 //
//
 本文只是简单模拟一下TABView控件，要真正在WEB下面实现一个TABView要考虑
很多其他的因素，不如上面提供的TAB控制部分onmouseover,onmouseout等事件
的响应问题。同时随着XML技术的发展，我们可以更好的利用数据库结合服务器
端软件动态生成TABView的控制页面。同时如果我们采用HTC组件技术的话，我们
也可以写出可重用性更高的代码。

//
         本文使用全部源代码              //
//
为了方面我把所有的文件都放在了一个文档中了。你根据需要可以
把javascript/jscript以及css,htm文件各自独立出来。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">

    .titlebar {font-family:宋体; font-size:9pt;color:#003300;background-color:#99CC99}
  BODY {font-family:宋体;font-size:9pt; background-color:#F5F0E6;}

    .TabActive {
 color: #ffff00;
 font-family:宋体;font-size:9pt;
 font-weight: bold;
 background-color: #6699CC;
 cursor: default;
 
 border-top: 2px outset #99ccff;
 border-right: 2px outset #336699;
    }
    .TabInactive {
 color: #FFFFFF;
 font-family:宋体;font-size:9pt;
 font-weight: normal;
 background-color: #003366;
 cursor: hand;

 border-right: 1px solid #99ccff;
 border-bottom: 1px solid #99ccff;
    }
    .TabInactiveOver {
 color: #FFFFFF;
 font-family:宋体;font-size:9pt;
 font-weight: normal;
 background-color: #003366;
 cursor: hand;

 border-right: 1px solid #99ccff;
 border-bottom: 1px solid #99ccff;
    }
    .TabInactiveEmpty {
 color: #FFFFFF;
 font-family:宋体;font-size:9pt;
 font-weight: normal;
 
 cursor: hand;

 border-right: 1px solid #99ccff;
 border-bottom: 1px solid #99ccff;
    }  
   

    .TabBarNT {background-color:#EEEEEE;

        width:96%;height:21px;}
    .PageNT {
 background-color:#F5F0E6;

        width:100%;height:508px;
        padding-left:0px;padding-top:2px;
      }

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//辅助函数
function ltrim(str)
{
 return str.replace(/^/s*/,"");
}

function rtrim(str)
{
 return str.replace(//s*$/,"");
}

function trim(str)
{
 var strTmp;
 strTmp=ltrim(str);
 strTmp=rtrim(strTmp);
 return strTmp;
}

//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
//定义数组
var Folder1=new Array("Tab1","TabActive","Page1");
var Folder2=new Array("Tab2","TabInActive","Page2");
var Folder3=new Array("Tab3","TabInActive","Page3");
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
//得到tab控制部分的元素个数
function getTabPartCount()
{
 var count=1;

 while(eval("window.Folder"+count)){count++;}
 
 count--;
 return count;
}
function CreateFolder()
{
 
    document.write("<table bgColor='#6699cc' border=0 cellPadding=0 "+
           "cellSpacing=0 id='TabBar' style='background-color:transparent;' width=100%>");
    document.write("<tr height=24 vAlign='center'>");

    tabNum=getTabPartCount();
    i=1;
    while(i<tabNum+1){
        Folder=eval("Folder"+i);
        document.write("<td class='"+Folder[1]+"' id='"+Folder[0]+
                    "' align='center'>"+Folder[2]+"</td>");
        i++;
    }
    totalnum=tabNum+1;
    document.write("<td class='TabInactive'  width=100%>&nbsp;</td>");
    document.write("</tr><tr height=4><td colSpan='"+totalnum+"' valign=top bgColor='#6699cc'>&nbsp;</td></tr>");
    document.write("<tr><td bgColor='#F5F0E6' colSpan="+totalnum+" height=16 valign=top></td></tr></table>");

}

function getTabPartArray()
{
 var objReturn=new Array();
 var obj=null;
 var count=getTabPartCount();
 var i=1;
 while(i<=count)
 {
  obj=eval("window.Folder"+i);
  obj=document.all(obj[0]);
  if(obj!=null)
  {
   objReturn[objReturn.length]=obj;
  }
  i++;
 }
 
 return objReturn;
}

function getCurrentActiveTab()
{
 var ttabArray=getTabPartArray();
 for(var i=0;i<ttabArray.length;i++)
 {
  if(ttabArray[i].className=="TabActive")
  { 
   return ttabArray[i];
  }
 }

}
function getCurrentActivePage()
{
 var obj=getCurrentActiveTab();
 var pageID=obj.innerText;
 var page=getPageByID(pageID); 
 return page;
}
function getPageByID(pageID)
{
 var obj=document.all(pageID);

 return obj;
}

function getTabByID(tabID)
{
 var obj=document.all(tabID);
 return obj;
}

function tab_onclick()
{
 var curTab=getCurrentActiveTab();
 var curPage=getCurrentActivePage();
 
 var objTab=getTDFromPoint();
 var pageID=null;
 var objPage=null;
 if(objTab!=null)
 {
  pageID=objTab.innerText;
  //alert(pageID);
  objPage=getPageByID(pageID);
  if(curTab.id==objTab.id)
  {
   return;
  }
  else
  { 
   objPage.style.display="block";
   curPage.style.display="none";

   objTab.className="TabActive";
   //alert(objTab.className);
   curTab.className="TabInActive";

  } 
 }
}

function getTDFromPoint()
{
 var obj=event.srcElement;
 if((obj.tagName=="TD")&&((obj.className=="TabInActive")||(obj.className=="TabActive")))
 {
  return obj;
 }
 else
 {
  return null;
 }
}

function fattachEvent()
{
 var objTabArray=getTabPartArray();
 for(i=0;i<objTabArray.length;i++)
 {
  var tabID=objTabArray[i].id;
  //alert(tabID);
  objTabArray[i].attachEvent("onclick",new Function("tab_onclick()"));
 }
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
CreateFolder();
fattachEvent();
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<input type="button" value="Test" οnclick="tab_onclick(document.all('Tab2'))">
<div ID="Page1" CLASS="PageNT" style="display:block">
<p align="center"><font size="4">This Test Page : Page One</font></p>
<TABLE align="center" border="1">
<TR>
 <TD>Name</TD>
 <TD>Age</TD>
</TR>
<TR>
 <TD>ZosaTapo</TD>
 <TD>23</TD>
</TR>
</TABLE>
</div>

<div ID="Page2" CLASS="PageNT" style="display:none">
<p align="center"><font size="4">This Test Page : Page Two</font></p>
<TABLE align="center" border="1">
<TR>
 <TD>Name</TD>
 <TD>Age</TD>
</TR>
<TR>
 <TD>ZosaTapo</TD>
 <TD>23</TD>
</TR>
</TABLE>
</div>

<div ID="Page3" CLASS="PageNT" style="display:none">
<p align="center"><font size="4">This Test Page : Page Three</font></p>
<TABLE align="center" border="1">
<TR>
 <TD>Name</TD>
 <TD>Age</TD>
</TR>
<TR>
 <TD>ZosaTapo</TD>
 <TD>23</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>

抽象兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LVGL v8学习笔记 | 10 - Tabview控件的使用方法
Mculover666的博客（嵌入式）
10-16 2088
tabview控件属于扩展控件，所以tabview对象的API在 lvgl/src/extra/widgets/tabview/lv_tabview.h 中声明，以lv_tabview_xxx命名。（2）修改tabview部件内容框背景颜色（直接设置tabview控件的背景颜色即可）事件，用户可以进而通过下面的API来判断当前用户切换到哪一页。当tabview控件的标签页变动时，会触发。（1）修改标签栏背景颜色。
Flex 轻量级的tabView控件
11-14
从老外的一个庞大的工程里摘出来一个组件。原项目是一个air的as3和flex的编辑器。做了一些改动 1.标签菜单使用PopUpManager方式弹出，方便关闭，监听FlexMouseEvent.MOUSE_DOWN_OUTSIDE就可以了。...
嵌入式GUI LVGL『Tableview选项卡控件』介绍
朝气蓬勃
09-12 4765
一. LVGL GUI开关控件的概念 选项卡视图对象可用于组织选项卡中的内容。 二. LVGL GUI开关小部件和样式 Tab 视图对象包含几个部分。主要是 LV_TABVIEW_PART_BG 。它是一个矩形容器，用于容纳 Tab 视 图的其他部分。 在背景上创建了两个重要的真实部分： LV_TABVIEW_PART_BG_SCRL ：这是 Page 的可滚动部分。它使选项卡的内容彼此相邻。页面的背景始终是透明的，不能从外部访问。 LV_TABVIEW_PART_TAB_BG ：选项卡按钮，它是
SwiftUI编程实现不同TabView标签页中任意导航层级视图之间相互跳转的演示代码
04-03
该资源是 编程实现不同TabView标签页中任意导航层级视图之间相互跳转>> 博文的配套源代码,博文链接地址如下： https://blog.csdn.net/mydo/article/details/123754090 在本篇博文中，您将学到以下内容: 如何实现...
tabview动态实现视图标签页面+窗口分割+treeview显示内容+动态添加控件+在视图里面画图，带皮肤文件
06-27
包含主要内容：tabview实现视图标签页面+窗口分割+treeview显示内容+动态添加控件+在视图里面画图+链表存储+orale数据库（此程序未带，带了你就运行不了了），可以咨询本人，里面有联系方式）+带皮肤文件 ...
TabView的horizontalview实现
10-11
用horizontal实现的tabview，支持两种模式，样式还是比较好看的，也还算灵活
TabView实现分组
11-13
代码复用和 cell注册与判断,表格视图功能强大
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 863
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 117
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 904
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 970
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 375
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 305
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
redux快速入门
qq_73270720的博客
04-29 339
简单的加减案例,学会redux快速入门
js执行顺序
weixin_45392204的博客
04-29 344
同步任务：指的是在主线程上排队执行的任务，只有当前一个任务执行完毕，才能执行下一个任务（按照顺序执行）异步任务：指的是不进入主线程上的任务，进入任务队列的任务，只有当任务队列通知主线程某个异步任务可以执行，方可进入主线程进行执行。异步任务又分宏任务跟微任务宏任务：异步ajax请求、setTimeout、setInterval、文件操作、其他微任务：Promise.then、.catch 和.finally，process.nextTick、其他。
react核心知识
qq_16546829的博客
04-29 701
Fiber架构中处理副作用（side effects）时采用自下而上的方式，这是为了实现更高效的调度和渲染过程，以及更好地支持优先级调度和中断。在Fiber架构中，每个React组件都可以被视为一个fiber节点，这些节点以树状结构组织，形成了React组件树。在渲染过程中，React会遍历整个组件树，并根据需要执行各种操作，比如计算Virtual DOM、处理更新、执行副作用等。异步调度和优先级：自下而上的处理副作用可以更好地支持React的异步调度和优先级调度。
qml通过点击button实现新增tabview的tab
04-22
关于您的问题，您可以在QML中使用一个button，为其添加一个点击事件处理程序，然后在该处理程序中实现添加一个TabView的tab。具体代码可以参考以下示例： ``` import QtQuick 2.0 import QtQuick.Controls 2.5 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值