`
ranyut
  • 浏览: 259290 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

自己研究可以点击展开和自由改变页面大小的web框架

框架WebJSFUPHTML 
阅读更多
昨天想做一个web框架，在中间的添加一个分割栏，可以点击隐藏\展开左边页面，也可以自由拉动改变页面大小，效果如猫扑的大杂烩
开始做好了点击按钮可以隐藏展开左边页面，也可以拉动，但自由拉动的时候无法让点击按钮跟着动
今天再研究了哈猫扑的代码，明白了
他是在主frame中再嵌套iframe
我的主框架如下： 

 <frameset id="allFrame" rows="*" cols="215,*,200" framespacing="2" frameborder="no" border="0" >
	      <frame src="<%=request.getContextPath()%>/pages/frame/left_bar.jsf" name="leftBarFrame" scrolling="no"  id="leftBarFrame"/>
	      <frame src="<%=request.getContextPath()%>/pages/frame/ctx.jsf" name="mainFrame" id="mainFrame" />
		  <frame src="<%=request.getContextPath()%>/pages/frame/right_bar.jsf" name="rightBarFrame" scrolling="no"  id="rightBarFrame"/>
	    </frameset>



left_bar代码如下： 
<body>
		<table width="100%" height="100%" border="0" cellpadding="0"
			cellspacing="0">
			<tr>
				<td width="100%">
					<IFRAME style="VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
						name='leftiframe' id='leftiframe' src="left.jsf" frameBorder=0 scrolling="auto"></IFRAME>
				</td>
				<td>
					<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%"
						border=0  id="td1">
						<TBODY>
							<TR>
								<td height='50%' title="拖动以调整宽度" class="bg-lr-line" ></td>
							</TR>
							<TR>
								<TD height="100%" class="bg-lr-line"  onclick="changeFrame();"
									onMouseOver="this.style.cursor='pointer'" id="ImgArrow" width=8 >
									<img id="imgId" alt="展开\隐藏左边栏" src="images/arrow_left.gif">
								</TD>
							</TR>
							<TR>
								<td height='50%' title="拖动以调整宽度" class="bg-lr-line" ></td>
							</TR>
						</TBODY>
					</TABLE>
				</td>
			</tr>
		</table>


就可以搞定了，右边跟左边是一样的道理，只不过是把iframe放在下面
分享到：
| Oracle中操作Clog/Blog
评论
2 楼 svygh123 2012-06-29  
请问有源码吗?
1 楼 ranyut 2009-02-13  
附隐藏\展开的js实现 
 function changeFrame() {
	var img = document.getElementById("imgId");
  	var o_mf = window.parent.document.getElementById("allFrame");
	if(o_mf.cols=='215,*,200'){
		o_mf.cols = '10,*,200';
		img.src="images/arrow_right.gif" ;
	}
	else if(o_mf.cols=='215,*,10'){
		o_mf.cols = '10,*,10';
		img.src="images/arrow_right.gif" ;
	}	
	else if(o_mf.cols=='10,*,10'){
		o_mf.cols = '215,*,10';
		img.src="images/arrow_left.gif" ;
	}
	else{
		o_mf.cols = '215,*,200';
		img.src="images/arrow_left.gif" ;
	}
 }
 function changeTopFrame(){
 	var img = document.getElementById("imgId");
 	var o_mf = window.parent.document.getElementById("headFrame");
 	var m_mf = window.parent.parent.document.getElementById("maxFrame");
 	
 	if(o_mf.rows=='82,8'){
 		o_mf.rows='0,8';
 		if(m_mf.rows='23,90,*,0'){
 			m_mf.rows='23,8,*,0' ;
 			img.src="images/arrow_down.gif" ;
 		} 
 	}
 	else if(o_mf.rows=='0,8'){
 		o_mf.rows='82,8' ;
 		if(m_mf.rows='23,8,*,0'){
 			m_mf.rows='23,90,*,0' ;
 			img.src= "images/arrow_up.gif" ;
 		}
 	}
 }
 function changeRightFrame() {
	var img = document.getElementById("imgsId");
  	var o_mf = window.parent.document.getElementById("allFrame");
	if(o_mf.cols=='215,*,200'){
		o_mf.cols = '215,*,10';
		img.src="images/arrow_left.gif" ;
	}
	else if(o_mf.cols=='215,*,10'){
		o_mf.cols = '215,*,200';
		img.src="images/arrow_right.gif" ;
	}	
	else if(o_mf.cols=='10,*,10'){
		o_mf.cols = '10,*,200';
		img.src="images/arrow_right.gif" ;
	}
	else{
		o_mf.cols = '10,*,10';
		img.src="images/arrow_left.gif" ;
	}
 }
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ComponentArt Web.UI 2008.1 for ASP.NET 3.5 源代码

    ComponentArt Web.UI 2008.1 是一个专门针对ASP.NET 3.5平台的高性能、可定制的用户界面库。...通过对源代码的深入学习和实践，开发者可以更好地掌握ASP.NET框架，提升Web应用的用户体验和交互性。

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -Grid的Values属性访问限制由internal改为public，这就意味这可以自由改变Grid中每个单元格的值了。 -增加示例-如何将Grid控件导出为Excel(data\grid_excel_run.aspx)(feedback:503684912)。 -如果TreeNode的属性...

    ExtAspNet_v2.3.2_dll

    -Grid的Values属性访问限制由internal改为public，这就意味这可以自由改变Grid中每个单元格的值了。 -增加示例-如何将Grid控件导出为Excel(data\grid_excel_run.aspx)(feedback:503684912)。 -如果TreeNode的属性...

    jquery-easyui

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一套丰富的...结合提供的 demo 实例和 PDF 内容，开发者可以深入学习并熟练运用这个框架，打造功能丰富、界面友好的 Web 应用。

    jquery_easyui_cn文档

    Accordion组件用于展示可折叠的内容区域，每个部分都有一个标题，点击标题可以展开或收起内容。它支持自定义样式和配置，例如设置默认打开的面板，以及控制动画效果。 2. **DateBox（日期框）** DateBox是输入...

    Axure ant design pro后台模板可交互

    而“ant design pro后台模板（精作）”则是一个完整的后台管理界面模板，它可能包含了各种页面布局、功能模块，如用户管理、数据统计、设置选项等，这些都预设了交互效果，可以直接拖拽到Axure工作区进行修改和扩展...

    Ajax Control Toolkit 34个服务器端控件.doc

    2. AccordionPane 的 Content 可以包含任何Web元素，如同一个容器，可以自由定制展示内容。 3. AccordionPane 的 AutoSize 模式有三种：None（推荐）、Limit 和 Fill，分别对应不自动调整大小、限制大小和填充父容器...

    建站之星 SITESTAR 2.7 测试版

    同时该系统率先在国内采用模块化管理，您想要改变页面布局仅需使用鼠标拖拽相应的模块到指定的页面区域即可，真正做到所见即所得。当然，如果您懂HTML语言，您还可以在建站系统的框架内设计个性化的网站，系统给予了...

    FIREWORKS 3网页图像设计

    设计师可以轻松创建线条、形状和路径，这些元素可以自由调整大小而不失真，非常适合制作图标、按钮和其他界面元素。此外，它还支持自定义矢量图形库，便于复用和组织设计元素。 ### 2. 位图编辑 除了矢量工具，...

    FastReport.rar

    这些组件可以自由调整大小、位置，同时支持各种样式设置，使报告设计更加灵活。 2. **多平台支持**：FastReport不仅仅局限于Windows环境，它也支持其他操作系统，如Linux和Mac OS，以及移动平台如iOS和Android。这...

    jQuery UI 1.10 API Documentation

    - **Resizable（可调整大小）**: 使元素可以自由调整大小，设置限制和事件处理。 - **Button（按钮）**: 将元素转换为各种形式的按钮，支持复选框、单选框样式。 3. **API 使用** - **$.fn.widgetName**: jQuery...

    Ajax控件

    Accordion控件中的Behavior，如淡入淡出效果，可以通过特定的方法进行访问和修改，如`set_FadeTransitions()`和`get_FadeTransitions()`。通过JavaScript代码，开发者可以动态地调整这些Behavior的属性，实现对...

    蓝色渐变精美圆角IT企业模板2982_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    7. **源码**：提供的是源代码，这意味着用户可以自由地修改和定制模板，以满足特定业务需求，而不受预构建解决方案的限制。 综上所述，这个压缩包提供的不仅仅是一个美观的IT企业网站模板，而是一套完整的、自适应...

    超级有影响力霸气的Java面试题大全文档

    引用类型和原始类型具有不同的特征和用法，它们包括：大小和速度问题，这种类型以哪种类型的数据结构存储，当引用类型和原始类型用作某个类的实例数据时所指定的缺省值。对象引用实例变量的缺省值为 null，而原始...

    T Object-开源

    开源许可证确保了代码的自由使用、修改和分发，有助于项目的长期发展和维护。 总结起来，T Object 是一个强大的JavaScript工具，能够提升前端开发的效率和用户体验。通过其基于标签的导航和基于树的菜单功能，...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例075 动态改变页面中单元格的背景颜色 109 实例076 屏蔽偶数次的数据输出 110 实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 实例079 自定义函数截取中文字符串 113 ...

Magicbox
Global site tag (gtag.js) - Google Analytics