社区
JavaScript
帖子详情
界面设计方面的东西求教.
coaa
2004-06-22 01:36:45
在界面设计方面,一种是树型结构,另外是分page的(就是在桌面,点击右键,选择属性,出来一个显示器的属性窗口,上面有[背景],[屏幕保护]...[设置]等标签,点击每一个标签,相关标签的内容就显示出来,就是这种风格的).
现在html想做成这样,点击不同的标签,显示相关信息,想直接在客户端用javascript实现.
有没有代码参考,或者某个网站也行,提供一下了,谢谢.
还没有找到相关的例子,请大家帮忙了.
...全文
42
4
打赏
收藏
界面设计方面的东西求教.
在界面设计方面,一种是树型结构,另外是分page的(就是在桌面,点击右键,选择属性,出来一个显示器的属性窗口,上面有[背景],[屏幕保护]...[设置]等标签,点击每一个标签,相关标签的内容就显示出来,就是这种风格的). 现在html想做成这样,点击不同的标签,显示相关信息,想直接在客户端用javascript实现. 有没有代码参考,或者某个网站也行,提供一下了,谢谢. 还没有找到相关的例子,请大家帮忙了.
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
coaa
2004-06-22
打赏
举报
回复
有没有能支持netscape的例子呢?
gjd111686
2004-06-22
打赏
举报
回复
使用示例
<html xmlns:page>
<head>
<title></title>
<style type="text/css">
page\:tab {behavior:url(Tab.htc);}
</style>
</head>
<body bgcolor="ButtonFace">
<page:tab style="width:300px; height:150px; background:ButtonFace; font:9pt; color:black; text-align:left;">
<page:frame text="设定一">内容
</page:frame>
<page:frame text="设定二">内容
</page:frame>
<page:frame text="其它选项">内容
</page:frame>
</page:tab>
</body>
</html>
gjd111686
2004-06-22
打赏
举报
回复
Table.htc
<PUBLIC:COMPONENT>
<PUBLIC:PROPERTY NAME="default" />
<SCRIPT LANGUAGE="JScript">
function open(mIndex)
{
if(event)
{
for(iIndex=0;iIndex<varArray.length;iIndex++)
if(varArray[iIndex]==event.srcElement)
{
mIndex=iIndex;
}
}
for(iIndex=0;iIndex<varArray.length;iIndex++)
{
if(iIndex==mIndex)
{
varArray[iIndex].style.zIndex=varArray.length*2+1; childNodes[iIndex+varArray.length].style.zIndex=varArray.length*2;
varArray[iIndex].style.posTop=0; varArray[iIndex].style.posLeft=varArray[iIndex].left-2; varArray[iIndex].style.padding="5px";
childNodes[iIndex+varArray.length].style.visibility="visible";
}
else
{
childNodes[iIndex+varArray.length].style.visibility="hidden";
}
if(iIndex<mIndex)
{
varArray[iIndex].style.zIndex=iIndex*2+1; childNodes[iIndex+varArray.length].style.zIndex=iIndex*2;
}
if(iIndex>mIndex)
{
varArray[iIndex].style.zIndex=iIndex*2-1; childNodes[iIndex+varArray.length].style.zIndex=iIndex*2-2;
}
if(iIndex<mIndex||iIndex>mIndex)
{
varArray[iIndex].style.posTop=2; varArray[iIndex].style.posLeft=varArray[iIndex].left;
varArray[iIndex].style.padding="3px";
}
varArray[iIndex].style.paddingTop="2px";
}
}
function nothing()
{event.returnValue=false;}
var Object,strValue,varRule,varArray=new Array(),iIndex,kIndex,varBgColor,nIndex;
if(hasChildNodes())
{
if(!style.position||style.position=="static") style.position="relative";
varBgColor=style.background;
style.background="transparent";
style.overflow="hidden";
varRule=childNodes.item(0);
for(iIndex=0;iIndex<childNodes.length;iIndex++)
if(childNodes[iIndex].nodeName!="frame")
removeChild(childNodes[iIndex]);
for(iIndex=0;iIndex<childNodes.length;iIndex++)
{
varArray[iIndex]=document.createElement("span");
varArray[iIndex].style.position="absolute";
varArray[iIndex].style.posTop=2;
varArray[iIndex].style.color="black";
varArray[iIndex].innerText=childNodes[iIndex].text;
varArray[iIndex].style.borderTop="1px solid white";
varArray[iIndex].style.borderLeft="1px solid white";
varArray[iIndex].style.borderRight="1px solid black";
varArray[iIndex].style.padding="3px";
varArray[iIndex].style.paddingTop="2px";
varArray[iIndex].style.background=varBgColor;
varArray[iIndex].style.cursor="default";
varArray[iIndex].onclick=open;
varArray[iIndex].onselectstart=nothing;
childNodes[iIndex].style.width=style.posWidth;
childNodes[iIndex].style.borderTop="1px solid white";
childNodes[iIndex].style.borderLeft="1px solid white";
childNodes[iIndex].style.borderRight="1px solid black";
childNodes[iIndex].style.borderBottom="1px solid black";
childNodes[iIndex].style.background=varBgColor;
childNodes[iIndex].style.position="absolute";
childNodes[iIndex].style.padding="5px";
}
for(iIndex in varArray)
{
insertBefore(varArray[iIndex],varRule);
if(iIndex>0)
{
nIndex=2;
for(kIndex=0;kIndex<iIndex;kIndex++)
{
nIndex+=varArray[kIndex].clientWidth+4;
}
varArray[iIndex].style.posLeft=nIndex;
}
else
{
varArray[iIndex].style.posLeft=2;
}
varArray[iIndex].left=varArray[iIndex].style.posLeft;
varArray[iIndex].style.zIndex=iIndex*2+1;
childNodes[iIndex*2+1].style.height=style.posHeight-varArray[iIndex].clientHeight-2;
childNodes[iIndex*2+1].style.posTop=varArray[iIndex].clientHeight+2;
childNodes[iIndex*2+1].style.zIndex=iIndex*2;
}
}
open(0);
</SCRIPT>
</PUBLIC:COMPONENT>
gjd111686
2004-06-22
打赏
举报
回复
http://fason.nease.net/
我了解的软件测试基本概念
兼容性测试侧重哪些
方面
? 9 2.正交表测试用例设计方法的特点是什么? 10 3.简述一下缺陷的生命周期? 10 3.画出软件测试的V模型图。 10 4.您所熟悉的测试用例设计方法都有哪些?请分别以具体的例子来说明这些方法在...
安卓app源码和设计报告——简易记账本
课 程 设 计(实训)说 明 书课程设计(实训)评语学生姓名 专业 班级 2题目 实现简易记账本功能评语:成绩:教导教师(签字)年 月 日课程设计(实训)任务书专业 班级 姓名题目 实现简易记账本功能题目来源 教师...
Vue毕业设计——基于Vue+SpringCloud+Mysql的博客系统设计与实现(毕业论文+程序源码)——博客系统
2.2.2 采用的UI框架 UI(
界面设计
)框架是博客的美观的体现,可以由开发者自行根据HTML,CSS,JavaScript开发美观组件,也可以节省时间使用他人封装好的UI框架,UI框架需要做到拿来即用,使用者可以做一些代码实际...
基于VHDL利用PS2键盘控制的电子密码锁设计
基于VHDL利用PS2键盘控制的密码锁设计 附件:下载地址 中文摘要 摘 要:现代社会,人们的安全意识正在不断提升。按键密码锁由于其具有方便性、低成本等特征,还是大有用武之地的。但是通常的按键密码锁开发,都是...
我了解的软件测试总结
兼容性测试侧重哪些
方面
? 9 2.正交表测试用例设计方法的特点是什么? 10 3.简述一下缺陷的生命周期? 10 3.画出软件测试的V模型图。 10 4.您所熟悉的测试用例设计方法都有哪些?请分别以具体的例子来说明这些方法在...
JavaScript
87,921
社区成员
224,619
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章