「popup」(2008/10/24 (金) 17:52:17) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
<HTML>
<HEAD>
<TITLE>Ajax RssReader With Skj Scripting</TITLE>
<META http-equiv=Content-Type content="text/html; charset=shift_jis">
<style type="text/css">
#DivPopUp{
position: absolute;
top : 300;
left : 250;
width : 300px;
height : 100px;
border : 1px solid black;
overflow-x: : hidden;
background-color: #ccccff;
}
#DivPopUpHeader{
border:1px solid black;
background-color:#aaaaaa;
text-align:right;
margin: 1px;
padding: 1px;
}
#DivPopUpHeaderX{
border:1px solid black;
width:1;
font-weight: bold;
cursor: default
}
</style>
</HEAD>
<Body onload="init()">
<Div Id="DivPopUp" >
<Div Id="DivPopUpHeader">
<Span Id="DivPopUpHeaderX" >×</Span>
</Div>
<Div Id="DivPopUpMsg" >PopUp Window</Div>
</Div>
<Script>
function DoId(id){
return document.getElementById(id);
}
var DivPopUpDx;
var DivPopUpDy;
var Dpu;
var Dpuh;
var DpuhX;
function init(){
DivPopUpDx = 0;
DivPopUpDy = 0;
Dpu = DoId('DivPopUp');
Dpuh = DoId('DivPopUpHeader');
DpuhX = DoId('DivPopUpHeaderX');
Dpu.style.left = Dpu.offsetLeft;
Dpu.style.top = Dpu.offsetTop;
DpuhX.onclick = DivPopUpHeaderX_Click;
Dpuh.onmousedown = DivPopUpHeader_MouseDown;
document.onmouseup = DivPopUpHeader_MouseUp;
function DivPopUpHeaderX_Click(){
Dpu.style.display = 'none';
return false;
}
function DivPopUpHeader_MouseDown(){
var e = window.event;
DivPopUpDx = e.x-Dpu.style.left.split('px').join('');
DivPopUpDy = e.y-Dpu.style.top.split('px').join('');
document.onmousemove = Document_MouseMove;
status = '(DivPopUpDx, DivPopUpDy) = ('+DivPopUpDx+', '+DivPopUpDy+')';
}
function Document_MouseMove(){
var e = window.event;
Dpu.style.left = (e.x-DivPopUpDx)+'px';//
Dpu.style.top = (e.y-DivPopUpDy)+'px';//
}
function DivPopUpHeader_MouseUp(){
document.onmousemove = function(){};
}
}
</Script>
</Body>
</HTML>
<HTML>
<HEAD>
<TITLE>Ajax RssReader With Skj Scripting</TITLE>
<META http-equiv=Content-Type content="text/html; charset=shift_jis">
<style type="text/css">
#DivPopUp{
position: absolute;
top : 300;
left : 250;
width : 300px;
height : 100px;
border : 1px solid black;
overflow-x: : hidden;
background-color: #ccccff;
}
#DivPopUpHeader{
border:1px solid black;
background-color:#aaaaaa;
text-align:right;
margin: 1px;
padding: 1px;
}
#DivPopUpClose{
border:1px solid black;
width:1;
font-weight: bold;
cursor: default
}
</style>
</HEAD>
<Body onload="init()">
<Div Id="DivPopUp" >
<Div Id="DivPopUpHeader">
<Span Id="DivPopUpClose" >×</Span>
</Div>
<Div Id="DivPopUpMsg" >PopUp Window</Div>
</Div>
<Script>
function DoId(id){
return document.getElementById(id);
}
function init(){
var op = new skj.lib.ui.OpDragDrop();
op.SetDragDrop( 'DivPopUp', 'DivPopUpHeader', 'DivPopUpClose' );
}
(function(){
function OpDragDrop(){
function SetDragDrop( IdDivAll, IdDivHeader, IdDivClose ){
var divAll = DoId( IdDivAll );
var divHeader = DoId( IdDivHeader ) || divAll;
var divClose = DoId( IdDivClose );
var ClickData = {};
var sAll = divAll.style;
var doc = document;
sAll.position = 'absolute';
sAll.left = divAll.offsetLeft;
sAll.top = divAll.offsetTop;
divHeader.onmousedown = function(){
var e = new DmEvent( arguments[0] || window.event );
ClickData.Dx = e.X - sAll.left.split('px').join('');
ClickData.Dy = e.Y - sAll.top .split('px').join('');
doc.onmousemove = function(){
var e = new DmEvent( arguments[0] || window.event );
sAll.left = ( e.X - ClickData.Dx )+'px';//
sAll.top = ( e.Y - ClickData.Dy )+'px';//
}
status = '(ClickData.Dx, ClickData.Dy) = ('+ClickData.Dx+', '+ClickData.Dy+')';
}
doc.onmouseup = function(){
doc.onmousemove = function(){};
}
if( divClose ){
divClose.onclick = function(){
sAll.display = 'none';
return false;
}
}
}
OpDragDrop.prototype.SetDragDrop = SetDragDrop;
}
function DmEvent(e){
this.e = e;
this.X = e.clientX || e.pageX
this.Y = e.clientY || e.pageY;
}
skj = {};
skj.lib = {};
skj.lib.ui = {};
skj.lib.ui.OpDragDrop = OpDragDrop;
})();
</Script>
</Body>
</HTML>
表示オプション
横に並べて表示：
変化行の前後のみ表示：
