- 浏览: 418232 次
- 性别:
文章分类
最新评论
-
wrw_ahut:
你这个怎么停下来?怎么跳转activity
Android启动界面实现 -
huiqoo:
高仿UC半透明MENU菜单(有图有真相) -
wenzhixin:
多谢分享~
Android启动界面实现 -
orange9711:
学习学习
Android启动界面实现 -
qinweiping:
问下楼主 好像这个反编译 只能看到程序的主体结构吧 还是和源程 ...
APK反编译利器Apktool下载及用法介绍
经常用到,这个控件就是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控件的控制部分。
[步骤三]用户生成自己的页面(可以静态也可以是动态。本文示例为静态)
//下面是页面要求的格式
//页面格式中有两个是必须的。一个是ID必须是[]
//这里用户可以自由的添加自己需要的内容
[步骤四]为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文件各自独立出来。
<!---->
<meta content="EditPlus" name="Generator">
<meta content="" name="Author">
<meta content="" name="Keywords">
<meta content="" name="Description">
<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">
<!---->
</script>
<script language="JavaScript">
<!---->
</script>
<script language="JavaScript">
<!---->
</script>
<script language="JavaScript">
<!---->
</script>
This Test Page : Page One
Name | Age |
ZosaTapo | 23 |
This Test Page : Page Two
Name | Age |
ZosaTapo | 23 |
This Test Page : Page Three
Name | Age |
ZosaTapo | 23 |
发表评论
-
利用JS把Div等对象水平、垂直居中
2012-11-28 08:33 2197<script type="text/java ... -
div 实现长英文字母自动换行——兼容IE/FF/CHROME
2012-01-27 21:54 3772最近做个英文网站,DIV内的英文不能自动换行,搜了一下,都是用 ... -
一个JS加XML实现的菜单
2009-01-12 11:32 1073今天看到了一个菜单的实现,感觉不错,收藏之,演示地址:http ... -
JS控件--带时间
2007-12-05 18:42 1250在网上找的,觉得不错,收留之 -
JS中常用的xpath特性
2007-10-15 14:57 6777js 代码 //选择所有dir元素的值等于xx的 ... -
JavaScript 面向对象程序设计(上)——封装
2007-09-28 12:00 1577JavaScript 是一种非常灵 ... -
JavaScript 面向对象程序设计(下)——继承与多态
2007-09-28 11:42 23871 又是几个基本概念 为 ... -
表格隔行换色
2007-02-25 01:51 1996摘自: http://www.blueidea.c ... -
web一些值得珍藏的代码
2007-02-25 01:47 1331... -
javascript字符集转换函数
2007-01-25 09:31 6241function Str2Unicode(str){ var ... -
iframe自动调整高度
2006-12-20 22:51 3000<script type="text/java ... -
查看文件域地址
2006-12-23 21:48 1395onclick="alert(' File文件域的 ... -
javascript模拟windows control的进度条
2006-12-23 22:17 1462<script> function xyPro ... -
网页上内容导出到word里
2006-12-23 22:21 2678<meta http-equiv="Con ... -
省份,城市联动显示
2006-12-23 22:32 1828<meta http-equiv="Co ... -
客户端用JAVASCRIPT生成WORD文档
2006-12-23 22:37 2270<script language="javas ... -
利用xml实现多级关联下拉选择框
2006-12-23 22:52 1869<script>var arrSel=[ ... -
javascript实现EMAIL推荐本页功能
2006-12-23 23:02 1345<script language="ja ... -
可输入的select
2006-12-23 23:03 1163<style type="text/css ... -
JavaScript窗口之定制新窗口参数
2006-12-23 23:19 3230window.open()方法的基本语法结构是: ...
相关推荐
该资源是 编程实现不同TabView标签页中任意导航层级视图之间相互跳转>> 博文的配套源代码,博文链接地址如下: https://blog.csdn.net/mydo/article/details/123754090 在本篇博文中,您将学到以下内容: 如何实现...
从老外的一个庞大的工程里摘出来一个组件。原项目是一个air的as3和flex的编辑器。做了一些改动 1.标签菜单使用PopUpManager方式弹出,方便关闭,监听FlexMouseEvent.MOUSE_DOWN_OUTSIDE就可以了。...
用horizontal实现的tabview,支持两种模式,样式还是比较好看的,也还算灵活
包含主要内容:tabview实现视图标签页面+窗口分割+treeview显示内容+动态添加控件+在视图里面画图+链表存储+orale数据库(此程序未带,带了你就运行不了了),可以咨询本人,里面有联系方式)+带皮肤文件 ...
用VC++实现的tabview类,可在view内放置多个窗体。
mfc自带的tabsheet控件是横排按钮在上面的,这个自绘控件实现在左侧竖排的Tab选择,并且可以添加图标。
基于QML的TabView类型,竖直方向,进行选择tab,左右布局
通过布尔值 Cell的重写 实现了可以多选的TableView。
TabView的例子 使用HTML页面开发,实现网页上类似TabView的样子。
《在分割窗口中创建TabView的实现方法》 文献一篇 作者:魏云华 文章中有代码
android仿IOS tabview效果
android系统提供的只有tabActivity里面的tabhost,若想在一个普通activity里添加tab页,则必须自己写一个tabview,小弟特地用viewflipper和一个linearlayout封装一个tabview,方便大家,也方便自己以后重用。
VisualC_中TabView的多种实现方法
用tabctrl实现MFC主界面多个view类切换。绝对真实代码,我做的大框架就是用的这个代码
unity添加自定义控件Demo
Tab控件在多文档结构中的使用,非常适合初学者学习在多文档结构中使用tab控件,实现类似浏览器多窗口的效果。
collection控件用来实现界面的各种自定义布局,最常用其作为横向、竖向的布局控件。很早之前,系统对于collection的支持并不是很好。所以自己实现了支持自定义布局、自定义cell的collection控件。自定义的collection...
一篇期刊,作者:周京生 介绍了3种TabView的实现方法,有主要部分的代码。
本Demo实现了仿IOS的TabView的顶部悬停布局、但是实现的原理不是用的Android的ListView、也不是用的Android中ExpandableListView、是用的LinearLayout嵌入的方式实现的、且支持多个、效果还是不错的
Android UI控件集合,包括Button,TextView,EditView,CheckBox,RadioGroup,Spinner,AutoCompleteTextView,DatePicker,TimePicker,ProgressBar,SeekBar,...TabView等几乎所有控件的使用实例,适合初学者学习使用。