lijun0349
- 浏览: 314165 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
Jett：
...
Android的Activity一打开就出现讨嫌的软键盘，怎样将其关闭？ -
nuannuan6818：
这也算是一种方法，不过感觉不可取，这样把图片的存储位置固定死了 ...
JSP 页面中用绝对路径显示图片 -
hhayyok：
xiexie
Eclipse jar打包详解 -
lixiplus：
写的好， 给力
JSP 页面中用绝对路径显示图片 -
叶落秋陌：
原来是把lib放在jar外面，帮了大忙~
Eclipse jar打包详解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0px;
font-size:12px;
font-family:"宋体";
color:#000000;
}
html,body{
height: 100%;
width: 100%;
overflow:hidden;
background-color:#EEEEEF;
}
img{
padding:0px;
margin:0px;
vertical-align:middle;
border:0px;
}
.f_left{
float:left;
clear:right;
}
.f_right{
float:right ;
clear:right;
}
.topArea{
width:100%;
height:60px;
}
.logoArea{
float:left;
width:100%;
height:36px;
background-color:#EEEEEF;
}
.toolbarArea{
float:left;
width:100%;
height:24px;
background-color:#EEEEEF;
}
.bottomArea{
height:25px;
line-height:25px;
background-color:#EEEEEF ;
}
.leftBg{
background:#ffffff;
border:1px solid #BEBEBE;
}
.mainContent{
padding:0px;
}
.content_show{
float:left;
clear:right;
height:100%;
width:auto;
margin:0px;
padding:0px;
background-color:#ffffff;
border:1px solid #BEBEBE;
}
.splitBar{
width:6px;
height:100%;
cursor:col-resize;
}
</style>
<script type="text/javascript">
function $doc(ele){
if(typeof ele == "string" || ele instanceof String){
return document.getElementById(ele);
}
return ele;
}
//设置页面布局
function resizePage(){
var topArea = $doc("topArea");
var mainContent = $doc("mainContent");
var footer = $doc("footer");
var myHeight = document.body.clientHeight - (topArea.offsetHeight + footer.offsetHeight);
if(myHeight <= 0) myHeight = 10;
mainContent.style.height = myHeight + "px";
var center = $doc("center");
if(!document.all){
myHeight = myHeight ;//- 10;
}
center.style.height = myHeight + "px";
var leftShow = $doc("leftShow");
var myWidth = document.body.clientWidth - leftShow.offsetWidth - 6;
/*if(!document.all){
myWidth = myWidth - 5
}*/
myWidth = myWidth - 5
center.style.width = myWidth + "px";
}
// ************************ 拖动 *********************************
function setDrag(e){
var drag_flag = true;
var begin_x = getX(e);
//添加蒙板
createMask();
//添加半透明拖动条
createSplitDiv();
function getX(e){
if(window.event) e = window.event;
return (e.x || e.clientX);
}
function createSplitDiv(){
//半透明的拖动条
var _top = $doc("topArea").offsetHeight +"px";
var _left = $doc("dragBar").offsetLeft +"px";;
var _height = $doc("dragBar").offsetHeight +"px";;
var splitDivCss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col-resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;";
var _splitDiv = document.createElement("div");
_splitDiv.id = "splitDiv";
_splitDiv.style.cssText = splitDivCss;
document.body.appendChild(_splitDiv);
}
function createMask(){
try{
//创建背景
var rootEl=document.documentElement||document.body;
var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#cccccc;z-index:10000;filter:alpha(opacity=0);opacity:0";
var _shield = document.createElement("div");
_shield.id = "shield";
_shield.style.cssText = shieldStyle;
document.body.appendChild(_shield);
}catch(e){}
}
//拖动时执行的函数
document.onmousemove = function(e){
try{
if(drag_flag){
var now_x = getX(e);
var _pv = parseInt($doc("splitDiv").style.left)+ now_x - begin_x;
$doc("splitDiv").style.left = _pv +"px";
begin_x = now_x;
}else{
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body.removeChild($doc("shield"));
document.body.removeChild($doc("splitDiv"));
// 调整页面布局
resizePage();
}
}catch(e){}
}
document.onmouseup = function(){
try{
if(drag_flag){
//设定拖动条的位置（设定左侧的宽度）
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body.removeChild($doc("shield"));
document.body.removeChild($doc("splitDiv"));
// 调整页面布局
resizePage();
}
drag_flag = false;
begin_x = null;
}catch(e){}
}
}
if(window.attachEvent){
window.attachEvent("onload",function(){resizePage();});
window.attachEvent("onresize",function(){resizePage();});
}
if(window.addEventListener){
window.addEventListener("load",function(){resizePage();},true);
window.addEventListener("resize",function(){resizePage();},true);
}
</script>
</head>
<body>
<div id="topArea" class="topArea">
<div class="logoArea"> </div>
<div class="toolbarArea"> </div>
</div>
<div id="mainContent">
<div id="leftShow" class="f_left leftBg" style="width:180px;height:100%;">
</div>
<div class="f_left splitBar" id="dragBar" onmousedown = "setDrag(event);"></div>
<div class="content_show" id="center" style="overflow-y:auto;overflow-x:hidden;">
<iframe src="" width="100%" height="100%" frameborder="1"></iframe>
</div>
</div>
<div id="footer" class="bottomArea" align="center">
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0px;
font-size:12px;
font-family:"宋体";
color:#000000;
}
html,body{
height: 100%;
width: 100%;
overflow:hidden;
background-color:#EEEEEF;
}
img{
padding:0px;
margin:0px;
vertical-align:middle;
border:0px;
}
.f_left{
float:left;
clear:right;
}
.f_right{
float:right ;
clear:right;
}
.topArea{
width:100%;
height:60px;
}
.logoArea{
float:left;
width:100%;
height:36px;
background-color:#EEEEEF;
}
.toolbarArea{
float:left;
width:100%;
height:24px;
background-color:#EEEEEF;
}
.bottomArea{
height:25px;
line-height:25px;
background-color:#EEEEEF ;
}
.leftBg{
background:#ffffff;
border:1px solid #BEBEBE;
}
.mainContent{
padding:0px;
}
.content_show{
float:left;
clear:right;
height:100%;
width:auto;
margin:0px;
padding:0px;
background-color:#ffffff;
border:1px solid #BEBEBE;
}
.splitBar{
width:6px;
height:100%;
cursor:col-resize;
}
</style>
<script type="text/javascript">
function $doc(ele){
if(typeof ele == "string" || ele instanceof String){
return document.getElementById(ele);
}
return ele;
}
//设置页面布局
function resizePage(){
var topArea = $doc("topArea");
var mainContent = $doc("mainContent");
var footer = $doc("footer");
var myHeight = document.body.clientHeight - (topArea.offsetHeight + footer.offsetHeight);
if(myHeight <= 0) myHeight = 10;
mainContent.style.height = myHeight + "px";
var center = $doc("center");
if(!document.all){
myHeight = myHeight ;//- 10;
}
center.style.height = myHeight + "px";
var leftShow = $doc("leftShow");
var myWidth = document.body.clientWidth - leftShow.offsetWidth - 6;
/*if(!document.all){
myWidth = myWidth - 5
}*/
myWidth = myWidth - 5
center.style.width = myWidth + "px";
}
// ************************ 拖动 *********************************
function setDrag(e){
var drag_flag = true;
var begin_x = getX(e);
//添加蒙板
createMask();
//添加半透明拖动条
createSplitDiv();
function getX(e){
if(window.event) e = window.event;
return (e.x || e.clientX);
}
function createSplitDiv(){
//半透明的拖动条
var _top = $doc("topArea").offsetHeight +"px";
var _left = $doc("dragBar").offsetLeft +"px";;
var _height = $doc("dragBar").offsetHeight +"px";;
var splitDivCss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col-resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;";
var _splitDiv = document.createElement("div");
_splitDiv.id = "splitDiv";
_splitDiv.style.cssText = splitDivCss;
document.body.appendChild(_splitDiv);
}
function createMask(){
try{
//创建背景
var rootEl=document.documentElement||document.body;
var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#cccccc;z-index:10000;filter:alpha(opacity=0);opacity:0";
var _shield = document.createElement("div");
_shield.id = "shield";
_shield.style.cssText = shieldStyle;
document.body.appendChild(_shield);
}catch(e){}
}
//拖动时执行的函数
document.onmousemove = function(e){
try{
if(drag_flag){
var now_x = getX(e);
var _pv = parseInt($doc("splitDiv").style.left)+ now_x - begin_x;
$doc("splitDiv").style.left = _pv +"px";
begin_x = now_x;
}else{
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body.removeChild($doc("shield"));
document.body.removeChild($doc("splitDiv"));
// 调整页面布局
resizePage();
}
}catch(e){}
}
document.onmouseup = function(){
try{
if(drag_flag){
//设定拖动条的位置（设定左侧的宽度）
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body.removeChild($doc("shield"));
document.body.removeChild($doc("splitDiv"));
// 调整页面布局
resizePage();
}
drag_flag = false;
begin_x = null;
}catch(e){}
}
}
if(window.attachEvent){
window.attachEvent("onload",function(){resizePage();});
window.attachEvent("onresize",function(){resizePage();});
}
if(window.addEventListener){
window.addEventListener("load",function(){resizePage();},true);
window.addEventListener("resize",function(){resizePage();},true);
}
</script>
</head>
<body>
<div id="topArea" class="topArea">
<div class="logoArea"> </div>
<div class="toolbarArea"> </div>
</div>
<div id="mainContent">
<div id="leftShow" class="f_left leftBg" style="width:180px;height:100%;">
</div>
<div class="f_left splitBar" id="dragBar" onmousedown = "setDrag(event);"></div>
<div class="content_show" id="center" style="overflow-y:auto;overflow-x:hidden;">
<iframe src="" width="100%" height="100%" frameborder="1"></iframe>
</div>
</div>
<div id="footer" class="bottomArea" align="center">
</div>
</body>
</html>
分享到：
发表评论
-
JS加减乘除运算
2013-09-03 12:13 1462//加法 Number.prototype.ad ... -
JS 利用正则表达式替换字符串
2013-08-15 15:46 9644JS 利用正则表达式替换字符串 var data = & ... -
JS验证
2013-07-19 11:43 10981. URL验证 function checkU ... -
JS常用方法
2013-06-14 11:48 947//1. 去空格 function doTrimStr( ... -
在JS弹出的遮罩层中，部分区域高亮显示并且可以编辑
2012-11-13 10:37 31581. 初始页面效果如下所示： 2. 点击“点击一下试试！”链 ... -
IE9浏览器下 使用JS获取图片尺寸大小 的方法
2012-11-01 15:17 4636情况一：以下代码在IE7、IE8下获取图片的尺寸大小是没有问题 ... -
JS遍历某个目录下的所有文件名
2011-02-23 18:46 4756<!DOCTYPE HTML PUBLIC " ... -
JAVASCRIPT----style 中visibility和display之间的区别
2009-08-13 16:06 1560大多数人很容易将CSS属 ... -
javascript自定义右键菜单
2009-02-06 18:56 2159<title>右键菜单v1.0</title ... -
javascript仿照google搜索框自动补全(可以输入一个“管”字查看效果。)
2009-02-06 18:51 5109<html> <body> <s ... -
javascript在线将汉字翻译为汉语拼音，可选择翻译中汉字对照
2009-02-06 18:16 3507<html> <head> <t ... -
点击链接弹出"图片另存为"而不是直接打开
2009-02-06 18:02 1751<iframe height="0" ... -
javascript实现页内搜索
2009-02-06 18:00 1281<!DOCTYPE html PUBLIC " ... -
jst实现MD5加密
2009-02-06 17:55 1191<HTML> <HEAD> <M ... -
javascript图片型按钮
2009-02-06 17:46 1291<style>.button { font: 12 ... -
javascript页面loading效果
2009-02-06 17:44 1698<html> <head> <t ... -
上传附件界面设计
2009-02-06 17:37 1368<head> <meta http-equ ... -
js停止输出
2009-02-06 17:13 991<SCRIPT LANGUAGE="Jav ... -
网站后台左右收缩型页面脚本
2009-02-06 17:06 1364<html> <meta http-equi ... -
JavaScript仿LightBox内容显示效果
2009-02-06 16:58 1356<!DOCTYPE html PUBLIC " ...
相关推荐
本文档介绍了一个利用JavaScript实现的可拖动后台界面方案，通过简单的代码实现了界面元素的拖动功能，为开发者提供了参考。 #### 二、关键概念与技术 1. **事件监听**：在JavaScript中，可以为DOM元素添加事件...
通过模版，开发者可以快速搭建出一个功能完善的后台界面，然后根据业务逻辑进行二次开发，添加特定的功能模块。 【压缩包子文件的文件名称列表】中的"cpts_648_bnl"可能是一个包含模版源代码、样式文件、脚本文件...
在C# WinForm应用开发中，用户界面的流畅性至关重要，特别是涉及到拖动和缩放操作时。当遇到“拖动和缩放很卡”的问题时，这通常与多个因素有关，包括性能优化、渲染机制、UI更新策略等。下面我们将深入探讨这些问题...
在后台界面设计中，拖放功能常用于数据排序和组织，例如在表单字段配置、文件管理等场景。jQuery UI 的 Draggable 和 Sortable 插件使得元素可以被轻松地拖动到不同位置，甚至可以在多个容器之间进行排序，提高了...
【可拖动控件后台模板】是一个专为后台界面设计的模板，其核心特性在于它包含了一系列可拖动的控件元素，使得用户在后台管理界面可以自由调整各个功能区块的位置，以满足个性化的工作流需求。这样的设计极大地提高了...
"仿支付宝首页可拖动可排序可删除"这个项目就是这样一个例子，它旨在提供与支付宝类似的功能，让用户能够自由地组织和管理应用内的元素。在这个项目中，我们将深入探讨以下几个核心知识点： 1. **可拖动布局...
在IT行业中，"可拖动的树"是一种交互式的用户界面元素，通常用于展示具有层级关系的数据，如文件系统、组织结构或导航菜单。在这个场景中，"拖动"功能使得用户可以通过直观的手势来重新排列节点，而"Ajax"（异步...
在Android开发中，可拖动窗口（Draggable Window）是一种用户界面组件，允许用户通过触摸手势自由移动窗口在屏幕上的位置。这样的功能常见于浮动小部件、弹出对话框或者自定义视图中，可以增强应用的交互性和用户...
在给定的“可拖动的GridView翻页控件”主题中，我们探讨的是一个特殊设计的GridView，它不仅具备基本的显示功能，还允许用户通过拖动来浏览更多的数据，并且具有分页功能。这种控件极大地提升了用户体验，尤其是在...
"自定义分页及gridview列可拖动"的主题着重于两个关键功能：一是实现分页功能，以便更好地管理和展示数据；二是让GridView的列宽可以自由拖动，以提高用户交互体验。 首先，让我们深入理解自定义分页。默认情况下，...
在拖动新闻区块的例子中，当用户改变区块顺序时，我们可以使用AJAX向服务器发送请求，更新新闻的排序信息，并在后台重新加载相应的内容。 实现这个功能，我们需要以下步骤： 1. **标记可拖动元素**：使用HTML5的`...
在构建高效的后台管理系统时，设计一个实用且灵活的界面至关重要。本系统采用了“实用的后台管理界面”，旨在提供一种高效、便捷的用户交互体验。以下将详细解释该系统的几个核心组成部分及其相关知识点。 首先，`...
《基于React拖动配置大屏的后台管理系统源码解析》 在现代Web开发领域，React作为一款由Facebook推出的JavaScript库，已经成为构建用户界面的主流工具。本篇文章将深入探讨一个基于React实现的拖动配置大屏后台管理...
总之，这个"Unity3d C#实现UGUI的界面可拖拽移动和选中置顶工程源码"提供了一个实用的模板，帮助开发者快速实现具有交互性的UI元素，增强用户在游戏或应用中的沉浸感。通过学习和理解这段代码，你可以进一步提升自己...
在iOS应用开发中，创建一个类似微信的可拖动浮动按钮是一个常见的需求，尤其是在实现聊天或社交应用时。这个项目 "ios-类似微信可拖动浮动按钮Swift版" 正是针对这一需求提供的一种解决方案。它基于Apple的Swift编程...
在网页开发中，实现鼠标拖动DIV元素并根据其移动位置动态加载后台JSON数据是一项常见的交互功能。这个功能可以用于创建可自定义布局的界面、拖放式编辑器或者地图等应用。以下是对这一技术的详细说明： 首先，我们...
本篇将详细介绍一个具有特殊功能的`GridView`——可拖动、改变列宽的`GridView`源码。 首先，让我们理解这个`GridView`的特性。`GridView`通常固定列宽，但在这个实现中，开发者通过自定义`GridView`（可能命名为`...
其次，关于可拖动改变列宽的功能，这需要一些JavaScript和CSS的技巧。我们可以利用jQuery库中的draggable和resizable插件，使得GridView的列头可以被拖动和调整大小。在HTML部分，为每个列头添加必要的class和id，以...
8. **多线程**：为了保证程序的响应性，截图操作可能会在后台线程中执行，防止因耗时操作阻塞用户界面。 9. **调试与测试**：在开发过程中，开发者需要对程序进行调试，确保其在不同环境下的稳定性和性能。这涉及到...