打印

我扣的YAHOO的选项卡效果,而且加了AJAX动态预览新闻信息

在为公司做新闻页面时做的一个AJAX的选项卡效果(扣的YAHOO的代码),然后加上了AJAX动态欲览新闻信息

演示地址:http://news.fc510.com(右下方的新闻信息)

这个是在实际的商业开发中也用得到的东西,跟大家分享下,如果有重复的地方,就当再看一遍.
common.css
复制内容到剪贴板
代码:
form,input,select {font-size:12px; margin:0px; padding:0px;}
table,td,tr,th {font-size:12px;word-wrap:break-word;word-break:break-all;}
li {list-style:none;}
p {text-indent:2em;}
/* 链接颜色 */
a {color:#000000; text-decoration:none;}
a:link {color:#00007F; text-decoration:underline}
a:visited {color:#00007F; text-decoration:underline}
a:active {color:#00007F; text-decoration:underline}
a:hover {color:#ff0000; text-decoration:none}
/* 颜色属性 [定义规则,小写c加颜色名称] */
.cRed    ,a.cRed:link    ,a.cRed:visited        { color:#F00; }
.cDRed    ,a.cDRed:link    ,a.cDRed:visited    { color:#d80000;}
.cGray    ,a.cGray:link    ,a.cGray:visited    { color: #4F544D;}
.cWhite    ,a.cWhite:link    ,a.cWhite:visited    { color: White;}
.cBlack    ,a.cBlack:link ,a.cBlack:visited    { color: Black;}
/* 字体属性 [定义规则,小写f加属性名称] */
.fB {    font-weight: bold;}
.fI {    font-style: italic;}
/* 字体大小*/
.f7px { font-size:7px;}
.f12px { font-size:12px;}
.f14px { font-size:14px;}
/* 其他属性 */
.left { float: left;}
.right { float: right;}
.clear { clear: both; font-size:12px; width:1px; visibility: hidden; }
.hidden {display: none;}
.unLine     ,.unLine a    {text-decoration: none;}
.noBorder {border:none;    }
.Border1px {border:1px;    }
/*共用表现样式*/
.list{padding:7px 10px 5px 10px; text-align:left; line-height:19px;}
.listcenter{text-align:center;}
/*新闻栏目导航颜色*/
#news-nav .main a {color:#EEF;}
#news-nav .main a:link {color:#EEF;}
#news-nav .main a:visited {color:#EEF;}
img .pic011 {border:#000 1px solid;}
function_style.css
复制内容到剪贴板
代码:
.tab-pane-control.tab-pane {position:relative;    width:550px; margin-right:-2px;}
.tab-pane-control .tab-row .tab {width:70px;height:19px;background:url(../images/tab.gif);position:relative;top:0;display:inline;float:left;    cursor:hand; margin:1px -1px 1px 2px;padding:    2px 0px 0px 0px;border:    0;z-index:1; white-space:    nowrap;    text-align:    center;}
.tab-pane-control .tab-row .tab.selected {font-weight:bold;width:74px !important;    height:21px !important;background:    url(../images/tab.active.gif) !important;    background-repaet:    no-repeat;    border-bottom-width:    0;z-index:3;padding:3px 0 0 0;margin:    1px -3px -3px 0px; top:-3px;}
.tab-pane-control .tab-row .tab.selected a{ font-weight:bold;}
.tab-pane-control .tab-row .tab a {color:Black;font:12px "宋体";text-decoration:none;cursor:hand; line-height:19px}
.tab-pane-control .tab-row .tab.hover {width:70px;height:19px;font:12px Tahoma;background:url(../images/tab.hover.gif);background-repaet:    no-repeat; cursor:hand;}
.tab-pane-control .tab-page {clear:both;border:1px solid rgb(145,155,156);background:#fdfdff;z-index:2;position:relative;top: -2px;font:12px "sans-serif, Tahoma"; color:Black; filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffefeff,EndColorStr=#fff3f5fb, GradientType=0)progid:DXImageTransform.Microsoft.Shadow(Color=#ffb6bccb, Strength=2, Direction=135);padding:5px;height:140px;}
.tab-pane-control .tab-row {z-index:1;white-space:nowrap;}
.tab-pane-control .tab-page ul {margin:7px 0;}
.tab-pane-control .tab-page ul li{font-size:14px;padding-left:8px; list-style: url(../images/i2.gif) inside none; line-height:140%;}
.tab-pane-control .tab-page ul li a{color:#1f3a87; text-decoration:none;}
.tab-pane-control .tab-page ul li a:hover {text-decoration:underline;}
.tab-pane-control .tab-page .more{clear:both; margin:0 10px; padding:5px 0 4px; font:12px verdana; background:url(../images/rul_hori_dot.gif) top repeat-x;}
.tab-pane-control .tab-page .more a{float:right;color:#000;}
.pubtimedate {font-size:12px;color:#999;}
news_style.css
复制内容到剪贴板
代码:
h3 {}
.tooltipdiv{padding:3px;}
Ajax_inject.js

 提示:您可以先修改部分代码再运行
news_index.js

 提示:您可以先修改部分代码再运行
[ 本帖最后由 bound0 于 2006-8-27 14:28 编辑 ]
本帖最近评分记录
  • hutia 威望 +2 原创内容 2006-8-9 12:32

其余的代码

tooltip.js

 提示:您可以先修改部分代码再运行

最后是调用事例的页面代码:

sample.htm

 提示:您可以先修改部分代码再运行
由于是原创,小小的赞一下吧,毕竟讲解得很清楚地说

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

谢谢

谢谢支持!

TOP

支持下楼主,挺详细的
大千世界,没文化!

TOP

自己来顶下,呵呵!!!

哎,自己还是要多支持下自己啊 !!

TOP

真心感谢

由心赞扬

TOP

真是太感谢楼主了,我找这效果找得好苦啊

TOP

谢谢楼主,不过我还是没看懂,运行你的代码后页面都是代码,不知道怎么搞
能讲一个你做的例子吗,麻烦了

TOP

不错

不错是好东西AJAX好象流行啊
可是没有研究过不是很懂

TOP

支持楼主,真棒!很酷的代码

TOP

想问一下楼主,你用的是什么.net系统?

TOP

预览效果,IE死掉。:P
5dm Web Team Administrator
5dm.cn   it365cn.com

TOP

楼主第一个是有用``但下面的热门新闻的就没用了
好像不能实现同一个页面,调用不同的ID

TOP

自己修改下啊,

你几看下,我里面还运用了处理Ajax注入信息时,对不同编码支持的脚本,以便修正出现乱码的问题.自己多看看啊!

TOP

赞哦~~

谢谢,好东西,我改了下,现在归我的啦,哈哈~~~
若鱼

TOP

回复 #1 yaohaixiao 的帖子

谢谢支持!!!

不过不要光看我的啊,大家有什么好的脚本也一起来分享啊!

TOP

效果很棒!!!!

但是你的网站里面包括图片效果是怎么插进去的?
人生如烟,没事就烧

TOP

打开网页,,我的电脑卡着30秒。。。郁闷,,真是绝杀
ttjie.cn/blog
2004 年,一切刚从头开始。

TOP

选项卡的JS太复杂了!为什么不用简单点得!实现选项卡其实两行代码就够了!

TOP

大哥,我以为是http://cn.yahoo.com/的那个效果呢.

TOP

真的很好.谢谢..................

TOP