body {
margin:0px;
padding:0px;
font-size:12px;
text-align:center;
}
body > div {
text-align:center;
margin-right:auto;
margin-left:auto;
}
.content {
width:900px;
}
.content .left {
float:left;
width:20%;
border:1px solid #FF0000;
margin:3px;
}
.content .center {
float:left;
border:1px solid #FF0000;
margin:3px;
width:57%
}
.content .right {
float:right;
width:20%;
border:1px solid #FF0000;
margin:3px
}
.mo {
height:auto;
border:1px solid #CCC;
margin:3px;
background:#FFF
}
.mo h1 {
background:#ECF9FF;
height:18px;
padding:3px;
cursor:move
}
.mo .nr {
height:80px;
border:1px solid #F3F3F3;
margin:2px
}
h1 {
margin:0px;
padding:0px;
text-align:left;
font-size:12px
}
var dragobj={}
window.onerror=function(){return false}
function on_ini(){
String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
var agent=https://www.wendangku.net/doc/0c2642186.html,erAgent
window.isOpr=agent.inc("Opera")
window.isIE=agent.inc("IE")&&!isOpr
window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
if(isMoz){
Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
}
basic_ini()
}
function basic_ini(){
window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj} window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.onload=function(){
on_ini()
var o=document.getElementsByTagName("h1")
for(var i=0;i o[i].onmousedown=function(e){ if(dragobj.o!=null) return false e=e||event dragobj.o=this.parentNode dragobj.xy=getxy(dragobj.o) dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0])) dragobj.o.style.width=dragobj.xy[2]+"px" dragobj.o.style.height=dragobj.xy[3]+"px" dragobj.o.style.left=(e.x-dragobj.xx[0])+"px" dragobj.o.style.top=(e.y-dragobj.xx[1])+"px" dragobj.o.style.position="absolute" var om=document.createElement("div") dragobj.otemp=om om.style.width=dragobj.xy[2]+"px" om.style.height=dragobj.xy[3]+"px" dragobj.o.parentNode.insertBefore(om,dragobj.o) return false } } } document.onselectstart=function(){return false} window.onfocus=function(){document.onmouseup()} window.onblur=function(){document.onmouseup()} document.onmouseup=function(){ if(dragobj.o!=null){ dragobj.o.style.width="auto" dragobj.o.style.height="auto" dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp) dragobj.o.style.position="" oDel(dragobj.otemp) dragobj={} } } document.onmousemove=function(e){ e=e||event if(dragobj.o!=null){ dragobj.o.style.left=(e.x-dragobj.xx[0])+"px" dragobj.o.style.top=(e.y-dragobj.xx[1])+"px" createtmpl(e) } } function getxy(e){ var a=new Array() var t=e.offsetTop; var l=e.offsetLeft; var w=e.offsetWidth; var h=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } a[0]=t;a[1]=l;a[2]=w;a[3]=h return a; } function inner(o,e){ var a=getxy(o) if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){ if(e.y<(a[0]+a[3]/2)) return 1; else return 2; }else return 0; } function createtmpl(e){ for(var i=0;i<12;i++){ if($("m"+i)==dragobj.o) continue var b=inner($("m"+i),e) if(b==0) continue dragobj.otemp.style.width=$("m"+i).offsetWidth if(b==1){ $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i)) }else{ if($("m"+i).nextSibling==null){ $("m"+i).parentNode.appendChild(dragobj.otemp) }else{ $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling) } } return } for(var j=0;j<4;j++){ if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV")) continue var op=getxy($("dom"+j)) if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){ $("dom"+j).appendChild(dragobj.otemp) dragobj.otemp.style.width=(op[2]-10)+"px" } } }
2. 3. 初始化 jsPlumb只有等到DOM初始化完成之后才能使用,因此我们在以下代码中调用jsPlumb方法 [javascript]view plaincopy
javascript+css实现自定义网页右键菜单 熟悉window操作系统的用户都知道右键菜单(上下文菜单)简洁明了、操作简便,然而浏览器自带的右键菜单的功能却都是基于网页整页操作,例如“添加到收藏夹”、“查看源文件”、“打印”,很少涉及到网页内容的操作,因此它的实用性并不大。实际上用Javascript+Css可以实现效果相当不错的网页右键菜单,截图如下: 图示:网页右键菜单效果图 特点:样式替换+多级菜单+阴影效果
网页右键菜单程序流程图如下: 本程序由一个js文件和aspx文件组成,没有后台CS代码。 js代码如下: 刷新按钮二 6、回首页按钮 7、弹出警告框 8、状态栏信息 9、背景色变换