随笔 - 0, 文章 - 1, 评论 - 43, 引用 - 0
数据加载中……

效仿126邮箱tabcontrol的界面框架(这个东东对不善界面的你也许期待了很久) 12月17号下午7点做了部分代码更新

潜水多年今天终于冒了第一的泡泡。

说明:
        这是本人在美工的配合下效仿126邮箱界面做的一公用界面,基本上适合很多信息管理系统的界面要求。本人的CSS和JAVASCIRPT的功底有限,开发的东西难免会有些BUG或者很肤浅的地方,希望和朋友们一起探讨解决其中的一些问题。也非常希望高手们优化我的JS。

效果一



效果二


效果三



效果四





功能介绍:
1、可以换皮肤,其中主框架、具体页面可以统一使用皮肤。
2、tab页标题有右键菜单,新开、全屏打开,刷新。双击标题也可以刷新。
3、可以收放菜单栏。
4、在vs2005下开发完成,实际上只是JS+HTML+CSS 所以很方便的移植到ASP PHP JSP 上去。
5、做web的还是希望把这些界面功能写在客户端,有时候还真有点讨厌.Net的postback.
6、在firlfox上运行有点小问题。暂时只支持IE。

使用方法:
基本上主框架页面不需要作任何的变动了,直接就可以用,就不讲了。
在这里主要讲一下使用tabControl:
tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。


1、 调用方法

var myTab = new HTabControl(_skinId,true); //_skinId 是tab的皮肤编号,现在有4套,第二个参数是指页头是否显示关闭按纽。
document.write(myTab.init()); //初试化
top.myTab.Cts('标题','url',false); //以只聚焦不刷新的方式打开。
top.myTab.Cts('标题','url',true); //以聚焦并且刷新该页的方式打开。

之所以有两种不同的方式打开,是考虑打开页面以后,第二次再打开页的时候有两种需求。
a、刷新目标页 b、不刷新目标页

2、在其他页面使用tab控件的方法可以点左边菜单的链接。

讨厌的BUG:
这个BUG一直都困饶了我好长时间,并且实在不知道怎么解决,甚至连问题出在哪里都不知道。
BUG描述:在频繁的打开关闭的时候tab页后,有时候会出现界面里的textbox控件鼠标点击无法聚焦的问题。整体刷新框架就可以聚焦了。奇怪!



这里下载代码:很希望高手能优化一下我的代码,供大家一起来学习。

看在兄弟这么热心的份上,请多帮帮忙!一定要帮我解决这个BUG

12月17号下午7点做了部分代码更新下载

posted on 2007-12-11 02:05 质感 阅读(3829) 评论(43)  编辑 收藏

评论

#1楼    回复  引用    

看起来不错
2007-12-11 06:10 | 欢乐的猪 [未注册用户]

#2楼    回复  引用  查看    

好东西呀
2007-12-11 08:22 | 大石头      

#3楼    回复  引用  查看    

3Q,偶可以拿来做我的个站皮肤么?
2007-12-11 08:32 | 留恋星空      

#4楼    回复  引用  查看    

增经出现过楼主的bug,不过忘了怎么好的了。不需要全部刷新,Tab一下也会正常起来。

似乎是资源释放不彻底导致的,请检查关闭Tab的时候你对资源的释放情况。
2007-12-11 08:33 | 浪子      

#5楼    回复  引用  查看    

看起来不错
2007-12-11 08:35 | 海浪空间      

#6楼    回复  引用  查看    

不错,最烦做界面了
2007-12-11 08:58 | jillzhang      

#7楼    回复  引用    

问题应该就你界面上没有释放的DIV造成的。仔细找一下。
2007-12-11 09:06 | stone_zhu [未注册用户]

#8楼    回复  引用  查看    

感觉有点慢呢
2007-12-11 09:07 | qq13237810775      

#9楼    回复  引用  查看    

BUG应该是你界面上没有释放的DIV造成的。仔细找一下。
曾经用JQuery插件的时候遇到过这样的问题。
2007-12-11 09:08 | stonezhu      

#10楼 [楼主]   回复  引用  查看    

@stone_zhu
我也是有这样的猜想,请问divobj.removeNode(true); 方法能释放吗?
2007-12-11 09:09 | 质感      

#11楼    回复  引用    

不错,支持兄弟,希望看了的兄弟继续一起加油!
2007-12-11 09:17 | dreamofcity [未注册用户]

#12楼    回复  引用    

好东西,收藏了!
2007-12-11 09:24 | elive [未注册用户]

#13楼    回复  引用  查看    

支持一下
2007-12-11 09:25 | 小龟爬爬      

#14楼    回复  引用  查看    

6、在firlfox上运行有点小问题。暂时只支持IE。

--------------只能飘过了。。。
2007-12-11 09:27 | Clark Zheng      

#15楼    回复  引用  查看    

@质感
应该是可以的,仔细再找找看,调试一下,问题应该就在这里。
2007-12-11 09:44 | stonezhu      

#16楼    回复  引用  查看    

这个框架确实通用!
2007-12-11 10:08 | Enzo      

#17楼    回复  引用  查看    

最烦做界面了,呵呵。收藏一下。
2007-12-11 10:23 | zoti      

#18楼    回复  引用    

看看先了
2007-12-11 10:36 | oxsoft.cn [未注册用户]

#19楼    回复  引用  查看    

不错不错...
2007-12-11 11:39 | 周银辉      

#20楼    回复  引用    

不错..顶一个..
2007-12-11 13:54 | SoulHuang [未注册用户]

#21楼    回复  引用  查看    

不错,挺漂亮的!
2007-12-11 14:05 | Leepy      

#22楼    回复  引用  查看    

恩.蛮好看的,收藏!
2007-12-11 14:21 | .NET的春天      

#23楼    回复  引用  查看    

下来试试。看着很漂亮。
2007-12-11 14:45 | Bob-wei      

#24楼    回复  引用  查看    

看看先
2007-12-11 14:47 | pk的眼泪      

#25楼    回复  引用    

如果拖动浏览器 TAB的变了
有没有什么办法解决啊
2007-12-11 16:14 | fengsoft [未注册用户]

#26楼 [楼主]   回复  引用  查看    

@fengsoft
把问题描述清楚点
2007-12-11 16:28 | 质感      

#27楼    回复  引用  查看    

现下来看看...
2007-12-11 19:32 | 西北驴      

#28楼    回复  引用  查看    

好东西
2007-12-12 11:42 | 人非木      

#29楼    回复  引用    

我打开了 多个标签页
比如我现在 浏览器的宽度 1024
现在我把 宽度拉小了
如果宽度比所有标签页的宽度总和小
那标签的图片 就重叠 跑到下一行了
2007-12-12 11:51 | fengsoft [未注册用户]

#30楼    回复  引用    

Ext(http://www.extjs.com)已经实现的很漂亮了,直接用就好了.
2007-12-13 09:50 | Jimmy.Ke [未注册用户]

#31楼    回复  引用    

top.myTab.Cts('标题','url',false); 如果URL用的是绝对路径 例如用http://www.163.com 就报错 是什么问题 大家遇到了吗?还麻烦楼主能解答一下 谢谢啦
2007-12-13 10:12 | maxthon [未注册用户]

#32楼    回复  引用    

15号读此文看见是17号下午更新
2007-12-15 10:33 | amon [未注册用户]

#33楼    回复  引用    

非常不错,学习,谢谢!
2007-12-16 20:19 | xzbxz [未注册用户]

#34楼    回复  引用  查看    

很棒的框架。确实很实用。
只是有一点:
在框架中实用类似Greybox这样的东东时麻烦就来了:(
2007-12-22 21:20 | 紫雨(HB)      

#35楼    回复  引用  查看    

这个是好东西,我先收录 了
2007-12-23 20:19 | 黑*马      

#36楼    回复  引用    

恩 希望LZ 能尽快的让 FF 也支持的啊```
在 FF 下 有点惨不忍睹啊```

谢谢了!!!
2007-12-23 20:49 | xiazhi33 [未注册用户]

#37楼    回复  引用  查看    

我有一个问题!页面第一次打开的时候好像默认的不是第一个选项卡!请问楼主能设置吗??
2008-01-04 16:10 | Sunlight      

#38楼    回复  引用    

使用了该控件后开发和编译时一切正常,但发布后却显示不正常??为什么,需要特殊设置吗???
请lz给菜鸟答复,谢谢啦!!!!
2008-03-08 16:54 | 蓝善华 [未注册用户]

#39楼    回复  引用    

不错,收藏了,,也许那天能用到。。
2008-04-20 18:58 | 战狼 [未注册用户]

#40楼    回复  引用    

不錯..下載來學習下.
我之前是用RadTab.也做了類似像樓主這樣的功能..
但是,沒有美工..都是很粗的做了下..
功能與126郵箱一樣.
2008-04-29 12:07 | xmchyabi [未注册用户]

#41楼    回复  引用    

请问解决了无法聚焦的问题了吗?
谢谢
2008-05-08 15:14 | quitchat [未注册用户]

#42楼    回复  引用    

界面的确不错,不知道这个TabControl的页签能够动态增加,或者能够加载页面?
2008-06-15 11:54 | ronotian [未注册用户]

#43楼    回复  引用    

仿126邮箱的再推荐一个http://download.csdn.net/source/472488
2008-07-12 11:27 | 43 [未注册用户]

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-12-11 19:33 编辑过