<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>小蜡笔欢迎收藏</title>
<style>
body{padding:10px 0 0px 0;margin:0; font-size:12px; color:#666666; line-height:20px;}
p.text{padding:10px; margin:10px; background:#f5f5f5; border:1px solid #ccc;}
.title{font-family:Verdana, Arial; font-weight:bold; font-size:14px; padding:0 20px}
.demo{ width:500px; margin:30px; font-size:12px; padding:1px; border:1px solid #ccc;}
.demo2{background:#fff; width:700px; margin:20px;}
#tt{background:#efefef;width:300px;height:300px;top:0; left:0px!important; left:3px; border:1px solid #ccc;}
.odiv{border:1px solid #ccc; border-left:0;height:300px;}
</style>
<script language='javascript' src='jquery.js'></script>
<script language='javascript' src='jsplit.js'></script>
<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------*/
$(document).ready(function(){
$("#tt").jsplit();
})
</script>
</head>
<body>
<p class="text">$("#tt").jsplit();//默认调用，宽度在60px~400px <span class="fontRed">鼠标经过灰色区域显示分隔条，可拖动双击分隔条关闭，单击按钮关闭，兼容firefox,谷歌</span></p>
<p class="title">demo:</p>
<div class="demo2">
<div id="tt">test45</div>
<div class="odiv">test</div>
</div
</body>
</html>
Js: 另外添加jquery.js
/**
*
*/
/*--------------------------------------------------------------------------------------------------*/
$.fn.extend({
jsplit:function(j){
return this.each(function(){
j = j||{};
j.Btn = j.Btn||{};
j.Btn.oBg = j.Btn.oBg||{};
j.Btn.cBg = j.Btn.cBg||{};
var jun = { MaxW:"400px"
,MinW:"60px"
,FloatD:"left"
,IsClose:false
,BgUrl:""
,Bg:"#fff"
,Btn:{btn:true
,oBg:{Out:"#333",Hover:"orange"}
,cBg:{Out:"#333",Hover:"orange"}}
,Fn:function(){}}
j.MaxW = parseInt(j.MaxW)||parseInt(jun.MaxW);
j.MinW = parseInt(j.MinW)||parseInt(jun.MinW);
j.FloatD = j.FloatD||jun.FloatD;
j.IsClose = j.IsClose!=undefined?j.IsClose:jun.IsClose;
j.BgUrl = j.BgUrl||jun.BgUrl;
j.Bg = j.Bg||jun.Bg;
j.Btn.btn = j.Btn.btn!=undefined?j.Btn.btn:jun.Btn.btn;
j.Btn.oBg.Out = j.Btn.oBg.Out||jun.Btn.oBg.Out;
j.Btn.oBg.Hover = j.Btn.oBg.Hover||jun.Btn.oBg.Hover;
j.Btn.cBg.Out = j.Btn.cBg.Out||jun.Btn.cBg.Out;
j.Btn.cBg.Hover = j.Btn.cBg.Hover||jun.Btn.cBg.Hover;
j.Fn = j.Fn||jun.Fn;
var antiD = j.FloatD =="left" ? "right" : "left";
if(j.MinW>j.MaxW){
var amax=j.MaxW;
j.MaxW = j.MinW;
j.MinW = amax;
};
var _self = this;
var Close = false;
$(_self).css({ position:"relative",float:j.FloatD,overflow:"hidden",padding:"0px"});
$(_self).wrapInner("<div class='jsplit-c' style='top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%'></div>");
$(_self).children(".jsplit-c").append("<div class='jsplit-e' unselectable='on' style='background:#fff;height:100%;width:6px;top:0px;-moz-user-select:none;"+antiD+":0px;position:absolute;cursor:e-resize;overflow:hidden;z-index:10000;'><div class='jsplit-e-handle' unselectable='on' style='height:40px;width:100%;top:50%;margin-top:-20px;left:0;position:absolute;cursor:pointer;-moz-user-select:none;'></div></div>");
var dw = $(_self).width();
var jsplitc=$(_self).children(".jsplit-c");
var jsplite=jsplitc.children(".jsplit-e");
var jsplith=jsplite.children(".jsplit-e-handle");
if(j.Btn.btn==false){jsplith.css({display:"none"})};
if($.browser.msie){document.execCommand("BackgroundImageCache", false, true);}
if(dw>j.MaxW){$(_self).css({width:j.MaxW});}
if(dw<j.MinW){$(_self).css({width:j.MinW});}
jsplite.css({background:j.Bg,"background-image":j.BgUrl,opacity:0})
if(j.IsClose!=false){
jsplith.css({background:j.Btn.cBg.Out,"background-image":j.BgUrl})
_selfclose();
}else{
jsplith.css({background:j.Btn.oBg.Out,"background-image":j.BgUrl})
}
jsplith.hover(function(){
if(Close==false){
$(this).css({background:j.Btn.oBg.Hover,"background-image":j.BgUrl})}else{$(this).css({background:j.Btn.cBg.Hover,"background-image":j.BgUrl})}
},function(){
if(Close==false){
$(this).css({background:j.Btn.oBg.Out,"background-image":j.BgUrl})}else{$(this).css({background:j.Btn.cBg.Out,"background-image":j.BgUrl})}
})
$(_self).hover(function(){if(Close==false)jsplite.stop().animate({opacity:0.85},200)},function(){if(Close==false)jsplite.stop().animate({opacity:0},2000)})
jsplite.mousedown(function(e){
j['Fn'] && j['Fn'].call(_self);
var screenX = e.screenX, w = $(_self).width();
$(document).mousemove(function(e2){
curW = j.FloatD=="left" ? w + (e2.screenX - screenX) : w - (e2.screenX - screenX);
if(curW>=j.MaxW){curW=j.MaxW;};
if(curW<=j.MinW){curW=j.MinW;};
$(_self).css({width:curW});
dw = curW;
});
$(document).mouseup(function(){
$(document).unbind();
});
if(Close==true){
$(this).css({cursor:"e-resize",opacity:0.8});
$(_self).animate({width:dw},200);
Close=false;
};
return false;
});
jsplite.dblclick(function(){
if(Close==false){
_selfclose();
};
return false;
});
jsplith.click(function () {
if(Close==false){
_selfclose();
};
return false;
});
function _selfclose(){
jsplite.css({cursor:"pointer",opacity:1});
jsplith.css({background:j.Btn.cBg.Out,"background-image":j.BgUrl});
$(_self).animate({width:"6px"},400);
Close=true;
}
});
}
});$("#tt").jsplit();//默认调用，宽度在60px~400px 鼠标经过灰色区域显示分隔条，可拖动双击分隔条关闭，单击按钮关闭，兼容IE Firefox,谷歌
分享到：
相关推荐
综上所述，实现基于JSP页面的拖拽功能主要依赖于JavaScript和CSS，通过捕获和处理鼠标事件，更新元素的位置，以及可能的服务器通信。这个过程涉及到了前端开发的多个方面，包括DOM操作、事件处理、样式控制以及与...
动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html...
当你遇到“jsp页面加载时提示loading”的问题时，这通常意味着页面正在加载或有延迟加载的情况发生。这个问题可能由多种因素导致，下面我们将详细探讨这些可能的原因及其解决方案。 1. **页面内容过多**：如果JSP...
提升 JSP 页面响应速度的七大秘籍绝招 本文将介绍七大秘籍绝招，以提升 JSP 页面...通过这些秘籍绝招，可以有效地提升 JSP 页面响应速度，提高系统性能。但需要根据实际情况选择合适的秘籍绝招，以达到最佳的效果。
【标签】"jsp页面"提示我们这个系统是基于JSP技术构建的，这意味着开发者可以利用JSP的内置对象（如request、response、session、application等）、指令（如、等）以及EL（Expression Language）和JSTL（JavaServer ...
在IT领域，特别是Web开发中，使用JSP（JavaServer Pages）进行动态网页设计时，开发者经常需要实现在用户交互过程中弹出特定的页面或对话框来获取输入、展示信息或进行确认操作。本文将详细解析如何在JSP页面中通过...
在JSP页面中，我们可以通过创建一个iframe或者使用JavaScript来加载PDF文件的URL，让浏览器处理显示。 标题“JSP页面显示PDF，根据PDF路径在JSP页面显示PDF”意味着我们要依据PDF文件在服务器上的存储路径来生成...
通过熟练掌握JSP、CSS和JavaScript，你可以创造出各种独特的鼠标效果，提升网站的用户体验。 总结来说，JSP中的鼠标效果主要依赖于HTML、CSS和JavaScript的组合应用。通过理解并熟练运用这些技术，开发者可以实现...
该标签可以在当前页面内嵌入另一个JSP页面，同时传递参数。 #### 5. Cookie和Session 除了上述方式外，还可以利用Cookie和Session机制进行跨页面的数据传递。 **Cookie**： - 存储在客户端浏览器中，用于跟踪用户...
例如，我们可以将头部和底部信息分别保存为单独的文件，然后在每个页面中通过`<jsp:include>`引入，这样修改一处即可更新所有页面的相应部分。 4. **CSS布局**: CSS（Cascading Style Sheets）是控制网页外观的关键...
例如，在上面的代码中，我们可以看到jsp页面的基本结构，包括指令、脚本块、<jsp:forward>标签等。jsp页面用于处理用户输入的信息，并根据验证结果跳转到不同的页面。 5. 认证机制： 在jsp登录页面设计中，我们使用...
EL 是 JSP 2.0 引入的一种简化表达式语法，可以直接在 JSP 页面中进行简单的数据处理，包括字符串截取。EL 提供 `${}` 符号来执行表达式。 示例： ```jsp <jsp:useBean id="str" scope="request" class="java....
在Java Web开发中，JSP（JavaServer Pages）是一种...正确地实现和使用JSP页面缓存可以有效地降低服务器压力，提升用户体验。这个资源提供了一个基础的实现方案，对于理解JSP缓存工作原理和实践优化有着积极的意义。
任何jsp页面只要使用包含附件中的loading.jsp将自动拥有“页面正在加载的。。”提示信息，在页面加载完后将自动隐藏。 我为什么使用这个组件？ 1。交互性。 客户清楚知道，你的页面是在加载，需要等待，而不用...
JSP页面增加遮罩
返回这个URL给JSP页面，JSP页面中的`<audio>`标签就可以播放这个URL指向的音频。 **四、JSP与Servlet通信** 在JSP页面中，你可以使用JavaScript来控制音频的播放，通过发送AJAX请求到Servlet，Servlet处理请求后...
通过在JSP页面中嵌入SVG代码，可以直接呈现流程图。 2. **手写SVG代码** 直接在JSP页面中编写SVG标签，如`<svg>`, `<rect>`, `<circle>`, `<path>`等，可以构建出流程图的各个元素。例如，矩形代表步骤，线条表示...
在JSP页面中，可以使用脚本元素（scriptlets）来编写Java代码，这些代码会在服务器端运行，并可以决定页面内容的生成。 为了实现动态加载，我们可以使用jQuery库，它是一个强大的JavaScript库，提供了丰富的API来...
总的来说，这个“炫酷的登录jsp页面完整代码”项目是一个实践JSP、CSS、JavaScript和LayUI的典型示例，对于初学者来说，可以借此了解Web开发的基本流程和相关技术的应用。同时，对于有经验的开发者，这是一个改造和...