- 浏览: 122031 次
文章分类
最新评论
-
张万里:
只有前台页面,参考意义不大
ztree左侧菜单jspDemo -
sesamfox:
缺少addProperty和create方法
使用cglib动态创建java类 -
aappds:
请问一下,这些漏洞用appscan扫描出来以后怎么查看具体漏洞 ...
常见WEB开发安全漏洞 原因分析及解决
首先借用和分享下之前同学的成果呵呵 因为我认为他的比我的风骚
http://www.iteye.com/topic/652682 留作参考
自己写的一个页面,现在还是一个jsp页面因为时间原因暂时没做直接html测试页 ,使用时可以参考tab2.jpg 提示 frame出调用使用测试,待重新整理
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="<%=request.getContextPath() %>/js/noRefresh.js" type="text/javascript"></script>
<style>
.tab_li_active {float:left; background:url(img/tab/tab.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_active span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#000000; vertical-align:text-top;}
.tab_li_hidden {float:left; background:url(img/tab/tab_a.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_hidden span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#7D7D7D; vertical-align:text-top;}
.frameClass {width:100%; height:100%;}
A {
COLOR: #7D7D7D; TEXT-DECORATION: none;
}
A:hover {
COLOR: red;TEXT-DECORATION: none;
}
</style>
<script language="javascript">
var tabTagName = "li"; //TAB use tag type
var framesParentNodeId="content"; //TAB Pointing FRAME's parentNode id
var activeClassName="tab_li_active"; //curr active TAB use className
var hiddenClassNmae="tab_li_hidden"; //curr hidden TAB use className
var disBlock="block"; //display
var disHidden="none"; //hidden
/** If you need add a new TAB tag into this page,you can try do like this example:
function mzTab(id,content,link)
{
var targetObj = parent.mainFrame;
if(targetObj.mzFexistTab(id)==false)
{
if(targetObj.mzGetTabCount()<=8)
{
targetObj.document.getElementById('tid').innerHTML+="<li id='"+id+"' title='"+content+"' onClick='mzFrameDis("+id+");' class='tab_li_active'><span>"+content+"<a href='#' title='关闭标签' onclick='mzDeleObj("+id+");'> X </a></span></li>";
//alert(targetObj.document.getElementById('tid').innerHTML);
}else{
alert('TAB显示数目已达上限,请关闭已打开TAB后继续操作');
return;
}
if(targetObj.mzFexistFrame(id)==false)
{
targetObj.document.getElementById('contents').innerHTML+="<iframe id='f"+id+"' class='frameClass' name='content' src='"+link+"' frameborder='0'></iframe>";
//alert(targetObj.document.getElementById('contents').innerHTML);
}
}
//Pointing the new TAB and new FRAME
targetObj.mzFrameDis(id);
}
// var targetObj = parent.mainFrame;
when you using method not in this page , so you should find relative path of 'main.jsp' from using page.
mail:404810628@qq.com
*/
function mzFrameDis(id){
if(mzFexistTab(id)==false)
{
alert('不存在选择项');
return;
}else{
//当前选择的TAB
mzGetActiveTab(id);
}
if(mzFexistFrame(id)==false)
{
alert('不存在选择项对应层');
return;
}else{
//当前选择FRAME
mzGetActiveFrame(id);
}
}
function mzGetTabCount()
{
return document.getElementsByTagName(tabTagName).length;
}
function mzGetActiveTab(id)
{
var lis = document.getElementsByTagName(tabTagName);
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].id==id)
{
lis[k].className =activeClassName;
}else{
lis[k].className =hiddenClassNmae;
}
}
}
function mzGetActiveFrame(id)
{
var frames = document.getElementsByName(framesParentNodeId);
for(var i=0 ; i <frames.length; i++)
{
var fid = "f"+id;
if(frames[i].id==fid)
{
frames[i].style.display=disBlock;
}else{
frames[i].style.display=disHidden;
}
}
}
function mzFexistTab(id)
{
var obj = document.getElementById(id);
if(obj!=null)
{return true;}else{return false;}
}
function mzFexistFrame(id)
{
var obj = document.getElementById("f"+id);
if(obj!=null)
{return true;}else{return false;}
}
function mzDeleObj(id)
{
var tab=document.getElementById(id);
//获取上个兄弟节点
var lastTabId=tab.previousSibling.id;
if(tab)
{
tab.parentNode.removeChild(tab);
}
var frame = document.getElementById("f"+id);
if(frame)
{
frame.parentNode.removeChild(frame);
}
if(mzFexistActiveTab()==false)
{
mzFrameDis(lastTabId);
}
}
//是否存在activeTab
function mzFexistActiveTab()
{
var lis = document.getElementsByTagName(tabTagName);
var flag =0;
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].className==activeClassName)
{
flag=1;
}
}
if(flag>0)
{
return true;
}else{
return false;
}
}
//TAB滚动
function mzScroll(flag)
{
var tabDivLen=document.getElementById('tid').offsetWidth;
//alert(document.getElementById('tid').innerHTML);
var innerLen = document.getElementById('tid').innerHTML.length;
//alert(document.getElementById('tid').firstChild.scrollLeft);
document.getElementById('tid').firstChild.scrollLeft+=10;
if(innerLen>=100)
{
if(flag)
{
document.getElementById('tid').firstChild.scrollLeft+=10;
}else{
document.getElementById('tid').scrollLeft+=10;
}
}
}
var i=0;
function moveText(){
document.getElementById('tid').style.left = i;
i++;
//alert(document.getElementById('tid').clientWidth);
if(i > (parseInt(document.getElementById('tid').clientWidth)))i=1;
setTimeout("moveText()",10);
}
</script>
</head>
<body onload="moveText();" style="background-image:url(img/menu_border.gif); background-position:right; background-repeat:repeat-y;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0px;">
<tr >
<td height="25" colspan="2" background="img/main_title_bg.gif" style="overflow:hidden;">
<div style="margin:0p; overflow:hidden; border:thin dotted 0px red; width:100%; height:100%;">
<div id="tabDiv" style="float:left; margin:0px; overflow:hidden; border:thin dotted 0px red; width:90%; height:100%;">
<ul id="tid" style="list-style:none; float:left; margin-left:5px; margin-bottom:-5px;">
<li id="0" onClick="mzFrameDis('0');" class="tab_li_active"><span ><img style="vertical-align:top;" src="img/home.png"> 首 页 </span></li>
</ul>
</div>
</div>
</td>
</tr>
<tr >
<td colspan="2" id="contents">
<iframe class="frameClass" name="content" id="f0" src="<%=request.getContextPath()%>/main/content.jsp" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
http://www.iteye.com/topic/652682 留作参考
自己写的一个页面,现在还是一个jsp页面因为时间原因暂时没做直接html测试页 ,使用时可以参考tab2.jpg 提示 frame出调用使用测试,待重新整理
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="<%=request.getContextPath() %>/js/noRefresh.js" type="text/javascript"></script>
<style>
.tab_li_active {float:left; background:url(img/tab/tab.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_active span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#000000; vertical-align:text-top;}
.tab_li_hidden {float:left; background:url(img/tab/tab_a.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_hidden span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#7D7D7D; vertical-align:text-top;}
.frameClass {width:100%; height:100%;}
A {
COLOR: #7D7D7D; TEXT-DECORATION: none;
}
A:hover {
COLOR: red;TEXT-DECORATION: none;
}
</style>
<script language="javascript">
var tabTagName = "li"; //TAB use tag type
var framesParentNodeId="content"; //TAB Pointing FRAME's parentNode id
var activeClassName="tab_li_active"; //curr active TAB use className
var hiddenClassNmae="tab_li_hidden"; //curr hidden TAB use className
var disBlock="block"; //display
var disHidden="none"; //hidden
/** If you need add a new TAB tag into this page,you can try do like this example:
function mzTab(id,content,link)
{
var targetObj = parent.mainFrame;
if(targetObj.mzFexistTab(id)==false)
{
if(targetObj.mzGetTabCount()<=8)
{
targetObj.document.getElementById('tid').innerHTML+="<li id='"+id+"' title='"+content+"' onClick='mzFrameDis("+id+");' class='tab_li_active'><span>"+content+"<a href='#' title='关闭标签' onclick='mzDeleObj("+id+");'> X </a></span></li>";
//alert(targetObj.document.getElementById('tid').innerHTML);
}else{
alert('TAB显示数目已达上限,请关闭已打开TAB后继续操作');
return;
}
if(targetObj.mzFexistFrame(id)==false)
{
targetObj.document.getElementById('contents').innerHTML+="<iframe id='f"+id+"' class='frameClass' name='content' src='"+link+"' frameborder='0'></iframe>";
//alert(targetObj.document.getElementById('contents').innerHTML);
}
}
//Pointing the new TAB and new FRAME
targetObj.mzFrameDis(id);
}
// var targetObj = parent.mainFrame;
when you using method not in this page , so you should find relative path of 'main.jsp' from using page.
mail:404810628@qq.com
*/
function mzFrameDis(id){
if(mzFexistTab(id)==false)
{
alert('不存在选择项');
return;
}else{
//当前选择的TAB
mzGetActiveTab(id);
}
if(mzFexistFrame(id)==false)
{
alert('不存在选择项对应层');
return;
}else{
//当前选择FRAME
mzGetActiveFrame(id);
}
}
function mzGetTabCount()
{
return document.getElementsByTagName(tabTagName).length;
}
function mzGetActiveTab(id)
{
var lis = document.getElementsByTagName(tabTagName);
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].id==id)
{
lis[k].className =activeClassName;
}else{
lis[k].className =hiddenClassNmae;
}
}
}
function mzGetActiveFrame(id)
{
var frames = document.getElementsByName(framesParentNodeId);
for(var i=0 ; i <frames.length; i++)
{
var fid = "f"+id;
if(frames[i].id==fid)
{
frames[i].style.display=disBlock;
}else{
frames[i].style.display=disHidden;
}
}
}
function mzFexistTab(id)
{
var obj = document.getElementById(id);
if(obj!=null)
{return true;}else{return false;}
}
function mzFexistFrame(id)
{
var obj = document.getElementById("f"+id);
if(obj!=null)
{return true;}else{return false;}
}
function mzDeleObj(id)
{
var tab=document.getElementById(id);
//获取上个兄弟节点
var lastTabId=tab.previousSibling.id;
if(tab)
{
tab.parentNode.removeChild(tab);
}
var frame = document.getElementById("f"+id);
if(frame)
{
frame.parentNode.removeChild(frame);
}
if(mzFexistActiveTab()==false)
{
mzFrameDis(lastTabId);
}
}
//是否存在activeTab
function mzFexistActiveTab()
{
var lis = document.getElementsByTagName(tabTagName);
var flag =0;
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].className==activeClassName)
{
flag=1;
}
}
if(flag>0)
{
return true;
}else{
return false;
}
}
//TAB滚动
function mzScroll(flag)
{
var tabDivLen=document.getElementById('tid').offsetWidth;
//alert(document.getElementById('tid').innerHTML);
var innerLen = document.getElementById('tid').innerHTML.length;
//alert(document.getElementById('tid').firstChild.scrollLeft);
document.getElementById('tid').firstChild.scrollLeft+=10;
if(innerLen>=100)
{
if(flag)
{
document.getElementById('tid').firstChild.scrollLeft+=10;
}else{
document.getElementById('tid').scrollLeft+=10;
}
}
}
var i=0;
function moveText(){
document.getElementById('tid').style.left = i;
i++;
//alert(document.getElementById('tid').clientWidth);
if(i > (parseInt(document.getElementById('tid').clientWidth)))i=1;
setTimeout("moveText()",10);
}
</script>
</head>
<body onload="moveText();" style="background-image:url(img/menu_border.gif); background-position:right; background-repeat:repeat-y;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0px;">
<tr >
<td height="25" colspan="2" background="img/main_title_bg.gif" style="overflow:hidden;">
<div style="margin:0p; overflow:hidden; border:thin dotted 0px red; width:100%; height:100%;">
<div id="tabDiv" style="float:left; margin:0px; overflow:hidden; border:thin dotted 0px red; width:90%; height:100%;">
<ul id="tid" style="list-style:none; float:left; margin-left:5px; margin-bottom:-5px;">
<li id="0" onClick="mzFrameDis('0');" class="tab_li_active"><span ><img style="vertical-align:top;" src="img/home.png"> 首 页 </span></li>
</ul>
</div>
</div>
</td>
</tr>
<tr >
<td colspan="2" id="contents">
<iframe class="frameClass" name="content" id="f0" src="<%=request.getContextPath()%>/main/content.jsp" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
发表评论
-
setTimeout , setInterval
2012-10-26 09:25 911[size=xx-large][size=x-small] ... -
常用正在表达式
2012-07-16 21:20 892验证数字:^[0-9]*$ 验证n位的数字:^\d{n} ... -
Window.Open详解
2012-07-13 11:00 736转自:http://www.iteye.com/topic/7 ... -
ztree左侧菜单jspDemo
2012-05-17 08:43 2105... -
淘宝的菜单树
2012-05-17 08:53 644出自:http://www.17jquery.com/j ... -
8款流行经典的企业网站常见css横向导航菜单
2012-05-17 08:53 775... -
简洁网上商城左侧鼠标点击展开与收缩
2012-05-16 17:22 0... -
经典蓝色横向二级导航栏
2012-05-17 08:54 971... -
漂亮的蓝色横向二级导航菜单代码
2012-05-17 08:53 1182... -
很好的导航参考网站
2012-05-16 16:56 767如题非常NICE的网站 地址1:http://www.duic ... -
绿色质感菜单
2012-05-16 16:46 813<!DOCTYPE html PUBLIC " ... -
jquery左侧点击展开二级菜单导航插件
2012-05-16 16:43 2612... -
Jquery实现竖导航网页菜单
2012-05-16 16:39 979... -
防京东左侧菜单
2012-05-16 16:38 920... -
JS 实现滚动条的一个好资料
2012-05-12 10:20 626http://www.n-son.com/scripts/js ... -
QUI 的 treeTable
2012-05-02 17:46 946QUI 的 treeTable 如题 -
SyntaxHighlighter 代码高亮组件
2012-05-02 10:10 869示例代码: <!DOCTYPE html PUBLIC ... -
js简单实现tab滚动方法
2012-04-17 12:06 3122方法:主要通过js控制tab所属容器的 scrollLeft ... -
window.showModalDialog 传值
2012-03-23 18:00 921showModalDialog() (IE 4+ 支持 ... -
资料收集
2011-12-28 12:34 786好人博客:http://yusun.blog.163.com/ ...
相关推荐
效果与Chrome 比较接近,实现了标签新增、删除、移动、自适应宽度等特性。
窗体后台管理系统通过点击treeview节点打开相应选项卡显示相应的内容,选项卡通过重写Tabcontrol控件实现仿浏览器效果,自定义标头、颜色或者图标,源码中标头图标已经隐藏,根据实际需求可以再次调出显示,源码中...
仿微信左右滑动的tab实现,安卓源码。完美运行。
本文实例讲述了jQuery实现仿Google首页拖动效果的方法。分享给大家供大家参考。具体如下: 这里用jQuery.js库写了一个仿Google首页拖动的特效代码 <!DOCTYPE html> <html> <head> <meta ...
js封装一个tab效果 图片循环滚动jquery 基于jQuery的弹出层 集合多种过渡效果幻灯片插件 创意中国flash+xml焦点图 flash+xml左右箭头翻页焦点图代码 Flash+XML前后按钮超酷焦点图 下拉框美化插件 多标签自动横向滚动...
js封装一个tab效果 图片循环滚动jquery 基于jQuery的弹出层 集合多种过渡效果幻灯片插件 创意中国flash+xml焦点图 flash+xml左右箭头翻页焦点图代码 Flash+XML前后按钮超酷焦点图 下拉框美化插件 多标签自动...
html5 仿微信聊天界面web微信,这个界面中使用了TAB标签效果、圆角边框、以及背景平铺特效,应用了HTML5最新的技术来实现,兼容PC端和移动端浏览器,整体看上去唯美漂亮,很不错的效果。
107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery...
9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...
107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery...
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡,可实现tab选项卡内容上下翻滚切换的功能。这款选项卡适用浏览器有:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下: 在线...
一款仿ES文件浏览器UI写的包含文件操作相关的功能的工具,扩展出了多媒体分类浏览。 MediaCenter是主程序,moduleAboutus和moduleAnimtab是两个自己写的库,用来实现一个现实版本号的dialog和自定义tab。 效果图:...
2.tab选项卡-各种切换6种; 3.电商产品主图-横向与纵向2种; 4.放大镜-电商主图放大镜、图库鼠标悬停旁边出现放大版图效果各一个; 5.跑马灯-文字或图片不断档可支持鼠标悬停时停止; 6.仿alert弹窗-可以自定义样式...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
自绘了CStatic控件,实现了标题字符滚动效果。 CSDN免积分下载工具 源码 演示了使用CInternetSession去下载资源。 CStatic文字滚动 如题,此实例非常适合学习,重载并自绘了Wnd类,效果是上下文字、图片、文字由大...
自绘了CStatic控件,实现了标题字符滚动效果。 CSDN免积分下载工具 源码 演示了使用CInternetSession去下载资源。 CStatic文字滚动 如题,此实例非常适合学习,重载并自绘了Wnd类,效果是上下文字、图片、文字由大...
自绘了CStatic控件,实现了标题字符滚动效果。 CSDN免积分下载工具 源码 演示了使用CInternetSession去下载资源。 CStatic文字滚动 如题,此实例非常适合学习,重载并自绘了Wnd类,效果是上下文字、图片、文字由大...
通过SurfaceView实现像Gallery手势滑动图片效果 Android自定义Gallery,实现CoverFlow效果 高仿网易新闻顶部滑动条效果 Android源码之动态壁纸引擎 动态桌面实现 android控件的抖动效果 很漂亮的ListView android ...